Add SignUpPage component and improve folder structure

docs/data/toolpad/core/all-components/all-components.md

@@ -8,3 +8,4 @@
 - [Dashboard Layout](/toolpad/core/react-dashboard-layout/)
 - [Page Container](/toolpad/core/react-page-container/)
 - [Sign-in Page](/toolpad/core/react-sign-in-page/)
+- [Sign-up Page](/toolpad/core/react-sign-up-page/)

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 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,6 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
+import { SignInPage, type AuthProvider } from '@toolpad/core/AuthPage';
 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,6 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 import { useTheme } from '@mui/material/styles';
 
 // preview-start

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 import { hiIN } from '@toolpad/core/locales';
 
 const providers = [

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

@@ -4,7 +4,7 @@ import {
   SignInPage,
   type AuthProvider,
   type AuthResponse,
-} from '@toolpad/core/SignInPage';
+} from '@toolpad/core/AuthPage';
 import { hiIN } from '@toolpad/core/locales';
 
 const providers = [

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

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

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

@@ -4,7 +4,7 @@ import {
   SignInPage,
   SupportedAuthProvider,
   AuthResponse,
-} from '@toolpad/core/SignInPage';
+} from '@toolpad/core/AuthPage';
 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,6 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Email and password' }];

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

@@ -4,7 +4,7 @@ import {
   SignInPage,
   type AuthProvider,
   type AuthResponse,
-} from '@toolpad/core/SignInPage';
+} from '@toolpad/core/AuthPage';
 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,6 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 import { useTheme } from '@mui/material/styles';
 
 // preview-start

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

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

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

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

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [

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

@@ -16,7 +16,7 @@ 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 { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Email and Password' }];

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

@@ -16,7 +16,7 @@ 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 { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Email and Password' }];

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 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

@@ -4,7 +4,7 @@ import {
   SignInPage,
   type AuthProvider,
   type AuthResponse,
-} from '@toolpad/core/SignInPage';
+} from '@toolpad/core/AuthPage';
 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

@@ -18,7 +18,7 @@
 
 ```tsx
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage } from '@toolpad/core/AuthPage';
 
 export default function App() {
   return (
@@ -36,6 +36,12 @@
 
 ## OAuth
 
+:::warning
+
+This function works similarly to the sign-up flow　to authenticate users, but is focused on signing in existing accounts rather than creating new ones. For details on the sign-up flow, see the [Sign-up Page documentation](/toolpad/core/components/sign-up-page/).
+
+:::
+
 The `SignInPage` component can be set up with an OAuth provider by passing in a list of providers in the `providers` prop, along with a `signIn` function that accepts the `provider` as a parameter.
 
 {{"demo": "OAuthSignInPage.js", "iframe": true, "height": 600}}
@@ -177,7 +183,7 @@
 ```tsx title="./app/auth/signin/page.tsx"
 // ...
 import * as React from 'react';
-import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
+import { SignInPage, type AuthProvider } from '@toolpad/core/AuthPage';
 import { AuthError } from 'next-auth';
 import { providerMap, signIn } from '../../../auth';
 
@@ -294,6 +300,12 @@
 
 The `SignInPage` component has versions with different layouts for authentication - one column, two column and others such. The APIs of these components are identical. This is in progress.
 
+### 🚧 SignUp
+
+A dedicated `SignUpPage` component is planned to provide a seamless registration experience for new users. This will support multiple authentication providers and allow for custom fields, validation, and branding, similar to the `SignInPage`. Stay tuned for updates and check the [Sign-up Page documentation](/toolpad/core/components/sign-up-page/) for the latest information.
+
 ## 🚧 Other authentication flows
 
-Besides the `SignInPage` , the team is planning work on several other components that enable new workflows such as [sign up](https://github.com/mui/toolpad/issues/4068) and [password reset](https://github.com/mui/toolpad/issues/4265).
+Additional authentication flows such as password reset, multi-factor authentication (MFA), and account recovery are on the roadmap. These features aim to enhance security and user experience. Follow the [Toolpad GitHub issues](https://github.com/mui/toolpad/issues) for progress and upcoming releases.
+
+Besides the `SignInPage` , the team is planning work on several other components that enable new workflows such as [password reset](https://github.com/mui/toolpad/issues/4265).

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { SignUpPage } from '@toolpad/core/AuthPage';
+import { useTheme } from '@mui/material/styles';
+
+// preview-start
+const providers = [{ id: 'credentials', name: 'Email and Password' }];
+// preview-end
+
+const signIn = async (provider, formData) => {
+  const promise = new Promise((resolve) => {
+    setTimeout(() => {
+      alert(
+        `Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}`,
+      );
+      resolve();
+    }, 300);
+  });
+  return promise;
+};
+
+export default function CredentialsSignUpPage() {
+  const theme = useTheme();
+  return (
+    // preview-start
+    <AppProvider theme={theme}>
+      <SignUpPage
+        signUp={signIn}
+        providers={providers}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
+      />
+    </AppProvider>
+    // preview-end
+  );
+}

docs/data/toolpad/core/components/sign-up-page/CredentialsSignUpPage.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { SignUpPage, type AuthProvider } from '@toolpad/core/AuthPage';
+import { useTheme } from '@mui/material/styles';
+
+// preview-start
+const providers = [{ id: 'credentials', name: 'Email and Password' }];
+// preview-end
+
+const signIn: (provider: AuthProvider, formData: FormData) => void = async (
+  provider,
+  formData,
+) => {
+  const promise = new Promise<void>((resolve) => {
+    setTimeout(() => {
+      alert(
+        `Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}`,
+      );
+      resolve();
+    }, 300);
+  });
+  return promise;
+};
+
+export default function CredentialsSignUpPage() {
+  const theme = useTheme();
+  return (
+    // preview-start
+    <AppProvider theme={theme}>
+      <SignUpPage
+        signUp={signIn}
+        providers={providers}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
+      />
+    </AppProvider>
+    // preview-end
+  );
+}

docs/data/toolpad/core/components/sign-up-page/CredentialsSignUpPage.tsx.preview

@@ -0,0 +1,11 @@
+const providers = [{ id: 'credentials', name: 'Email and Password' }];
+
+// ...
+
+<AppProvider theme={theme}>
+  <SignUpPage
+    signUp={signIn}
+    providers={providers}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
+  />
+</AppProvider>

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { SignUpPage } from '@toolpad/core/AuthPage';
+import { useTheme } from '@mui/material/styles';
+
+const providers = [{ id: 'credentials', name: 'Email and password' }];
+
+const signUp = async (provider, formData) => {
+  const promise = new Promise((resolve) => {
+    setTimeout(() => {
+      const email = formData?.get('email');
+      const password = formData?.get('password');
+      alert(
+        `Signing up with "${provider.name}" and credentials: ${email}, ${password}`,
+      );
+      // preview-start
+      resolve({
+        error: 'Invalid credentials.',
+      });
+      // preview-end
+    }, 300);
+  });
+  return promise;
+};
+
+export default function NotificationsSignUpPageError() {
+  const theme = useTheme();
+  return (
+    // preview-start
+    <AppProvider theme={theme}>
+      <SignUpPage
+        signUp={signUp}
+        providers={providers}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
+      />
+    </AppProvider>
+    // preview-end
+  );
+}

docs/data/toolpad/core/components/sign-up-page/NotificationsSignUpPageError.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import {
+  SignUpPage,
+  type AuthProvider,
+  type SignUpActionResponse,
+} from '@toolpad/core/AuthPage';
+import { useTheme } from '@mui/material/styles';
+
+const providers = [{ id: 'credentials', name: 'Email and password' }];
+
+const signUp: (
+  provider: AuthProvider,
+  formData?: FormData,
+) => Promise<SignUpActionResponse> | void = async (provider, formData) => {
+  const promise = new Promise<SignUpActionResponse>((resolve) => {
+    setTimeout(() => {
+      const email = formData?.get('email');
+      const password = formData?.get('password');
+      alert(
+        `Signing up with "${provider.name}" and credentials: ${email}, ${password}`,
+      );
+      // preview-start
+      resolve({
+        error: 'Invalid credentials.',
+      });
+      // preview-end
+    }, 300);
+  });
+  return promise;
+};
+
+export default function NotificationsSignUpPageError() {
+  const theme = useTheme();
+  return (
+    // preview-start
+    <AppProvider theme={theme}>
+      <SignUpPage
+        signUp={signUp}
+        providers={providers}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
+      />
+    </AppProvider>
+    // preview-end
+  );
+}