Add SignUpPage

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { SignInPage } from '@toolpad/core/SignInPage';
+
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Credentials' }];

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import type { AuthProvider } from '@toolpad/core/auth';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Credentials' }];

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { SignInPage } from '@toolpad/core/SignInPage';
+
 import { useTheme } from '@mui/material/styles';
 
 // preview-start

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import type { AuthProvider } from '@toolpad/core/auth';
 import { useTheme } from '@mui/material/styles';
 
 // preview-start

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SignInPage } from '@toolpad/core/SignInPage';
+
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { useTheme } from '@mui/material/styles';
 

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import {
+import { SignInPage } from '@toolpad/core/SignInPage';
+import type {
+  AuthResponse,
   AuthProvider,
-  SignInPage,
   SupportedAuthProvider,
-  AuthResponse,
-} from '@toolpad/core/SignInPage';
+} from '@toolpad/core/auth';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { useTheme } from '@mui/material/styles';
 

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { SignInPage } from '@toolpad/core/SignInPage';
+
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Email and password' }];

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

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import {
-  SignInPage,
-  type AuthProvider,
-  type AuthResponse,
-} from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import type { AuthResponse, AuthProvider } from '@toolpad/core/auth';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Email and password' }];

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { SignInPage } from '@toolpad/core/SignInPage';
+
 import { useTheme } from '@mui/material/styles';
 
 // preview-start

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

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import {
-  AuthResponse,
-  SignInPage,
-  type AuthProvider,
-} from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import type { AuthResponse, AuthProvider } from '@toolpad/core/auth';
 import { useTheme } from '@mui/material/styles';
 
 // preview-start

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { SignInPage } from '@toolpad/core/SignInPage';
+
 import { useTheme } from '@mui/material/styles';
 // preview-start
 const providers = [{ id: 'passkey', name: 'Passkey' }];

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage, AuthProvider } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import type { AuthProvider } from '@toolpad/core/auth';
 import { useTheme } from '@mui/material/styles';
 // preview-start
 const providers = [{ id: 'passkey', name: 'Passkey' }];

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

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import {
+  Box,
+  Button,
+  FormControl,
+  FormControlLabel,
+  Checkbox,
+  InputLabel,
+  OutlinedInput,
+  TextField,
+  InputAdornment,
+  Link,
+  Alert,
+  IconButton,
+} from '@mui/material';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { SignUpPage } from '@toolpad/core/SignUpPage';
+import { useTheme } from '@mui/material/styles';
+
+const providers = [{ id: 'credentials', name: 'Email and Password' }];
+
+function CustomEmailField() {
+  return (
+    <TextField
+      id="input-with-icon-textfield"
+      label="Email"
+      name="email"
+      type="email"
+      size="small"
+      required
+      fullWidth
+      slotProps={{
+        input: {
+          startAdornment: (
+            <InputAdornment position="start">
+              <AccountCircle fontSize="inherit" />
+            </InputAdornment>
+          ),
+        },
+      }}
+      variant="outlined"
+    />
+  );
+}
+
+function CustomPasswordField() {
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+  const handleMouseDownPassword = (event: React.MouseEvent) => {
+    event.preventDefault();
+  };
+
+  return (
+    <FormControl sx={{ my: 2 }} fullWidth variant="outlined">
+      <InputLabel size="small" htmlFor="outlined-adornment-password">
+        Password
+      </InputLabel>
+      <OutlinedInput
+        id="outlined-adornment-password"
+        type={showPassword ? 'text' : 'password'}
+        name="password"
+        size="small"
+        endAdornment={
+          <InputAdornment position="end">
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              onMouseDown={handleMouseDownPassword}
+              edge="end"
+              size="small"
+            >
+              {showPassword ? (
+                <VisibilityOff fontSize="inherit" />
+              ) : (
+                <Visibility fontSize="inherit" />
+              )}
+            </IconButton>
+          </InputAdornment>
+        }
+        label="Password"
+      />
+    </FormControl>
+  );
+}
+
+function CustomButton() {
+  return (
+    <Button
+      type="submit"
+      variant="outlined"
+      color="info"
+      size="small"
+      disableElevation
+      fullWidth
+      sx={{ my: 2 }}
+    >
+      Log In
+    </Button>
+  );
+}
+
+function SignInLink() {
+  return (
+    <Box display="flex" justifyContent="center">
+      <Link href="/" variant="body2">
+        Sign up
+      </Link>
+    </Box>
+  );
+}
+
+function ForgotPasswordLink() {
+  return (
+    <Link href="/" variant="body2">
+      Forgot password?
+    </Link>
+  );
+}
+
+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>
+  );
+}
+
+function AgreeWithTerms() {
+  return (
+    <FormControlLabel
+      control={
+        <Checkbox
+          name="tandc"
+          value="true"
+          color="primary"
+          sx={{ padding: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }}
+        />
+      }
+      slotProps={{
+        typography: {
+          fontSize: 14,
+        },
+      }}
+      color="textSecondary"
+      label="I agree with the T&C"
+    />
+  );
+}
+
+export default function SlotsSignIn() {
+  const theme = useTheme();
+  return (
+    <AppProvider theme={theme}>
+      <SignUpPage
+        signUp={(provider, formData) =>
+          alert(
+            `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}, and checkbox value: ${formData.get('tandc')}`,
+          )
+        }
+        slots={{
+          title: Title,
+          subtitle: Subtitle,
+          emailField: CustomEmailField,
+          passwordField: CustomPasswordField,
+          submitButton: CustomButton,
+          formFooter: FormFooter,
+          footer: SignInLink,
+        }}
+        providers={providers}
+      />
+    </AppProvider>
+  );
+}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 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, inputsCustomizations } from './customTheme';

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

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import {
-  SignInPage,
-  type AuthProvider,
-  type AuthResponse,
-} from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import type { AuthProvider, AuthResponse } from '@toolpad/core/auth';
 import { createTheme } from '@mui/material/styles';
 import { useColorSchemeShim } from 'docs/src/modules/components/ThemeContext';
 import { getDesignTokens, inputsCustomizations } from './customTheme';

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

@@ -157,7 +157,8 @@ To have a fully built "Sign in with GitHub" page appear at the `/auth/signin` ro
 ```tsx title="./app/auth/signin/page.tsx"
 // ...
 import * as React from 'react';
-import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import type { AuthProvider } from '@toolpad/core/auth';
 import { AuthError } from 'next-auth';
 import { providerMap, signIn } from '../../../auth';
 

docs/data/toolpad/core/components/sign-up-page/BrandingSignUpPage.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { SignUpPage } from '@toolpad/core/SignUpPage';
+
+import { useTheme } from '@mui/material/styles';
+
+const providers = [{ id: 'credentials', name: 'Credentials' }];
+// preview-start
+const BRANDING = {
+  logo: (
+    <img
+      src="https://mui.com/static/logo.svg"
+      alt="MUI logo"
+      style={{ height: 24 }}
+    />
+  ),
+  title: 'MUI',
+};
+// preview-end
+
+const signUp = async (provider) => {
+  const promise = new Promise((resolve) => {
+    setTimeout(() => {
+      console.log(`Sign up with ${provider.id}`);
+      resolve();
+    }, 500);
+  });
+  return promise;
+};
+
+export default function BrandingSignInPage() {
+  const theme = useTheme();
+  return (
+    // preview-start
+    <AppProvider branding={BRANDING} theme={theme}>
+      <SignUpPage
+        signUp={signUp}
+        providers={providers}
+        slotProps={{ emailField: { autoFocus: false } }}
+      />
+    </AppProvider>
+    // preview-end
+  );
+}