diff --git a/apps/frontend/src/components/LoginForm/LoginForm.tsx b/apps/frontend/src/components/LoginForm/LoginForm.tsx index fa60c4ca..261551d3 100644 --- a/apps/frontend/src/components/LoginForm/LoginForm.tsx +++ b/apps/frontend/src/components/LoginForm/LoginForm.tsx @@ -42,7 +42,7 @@ export default function LoginForm({ -
+
{isLoading && } Submit diff --git a/apps/frontend/src/components/SignUpForm/SignUpForm.module.css b/apps/frontend/src/components/SignUpForm/SignUpForm.module.css index 18ea5dce..df02e6bd 100644 --- 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 index 76008fe8..c0c26c8a 100644 --- 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>; +}) { const navigate = useNavigate(); const redirectToLogin = () => navigate('/login'); + const changeLoadState = () => setIsLoading(true); return ( @@ -43,7 +53,8 @@ export default function SignUpForm({ className }: { className: string }) {
- + {isLoading && } + Submit diff --git a/apps/frontend/src/pages/SignUpPage/SignUpPage.tsx b/apps/frontend/src/pages/SignUpPage/SignUpPage.tsx index 193a13f0..9cdb76dc 100644 --- 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(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() { )} - + ); diff --git a/apps/frontend/src/utils/auth.ts b/apps/frontend/src/utils/auth.ts index 657cd1e5..283ad6a0 100644 --- 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; }