From 1e7f2ac25ca3cb2f6cfb1f255baf67bfaed06880 Mon Sep 17 00:00:00 2001 From: Annu Kumari <108427028+Annu117@users.noreply.github.com> Date: Tue, 18 Jun 2024 00:46:22 +0530 Subject: [PATCH 1/2] LoginAndSignupUi --- client/src/Components/Auth/Login.jsx | 377 ++++++++++---------- client/src/Components/Auth/Signup.jsx | 489 ++++++++++++++------------ 2 files changed, 461 insertions(+), 405 deletions(-) diff --git a/client/src/Components/Auth/Login.jsx b/client/src/Components/Auth/Login.jsx index 469d7aa..e1157b0 100644 --- a/client/src/Components/Auth/Login.jsx +++ b/client/src/Components/Auth/Login.jsx @@ -1,178 +1,199 @@ -import React, { useState } from "react"; -import { useContext } from "react"; -import { Link, useNavigate } from "react-router-dom"; -import axios from "axios"; -import Cookies from "universal-cookie"; -import { AuthContext } from "./AuthContext"; -import BackToTopButton from "../BackToTopButton"; -import userImg from "../../assets/images/user.webp"; -import { toast } from "react-toastify"; -import { useRef } from 'react'; -import gsap from 'gsap'; -import { useGSAP } from '@gsap/react'; - -const Login = () => { - - - const cookies = new Cookies(); - const { login } = useContext(AuthContext); - - const navigate = useNavigate(); - const [inputValue, setInputValue] = useState({ - email: "", - password: "", - }); - const { email, password } = inputValue; - - const handleOnChange = (e) => { - const { name, value } = e.target; - setInputValue({ - ...inputValue, - [name]: value, - }); - }; - - const togglePasswordVisibility = () => { - setInputValue(prevState => ({ - ...prevState, - showPassword: !prevState.showPassword, - })); - }; - - useGSAP(()=>{ - const tl = gsap.timeline(); - tl.from('.text-login',{ - opacity: 0, - y:100, - duration: 1, - delay: 0.5, - ease: "power3.inOut", - stagger: { - amount: 0.5, - }, - }); - tl.from('.form-login',{ - opacity: 0, - y:100, - ease: "power3.inOut", - }); - }); - - const handleSubmit = async (e) => { - e.preventDefault(); - try { - const response = await axios.post( - `${import.meta.env.VITE_API_URL}/auth/login`, - { - ...inputValue, - }, - { - withCredentials: true, - } - ); - - if (response) { - console.log(response.data.token); - login(response.data.token); - - cookies.set("TOKEN", response.data.token, { - path: "/", - }); - } - console.log(cookies.get("TOKEN")); - - const { success, message } = response.data; - - if (success) { - navigate("/Home"); - } else { - alert(message.message); - console.log(message); - } - } catch (error) { - toast.error("Incorrect credentials. Check and try again or sign up."); - console.log(error); - } - }; - - return ( -
S2o4;(mf
z(!}`I{R0Ph-~Q8%9sOfze05{ n(yQ_7xmNRdTq1)XFQ@LZ(qmgRA5V@
z{=NYsn8kQE<0sbn<7&o_(B^4Afy!x!BjH?S$aH&+_ATJa@y0o bY0Im!blL=4{y7sXN5FE
zZ_oE$RN$Vc^1BUws7~$Nj{I5-;RtzPF<(ELj0utzqp-EOZ2x>X{K7`|M0w>Rw9Sw~
zX`EKcS54A2oEV!Gf=DKwR)PM*?vF8haprruQ~DR` `f!<7h{&pMQNc2QI=AUYJF^)GMo>Y`F
z;X4JIv$=s{p|wk6hKoq Ez=rp5g27e^NCc#JQ;x
z70GFr*pn>e39 nxU
zzh2-Fdqm<@(_D7k3%13tkEn!T&&waWN9S^}ix(#E*3(i{P8fd_
z{H@!H5q+|H-Gyv}jeH*xOLlIg
z56{h~jpf0FedUrj=SL@89_1T$?!CKepONjC9?b3t>VIIjAbs@NS~%QZ6Oo!G_vl{#
zRoSd{J1+(~Uu@|C^TorEMIO?8J{|a1plz!@slPuXXv)CV%E6{RZstqinQC2Yr@Yh^
zs36!bxd;F?E1-Q9ev)sAzQ$_)=+N-7`vmC1
!VwYJD+VgXtSh3jbass2z>7>B*71G*y3Fs~3`cjPcepG%OUz3;$UYV*G
z3*tTdEntQEekgECXg>D`$vB2;yYA*0hGm0@IqYR0ax?gGV;
zu0#D`-S#ZAq7S2&kX%^;O&F9D)#KfjG7B
#+N9&w5aC7(S=v
z1=q@{cx=tFo_sH&XQ$KcWaOdD;9-`5ptaubdE9CG35D(VAV)FnnhOMZ>W);djWsOH
z16E+#xpc+jp<-9HQs!m0};$;Kh`PEWlV^})%A^sSlv9_M^k+O#XN>KrDy
zwy!*NT}rIEVRSpA;Zrj3Zr1)RHdy@SQgZ8Y9_v{oc}mAcw?476d+%=(LkUq^RCcpI
zu?jPHYD8Vpg!;zaW@S+@)Q7}X0SmT;%;mm@7axTmV>rqQ@{cL0^ph(`q^L>_SnS
<<-3
snK)->^h=2(wC5gK{D&Qd4qDrdd)mY8S^prF*;FKcUIVT4A|vGH9!L-
zz8i>XozX#UOO|CGPT;!~Up67F