[core] Polish SignInPage and docs (#3935)

docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.js

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { AppProvider, SignInPage } from '@toolpad/core';
-import { createTheme } from '@mui/material/styles';
-import { useColorSchemeShim } from 'docs/src/modules/components/ThemeContext';
-import { getDesignTokens } from './brandingTheme';
 
 const providers = [
   { id: 'github', name: 'GitHub' },
   { id: 'google', name: 'Google' },
-  { id: 'credentials', name: 'Email and Password' },
 ];
 
 // preview-start
@@ -34,20 +30,9 @@ const signIn = async (provider) => {
 };
 
 export default function BrandingSignInPage() {
-  const { mode, systemMode } = useColorSchemeShim();
-  const calculatedMode = (mode === 'system' ? systemMode : mode) ?? 'light';
-  const brandingDesignTokens = getDesignTokens(calculatedMode);
-  const THEME = createTheme({
-    ...brandingDesignTokens,
-    palette: {
-      ...brandingDesignTokens.palette,
-      mode: calculatedMode,
-    },
-  });
-
   return (
     // preview-start
-    <AppProvider branding={BRANDING} theme={THEME}>
+    <AppProvider branding={BRANDING}>
       <SignInPage signIn={signIn} providers={providers} />
     </AppProvider>
     // preview-end

docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { AuthProvider, AppProvider, SignInPage } from '@toolpad/core';
-import { createTheme } from '@mui/material/styles';
-import { useColorSchemeShim } from 'docs/src/modules/components/ThemeContext';
-import { getDesignTokens } from './brandingTheme';
 
 const providers = [
   { id: 'github', name: 'GitHub' },
   { id: 'google', name: 'Google' },
-  { id: 'credentials', name: 'Email and Password' },
 ];
 // preview-start
 const BRANDING = {
@@ -33,20 +29,9 @@ const signIn: (provider: AuthProvider) => void = async (provider) => {
 };
 
 export default function BrandingSignInPage() {
-  const { mode, systemMode } = useColorSchemeShim();
-  const calculatedMode = (mode === 'system' ? systemMode : mode) ?? 'light';
-  const brandingDesignTokens = getDesignTokens(calculatedMode);
-  const THEME = createTheme({
-    ...brandingDesignTokens,
-    palette: {
-      ...brandingDesignTokens.palette,
-      mode: calculatedMode,
-    },
-  });
-
   return (
     // preview-start
-    <AppProvider branding={BRANDING} theme={THEME}>
+    <AppProvider branding={BRANDING}>
       <SignInPage signIn={signIn} providers={providers} />
     </AppProvider>
     // preview-end

docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx.preview

@@ -11,6 +11,6 @@ const BRANDING = {
 
 // ...
 
-<AppProvider branding={BRANDING} theme={THEME}>
+<AppProvider branding={BRANDING}>
   <SignInPage signIn={signIn} providers={providers} />
 </AppProvider>

docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { AppProvider, SignInPage } from '@toolpad/core';
+import { createTheme } from '@mui/material/styles';
+import { useColorSchemeShim } from 'docs/src/modules/components/ThemeContext';
+import { getDesignTokens } from './brandingTheme';
+
+const providers = [
+  { id: 'github', name: 'GitHub' },
+  { id: 'google', name: 'Google' },
+  { id: 'credentials', name: 'Email and Password' },
+];
+
+const signIn = async (provider) => {
+  const promise = new Promise((resolve) => {
+    setTimeout(() => {
+      console.log(`Sign in with ${provider.id}`);
+      resolve();
+    }, 500);
+  });
+  return promise;
+};
+
+export default function ThemeSignInPage() {
+  const { mode, systemMode } = useColorSchemeShim();
+  const calculatedMode = (mode === 'system' ? systemMode : mode) ?? 'light';
+  const brandingDesignTokens = getDesignTokens(calculatedMode);
+  // preview-start
+  const THEME = createTheme({
+    ...brandingDesignTokens,
+    palette: {
+      ...brandingDesignTokens.palette,
+      mode: calculatedMode,
+    },
+  });
+  // preview-end
+
+  return (
+    // preview-start
+    <AppProvider theme={THEME}>
+      <SignInPage signIn={signIn} providers={providers} />
+    </AppProvider>
+    // preview-end
+  );
+}

docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { AuthProvider, AppProvider, SignInPage } from '@toolpad/core';
+import { createTheme } from '@mui/material/styles';
+import { useColorSchemeShim } from 'docs/src/modules/components/ThemeContext';
+import { getDesignTokens } from './brandingTheme';
+
+const providers = [
+  { id: 'github', name: 'GitHub' },
+  { id: 'google', name: 'Google' },
+  { id: 'credentials', name: 'Email and Password' },
+];
+
+const signIn: (provider: AuthProvider) => void = async (provider) => {
+  const promise = new Promise<void>((resolve) => {
+    setTimeout(() => {
+      console.log(`Sign in with ${provider.id}`);
+      resolve();
+    }, 500);
+  });
+  return promise;
+};
+
+export default function ThemeSignInPage() {
+  const { mode, systemMode } = useColorSchemeShim();
+  const calculatedMode = (mode === 'system' ? systemMode : mode) ?? 'light';
+  const brandingDesignTokens = getDesignTokens(calculatedMode);
+  // preview-start
+  const THEME = createTheme({
+    ...brandingDesignTokens,
+    palette: {
+      ...brandingDesignTokens.palette,
+      mode: calculatedMode,
+    },
+  });
+  // preview-end
+
+  return (
+    // preview-start
+    <AppProvider theme={THEME}>
+      <SignInPage signIn={signIn} providers={providers} />
+    </AppProvider>
+    // preview-end
+  );
+}

docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx.preview

@@ -0,0 +1,13 @@
+const THEME = createTheme({
+  ...brandingDesignTokens,
+  palette: {
+    ...brandingDesignTokens.palette,
+    mode: calculatedMode,
+  },
+});
+
+// ...
+
+<AppProvider theme={THEME}>
+  <SignInPage signIn={signIn} providers={providers} />
+</AppProvider>

docs/data/toolpad/core/components/sign-in-page/sign-in-page.md

@@ -132,11 +132,17 @@ If you're using the default [Next.js app directory example](https://github.com/m
 
 ## Customization
 
-### Theme and Branding
+### Branding
 
-Through the `branding` and `theme` props in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/), the `SignInPage` can be customized to match your own styles.
+You can add your own branding elements to the `SignInPage` through the `branding` prop in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/)
 
-{{"demo": "BrandingSignInPage.js", "iframe": true, "height": 700 }}
+{{"demo": "BrandingSignInPage.js", "iframe": true, "height": 360 }}
+
+### Theme
+
+Through the `theme` prop in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/), the `SignInPage` can be deeply customized to match any theme
+
+{{"demo": "ThemeSignInPage.js", "iframe": true, "height": 700 }}
 
 ### Components
 

docs/pages/toolpad/core/api/sign-in-page.json

@@ -15,9 +15,17 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ emailField?: object, passwordField?: object, submitButton?: object }"
+        "description": "{ emailField?: object, forgotPasswordLink?: object, passwordField?: object, signUpLink?: object, submitButton?: object }"
       },
       "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ emailField?: elementType, forgotPasswordLink?: elementType, passwordField?: elementType, signUpLink?: elementType, submitButton?: elementType }"
+      },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
     }
   },
   "name": "SignInPage",

docs/translations/api-docs/sign-in-page/sign-in-page.json

@@ -10,9 +10,8 @@
         "callbackUrl": "The URL to redirect to after signing in."
       }
     },
-    "slotProps": {
-      "description": "Props to pass to the constituent components in the credentials form"
-    }
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." }
   },
   "classDescriptions": {}
 }