changed login ui

Deepak-Sangle · Nov 25, 2023 · 63add7d · 63add7d
1 parent 5e82728
commit 63add7d
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 48 deletions.
diff --git a/web-client/package-lock.json b/web-client/package-lock.json
diff --git a/web-client/src/components/input.css b/web-client/src/components/input.css
@@ -9,45 +9,72 @@
     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;
     letter-spacing: 0.5px;
 }
 #isnotavaliable{
     color : red;
+}
+#want-to{
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    text-decoration: none;
+    color: #2d2d2d;
+}
+#want-to a {
+    font-weight: bold;
 }
diff --git 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 (
     <div id="nameScreen">
-    <div id="name">Dear Diary</div>
-    <form id="form" method="POST" onSubmit={validateSubmit}>
-        <h3 id="your-name">Login to your account</h3>
-        <input id="input-name" value={name} onChange={(e)=> setName(e.target.value.trim())} placeholder="Enter Name" />
-        <input id="input-name" type="number" value={passcode} onChange={(e)=> setPasscode(e.target.value.trim())} placeholder="Enter Passcode" />
-        <br />
-        <div id="submit-div">
-            <button id="submit-btn" type="submit">Submit</button>
-        </div>
-    </form>
-  </div>
+      <div id="name">Dear Diary</div>
+      <form id="form" method="POST" onSubmit={validateSubmit}>
+          <h3 id="your-name">Login to your account</h3>
+          <input id="input-name" value={name} onChange={(e)=> setName(e.target.value.trim())} placeholder="Enter Username" />
+          <br />
+          <h3 id="your-name">Enter Password</h3>
+          {[0,1,2,3].map((i)=> {
+            return(
+              <input 
+                key={i} 
+                id="input-name" 
+                className="passcode-box" 
+                value={passcode[i]} 
+                onKeyDown={(e) => onPressedKey(e)} 
+                type="number" 
+                onChange={(e) => setCorrectPasscode(e, i)} 
+              />
+            )
+          })}
+          {/* <input id="input-name" type="number" value={passcode} onChange={(e)=> setPasscode(e.target.value.trim())} placeholder="Enter Passcode" /> */}
+          <div id="submit-div">
+              <button id="input-name" className="submit" type="submit">Enter</button>
+          </div>
+          <br />
+          <div id="want-to">
+            Want to Register? <Link id="want-to" to="/register">Click Here</Link>
+          </div>
+      </form>
+    </div>
   );
 
 }

diff --git 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 (
         <div id="nameScreen">
             <div id="name">Dear Diary</div>
             <form id="form" method="POST" onSubmit={validateSubmit}>
                 <h3 id="your-name">Register your account</h3>
-                <input id="input-name" value={name} onChange={(e)=> setName(e.target.value.trim())} placeholder="Enter Name" />
-                <input id="input-name" type="number" value={passcode} onChange={(e)=> setPasscode(e.target.value.trim())} placeholder="Enter Passcode" />
-                <input id="input-name" type="number" value={cpasscode} onChange={(e)=> setCpasscode(e.target.value.trim())} placeholder="Confirm Passcode" />
+                <input 
+                    id="input-name" 
+                    value={name} 
+                    onChange={(e)=> setName(e.target.value.trim())} 
+                    placeholder="Enter Name" 
+                />
+                <br/>
+                <input 
+                    id="input-name" 
+                    onKeyDown={(evt) => ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()} 
+                    type="number" 
+                    value={passcode} 
+                    onChange={setPassword} 
+                    placeholder="Enter Passcode" 
+                />
+                <br/>
+                <input 
+                    id="input-name" 
+                    type="number" 
+                    onKeyDown={(evt) => ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()} 
+                    value={cpasscode} 
+                    onChange={setCPassword} 
+                    placeholder="Confirm Passcode"
+                />
                 {!isAvailable && <div className="availability" id="isavaliable">{name} is available</div>}
                 {isAvailable && <div className="availability" id="isnotavaliable">{name} is not available</div>}
-                <br />
                 <div id="submit-div">
-                    <button id="submit-btn" type="submit">Submit</button>
+                    <button id="input-name" className="submit" type="submit">Register</button>
+                </div>
+                <br />
+                <div id="want-to">
+                    Want to Login? <Link id="want-to" to="/login">Click Here</Link>
                 </div>
+
             </form>
         </div>
     );

diff --git 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);
         }