add error handling for user login and sign up and css animations

Author: Aishwarya Nair

Frontend/src/Components/LoginSignUp/Login.jsx

@@ -9,12 +9,32 @@ import user_icon from "../Assets/user.png";
 import {loginUser} from "../../User/UserServiceAPI";
 import {resetUserPasswordUsingFirebase} from "../../Authentication/UserAuthenticationController";
 
-export const Login = ({setAction}) => {
+const MISSING_FIELD_ERROR_MESSAGE = "Please fill all fields!";
+
+export const Login = ({setAction, setError}) => {
 	const navigate = useNavigate();
 
 	const [userEmail, setUserEmail] = useState("");
 	const [userPassword, setUserPassword] = useState("");
 
+	const isEmpty = (str) => {
+		return str === "";
+	};
+
+	const handleSubmit = async () => {
+		if (isEmpty(userEmail) || isEmpty(userPassword)) {
+			setError(MISSING_FIELD_ERROR_MESSAGE);
+		} else {
+			const result = await loginUser(userEmail, userPassword);
+			if (result) {
+				navigate("/landing");
+				setError("");
+			} else {
+				setError("Invalid credentials. Please try again.");
+			}
+		}
+	};
+
 	return (
 		<div className="login-container">
 			<div className="inputs">
@@ -46,30 +66,32 @@ export const Login = ({setAction}) => {
 				</div>
 			</div>
 			<div className="forgot-password">
-				{" "}
-				Forgot Password?{" "}
+				Forgot Password?
 				<span onClick={() => resetUserPasswordUsingFirebase(userEmail)}>
-					{" "}
 					Click Here.
 				</span>
 			</div>
 			<div className="submit-container">
 				<div
 					className="submit"
-					onClick={async () => {
-						const result = await loginUser(userEmail, userPassword);
-						if (result) {
-							navigate("/landing");
-						}
+					onClick={(e) => {
+						handleSubmit();
 					}}
 				>
 					Log In
 				</div>
 			</div>
 			<div className="signup-nav">
-				{" "}
-				Don't have an account?{" "}
-				<span onClick={() => setAction("Sign Up")}> Sign Up.</span>
+				Don't have an account?
+				<span
+					onClick={() => {
+						setError("");
+						setAction("Sign Up");
+					}}
+				>
+					{" "}
+					Sign Up.
+				</span>
 			</div>
 		</div>
 	);

Frontend/src/Components/LoginSignUp/LoginSignUp.css

@@ -36,7 +36,7 @@
 }
 
 .inputs {
-	margin-top: 55px;
+	/* margin-top: 55px; */
 	display: flex;
 	flex-direction: column;
 	gap: 25px;
@@ -74,13 +74,19 @@
 	/* margin-top: 27px; */
 	color: #797979;
 	font-size: 18px;
+	display: flex;
+	gap: 5px;
 }
 
 .forgot-password span {
 	color: #52cc65;
 	cursor: pointer;
 }
 
+.forgot-password span:hover {
+	color: #4cbd5d;
+}
+
 .submit-container {
 	display: flex;
 	gap: 30px;
@@ -101,6 +107,11 @@
 	cursor: pointer;
 }
 
+.submit:hover {
+	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+	background: #4cbd5d;
+}
+
 .gray {
 	background: #e9e9e9;
 	color: #676767;
@@ -121,9 +132,23 @@
 	cursor: pointer;
 }
 
+.signup-nav span:hover,
+.login-nav span:hover {
+	color: #0d489b;
+	cursor: pointer;
+}
+
 .login-container,
 .signup-container {
+	margin-top: 30px;
 	display: flex;
 	flex-direction: column;
 	gap: 20px;
 }
+
+.login-signup-error {
+	margin-top: 30px;
+	color: red;
+	padding-left: 95px;
+	font-size: 18px;
+}

Frontend/src/Components/LoginSignUp/LoginSignUp.jsx

@@ -1,25 +1,27 @@
-import React from 'react'
-import './LoginSignUp.css'
-import {useState} from 'react'
-import { useNavigate } from "react-router-dom";
+import React from "react";
+import "./LoginSignUp.css";
+import {useState} from "react";
+import {useNavigate} from "react-router-dom";
 
-import { Login } from './Login';
-import { SignUp } from './SignUp';
+import {Login} from "./Login";
+import {SignUp} from "./SignUp";
 
 export const LoginSignUp = () => {
-    
-    const [action, setAction] = useState("Log In");
-
-  return (
-    <div className="container-loginsignup">
-        <div className="header">
-            <div className="text"> {action} </div>
-            <div className="underline"></div>
-        </div>
-        {action === "Log In"? <Login setAction={setAction}/>: <SignUp setAction={setAction}/>}
-        
-    </div>
-  )
-}
-
+	const [action, setAction] = useState("Log In");
+	const [error, setError] = useState("");
 
+	return (
+		<div className="container-loginsignup">
+			<div className="header">
+				<div className="text"> {action} </div>
+				<div className="underline"></div>
+			</div>
+			<div className="login-signup-error">{error}</div>
+			{action === "Log In" ? (
+				<Login setAction={setAction} setError={setError} />
+			) : (
+				<SignUp setAction={setAction} setError={setError} />
+			)}
+		</div>
+	);
+};

Frontend/src/Components/LoginSignUp/SignUp.jsx

@@ -8,14 +8,41 @@ import user_icon from "../Assets/user.png";
 
 import {registerUser} from "../../User/UserServiceAPI";
 
-export const SignUp = ({setAction}) => {
+const MISSING_FIELD_ERROR_MESSAGE = "Please fill all fields!";
+
+export const SignUp = ({setAction, setError}) => {
 	const navigate = useNavigate();
 
 	const [userEmail, setUserEmail] = useState("");
 	const [userPassword, setUserPassword] = useState("");
 	const [userName, setUserName] = useState("");
 	const [preferredLang, setPreferredLang] = useState("");
 
+	const isEmpty = (str) => {
+		return str === "";
+	};
+
+	const handleSubmit = async () => {
+		if (isEmpty(userEmail) || isEmpty(userPassword) || isEmpty(userName)) {
+			setError(MISSING_FIELD_ERROR_MESSAGE);
+		} else {
+			const result = await registerUser(
+				userName,
+				userEmail,
+				userPassword,
+				"GitHub ID Placeholder",
+				preferredLang
+			);
+
+			if (result.success) {
+				navigate("/landing");
+			} else {
+				console.log(result);
+				setError(result.message);
+			}
+		}
+	};
+
 	return (
 		<div className="signup-container">
 			<div className="inputs">
@@ -70,27 +97,24 @@ export const SignUp = ({setAction}) => {
 			<div className="submit-container">
 				<div
 					className="submit"
-					onClick={async () => {
-						const result = await registerUser(
-							userName,
-							userEmail,
-							userPassword,
-							"GitHub ID Placeholder",
-							preferredLang
-						);
-
-						if (result) {
-							navigate("/landing");
-						}
+					onClick={(e) => {
+						handleSubmit();
 					}}
 				>
 					Sign Up
 				</div>
 			</div>
 			<div className="login-nav">
-				{" "}
-				Already have an account?{" "}
-				<span onClick={() => setAction("Log In")}> Log In.</span>
+				Already have an account?
+				<span
+					onClick={() => {
+						setError("");
+						setAction("Log In");
+					}}
+				>
+					{" "}
+					Log In.
+				</span>
 			</div>
 		</div>
 	);