fix: Docs for SignInPage, misc examples fixes

mui · Nov 12, 2024 · b4e00a0 · b4e00a0
1 parent 41fadd9
commit b4e00a0
Show file tree

Hide file tree

Showing 19 changed files with 1,222 additions and 539 deletions.
diff --git a/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx
@@ -3,10 +3,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
 import { useTheme } from '@mui/material/styles';
 
-const providers = [
-  { id: 'github', name: 'GitHub' },
-  { id: 'google', name: 'Google' },
-];
+const providers = [{ id: 'credentials', name: 'Credentials' }];
 // preview-start
 const BRANDING = {
   logo: (

diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.js b/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.js
@@ -7,6 +7,7 @@ import {
   TextField,
   InputAdornment,
   Link,
+  Alert,
   IconButton,
 } from '@mui/material';
 import AccountCircle from '@mui/icons-material/AccountCircle';
@@ -95,7 +96,7 @@ function CustomButton() {
       fullWidth
       sx={{ my: 2 }}
     >
-      Sign In
+      Log In
     </Button>
   );
 }
@@ -116,17 +117,31 @@ function ForgotPasswordLink() {
   );
 }
 
+function Title() {
+  return <h2 style={{ marginBottom: 8 }}>Login</h2>;
+}
+
+function Subtitle() {
+  return (
+    <Alert sx={{ mb: 2, px: 1, py: 0.25 }} severity="warning">
+      We are investigating an ongoing outage.
+    </Alert>
+  );
+}
+
 export default function SlotsSignIn() {
   const theme = useTheme();
   return (
     <AppProvider theme={theme}>
       <SignInPage
         signIn={(provider, formData) =>
           alert(
-            `Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}`,
+            `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}`,
           )
         }
         slots={{
+          title: Title,
+          subtitle: Subtitle,
           emailField: CustomEmailField,
           passwordField: CustomPasswordField,
           submitButton: CustomButton,

diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx b/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx
@@ -7,6 +7,7 @@ import {
   TextField,
   InputAdornment,
   Link,
+  Alert,
   IconButton,
 } from '@mui/material';
 import AccountCircle from '@mui/icons-material/AccountCircle';
@@ -95,7 +96,7 @@ function CustomButton() {
       fullWidth
       sx={{ my: 2 }}
     >
-      Sign In
+      Log In
     </Button>
   );
 }
@@ -116,17 +117,31 @@ function ForgotPasswordLink() {
   );
 }
 
+function Title() {
+  return <h2 style={{ marginBottom: 8 }}>Login</h2>;
+}
+
+function Subtitle() {
+  return (
+    <Alert sx={{ mb: 2, px: 1, py: 0.25 }} severity="warning">
+      We are investigating an ongoing outage.
+    </Alert>
+  );
+}
+
 export default function SlotsSignIn() {
   const theme = useTheme();
   return (
     <AppProvider theme={theme}>
       <SignInPage
         signIn={(provider, formData) =>
           alert(
-            `Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}`,
+            `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}`,
           )
         }
         slots={{
+          title: Title,
+          subtitle: Subtitle,
           emailField: CustomEmailField,
           passwordField: CustomPasswordField,
           submitButton: CustomButton,

diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx.preview
diff --git a/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js
@@ -3,7 +3,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { SignInPage } from '@toolpad/core/SignInPage';
 import { createTheme } from '@mui/material/styles';
 import { useColorSchemeShim } from 'docs/src/modules/components/ThemeContext';
-import { getDesignTokens } from './brandingTheme';
+import { getDesignTokens, inputsCustomizations } from './customTheme';
 
 const providers = [
   { id: 'github', name: 'GitHub' },
@@ -32,6 +32,9 @@ export default function ThemeSignInPage() {
       ...brandingDesignTokens.palette,
       mode: calculatedMode,
     },
+    components: {
+      ...inputsCustomizations,
+    },
   });
   // preview-end
 

diff --git a/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx
@@ -3,7 +3,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
 import { createTheme } from '@mui/material/styles';
 import { useColorSchemeShim } from 'docs/src/modules/components/ThemeContext';
-import { getDesignTokens } from './brandingTheme';
+import { getDesignTokens, inputsCustomizations } from './customTheme';
 
 const providers = [
   { id: 'github', name: 'GitHub' },
@@ -32,6 +32,9 @@ export default function ThemeSignInPage() {
       ...brandingDesignTokens.palette,
       mode: calculatedMode,
     },
+    components: {
+      ...inputsCustomizations,
+    },
   });
   // preview-end
 

diff --git a/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx.preview
@@ -4,6 +4,9 @@ const THEME = createTheme({
     ...brandingDesignTokens.palette,
     mode: calculatedMode,
   },
+  components: {
+    ...inputsCustomizations,
+  },
 });
 
 // ...