Browse Source

docs(dashboard): Add docs on customizing login

Michael Bromley 3 months ago
parent
commit
a8984d89e0

+ 66 - 0
docs/docs/guides/extending-the-dashboard/customizing-pages/customizing-login-page.md

@@ -0,0 +1,66 @@
+---
+title: 'Customizing the Login Page'
+---
+
+The login page can be customized with your own logo and messaging, as well as things like SSO login buttons.
+
+Reference documentation can be found at [DashboardLoginExtensions](/reference/dashboard/extensions-api/login#dashboardloginextensions).
+
+## Login page extension points
+
+```tsx title="index.tsx"
+import { defineDashboardExtension } from '@vendure/dashboard';
+
+import { useSsoLogin } from './use-sso-login';
+
+defineDashboardExtension({
+    login: {
+        logo: {
+            component: () => <div className="text-3xl text-muted-foreground">My Logo</div>,
+        },
+        beforeForm: {
+            component: () => <div className="text-muted-foreground">Welcome to My Brand</div>,
+        },
+        afterForm: {
+            component: () => {
+                const { handleLogin } = useSsoLogin();
+                return (
+                    <div>
+                        <Button variant="secondary" className="w-full" onClick={handleLogin}>
+                            Login with SSO
+                        </Button>
+                    </div>
+                );
+            },
+        },
+    },
+});
+```
+
+This will result in a login page like this:
+
+![Login page](./login-page.webp)
+
+## Fully custom login pages
+
+If you need even more control over the login page, you can also create an
+[unauthenticated route](/guides/extending-the-dashboard/navigation/#unauthenticated-routes) with a completely
+custom layout.
+
+```tsx title="index.tsx"
+import { defineDashboardExtension } from '@vendure/dashboard';
+
+defineDashboardExtension({
+    routes: [
+        {
+            path: '/custom-login',
+            component: () => (
+                <div className="flex h-screen items-center justify-center text-2xl">
+                    This custom login page
+                </div>
+            ),
+            authenticated: false,
+        },
+    ],
+});
+```

BIN
docs/docs/guides/extending-the-dashboard/customizing-pages/login-page.webp


+ 1 - 0
docs/sidebars.js

@@ -158,6 +158,7 @@ const sidebars = {
                     items: [
                         'guides/extending-the-dashboard/customizing-pages/customizing-list-pages',
                         'guides/extending-the-dashboard/customizing-pages/customizing-detail-pages',
+                        'guides/extending-the-dashboard/customizing-pages/customizing-login-page',
                         'guides/extending-the-dashboard/customizing-pages/page-blocks',
                         'guides/extending-the-dashboard/customizing-pages/action-bar-items',
                     ],