diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index b359ecd..8f62b85 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -1,18 +1,29 @@ -import React, { useState, useEffect } from "react"; -import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"; -import { Link, useNavigate } from "react-router-dom"; +import React, { + useState, + useEffect, +} from "react"; +import { + AiOutlineEye, + AiOutlineEyeInvisible, +} from "react-icons/ai"; +import { + Link, + useNavigate, +} from "react-router-dom"; import { toast } from "react-hot-toast"; import axios from "axios"; -import logo from "../assets/logo2.png" - +import logo from "../assets/logo2.png"; +import Loader from "../components/Loader/Loader"; function Login() { const [formData, setFormData] = useState({ email: "", - accountType : "", + accountType: "", password: "", }); - const [showPassword, setShowPassword] = useState(false); + const [showPassword, setShowPassword] = + useState(false); + const [loading, setLoading] = useState(false); const navigate = useNavigate(); function changeHandler(event) { @@ -22,127 +33,169 @@ function Login() { })); } - function submitHandler(event) { - - event.preventDefault(); - - - if(formData.accountType === "User"){ + if (formData.accountType === "User") { + //Loader will show till the api fetching is done as show as promise is resolved the loader will be not shown + setLoading(true); const apiUrl = `${process.env.REACT_APP_BASE_URL}/studentLogin`; - // const apiUrl = `http://localhost:4000/api/v1/studentLogin`; - - axios.post(apiUrl , formData) - .then((response)=>{ - toast.success("User Logged in "); - navigate("/home"); - }) - .catch((error)=>{ - toast.error("Failed to login") - }); - } - - else{ - + //const apiUrl = `http://localhost:4000/api/v1/studentLogin`; + + axios + .post(apiUrl, formData) + .then((response) => { + setLoading(false); + toast.success("User Logged in "); + navigate("/home"); + }) + .catch((error) => { + //Loader will show till the api fetching is done as show as promise is resolved the loader will be not shown + setLoading(false); + toast.error("Failed to login"); + }); + } else { + //Loader will show till the api fetching is done as show as promise is resolved the loader will be not shown const apiUrl = `${process.env.REACT_APP_BASE_URL}/canteenLogin`; - - axios.post(apiUrl , formData) - .then((response)=>{ - toast.success("User Logged in "); - navigate(`/section/${response.data.cantId}`); - }) - .catch((error)=>{ - toast.error("Failed to login") - }); + setLoading(true); + + axios + .post(apiUrl, formData) + .then((response) => { + setLoading(false); + toast.success("User Logged in "); + navigate( + `/section/${response.data.cantId}` + ); + }) + .catch((error) => { + //Loader will show till the api fetching is done as show as promise is resolved the loader will be not shown + setLoading(false); + toast.error("Failed to login"); + }); } } return ( -
- -
- -
- logo -

Connecting You to Your College Canteens

-
- -
-
-
-
- -
- -
- -
- -

Hello Again!

-

Welcome Back

- -
- + <> + {loading ? ( + + ) : ( +
+
+
+ logo +

+ Connecting You to Your College + Canteens +

+
+ +
+
+
+
-
- -
- -
- - setShowPassword((prev) => !prev)} - > - {showPassword ? : } - +
+ +

+ Hello Again! +

+

+ Welcome Back +

+ +
+ +
+ +
+ +
+ +
+ + + setShowPassword( + (prev) => !prev + ) + }> + {showPassword ? ( + + ) : ( + + )} + +
+ + + + + + Don't have an account? Sign Up + + +
- - - - - Don't have an account? Sign Up - - - - -
- -
+
+ )} + ); } export default Login; - diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx index ac1f61b..bb66e45 100644 --- a/src/pages/Signup.jsx +++ b/src/pages/Signup.jsx @@ -1,12 +1,19 @@ import React, { useState } from "react"; -import { Link, useNavigate } from "react-router-dom"; -import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"; +import { + Link, + useNavigate, +} from "react-router-dom"; +import { + AiOutlineEye, + AiOutlineEyeInvisible, +} from "react-icons/ai"; import { toast } from "react-hot-toast"; import axios from "axios"; -import logo from "../assets/logo2.png" -import Icon from 'react-icons-kit'; -import { arrows_circle_check } from 'react-icons-kit/linea/arrows_circle_check' -import { arrows_exclamation } from 'react-icons-kit/linea/arrows_exclamation' +import logo from "../assets/logo2.png"; +import Icon from "react-icons-kit"; +import { arrows_circle_check } from "react-icons-kit/linea/arrows_circle_check"; +import { arrows_exclamation } from "react-icons-kit/linea/arrows_exclamation"; +import Loader from "../components/Loader/Loader"; function Signup() { const [formData, setFormData] = useState({ @@ -16,55 +23,57 @@ function Signup() { accountType: "", password: "", }); - const [showPassword, setShowPassword] = useState(false); - const [lowerValidated, setLowerValidated] = useState(false); - const [upperValidated, setUpperValidated] = useState(false); - const [numberValidated, setNumberValidated] = useState(false); - const [specialValidated, setSpecialValidated] = useState(false); - const [lengthValidated, setLengthValidated] = useState(false); - + const [loading, setLoading] = useState(false); + const [showPassword, setShowPassword] = + useState(false); + const [lowerValidated, setLowerValidated] = + useState(false); + const [upperValidated, setUpperValidated] = + useState(false); + const [numberValidated, setNumberValidated] = + useState(false); + const [specialValidated, setSpecialValidated] = + useState(false); + const [lengthValidated, setLengthValidated] = + useState(false); const navigate = useNavigate(); function PasswordChecker(event) { - const lower = new RegExp('(?=.*[a-z])'); - const upper = new RegExp('(?=.*[A-Z])'); - const number = new RegExp('(?=.*[0-9])'); - const special = new RegExp('(?=.*[!@#\$%\^&\*])'); - const length = new RegExp('(?=.{8,})') + const lower = new RegExp("(?=.*[a-z])"); + const upper = new RegExp("(?=.*[A-Z])"); + const number = new RegExp("(?=.*[0-9])"); + const special = new RegExp( + "(?=.*[!@#$%^&*])" + ); + const length = new RegExp("(?=.{8,})"); const value = event.target.value; if (lower.test(value)) { setLowerValidated(true); - } - else { + } else { setLowerValidated(false); } if (upper.test(value)) { setUpperValidated(true); - } - else { + } else { setUpperValidated(false); } if (number.test(value)) { setNumberValidated(true); - } - else { + } else { setNumberValidated(false); } if (special.test(value)) { setSpecialValidated(true); - } - else { + } else { setSpecialValidated(false); } if (length.test(value)) { setLengthValidated(true); - } - else { + } else { setLengthValidated(false); } - setFormData((prevData) => ({ ...prevData, [event.target.name]: event.target.value, @@ -80,50 +89,90 @@ function Signup() { function submitHandler(event) { event.preventDefault(); - console.log("ENV FILE",process.env.REACT_APP_BASE_URL); + console.log( + "ENV FILE", + process.env.REACT_APP_BASE_URL + ); - if (lowerValidated && upperValidated && numberValidated && specialValidated && lengthValidated) { + if ( + lowerValidated && + upperValidated && + numberValidated && + specialValidated && + lengthValidated + ) { if (formData.accountType === "User") { - // const apiUrl = `${process.env.REACT_APP_BASE_URL}/studentSignup`; - const apiUrl = `http://localhost:4000/api/v1/studentSignup`; - + //Loader will show till the api fetching is done as show as promise is resolved the loader will be not shown + setLoading(true); + const apiUrl = `${process.env.REACT_APP_BASE_URL}/studentSignup`; + //const apiUrl = `http://localhost:4000/api/v1/studentSignup`; + axios .post(apiUrl, formData) .then((response) => { - toast.success("Account Created succesfully"); + setLoading(false); + toast.success( + "Account Created succesfully" + ); navigate("/home"); }) .catch((error) => { - console.log(error) - toast.error("Failed To create account"); + //If promise is not resolved the loader will be not shown + setLoading(false); + toast.error( + "Failed To create account" + ); }); } else { + //Loader will show till the api fetching is done as show as promise is resolved the loader will be not shown + setLoading(true); const apiUrl = `${process.env.REACT_APP_BASE_URL}/canteenSignup`; - axios .post(apiUrl, formData) .then((response) => { - toast.success("Account Created succesfully"); - navigate(`/section/${response.data.cantId}`); + setLoading(false); + toast.success( + "Account Created succesfully" + ); + navigate( + `/section/${response.data.cantId}` + ); }) .catch((error) => { - console.log("Errorrr:->",error); - toast.error("Failed To create account"); + //If promise is not resolved the loader will be not shown + setLoading(false); + console.log("Errorrr:->", error); + toast.error( + "Failed To create account" + ); }); } } else { - toast.error("Password must pass all the criteria"); + toast.error( + "Password must pass all the criteria" + ); } } return ( -
+ <> + { + loading ? ( + + ) : ( + <> +
- logo + logo

- Connecting You to Your College Canteens + Connecting You to Your College + Canteens

@@ -136,8 +185,7 @@ function Signup() {
+ onSubmit={submitHandler}>

Hello There!

@@ -187,13 +235,18 @@ function Signup() { name="accountType" onChange={changeHandler} value={formData.accountType} - className="mt-1 p-2 w-full border rounded-2xl" - > - - +
@@ -201,7 +254,9 @@ function Signup() { setShowPassword((prev) => !prev)} - > + onClick={() => + setShowPassword((prev) => !prev) + }> {showPassword ? ( ) : ( - + )}
- Already have an account? Login + + Already have an account? Login + {/* @@ -236,96 +295,145 @@ function Signup() { */} -
-
+
+
{lowerValidated ? ( - - + + ) : ( - - + + )} At least one lowercase letter
-
+
{upperValidated ? ( - - + + ) : ( - - + + )} At least one uppercase letter
-
+
{numberValidated ? ( - - + + ) : ( - - + + )} At least one number
-
+
{specialValidated ? ( - - + + ) : ( - - + + )} At least one special character
-
+
{lengthValidated ? ( - - + + ) : ( - - + + )} At least 8 characters
-
); + + ) + } + + ) } export default Signup;