Moving auth pages back to the root

gui/rpk-gui/public/locales/EN/common.json

@@ -1,5 +1,8 @@
 {
   "pages": {
+    "home": {
+      "title": "Home"
+    },
     "login": {
       "title": "Sign in to your account",
       "signin": "Sign in",

gui/rpk-gui/public/locales/FR/common.json

@@ -1,5 +1,8 @@
 {
   "pages": {
+    "home": {
+      "title": "Page d'accueil"
+    },
     "login": {
       "title": "Authentification",
       "signin": "S'authentifier",
@@ -85,7 +88,7 @@
   "buttons": {
     "create": "Créer",
     "save": "Sauvegarder",
-    "logout": "Se déconnecter",
+    "logout": "Déconnexion",
     "delete": "Supprimer",
     "edit": "Modifier",
     "cancel": "Annuler",

gui/rpk-gui/src/App.tsx

@@ -27,7 +27,6 @@ import { FirmRoutes } from "./pages/firm";
 import rpcTheme from "./theme";
 
 function App() {
-
   const { t, i18n } = useTranslation();
 
   const i18nProvider: I18nProvider = {
@@ -78,7 +77,7 @@ function App() {
               <Routes>
                 <Route
                   element={(
-                    <Authenticated key="authenticated-routes" redirectOnFail="/auth/login" fallback={<CatchAllNavigate  to="/auth/login"/>}>
+                    <Authenticated key="authenticated-routes" redirectOnFail="/login" fallback={<CatchAllNavigate  to="/login"/>}>
                       <Outlet />
                     </Authenticated>
                   )}
@@ -86,13 +85,13 @@ function App() {
                   <Route path="hub/*" element={<HubRoutes />} />
                   <Route path="firm/*" element={<FirmRoutes />} />
                 </Route>
-                <Route path="auth/*" element={<Outlet />}>
+                <Route path="*" element={<Outlet />}>
                   <Route path="login" element={<Login />} />
                   <Route path="register" element={<Register />} />
                   <Route path="forgot-password" element={<ForgotPassword />} />
                   <Route path="update-password" element={<UpdatePassword />} />
                 </Route>
-                <Route index element={<><Header /><h1>HOME</h1></>} />
+                <Route index element={<><Header /><h1>{t("pages.home.title")}</h1></>} />
               </Routes>
               <UnsavedChangesNotifier />
               <DocumentTitleHandler />

gui/rpk-gui/src/components/auth/Login.tsx

@@ -1,14 +1,8 @@
+import { useSearchParams, Navigate } from "react-router";
+import { useTranslation } from "@refinedev/core";
 import { AuthPage } from "@refinedev/mui";
-
 import GoogleIcon from "@mui/icons-material/Google";
 import DiscordIcon from "../../components/DiscordIcon";
-import {useSearchParams, Navigate, Link} from "react-router";
-import MuiLink from "@mui/material/Link";
-import * as React from "react";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import { useTranslation } from "@refinedev/core";
 
 export const Login = () => {
   const { translate } = useTranslation();
@@ -35,58 +29,6 @@ export const Login = () => {
           icon: (<DiscordIcon style={{ fontSize: 24, }} />),
         },
       ]}
-      forgotPasswordLink={
-        <Stack
-          sx={{
-            direction: "row",
-            display: "flex",
-            justifyContent: "flex-end",
-            alignItems: "center",
-          }}
-        >
-          <MuiLink
-            variant="body2"
-            color="primary"
-            fontSize="12px"
-            component={Link}
-            underline="none"
-            to="/auth/forgot-password"
-          >
-            {translate("pages.login.buttons.forgotPassword")}
-          </MuiLink>
-        </Stack>
-      }
-      registerLink={
-        <Box
-          sx={{
-            mt: "24px",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <Typography
-            textAlign="center"
-            variant="body2"
-            component="span"
-            fontSize="12px"
-          >
-            {translate("pages.login.buttons.noAccount")}
-          </Typography>
-          <MuiLink
-            ml="4px"
-            fontSize="12px"
-            variant="body2"
-            color="primary"
-            component={Link}
-            underline="none"
-            to="/auth/register"
-            fontWeight="bold"
-          >
-            {translate("pages.login.signup")}
-          </MuiLink>
-        </Box>
-      }
     />
   );
 };

gui/rpk-gui/src/components/auth/Logout.tsx

@@ -1,8 +1,10 @@
 import { Button } from "@mui/material";
 import { useLogout } from "@refinedev/core";
+import { useTranslation } from "@refinedev/core";
 
 export const Logout = () => {
+  const { translate } = useTranslation();
   const { mutate: logout } = useLogout();
 
-  return <Button onClick={() => logout()} >Logout</Button>;
+  return <Button onClick={() => logout()} >{ translate("buttons.logout") }</Button>;
 };

gui/rpk-gui/src/components/auth/Register.tsx

@@ -1,51 +1,5 @@
 import { AuthPage } from "@refinedev/mui";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import MuiLink from "@mui/material/Link";
-import * as React from "react";
-import { useTranslation } from "@refinedev/core";
-import { Link } from "react-router";
 
 export const Register = () => {
-  const { translate } = useTranslation();
+  return <AuthPage type="register" />;
-  const loginLink = (
-    <Box
-      display="flex"
-      justifyContent="flex-end"
-      alignItems="center"
-      sx={{
-        mt: "24px",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Typography variant="body2" component="span" fontSize="12px">
-        {translate(
-          "pages.register.buttons.haveAccount",
-          translate(
-            "pages.login.buttons.haveAccount",
-            "Have an account?",
-          ),
-        )}
-      </Typography>
-      <MuiLink
-        ml="4px"
-        variant="body2"
-        color="primary"
-        component={Link}
-        underline="none"
-        to="/auth/login"
-        fontSize="12px"
-        fontWeight="bold"
-      >
-        {translate(
-          "pages.register.signin",
-          translate("pages.login.signin", "Sign in"),
-        )}
-      </MuiLink>
-    </Box>
-  )
-
-  return <AuthPage type="register" loginLink={loginLink}/>;
 };

gui/rpk-gui/src/components/header/index.tsx

@@ -131,7 +131,7 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
               </Stack>
             )}
             {!user && (
-              <Link to="/auth/login"><Button>Login</Button></Link>
+              <Link to="/login"><Button>Login</Button></Link>
             )}
             <I18nPicker />
           </Stack>

gui/rpk-gui/src/providers/auth-provider.tsx

@@ -72,7 +72,7 @@ const authProvider: AuthProvider = {
     if (get_user() == null) {
       return {
         authenticated: false,
-        redirectTo: "/auth/login",
+        redirectTo: "/login",
         logout: true
       }
     }
@@ -154,7 +154,7 @@ const authProvider: AuthProvider = {
     if (error?.status === 401) {
       forget_user();
       return {
-        redirectTo: "/auth/login",
+        redirectTo: "/login",
         logout: true,
         error: { message: "Authentication required" },
       } as OnErrorResponse;