From 5a83be4b0c628d1f03144c407f18a08a711c08ff Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Mon, 14 Oct 2024 15:19:50 +0100
Subject: [PATCH] fix(frontend): public pages extra rendering

---
 frontend/src/app-components/auth/Login.tsx      |  5 +++--
 frontend/src/app-components/auth/Register.tsx   |  5 +++--
 .../src/app-components/auth/ResetPassword.tsx   |  5 +++--
 .../auth/resetPasswordRequest.tsx               |  5 +++--
 .../anonymous/PublicContentWrapper.tsx          | 17 +++++++++++++++++
 5 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/anonymous/PublicContentWrapper.tsx

diff --git a/frontend/src/app-components/auth/Login.tsx b/frontend/src/app-components/auth/Login.tsx
index 1fbdba3e..78bbd138 100755
--- a/frontend/src/app-components/auth/Login.tsx
+++ b/frontend/src/app-components/auth/Login.tsx
@@ -22,6 +22,7 @@ import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 import { ILoginAttributes } from "@/types/auth/login.types";
 
+import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
 import { ContentContainer } from "../dialogs/layouts/ContentContainer";
 import { Adornment } from "../inputs/Adornment";
 import { Input } from "../inputs/Input";
@@ -89,7 +90,7 @@ export const Login = () => {
   }, [router.query.token]);
 
   return (
-    <Grid container justifyContent="center">
+    <PublicContentWrapper>
       <Paper sx={{ width: { xs: "100%", md: "33%" }, p: 2 }}>
         <form onSubmit={handleSubmit(onSubmitForm)}>
           <ContentContainer gap={2}>
@@ -142,6 +143,6 @@ export const Login = () => {
           </ContentContainer>
         </form>
       </Paper>
-    </Grid>
+    </PublicContentWrapper>
   );
 };
diff --git a/frontend/src/app-components/auth/Register.tsx b/frontend/src/app-components/auth/Register.tsx
index deedd7e8..61ddf240 100644
--- a/frontend/src/app-components/auth/Register.tsx
+++ b/frontend/src/app-components/auth/Register.tsx
@@ -30,6 +30,7 @@ import { useValidationRules } from "@/hooks/useValidationRules";
 import { IRegisterAttributes } from "@/types/auth/register.types";
 import { JWT } from "@/utils/Jwt";
 
+import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
 import { ContentContainer } from "../dialogs/layouts/ContentContainer";
 import { ContentItem } from "../dialogs/layouts/ContentItem";
 import { Adornment } from "../inputs/Adornment";
@@ -136,7 +137,7 @@ export const Register = () => {
   }, [router.query.token]);
 
   return (
-    <Grid container justifyContent="center" sx={{ p: "4vh 0" }}>
+    <PublicContentWrapper>
       <Paper
         sx={{
           width: { xs: "100%", md: "33%" },
@@ -259,6 +260,6 @@ export const Register = () => {
           </ContentContainer>
         </form>
       </Paper>
-    </Grid>
+    </PublicContentWrapper>
   );
 };
diff --git a/frontend/src/app-components/auth/ResetPassword.tsx b/frontend/src/app-components/auth/ResetPassword.tsx
index f68a4466..9c9c8c8b 100644
--- a/frontend/src/app-components/auth/ResetPassword.tsx
+++ b/frontend/src/app-components/auth/ResetPassword.tsx
@@ -17,6 +17,7 @@ import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 
+import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
 import { ContentContainer } from "../dialogs";
 import { Adornment } from "../inputs/Adornment";
 import { PasswordInput } from "../inputs/PasswordInput";
@@ -55,7 +56,7 @@ export const ResetPassword = () => {
   });
 
   return (
-    <Grid container justifyContent="center">
+    <PublicContentWrapper>
       <Paper sx={{ width: { xs: "100%", md: "33%" }, p: 2 }}>
         <form
           onSubmit={handleSubmit((payload) => {
@@ -97,6 +98,6 @@ export const ResetPassword = () => {
           </ContentContainer>
         </form>
       </Paper>
-    </Grid>
+    </PublicContentWrapper>
   );
 };
diff --git a/frontend/src/app-components/auth/resetPasswordRequest.tsx b/frontend/src/app-components/auth/resetPasswordRequest.tsx
index a5d13135..d773ff31 100644
--- a/frontend/src/app-components/auth/resetPasswordRequest.tsx
+++ b/frontend/src/app-components/auth/resetPasswordRequest.tsx
@@ -14,6 +14,7 @@ import { useRequestResetPassword } from "@/hooks/entities/reset-hooks";
 import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 
+import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
 import { ContentContainer } from "../dialogs";
 import { Input } from "../inputs/Input";
 
@@ -37,7 +38,7 @@ export const ResetPasswordRequest = () => {
   });
 
   return (
-    <Grid container justifyContent="center">
+    <PublicContentWrapper>
       <Paper sx={{ width: { xs: "100%", md: "33%" }, p: 2 }}>
         <form
           id="resetPasswordForm"
@@ -74,6 +75,6 @@ export const ResetPasswordRequest = () => {
           </ContentContainer>
         </form>
       </Paper>
-    </Grid>
+    </PublicContentWrapper>
   );
 };
diff --git a/frontend/src/components/anonymous/PublicContentWrapper.tsx b/frontend/src/components/anonymous/PublicContentWrapper.tsx
new file mode 100644
index 00000000..2af52cdb
--- /dev/null
+++ b/frontend/src/components/anonymous/PublicContentWrapper.tsx
@@ -0,0 +1,17 @@
+import { CircularProgress, Grid } from "@mui/material";
+import { FC } from "react";
+
+import { useAuth } from "@/hooks/useAuth";
+
+export type PublicContentWrapperProps = { children: React.ReactNode };
+export const PublicContentWrapper: FC<PublicContentWrapperProps> = ({
+  children,
+}) => {
+  const { isAuthenticated } = useAuth();
+
+  return (
+    <Grid container justifyContent="center">
+      {isAuthenticated ? <CircularProgress /> : children}
+    </Grid>
+  );
+};