Merge pull request #101 from Ayobami6/staging

Auth Page bug fix deployment
Ayobami6 · Nov 1, 2023 · f2abb84 · f2abb84
2 parents a5c45f9 + 7518bf7
commit f2abb84
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 66 deletions.
diff --git a/client/src/pages/Auth/SignIn.tsx b/client/src/pages/Auth/SignIn.tsx
@@ -4,6 +4,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';
 
@@ -22,67 +23,111 @@ interface SignInProps {
 }
 
 const SignIn = ({ handleIsMemberClick }: SignInProps) => {
-  const [isTalent, setIsTalent] = useState(true);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const { enqueueSnackbar } = useSnackbar();
-  const navigate = useNavigate();
-  const [loading, setLoading] = useState(false);
-  const dispatch = useDispatch();
-  const handleSignIn = async () => {
-    const credentials: SignInCredential = {
-      email,
-      password,
+    const [isTalent, setIsTalent] = useState(true);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const { enqueueSnackbar } = useSnackbar();
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+    const dispatch = useDispatch();
+    const [hidePassword, setShowPassword] = useState(true);
+    const handleSignIn = async () => {
+        const credentials: SignInCredential = {
+            email,
+            password,
+        };
+        try {
+            if (isTalent) {
+                setLoading(true);
+                dispatch(
+                    talentAuth(
+                        'talents/signin',
+                        credentials,
+                        navigate,
+                        enqueueSnackbar,
+                        setLoading
+                    )
+                );
+                // send request to talent signin endpoint
+            } else {
+                setLoading(true);
+                dispatch(
+                    employerAuth(
+                        'employers/login',
+                        credentials,
+                        navigate,
+                        enqueueSnackbar,
+                        setLoading
+                    )
+                );
+            }
+            // else to employer endpoint
+        } catch (error) {
+            setLoading(false);
+            console.log(error.response.data.message);
+            enqueueSnackbar(error.response.data.message, { variant: 'error' });
+        }
     };
-    try {
-      if (isTalent) {
-        setLoading(true);
-        dispatch(
-          talentAuth(
-            'talents/signin',
-            credentials,
-            navigate,
-            enqueueSnackbar,
-            setLoading,
-          ),
-        );
-        // send request to talent signin endpoint
-      } else {
-        setLoading(true);
-        dispatch(
-          employerAuth(
-            'employers/login',
-            credentials,
-            navigate,
-            enqueueSnackbar,
-            setLoading,
-          ),
-        );
-      }
-      // else to employer endpoint
-    } catch (error) {
-      setLoading(false);
-      console.log(error.response.data.message);
-      enqueueSnackbar(error.response.data.message, { variant: 'error' });
-    }
-  };
-  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 in 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(false)}
-          >
-            Employer
-          </button>
-          <button
-            className='bg-green-500 hover:bg-green-700 font-bold rounded-lg text-white mx-10 p-4'
-            onClick={() => setIsTalent(true)}
-          >
-            Talent
-          </button>
+    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 in 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(false)}
+                    >
+                        Employer
+                    </button>
+                    <button
+                        className='bg-green-500 hover:bg-green-700 font-bold rounded-lg text-white mx-10 p-4'
+                        onClick={() => setIsTalent(true)}
+                    >
+                        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={`${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}
+                >
+                    {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 in as {isTalent ? 'Talent' : 'Employer'}
+                </button>
+                <h2 className='text-black-600 font-bold my-12 text-2xl'>
+                    New to MeetDevs?{' '}
+                    <a
+                        className='inline text-2xl text-white underline'
+                        onClick={handleIsMemberClick}
+                    >
+                        Sign up now
+                    </a>
+                </h2>
+            </div>
+
         </div>
 
         <input

diff --git a/client/src/pages/Auth/Signup.tsx b/client/src/pages/Auth/Signup.tsx
@@ -25,6 +25,7 @@ const Signup = ({ handleIsMemberClick }: SignUpProps) => {
   const { enqueueSnackbar } = useSnackbar();
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const [hidePassword, setShowPassword] = useState(true);
   const [user, setuser] = useState(
     JSON.parse(localStorage.getItem('talentProfile') || '{}'),
   );
@@ -43,7 +44,7 @@ const Signup = ({ handleIsMemberClick }: SignUpProps) => {
       // send request to talent signin endpoint
       if (isTalent) {
         setLoading(true);
-        dispatch(
+        await dispatch(
           talentSignupAuth(
             'talents/signup',
             userData,
@@ -52,11 +53,12 @@ const Signup = ({ handleIsMemberClick }: SignUpProps) => {
             setLoading,
           ),
         );
+        handleIsMemberClick();
 
         // else to employer endpoint
       } else {
         setLoading(true);
-        dispatch(
+        await dispatch(
           employerSignupAuth(
             'employers/signup',
             userData,
@@ -65,6 +67,7 @@ const Signup = ({ handleIsMemberClick }: SignUpProps) => {
             setLoading,
           ),
         );
+        handleIsMemberClick();
       }
     } catch (error) {
       const axiosError = error as AxiosError;
@@ -111,19 +114,26 @@ const Signup = ({ handleIsMemberClick }: SignUpProps) => {
           onChange={(e) => setName(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)}
         />
         <input
-          type='text'
+          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}

diff --git a/client/src/reducers/users.ts b/client/src/reducers/users.ts
@@ -1,5 +1,6 @@
-// @ts-nocheck
-export const userReducer = (state = {}, action) => {
+export const userReducer = (state = {
+  signupSuccessful: false,
+}, action) => {
   switch (action.type) {
     case 'TALENT_AUTH':
       localStorage.setItem(
@@ -13,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 };