From 63add7dd8faa54f07449ff0bdf40d22b103ae068 Mon Sep 17 00:00:00 2001 From: Deepak Sangle Date: Sat, 25 Nov 2023 20:03:05 +0530 Subject: [PATCH] changed login ui --- web-client/package-lock.json | 15 +++++ web-client/src/components/input.css | 47 +++++++++++--- web-client/src/screens/Login.js | 88 ++++++++++++++++++++------ web-client/src/screens/Registration.js | 78 +++++++++++++++++++---- web-client/src/screens/home.js | 17 +++-- 5 files changed, 197 insertions(+), 48 deletions(-) diff --git a/web-client/package-lock.json b/web-client/package-lock.json index 3e8b144..5ec6180 100644 --- a/web-client/package-lock.json +++ b/web-client/package-lock.json @@ -13674,6 +13674,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-otp-input": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-otp-input/-/react-otp-input-3.1.0.tgz", + "integrity": "sha512-SNDwqPemy5DYLVQJrOEfZXvJePcDIDmjkln0QyHdje8hRcB1TnrqthxHs0M+E9MWQAyxM84R5yPe2wYjqnH4UA==", + "peerDependencies": { + "react": ">=16.8.6 || ^17.0.0 || ^18.0.0", + "react-dom": ">=16.8.6 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -26100,6 +26109,12 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-otp-input": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-otp-input/-/react-otp-input-3.1.0.tgz", + "integrity": "sha512-SNDwqPemy5DYLVQJrOEfZXvJePcDIDmjkln0QyHdje8hRcB1TnrqthxHs0M+E9MWQAyxM84R5yPe2wYjqnH4UA==", + "requires": {} + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/web-client/src/components/input.css b/web-client/src/components/input.css index af2736a..e12b919 100644 --- a/web-client/src/components/input.css +++ b/web-client/src/components/input.css @@ -9,40 +9,59 @@ background-image: url('../images/bg.jpg'); background-repeat: no-repeat; background-position: center; - border-radius: 30px; + border-radius: 10px; background-size: cover; /* border: 2px solid black; */ } +@media only screen and (max-width : 450px){ + #nameScreen{ + height: 120vh; + } +} #name{ + font-size: 4rem; margin: 30px; - font-size: 30px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } #description{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; margin: 15px; } +.passcode-box{ + width: 70px !important; +} #your-name{ font-family: Georgia, 'Times New Roman', Times, serif; margin: 30px 0px 0px 0px; } +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + #input-name{ margin: 20px 20px 5px 20px; padding: 10px; - width: 50%; - min-width: 300px; - border-radius: 100px; + font-family: 'Segoe UI', Tahoma; + width: 400px; + max-width: 70vw; + border-radius: 5px; border-width: 0px; outline: none; border: 2px solid black; - padding-left: 20px; + text-align: center; + font-size: 20px; box-sizing: border-box; } -#input-name:focus{ - border : 2px solid grey; +.submit:hover{ + background-color: #2d2d2d; + color: white; } -#submit-div{ - margin: 10px; +.submit{ + cursor: pointer; + text-align: center; } .availability{ font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; @@ -50,4 +69,12 @@ } #isnotavaliable{ color : red; +} +#want-to{ + font-family: Georgia, 'Times New Roman', Times, serif; + text-decoration: none; + color: #2d2d2d; +} +#want-to a { + font-weight: bold; } \ No newline at end of file diff --git a/web-client/src/screens/Login.js b/web-client/src/screens/Login.js index e0c8832..885cbf8 100644 --- a/web-client/src/screens/Login.js +++ b/web-client/src/screens/Login.js @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import '../components/input.css' import { useNavigate } from "react-router-dom"; import axios from 'axios'; +import { Link } from "react-router-dom"; const Login = () => { @@ -10,17 +11,21 @@ const Login = () => { const {BASE_URI} = require('../constant'); const [name, setName] = useState(''); - const [passcode, setPasscode] = useState(''); + const [passcode, setPasscode] = useState(['','','','']); const login = async () => { - const res = await axios.post(`${BASE_URI}/login`, {name, password : passcode}); - const data = await res.data; - console.log(data); - if(data.success === true){ - navigate('/', {state : data.data}); + try{ + const res = await axios.post(`${BASE_URI}/login`, {name, password : passcode.join('')}); + const data = await res.data; + if(data.success === true){ + navigate('/', {state : data.data}); + } + else{ + alert(data.message); + } } - else{ - alert(data.message); + catch(e){ + alert(e.response.data.message); } document.getElementById('form').reset(); } @@ -31,19 +36,64 @@ const Login = () => { login(); } + const setCorrectPasscode = (e, i) => { + var digit; + if(e.target.value !== '') + digit = parseInt(e.target.value.trim()); + else + digit = ''; + if(digit !== '' && (digit > 9 || digit < 0)) return; + if(digit !== '' && e.target.nextElementSibling) { + e.target.nextElementSibling.focus(); + } + const new_passcode = [...passcode]; + new_passcode[i] = digit; + setPasscode(new_passcode); + } + + const onPressedKey = (e) => { + if(["e", "E", "+", "-"].includes(e.key)) { + e.preventDefault(); + return; + } + if(e.key === 'Backspace' && e.target.value === '') { + if(e.target.previousElementSibling) { + e.target.previousElementSibling.focus(); + } + } + } + return (
-
Dear Diary
-
-

Login to your account

- setName(e.target.value.trim())} placeholder="Enter Name" /> - setPasscode(e.target.value.trim())} placeholder="Enter Passcode" /> -
-
- -
-
-
+
Dear Diary
+
+

Login to your account

+ setName(e.target.value.trim())} placeholder="Enter Username" /> +
+

Enter Password

+ {[0,1,2,3].map((i)=> { + return( + onPressedKey(e)} + type="number" + onChange={(e) => setCorrectPasscode(e, i)} + /> + ) + })} + {/* setPasscode(e.target.value.trim())} placeholder="Enter Passcode" /> */} +
+ +
+
+
+ Want to Register? Click Here +
+
+ ); } diff --git a/web-client/src/screens/Registration.js b/web-client/src/screens/Registration.js index 252d764..629ebc3 100644 --- a/web-client/src/screens/Registration.js +++ b/web-client/src/screens/Registration.js @@ -1,9 +1,9 @@ import React, { useEffect, useState } from "react"; import '../components/input.css' import axios from 'axios'; -import { useNavigate } from "react-router-dom"; +import { useNavigate, Link } from "react-router-dom"; -const Registration = ({setIsNameExists}) => { +const Registration = () => { const navigate = useNavigate(); @@ -16,13 +16,28 @@ const Registration = ({setIsNameExists}) => { const [cpasscode, setCpasscode] = useState(''); const saveName = async (name) => { - const res = await axios.post(`${BASE_URI}/register`, {name, password : passcode, cpassword : cpasscode}); - const data = await res.data; - if(data.success === true){ - navigate('/login'); + try{ + const password = parseInt(passcode); + const cpassword = parseInt(cpasscode); + if(password !== cpassword){ + alert("Passwords should be matched"); + return ; + } + if(password < 1000 || cpassword < 1000) { + alert("You have to make your password of exactly 4 digit long"); + return ; + } + const res = await axios.post(`${BASE_URI}/register`, {name, password, cpassword}); + const data = await res.data; + if(data.success === true){ + navigate('/login'); + } + else{ + alert(data.message); + } } - else{ - alert(data.message); + catch(e){ + alert(e.response.data.message); } document.getElementById('form').reset(); } @@ -58,20 +73,57 @@ const Registration = ({setIsNameExists}) => { else if(name!=="" && element2!=null) element2.style.opacity = "1"; }) + const setPassword = (e) => { + const val = e.target.value.trim(); + if(val > 9999) return; + setPasscode(val); + } + + const setCPassword = (e) => { + const val = e.target.value.trim(); + if(val > 9999) return; + setCpasscode(val); + } + return (
Dear Diary

Register your account

- setName(e.target.value.trim())} placeholder="Enter Name" /> - setPasscode(e.target.value.trim())} placeholder="Enter Passcode" /> - setCpasscode(e.target.value.trim())} placeholder="Confirm Passcode" /> + setName(e.target.value.trim())} + placeholder="Enter Name" + /> +
+ ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()} + type="number" + value={passcode} + onChange={setPassword} + placeholder="Enter Passcode" + /> +
+ ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()} + value={cpasscode} + onChange={setCPassword} + placeholder="Confirm Passcode" + /> {!isAvailable &&
{name} is available
} {isAvailable &&
{name} is not available
} -
- + +
+
+
+ Want to Login? Click Here
+
); diff --git a/web-client/src/screens/home.js b/web-client/src/screens/home.js index 31ae207..447928d 100644 --- a/web-client/src/screens/home.js +++ b/web-client/src/screens/home.js @@ -120,13 +120,18 @@ const HomePage = ({name}) => { } else { setLoading(true); - const res = await axios.post(`${BASE_URI}/add-event`,{body}); - const data = await res.data; - if(!data.success === true){ - alert(data.message); + try{ + const res = await axios.post(`${BASE_URI}/add-event`,{body}); + const data = await res.data; + if(!data.success === true){ + alert(data.message); + } + else{ + events.unshift(data.data); + } } - else{ - events.unshift(data.data); + catch(e){ + alert(e.response.data.message); } setLoading(false); }