feat: auth pages layout (#2042)

* auth pages layout
* exclude home route from redirect
* fix margin

apps/client/src/ee/components/cloud-login-form.tsx

@@ -21,6 +21,7 @@ import { useTranslation } from "react-i18next";
 import JoinedWorkspaces from "@/ee/components/joined-workspaces.tsx";
 import { useJoinedWorkspacesQuery } from "@/ee/cloud/query/cloud-query.ts";
 import { findWorkspacesByEmail } from "@/ee/cloud/service/cloud-service.ts";
+import { AuthLayout } from "@/features/auth/components/auth-layout.tsx";
 
 const formSchema = z.object({
   hostname: z.string().min(1, { message: "subdomain is required" }),
@@ -82,7 +83,7 @@ export function CloudLoginForm() {
   }
 
   return (
-    <div>
+    <AuthLayout>
       <Container size={420} className={classes.container}>
         <Box p="xl" className={classes.containerBox}>
           <Title order={2} ta="center" fw={500} mb="md">
@@ -145,12 +146,12 @@ export function CloudLoginForm() {
         </Box>
       </Container>
 
-      <Text ta="center">
+      <Text ta="center" mb="xl">
         {t("Don't have a workspace?")}{" "}
         <Anchor component={Link} to={APP_ROUTE.AUTH.CREATE_WORKSPACE} fw={500}>
           {t("Create new workspace")}
         </Anchor>
       </Text>
-    </div>
+    </AuthLayout>
   );
 }

apps/client/src/ee/mfa/components/mfa-challenge.tsx

@@ -22,6 +22,7 @@ import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route";
 import { useTranslation } from "react-i18next";
 import { z } from "zod/v4";
 import { MfaBackupCodeInput } from "./mfa-backup-code-input";
+import { AuthLayout } from "@/features/auth/components/auth-layout.tsx";
 
 const formSchema = z.object({
   code: z
@@ -66,6 +67,7 @@ export function MfaChallenge() {
   };
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Paper radius="lg" p={40} className={classes.paper}>
         <Stack align="center" gap="xl">
@@ -157,5 +159,6 @@ export function MfaChallenge() {
         </Stack>
       </Paper>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/ee/mfa/components/mfa-setup-required.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { MfaSetupModal } from "@/ee/mfa";
 import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
 import { useNavigate } from "react-router-dom";
+import { AuthLayout } from "@/features/auth/components/auth-layout.tsx";
 
 export default function MfaSetupRequired() {
   const { t } = useTranslation();
@@ -15,6 +16,7 @@ export default function MfaSetupRequired() {
   };
 
   return (
+    <AuthLayout>
     <Container size="sm" py="xl">
       <Paper shadow="sm" p="xl" radius="md" withBorder>
         <Stack>
@@ -44,5 +46,6 @@ export default function MfaSetupRequired() {
         </Stack>
       </Paper>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/ee/pages/verify-email.tsx

@@ -9,6 +9,7 @@ import {
 import { notifications } from "@mantine/notifications";
 import APP_ROUTE from "@/lib/app-route.ts";
 import { useTranslation } from "react-i18next";
+import { AuthLayout } from "@/features/auth/components/auth-layout.tsx";
 
 export default function VerifyEmail() {
   const { t } = useTranslation();
@@ -59,20 +60,23 @@ export default function VerifyEmail() {
 
   if (token) {
     return (
-      <Container size={420} className={classes.container}>
-        <Box p="xl" className={classes.containerBox}>
-          <Title order={2} ta="center" fw={500} mb="md">
-            {t("Verifying your email")}
-          </Title>
-          <Text ta="center" c="dimmed">
-            {t("Please wait...")}
-          </Text>
-        </Box>
-      </Container>
+      <AuthLayout>
+        <Container size={420} className={classes.container}>
+          <Box p="xl" className={classes.containerBox}>
+            <Title order={2} ta="center" fw={500} mb="md">
+              {t("Verifying your email")}
+            </Title>
+            <Text ta="center" c="dimmed">
+              {t("Please wait...")}
+            </Text>
+          </Box>
+        </Container>
+      </AuthLayout>
     );
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -103,5 +107,6 @@ export default function VerifyEmail() {
         )}
       </Box>
     </Container>
+    </AuthLayout>
   );
 }