From 37e7645fa1eb0b83bc68f6e14069344a1f931c13 Mon Sep 17 00:00:00 2001
From: "Ayobami Alaran A." <ayobamidele006@gmail.com>
Date: Mon, 30 Oct 2023 18:56:03 +0000
Subject: [PATCH 1/3] feat: make auth password hidden and visible on show

---
 client/src/pages/Auth/SignIn.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/Auth/SignIn.tsx b/client/src/pages/Auth/SignIn.tsx
index 989afce..b0eeebc 100644
--- a/client/src/pages/Auth/SignIn.tsx
+++ b/client/src/pages/Auth/SignIn.tsx
@@ -3,6 +3,7 @@ import { useSnackbar } from 'notistack';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { talentAuth, employerAuth } from '../../actions/auth';
+import { BiShow } from 'react-icons/bi'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import axios, { AxiosError } from 'axios';
 
@@ -28,6 +29,7 @@ const SignIn = ({ handleIsMemberClick }: SignInProps) => {
     const navigate = useNavigate();
     const [loading, setLoading] = useState(false);
     const dispatch = useDispatch();
+    const [hidePassword, setShowPassword] = useState(true);
     const handleSignIn = async () => {
         const credentials: SignInCredential = {
             email,
@@ -92,14 +94,17 @@ const SignIn = ({ handleIsMemberClick }: SignInProps) => {
                     className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
                     placeholder='Email'
                     onChange={(e) => setEmail(e.target.value)}
+
                 />
+
                 <input
-                    type='text'
+                    type={`${hidePassword ? 'password' : 'text'}`}
                     value={password}
                     className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
                     placeholder='Password'
                     onChange={(e) => setPassword(e.target.value)}
                 />
+                <p className='m-3'><input type="checkbox" onChange={() => setShowPassword(!hidePassword)} /> Show Password</p>
                 <button
                     className='w-full text-white bg-green-700 rounded-lg my-9 self-center text-lg font-bold p-4'
                     onClick={handleSignIn}

From 79d94ba268ba7b9c635159f6aa7b8df7e3165e0e Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Mon, 30 Oct 2023 20:52:10 +0100
Subject: [PATCH 2/3] feat: make password hidden for signup form

---
 client/src/pages/Auth/Signup.tsx | 270 ++++++++++++++++---------------
 1 file changed, 138 insertions(+), 132 deletions(-)

diff --git a/client/src/pages/Auth/Signup.tsx b/client/src/pages/Auth/Signup.tsx
index 2fee639..fcb8eb9 100644
--- a/client/src/pages/Auth/Signup.tsx
+++ b/client/src/pages/Auth/Signup.tsx
@@ -7,147 +7,153 @@ import { useNavigate } from 'react-router-dom';
 import { talentSignupAuth, employerSignupAuth } from '../../actions/auth';
 
 interface ErrorResponse {
-    message: string;
+  message: string;
 }
 
 interface SignUpProps {
-    handleIsMemberClick: () => void;
+  handleIsMemberClick: () => void;
 }
 
 const Signup = ({ handleIsMemberClick }: SignUpProps) => {
-    const [loading, setLoading] = useState(false);
-    const [isTalent, setIsTalent] = useState(true);
-    const [email, setEmail] = useState('');
-    const [name, setName] = useState('');
-    const [password, setPassword] = useState('');
-    const [confirmPassword, setConfirmPassword] = useState('');
-    const { enqueueSnackbar } = useSnackbar();
-    const dispatch = useDispatch();
-    const navigate = useNavigate();
-    const [user, setuser] = useState(
-        JSON.parse(localStorage.getItem('talentProfile') || '{}')
-    );
-    const handleSignUp = async () => {
-        const userData = {
-            email,
-            name,
-            password,
-        };
-        try {
-            if (password !== confirmPassword) {
-                enqueueSnackbar('Password Does not Match', {
-                    variant: 'error',
-                });
-            }
-            // send request to talent signin endpoint
-            if (isTalent) {
-                setLoading(true);
-                dispatch(
-                    talentSignupAuth(
-                        'talents/signup',
-                        userData,
-                        enqueueSnackbar,
-                        navigate,
-                        setLoading
-                    )
-                );
-
-                // else to employer endpoint
-            } else {
-                setLoading(true);
-                dispatch(
-                    employerSignupAuth(
-                        'employers/signup',
-                        userData,
-                        enqueueSnackbar,
-                        navigate,
-                        setLoading
-                    )
-                );
-            }
-        } catch (error) {
-            const axiosError = error as AxiosError;
-            if (axiosError.response) {
-                const responseData = axiosError.response.data as ErrorResponse;
-                setLoading(false);
-                console.log(axiosError);
-                enqueueSnackbar(responseData.message, { variant: 'error' });
-                console.log(user);
-            }
-        }
+  const [loading, setLoading] = useState(false);
+  const [isTalent, setIsTalent] = useState(true);
+  const [email, setEmail] = useState('');
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const { enqueueSnackbar } = useSnackbar();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [hidePassword, setShowPassword] = useState(true);
+  const [user, setuser] = useState(
+    JSON.parse(localStorage.getItem('talentProfile') || '{}'),
+  );
+  const handleSignUp = async () => {
+    const userData = {
+      email,
+      name,
+      password,
     };
+    try {
+      if (password !== confirmPassword) {
+        enqueueSnackbar('Password Does not Match', {
+          variant: 'error',
+        });
+      }
+      // send request to talent signin endpoint
+      if (isTalent) {
+        setLoading(true);
+        dispatch(
+          talentSignupAuth(
+            'talents/signup',
+            userData,
+            enqueueSnackbar,
+            navigate,
+            setLoading,
+          ),
+        );
+
+        // else to employer endpoint
+      } else {
+        setLoading(true);
+        dispatch(
+          employerSignupAuth(
+            'employers/signup',
+            userData,
+            enqueueSnackbar,
+            navigate,
+            setLoading,
+          ),
+        );
+      }
+    } catch (error) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response) {
+        const responseData = axiosError.response.data as ErrorResponse;
+        setLoading(false);
+        console.log(axiosError);
+        enqueueSnackbar(responseData.message, { variant: 'error' });
+        console.log(user);
+      }
+    }
+  };
 
-    return (
-        <div className='flex flex-col bg-opacity-75 bg-black rounded-lg w-[420px] p-8 shadow-xl mx-auto my-10'>
-            <div className='mx-10'>
-                <h1 className='text-white text-5xl font-bold my-10'>
-                    Sign up as{' '}
-                </h1>
-                <div className='text-center my-6'>
-                    <button
-                        className='bg-green-500 rounded-lg font-bold hover:bg-green-700 text-white p-4'
-                        onClick={() => setIsTalent(!isTalent)}
-                    >
-                        Employer
-                    </button>
-                    <button
-                        className='bg-green-500 hover:bg-green-700 font-bold rounded-lg text-white mx-10 p-4'
-                        onClick={() => setIsTalent(!isTalent)}
-                    >
-                        Talent
-                    </button>
-                </div>
-                <input
-                    type='text'
-                    value={email}
-                    className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
-                    placeholder='Email'
-                    onChange={(e) => setEmail(e.target.value)}
-                />
-                <input
-                    type='text'
-                    value={name}
-                    className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
-                    placeholder='Name'
-                    onChange={(e) => setName(e.target.value)}
-                />
-                <input
-                    type='text'
-                    value={password}
-                    className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
-                    placeholder='Password'
-                    onChange={(e) => setPassword(e.target.value)}
-                />
-                <input
-                    type='text'
-                    value={confirmPassword}
-                    className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
-                    placeholder='Confirm Password'
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                />
-                <button
-                    className='w-full text-white bg-green-700 rounded-lg my-6 self-center text-lg font-bold p-4'
-                    onClick={handleSignUp}
-                >
-                    {loading ? (
-                        <p className='inline-block animate-spin mr-3 w-4 h-4 border-b-2 border-t-2 border-white-400 border-solid rounded-full'></p>
-                    ) : (
-                        ''
-                    )}
-                    Sign up as {isTalent ? 'Talent' : 'Employer'}
-                </button>
-                <h2 className='text-black-600 font-bold my-12 text-2xl'>
-                    Already a Member?{' '}
-                    <a
-                        className='inline text-2xl text-white underline'
-                        onClick={handleIsMemberClick}
-                    >
-                        Sign in.
-                    </a>
-                </h2>
-            </div>
+  return (
+    <div className='flex flex-col bg-opacity-75 bg-black rounded-lg w-[420px] p-8 shadow-xl mx-auto my-10'>
+      <div className='mx-10'>
+        <h1 className='text-white text-5xl font-bold my-10'>Sign up as </h1>
+        <div className='text-center my-6'>
+          <button
+            className='bg-green-500 rounded-lg font-bold hover:bg-green-700 text-white p-4'
+            onClick={() => setIsTalent(!isTalent)}
+          >
+            Employer
+          </button>
+          <button
+            className='bg-green-500 hover:bg-green-700 font-bold rounded-lg text-white mx-10 p-4'
+            onClick={() => setIsTalent(!isTalent)}
+          >
+            Talent
+          </button>
         </div>
-    );
+        <input
+          type='text'
+          value={email}
+          className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
+          placeholder='Email'
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type='text'
+          value={name}
+          className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
+          placeholder='Name'
+          onChange={(e) => setName(e.target.value)}
+        />
+        <input
+          type={`${hidePassword ? 'password' : 'text'}`}
+          value={password}
+          className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
+          placeholder='Password'
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <input
+          type={`${hidePassword ? 'password' : 'text'}`}
+          value={confirmPassword}
+          className='border-1 text-2xl border-black-500 rounded-lg bg-gray-600 h-50 px-4 my-3 py-4 w-full justify-center'
+          placeholder='Confirm Password'
+          onChange={(e) => setConfirmPassword(e.target.value)}
+        />
+        <p className='m-3'>
+          <input
+            type='checkbox'
+            onChange={() => setShowPassword(!hidePassword)}
+          />{' '}
+          Show Password
+        </p>
+        <button
+          className='w-full text-white bg-green-700 rounded-lg my-6 self-center text-lg font-bold p-4'
+          onClick={handleSignUp}
+        >
+          {loading ? (
+            <p className='inline-block animate-spin mr-3 w-4 h-4 border-b-2 border-t-2 border-white-400 border-solid rounded-full'></p>
+          ) : (
+            ''
+          )}
+          Sign up as {isTalent ? 'Talent' : 'Employer'}
+        </button>
+        <h2 className='text-black-600 font-bold my-12 text-2xl'>
+          Already a Member?{' '}
+          <a
+            className='inline text-2xl text-white underline'
+            onClick={handleIsMemberClick}
+          >
+            Sign in.
+          </a>
+        </h2>
+      </div>
+    </div>
+  );
 };
 
 export default Signup;

From 05620341d5ea08c31690793814c801a3dae04d03 Mon Sep 17 00:00:00 2001
From: Ayobami <ayobamidele006@gmail.com>
Date: Mon, 30 Oct 2023 22:10:10 +0100
Subject: [PATCH 3/3] bug: fix signup doesn't redirect after signup

Made auth form switch to signin after signup successful
---
 client/src/pages/Auth/Auth.tsx   | 45 +++++++++++++++-----------------
 client/src/pages/Auth/Signup.tsx |  6 +++--
 client/src/reducers/users.ts     |  7 ++++-
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/client/src/pages/Auth/Auth.tsx b/client/src/pages/Auth/Auth.tsx
index 4374503..be85cf1 100644
--- a/client/src/pages/Auth/Auth.tsx
+++ b/client/src/pages/Auth/Auth.tsx
@@ -4,34 +4,31 @@ import SignUp from './Signup';
 import Navbar from '../../components/Navbar/Navbar2';
 
 const Auth: React.FC = () => {
-    const [isSignup, setIsSignup] = useState(false);
+  const [isSignup, setIsSignup] = useState(false);
 
-    const handleIsMemberClick = () => {
-        setIsSignup(!isSignup);
-    };
+  const handleIsMemberClick = () => {
+    setIsSignup(!isSignup);
+  };
 
-    return (
-        <>
-            <div>
-                {/* <div className="bg-[url('src/assets/auth3.jpg')] bg-img w-full bg-cover">
+  return (
+    <>
+      <div>
+        {/* <div className="bg-[url('src/assets/auth3.jpg')] bg-img w-full bg-cover">
                     
                 </div> */}
-                <img
-                    src='src/assets/auth3.jpg'
-                    className='bg-img bg-cover w-fit'
-                />
-                <div className='text-left mx-3 py-4'>
-                    <Navbar isAuth={true} />
-                </div>
-                {isSignup ? (
-                    <SignUp handleIsMemberClick={handleIsMemberClick} />
-                ) : (
-                    <SignIn handleIsMemberClick={handleIsMemberClick} />
-                )}
-            </div>
-            <div>Footer</div>
-        </>
-    );
+        <img src='src/assets/auth3.jpg' className='bg-img bg-cover w-fit' />
+        <div className='text-left mx-3 py-4'>
+          <Navbar isAuth={true} />
+        </div>
+        {isSignup ? (
+          <SignUp handleIsMemberClick={handleIsMemberClick} />
+        ) : (
+          <SignIn handleIsMemberClick={handleIsMemberClick} />
+        )}
+      </div>
+      <div>Footer</div>
+    </>
+  );
 };
 
 export default Auth;
diff --git a/client/src/pages/Auth/Signup.tsx b/client/src/pages/Auth/Signup.tsx
index fcb8eb9..41e69b5 100644
--- a/client/src/pages/Auth/Signup.tsx
+++ b/client/src/pages/Auth/Signup.tsx
@@ -43,7 +43,7 @@ const Signup = ({ handleIsMemberClick }: SignUpProps) => {
       // send request to talent signin endpoint
       if (isTalent) {
         setLoading(true);
-        dispatch(
+        await dispatch(
           talentSignupAuth(
             'talents/signup',
             userData,
@@ -52,11 +52,12 @@ const Signup = ({ handleIsMemberClick }: SignUpProps) => {
             setLoading,
           ),
         );
+        handleIsMemberClick();
 
         // else to employer endpoint
       } else {
         setLoading(true);
-        dispatch(
+        await dispatch(
           employerSignupAuth(
             'employers/signup',
             userData,
@@ -65,6 +66,7 @@ const Signup = ({ handleIsMemberClick }: SignUpProps) => {
             setLoading,
           ),
         );
+        handleIsMemberClick();
       }
     } catch (error) {
       const axiosError = error as AxiosError;
diff --git a/client/src/reducers/users.ts b/client/src/reducers/users.ts
index 6f847b6..1c78e42 100644
--- a/client/src/reducers/users.ts
+++ b/client/src/reducers/users.ts
@@ -1,4 +1,6 @@
-export const userReducer = (state = {}, action) => {
+export const userReducer = (state = {
+  signupSuccessful: false,
+}, action) => {
   switch (action.type) {
     case 'TALENT_AUTH':
       localStorage.setItem(
@@ -12,6 +14,9 @@ export const userReducer = (state = {}, action) => {
         JSON.stringify({ ...action?.data }),
       );
       return { ...state, user: action?.data?.data };
+
+    case 'SIGN_SUCCESS':
+      return { ...state, signupSuccessful: true }
     case 'LOGOUT':
       localStorage.clear();
       return { ...state, user: null };