Merge pull request #216 from Hexastack/215-bug-ui-freeze-for-public-a…

…fter-authentication fix(frontend): public pages extra rendering
Hexastack · Oct 15, 2024 · 2dae5c3 · 2dae5c3
2 parents 15eee17 + 5a83be4
commit 2dae5c3
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
+ );
+};