[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": {}
 }