feat: auth pages layout (#2042)

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

apps/client/src/features/auth/components/auth-layout.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Group, Text } from "@mantine/core";
+import classes from "./auth.module.css";
+
+type AuthLayoutProps = {
+  children: React.ReactNode;
+};
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <>
+      <Group justify="center" gap={8} className={classes.logo}>
+        <img
+          src="/icons/favicon-32x32.png"
+          alt="Docmost"
+          width={22}
+          height={22}
+        />
+        <Text size="28px" fw={700} style={{ userSelect: "none" }}>
+          Docmost
+        </Text>
+      </Group>
+      {children}
+    </>
+  );
+}

apps/client/src/features/auth/components/auth.module.css

@@ -1,12 +1,20 @@
+.logo {
+    margin-top: 80px;
+
+    @media (max-width: $mantine-breakpoint-sm) {
+        margin-top: 30px;
+    }
+}
+
 .container {
     box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 45px 4px;
     border-radius: 4px;
     background: light-dark(var(--mantine-color-body), rgba(0, 0, 0, 0.1));
-    margin-top: 150px;
+    margin-top: 40px;
     margin-bottom: 20px;
 
     @media (max-width: $mantine-breakpoint-sm) {
-        margin-top: 50px;
+        margin-top: 20px;
         margin-bottom: 20px;
     }
 }

apps/client/src/features/auth/components/forgot-password-form.tsx

@@ -7,6 +7,7 @@ import { Box, Button, Container, Text, TextInput, Title } from "@mantine/core";
 import classes from "./auth.module.css";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   email: z
@@ -35,6 +36,7 @@ export function ForgotPasswordForm() {
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -69,5 +71,6 @@ export function ForgotPasswordForm() {
         </form>
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/invite-sign-up-form.tsx

@@ -19,6 +19,7 @@ import { useGetInvitationQuery } from "@/features/workspace/queries/workspace-qu
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
 import SsoLogin from "@/ee/components/sso-login.tsx";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   name: z.string().trim().min(1),
@@ -66,6 +67,7 @@ export function InviteSignUpForm() {
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -111,5 +113,6 @@ export function InviteSignUpForm() {
         )}
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/login-form.tsx

@@ -21,6 +21,7 @@ import SsoLogin from "@/ee/components/sso-login.tsx";
 import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
 import { Error404 } from "@/components/ui/error-404.tsx";
 import React from "react";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   email: z
@@ -62,52 +63,54 @@ export function LoginForm() {
   }
 
   return (
-    <Container size={420} className={classes.container}>
-      <Box p="xl" className={classes.containerBox}>
-        <Title order={2} ta="center" fw={500} mb="md">
-          {t("Login")}
-        </Title>
+    <AuthLayout>
+      <Container size={420} className={classes.container}>
+        <Box p="xl" className={classes.containerBox}>
+          <Title order={2} ta="center" fw={500} mb="md">
+            {t("Login")}
+          </Title>
 
-        <SsoLogin />
+          <SsoLogin />
 
-        {!data?.enforceSso && (
-          <>
-            <form onSubmit={form.onSubmit(onSubmit)}>
-              <TextInput
-                id="email"
-                type="email"
-                label={t("Email")}
-                placeholder="email@example.com"
-                variant="filled"
-                {...form.getInputProps("email")}
-              />
+          {!data?.enforceSso && (
+            <>
+              <form onSubmit={form.onSubmit(onSubmit)}>
+                <TextInput
+                  id="email"
+                  type="email"
+                  label={t("Email")}
+                  placeholder="email@example.com"
+                  variant="filled"
+                  {...form.getInputProps("email")}
+                />
 
-              <PasswordInput
-                label={t("Password")}
-                placeholder={t("Your password")}
-                variant="filled"
-                mt="md"
-                {...form.getInputProps("password")}
-              />
+                <PasswordInput
+                  label={t("Password")}
+                  placeholder={t("Your password")}
+                  variant="filled"
+                  mt="md"
+                  {...form.getInputProps("password")}
+                />
 
-              <Group justify="flex-end" mt="sm">
-                <Anchor
-                  to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
-                  component={Link}
-                  underline="never"
-                  size="sm"
-                >
-                  {t("Forgot your password?")}
-                </Anchor>
-              </Group>
+                <Group justify="flex-end" mt="sm">
+                  <Anchor
+                    to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
+                    component={Link}
+                    underline="never"
+                    size="sm"
+                  >
+                    {t("Forgot your password?")}
+                  </Anchor>
+                </Group>
 
-              <Button type="submit" fullWidth mt="md" loading={isLoading}>
-                {t("Sign In")}
-              </Button>
-            </form>
-          </>
-        )}
-      </Box>
-    </Container>
+                <Button type="submit" fullWidth mt="md" loading={isLoading}>
+                  {t("Sign In")}
+                </Button>
+              </form>
+            </>
+          )}
+        </Box>
+      </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/password-reset-form.tsx

@@ -6,6 +6,7 @@ import { Box, Button, Container, PasswordInput, Title } from "@mantine/core";
 import classes from "./auth.module.css";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   newPassword: z
@@ -38,6 +39,7 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -59,5 +61,6 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
         </form>
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/setup-workspace-form.tsx

@@ -19,6 +19,7 @@ import SsoCloudSignup from "@/ee/components/sso-cloud-signup.tsx";
 import { isCloud } from "@/lib/config.ts";
 import { Link } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   workspaceName: z.string().trim().max(50).optional(),
@@ -50,7 +51,7 @@ export function SetupWorkspaceForm() {
   }
 
   return (
-    <div>
+    <AuthLayout>
       <Container size={420} className={classes.container}>
         <Box p="xl" className={classes.containerBox}>
           <Title order={2} ta="center" fw={500} mb="md">
@@ -117,6 +118,6 @@ export function SetupWorkspaceForm() {
           </Anchor>
         </Text>
       )}
-    </div>
+    </AuthLayout>
   );
 }