feat: unify authentication pages

apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx

@@ -1,13 +1,13 @@
 import { notFound } from "next/navigation";
-import { Card, Center, Stack, Text, Title } from "@mantine/core";
+import { IconUserPlus } from "@tabler/icons-react";
 
 import { auth } from "@homarr/auth/next";
 import { isProviderEnabled } from "@homarr/auth/server";
 import { and, db, eq } from "@homarr/db";
 import { invites } from "@homarr/db/schema";
+import { OnboardingAuthShell } from "@homarr/onboarding";
 import { getScopedI18n } from "@homarr/translation/server";
 
-import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
 import { RegistrationForm } from "./_registration-form";
 
 interface InviteUsagePageProps {
@@ -48,25 +48,14 @@ export default async function InviteUsagePage(props: InviteUsagePageProps) {
   const t = await getScopedI18n("user.page.invite");
 
   return (
-    <Center>
-      <Stack align="center" mt="xl">
-        <HomarrLogoWithTitle size="lg" />
-        <Stack gap={6} align="center">
-          <Title order={3} fw={400} ta="center">
-            {t("title")}
-          </Title>
-          <Text size="sm" c="gray.5" ta="center">
-            {t("subtitle")}
-          </Text>
-        </Stack>
-        <Card w={64 * 6} maw="90vw">
-          <RegistrationForm invite={invite} />
-        </Card>
-        <Text size="xs" c="gray.5" ta="center">
-          {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
-          {t("description", { username: invite.creator.name! })}
-        </Text>
-      </Stack>
-    </Center>
+    <OnboardingAuthShell
+      title={t("title")}
+      description={t("subtitle")}
+      icon={<IconUserPlus size={24} />}
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      footer={t("description", { username: invite.creator.name! })}
+    >
+      <RegistrationForm invite={invite} />
+    </OnboardingAuthShell>
   );
 }

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -1,15 +1,15 @@
 import { redirect } from "next/navigation";
-import { Alert, Card, Center, Code, Stack, Text, Title } from "@mantine/core";
+import { Alert, Code, Text } from "@mantine/core";
 import { IconLogin } from "@tabler/icons-react";
 
 import { env } from "@homarr/auth/env";
 import { auth } from "@homarr/auth/next";
+import { OnboardingAuthShell } from "@homarr/onboarding";
 import { getScopedI18n } from "@homarr/translation/server";
 import { sanitizeRedirectionUrl } from "@homarr/validation/redirection-url";
 
 import { env as appEnv } from "~/env";
 
-import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
 import { LoginForm } from "./_login-form";
 
 interface LoginProps {
@@ -29,33 +29,20 @@ export default async function Login(props: LoginProps) {
   const t = await getScopedI18n("user.page.login");
 
   return (
-    <Center>
-      <Stack align="center" mt="xl">
-        <HomarrLogoWithTitle size="lg" />
-        <Stack gap={6} align="center">
-          <Title order={3} fw={400} ta="center">
-            {t("title")}
-          </Title>
-          <Text size="sm" c="gray.5" ta="center">
-            {t("subtitle")}
+    <OnboardingAuthShell title={t("title")} description={t("subtitle")} icon={<IconLogin size={24} />}>
+      {appEnv.DEMO_MODE ? (
+        <Alert icon={<IconLogin size={18} />} color="blue" variant="light">
+          <Text size="sm" fw={500}>
+            Demo mode is enabled. Sign in with username <Code>demo</Code> and password <Code>demo</Code>
           </Text>
-        </Stack>
-        {appEnv.DEMO_MODE && (
-          <Alert icon={<IconLogin size={18} />} color="blue" variant="light" w={64 * 6} maw="90vw">
-            <Text size="sm" fw={500}>
-              Demo mode is enabled. Sign in with username <Code>demo</Code> and password <Code>demo</Code>
-            </Text>
-          </Alert>
-        )}
-        <Card w={64 * 6} maw="90vw">
-          <LoginForm
-            providers={env.AUTH_PROVIDERS}
-            oidcClientName={env.AUTH_OIDC_CLIENT_NAME}
-            isOidcAutoLoginEnabled={env.AUTH_OIDC_AUTO_LOGIN}
-            callbackUrl={searchParams.callbackUrl ?? "/"}
-          />
-        </Card>
-      </Stack>
-    </Center>
+        </Alert>
+      ) : null}
+      <LoginForm
+        providers={env.AUTH_PROVIDERS}
+        oidcClientName={env.AUTH_OIDC_CLIENT_NAME}
+        isOidcAutoLoginEnabled={env.AUTH_OIDC_AUTO_LOGIN}
+        callbackUrl={searchParams.callbackUrl ?? "/"}
+      />
+    </OnboardingAuthShell>
   );
 }

apps/nextjs/src/app/[locale]/layout.tsx

@@ -11,6 +11,7 @@ import "~/styles/color-scheme.scss";
 import "~/styles/scroll-area.scss";
 
 import { notFound } from "next/navigation";
+import { ColorSchemeScript } from "@mantine/core";
 import type { DayOfWeek } from "@mantine/dates";
 import { NextIntlClientProvider } from "next-intl";
 
@@ -161,17 +162,16 @@ export default async function Layout(props: {
   ]);
 
   return (
-    // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
     <html
       lang={locale}
       dir={direction}
-      data-mantine-color-scheme={colorScheme}
       style={{
         backgroundColor: colorScheme === "dark" ? "#242424" : colorScheme === "auto" ? undefined : "#fff",
       }}
       suppressHydrationWarning
     >
       <head>
+        <ColorSchemeScript defaultColorScheme={colorScheme} />
         <meta name="homarr-website-url" content={publicUrls.homarrWebsiteUrl} />
         {session ? (
           <>