From 0fbd118358c61183db75049a45d45167ca4a76c2 Mon Sep 17 00:00:00 2001 From: TanmayKalra09 <151675979+TanmayKalra09@users.noreply.github.com> Date: Thu, 30 May 2024 00:40:08 +0530 Subject: [PATCH] Create Signup --- Signup | 340 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 340 insertions(+) create mode 100644 Signup diff --git a/Signup b/Signup new file mode 100644 index 0000000..413f530 --- /dev/null +++ b/Signup @@ -0,0 +1,340 @@ +import React, { useState } from "react"; +import { useForm } from "react-hook-form"; +import { GoEye, GoEyeClosed } from "react-icons/go"; +import MoonLoader from "react-spinners/MoonLoader"; +import { ImCross } from "react-icons/im"; +import { TiTick } from "react-icons/ti"; +import axios from "axios"; +import { useNavigate } from "react-router"; +import TextLogo from "../../assets/blackLogo.png"; +import { toast, Bounce } from "react-toastify"; +import { Loader } from "../Loader/Loader.jsx"; + +const Signup = () => { + const { + register, + handleSubmit, + formState: { errors }, + watch, + } = useForm(); + + const navigate = useNavigate(); + + const [registerError, setRegisterError] = useState(); + const [passToggle, setPassToggle] = useState("password"); + const [checkUsernameLoading, setCheckUsernameLoading] = useState(null); + const [usernameExists, setUsernameExists] = useState(); + const [loading, setLoading] = useState(false); + const [Focused,setFocused] = useState(false); + + + const registerUser = async (data) => { + setLoading(true); + try { + const res = await axios.post( + `${import.meta.env.VITE_BASE_URL}/user/register`, + data + ); + setRegisterError(""); + localStorage.setItem("token", res.data.token); + navigate("/verifyotp"); + setLoading(false); + } catch (error) { + console.error(error); + if (error.response.data.message === "User already exists") { + toast.error(error.response.data.message, { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: false, + pauseOnHover: false, + draggable: false, + progress: undefined, + theme: "light", + transition: Bounce, + }); + } else { + toast.error("Something went wrong!", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: false, + pauseOnHover: false, + draggable: false, + progress: undefined, + theme: "light", + transition: Bounce, + }); + } + setLoading(false); + } + }; + + const togglePassword = () => { + if (passToggle === "password") { + setPassToggle("text"); + } else { + setPassToggle("password"); + } + }; + + const handleUsernameChange = async (event) => { + const username = event.target.value; + setUsernameExists(false); + + if (username.trim() !== "") { + setCheckUsernameLoading(true); + const res = await axios.get( + `${import.meta.env.VITE_BASE_URL}/user/checkusername/${username}` + ); + if (res.data.message === "username taken") { + setUsernameExists(true); + setCheckUsernameLoading(false); + } else { + setUsernameExists(false); + setCheckUsernameLoading(false); + } + } + }; + + if (loading) { + return ; + } + + return ( + <> +
+
+ ExamTime +

+ Sign up to an account +

+
+ +
+
{ + registerUser(data); + })} + > +
+ +
+ + /\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b/gi.test(value) || + "Enter a valid email address", + }, + })} + /> + {errors.email && ( +

+ )} +
+
+ +
+
+ +
+
+ + !usernameExists || "Username is already taken", + })} + onChange={handleUsernameChange} + /> + {!checkUsernameLoading ? ( +

+ {checkUsernameLoading + ? "" + : usernameExists == true + ? "Username taken" + : usernameExists == false + ? "Username available" + : ""} +

+ ) : ( +

Checking...

// instead of empty space showing checking will not decrease the height + )} + + {checkUsernameLoading ? ( + + ) : usernameExists == true ? ( + + ) : usernameExists == false ? ( + + ) : ( + "" + )} + +
+
+ +
+
+ +
+ +
+ + /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm.test( + value + ) || + "- at least 8 characters
- must contain at least 1 uppercase letter, 1 lowercase letter, and 1 number
- Can contain special characters", + }, + })} + onFocus={()=>setFocused(true)} + onBlur={() => setFocused(false)} + /> + + {Focused && (
+

Password Must Include

+
    +
  • At least 8 characters
    • +
  • One uppercase letter
    • +
  • One lowercase letter
    • +
  • One number
    • +
  • One special character
    • + +
+
)} +
+ {errors.password && ( +

+ )} +
+ +
+
+ +
+
+ { + if (watch("password") != val) { + return "Your passwords do no match"; + } + }, + })} + /> + {errors.confirm_password && ( +

+ {errors.confirm_password.message} +

+ )} +
+
+ +
+ +

+ {registerError && registerError} +

+
+
+ +

+ Already have an account?{" "} + + Sign In + +

+
+
+ + ); +}; +export default Signup;