[feat] Add form and oauthButton slot props (#4674)

mui · Feb 24, 2025 · b6bb68e · b6bb68e
1 parent 1ddaa35
commit b6bb68e
Show file tree

Hide file tree

Showing 20 changed files with 28 additions and 16 deletions.
diff --git a/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.js
@@ -35,7 +35,7 @@ export default function BrandingSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx
@@ -35,7 +35,7 @@ export default function BrandingSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx.preview
@@ -15,6 +15,6 @@ const BRANDING = {
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.js
@@ -27,7 +27,7 @@ export default function CredentialsSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx
@@ -30,7 +30,7 @@ export default function CredentialsSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx.preview
@@ -6,6 +6,6 @@ const providers = [{ id: 'credentials', name: 'Email and Password' }];
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.js
@@ -27,7 +27,7 @@ export default function MagicLinkAlertSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx
@@ -36,7 +36,7 @@ export default function MagicLinkAlertSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx.preview
@@ -8,6 +8,6 @@ resolve({
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.js b/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.js
@@ -32,7 +32,7 @@ export default function NotificationsSignInPageError() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx b/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx
@@ -39,7 +39,7 @@ export default function NotificationsSignInPageError() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx.preview
@@ -9,6 +9,6 @@ resolve({
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.js b/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.js
@@ -24,7 +24,7 @@ export default function PasskeySignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx
@@ -24,7 +24,7 @@ export default function PasskeySignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx.preview
@@ -6,6 +6,6 @@ const providers = [{ id: 'passkey', name: 'Passkey' }];
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js
@@ -44,6 +44,7 @@ export default function ThemeSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
+        slotProps={{ form: { noValidate: true } }}
         sx={{
           '& form > .MuiStack-root': {
             marginTop: '2rem',

diff --git a/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx
@@ -50,6 +50,7 @@ export default function ThemeSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
+        slotProps={{ form: { noValidate: true } }}
         sx={{
           '& form > .MuiStack-root': {
             marginTop: '2rem',

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
@@ -15,6 +15,7 @@ const THEME = createTheme({
   <SignInPage
     signIn={signIn}
     providers={providers}
+    slotProps={{ form: { noValidate: true } }}
     sx={{
       '& form > .MuiStack-root': {
         marginTop: '2rem',

diff --git a/docs/pages/toolpad/core/api/sign-in-page.json b/docs/pages/toolpad/core/api/sign-in-page.json
@@ -16,7 +16,7 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ emailField?: object, forgotPasswordLink?: object, passwordField?: object, rememberMe?: object, signUpLink?: object, submitButton?: object }"
+        "description": "{ emailField?: object, forgotPasswordLink?: object, form?: object, oAuthButton?: object, passwordField?: object, rememberMe?: object, signUpLink?: object, submitButton?: object }"
       },
       "default": "{}"
     },

diff --git a/packages/toolpad-core/src/SignInPage/SignInPage.tsx b/packages/toolpad-core/src/SignInPage/SignInPage.tsx
@@ -268,6 +268,8 @@ export interface SignInPageProps {
     forgotPasswordLink?: LinkProps;
     signUpLink?: LinkProps;
     rememberMe?: Partial<FormControlLabelProps>;
+    form?: Partial<React.FormHTMLAttributes<HTMLFormElement>>;
+    oAuthButton?: LoadingButtonProps;
   };
   /**
    * The prop used to customize the styles on the `SignInPage` container
@@ -408,6 +410,7 @@ function SignInPage(props: SignInPageProps) {
                           error: oauthResponse?.error,
                         }));
                       }}
+                      {...slotProps?.form}
                     >
                       <Button
                         key={provider.id}
@@ -424,6 +427,7 @@ function SignInPage(props: SignInPageProps) {
                         sx={{
                           textTransform: 'capitalize',
                         }}
+                        {...slotProps?.oAuthButton}
                       >
                         <span>
                           {localeText.oauthSignInTitle ||
@@ -463,6 +467,7 @@ function SignInPage(props: SignInPageProps) {
                       error: passkeyResponse?.error,
                     }));
                   }}
+                  {...slotProps?.form}
                 >
                   {slots?.emailField ? (
                     <slots.emailField {...slotProps?.emailField} />
@@ -541,6 +546,7 @@ function SignInPage(props: SignInPageProps) {
                       success: emailResponse?.success,
                     }));
                   }}
+                  {...slotProps?.form}
                 >
                   {slots?.emailField ? (
                     <slots.emailField {...slotProps?.emailField} />
@@ -617,6 +623,7 @@ function SignInPage(props: SignInPageProps) {
                       error: credentialsResponse?.error,
                     }));
                   }}
+                  {...slotProps?.form}
                 >
                   <Stack direction="column" spacing={2} sx={{ mb: 2 }}>
                     {slots?.emailField ? (
@@ -762,6 +769,8 @@ SignInPage.propTypes /* remove-proptypes */ = {
   slotProps: PropTypes.shape({
     emailField: PropTypes.object,
     forgotPasswordLink: PropTypes.object,
+    form: PropTypes.object,
+    oAuthButton: PropTypes.object,
     passwordField: PropTypes.object,
     rememberMe: PropTypes.object,
     signUpLink: PropTypes.object,