Add loading spinner in signup form; redirect if token expired

neighborhood-app · Apr 9, 2024 · 7718bf5 · 7718bf5
1 parent adb8a15
commit 7718bf5
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/apps/frontend/src/components/LoginForm/LoginForm.tsx b/apps/frontend/src/components/LoginForm/LoginForm.tsx
@@ -42,7 +42,7 @@ export default function LoginForm({
             </Row>
           </Container>
         </Form.Group>
-        <div className="d-grid gap-2 buttonsDiv">
+        <div className="d-grid gap-2">
           {isLoading && <SpinWheel className={styles.spinner}></SpinWheel>}
           <CustomBtn variant="primary" type="submit" onClick={changeLoadState}>
             Submit

diff --git a/apps/frontend/src/components/SignUpForm/SignUpForm.module.css b/apps/frontend/src/components/SignUpForm/SignUpForm.module.css
@@ -7,6 +7,11 @@
   color: #ff2a70;
 }
 
+.spinner {
+  margin: auto;
+  margin-bottom: 1rem;
+}
+
 @media screen and (max-width: 992px) {
   .signUpForm {
     min-width: 87%;

diff --git a/apps/frontend/src/components/SignUpForm/SignUpForm.tsx b/apps/frontend/src/components/SignUpForm/SignUpForm.tsx
@@ -2,10 +2,20 @@ import { Form, Col } from 'react-bootstrap';
 import { Form as FormRouter, useNavigate } from 'react-router-dom';
 import CustomBtn from '../CustomBtn/CustomBtn';
 import styles from './SignUpForm.module.css';
+import SpinWheel from '../SpinWheel/SpinWheel';
 
-export default function SignUpForm({ className }: { className: string }) {
+export default function SignUpForm({
+  className,
+  isLoading,
+  setIsLoading,
+}: {
+  className: string;
+  isLoading: boolean;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
   const navigate = useNavigate();
   const redirectToLogin = () => navigate('/login');
+  const changeLoadState = () => setIsLoading(true);
 
   return (
     <Col lg={6} className={className}>
@@ -43,7 +53,8 @@ export default function SignUpForm({ className }: { className: string }) {
           </Form.Text>
         </Form.Group>
         <div className="d-grid gap-2">
-          <CustomBtn variant="primary" type="submit">
+          {isLoading && <SpinWheel className={styles.spinner}></SpinWheel>}
+          <CustomBtn variant="primary" type="submit" onClick={changeLoadState}>
             Submit
           </CustomBtn>
           <CustomBtn variant="outline-dark" onClick={redirectToLogin}>

diff --git a/apps/frontend/src/pages/SignUpPage/SignUpPage.tsx b/apps/frontend/src/pages/SignUpPage/SignUpPage.tsx
@@ -18,11 +18,14 @@ export async function action({ request }: { request: Request }) {
 
 export default function SignUpPage() {
   const [error, setError] = useState<ErrorObj | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
   const signUpRes = useActionData() as Response | ErrorObj;
 
   useEffect(() => {
     if (signUpRes && 'error' in signUpRes) {
       setError(signUpRes);
+      setIsLoading(false);
     }
 
     setTimeout(() => {
@@ -45,7 +48,7 @@ export default function SignUpPage() {
           <AlertBox className={styles.alertBox} text={error.error} variant="danger"></AlertBox>
         )}
         <WelcomeImgBox className={`${styles.customCol} ${styles.imgCol}`}></WelcomeImgBox>
-        <SignUpForm className={`${styles.customCol} ${styles.formWrapper}`}></SignUpForm>
+        <SignUpForm isLoading={isLoading} setIsLoading={setIsLoading} className={`${styles.customCol} ${styles.formWrapper}`}></SignUpForm>
       </Row>
     </Container>
   );

diff --git a/apps/frontend/src/utils/auth.ts b/apps/frontend/src/utils/auth.ts
@@ -49,9 +49,7 @@ export function checkAuthLoader() {
   const decodedToken = jwtDecode(user.token);
 
   const isTokenExpired = decodedToken.exp ? Date.now() >= decodedToken.exp * 1000 : null;
-  console.log(isTokenExpired);
-
-  // if (isTokenExpired) return redirect('/login');
+  if (isTokenExpired) return redirect('/login');
 
   return null;
 }