diff --git a/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.js index 801f21ff7af..536b3b76da4 100644 --- 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() { // 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 index 61fcf280ade..f3d758e7263 100644 --- 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() { // 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 index 73da124c69b..3e0e5aa6efe 100644 --- 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 = { \ No newline at end of file diff --git a/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.js index 379664289ff..01d5cfe3684 100644 --- 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() { // 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 index 7ebe5d41a12..07e0fb1b9c4 100644 --- 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() { // 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 index 636373e5404..16fd91f00e2 100644 --- 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' }]; \ No newline at end of file diff --git a/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.js index f9c46a79762..73800c4d07b 100644 --- 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() { // 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 index 1097b0bda9f..f7e674890a2 100644 --- 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() { // 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 index 9de4b1c4e93..0c70a80c4b8 100644 --- 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({ \ No newline at end of file diff --git a/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.js b/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.js index 326abcc3c64..575370713a5 100644 --- 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() { // 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 index 8035b294386..373d8f60c03 100644 --- 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() { // 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 index 30677d0d20c..e6e444e2beb 100644 --- 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({ \ No newline at end of file diff --git a/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.js b/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.js index f15f1cceded..ec39c35ddda 100644 --- 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() { // 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 index c69a3758ecf..352bdc93677 100644 --- 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() { // 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 index 5c2239d907e..6d8ac519206 100644 --- 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' }]; \ No newline at end of file diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.js b/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.js index 4a4c1a833f9..17b1be0ee3a 100644 --- a/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.js +++ b/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Checkbox from '@mui/material/Checkbox'; import { AppProvider } from '@toolpad/core/AppProvider'; -import { SignInPage } from '@toolpad/core/SignInPage'; +import { Remember, SignInPage } from '@toolpad/core/SignInPage'; import { useTheme } from '@mui/material/styles'; const providers = [{ id: 'credentials', name: 'Email and Password' }]; @@ -16,7 +16,9 @@ export default function SlotPropsSignIn() { `Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')} and checkbox value: ${formData.get('tandc')}`, ) } + slots={{ rememberMe: Remember }} slotProps={{ + form: { noValidate: true }, emailField: { variant: 'standard', autoFocus: false }, passwordField: { variant: 'standard' }, submitButton: { variant: 'outlined' }, @@ -26,7 +28,7 @@ export default function SlotPropsSignIn() { name="tandc" value="true" color="primary" - sx={{ padding: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }} + sx={{ py: 1, px: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }} /> ), color: 'textSecondary', diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.tsx b/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.tsx index 4a4c1a833f9..17b1be0ee3a 100644 --- a/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.tsx +++ b/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Checkbox from '@mui/material/Checkbox'; import { AppProvider } from '@toolpad/core/AppProvider'; -import { SignInPage } from '@toolpad/core/SignInPage'; +import { Remember, SignInPage } from '@toolpad/core/SignInPage'; import { useTheme } from '@mui/material/styles'; const providers = [{ id: 'credentials', name: 'Email and Password' }]; @@ -16,7 +16,9 @@ export default function SlotPropsSignIn() { `Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')} and checkbox value: ${formData.get('tandc')}`, ) } + slots={{ rememberMe: Remember }} slotProps={{ + form: { noValidate: true }, emailField: { variant: 'standard', autoFocus: false }, passwordField: { variant: 'standard' }, submitButton: { variant: 'outlined' }, @@ -26,7 +28,7 @@ export default function SlotPropsSignIn() { name="tandc" value="true" color="primary" - sx={{ padding: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }} + sx={{ py: 1, px: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }} /> ), color: 'textSecondary', diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.js b/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.js index f67f1a9f1aa..4e186f68999 100644 --- a/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.js +++ b/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.js @@ -2,8 +2,6 @@ import * as React from 'react'; import { Button, FormControl, - FormControlLabel, - Checkbox, InputLabel, OutlinedInput, TextField, @@ -16,7 +14,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, Remember } from '@toolpad/core/SignInPage'; import { useTheme } from '@mui/material/styles'; const providers = [{ id: 'credentials', name: 'Email and Password' }]; @@ -125,34 +123,12 @@ function Title() { function Subtitle() { return ( - + We are investigating an ongoing outage. ); } -function AgreeWithTerms() { - return ( - - } - slotProps={{ - typography: { - fontSize: 14, - }, - }} - color="textSecondary" - label="I agree with the T&C" - /> - ); -} - export default function SlotsSignIn() { const theme = useTheme(); return ( @@ -160,7 +136,7 @@ export default function SlotsSignIn() { alert( - `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}, and checkbox value: ${formData.get('tandc')}`, + `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}, and checkbox value: ${formData.get('remember')}`, ) } slots={{ @@ -170,9 +146,10 @@ export default function SlotsSignIn() { passwordField: CustomPasswordField, submitButton: CustomButton, signUpLink: SignUpLink, - rememberMe: AgreeWithTerms, + rememberMe: Remember, forgotPasswordLink: ForgotPasswordLink, }} + slotProps={{ form: { noValidate: true } }} providers={providers} /> diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx b/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx index 7925f2c030b..90feeec5d3b 100644 --- a/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx +++ b/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx @@ -2,8 +2,6 @@ import * as React from 'react'; import { Button, FormControl, - FormControlLabel, - Checkbox, InputLabel, OutlinedInput, TextField, @@ -16,7 +14,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, Remember } from '@toolpad/core/SignInPage'; import { useTheme } from '@mui/material/styles'; const providers = [{ id: 'credentials', name: 'Email and Password' }]; @@ -125,34 +123,12 @@ function Title() { function Subtitle() { return ( - + We are investigating an ongoing outage. ); } -function AgreeWithTerms() { - return ( - - } - slotProps={{ - typography: { - fontSize: 14, - }, - }} - color="textSecondary" - label="I agree with the T&C" - /> - ); -} - export default function SlotsSignIn() { const theme = useTheme(); return ( @@ -160,7 +136,7 @@ export default function SlotsSignIn() { alert( - `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}, and checkbox value: ${formData.get('tandc')}`, + `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}, and checkbox value: ${formData.get('remember')}`, ) } slots={{ @@ -170,9 +146,10 @@ export default function SlotsSignIn() { passwordField: CustomPasswordField, submitButton: CustomButton, signUpLink: SignUpLink, - rememberMe: AgreeWithTerms, + rememberMe: Remember, forgotPasswordLink: ForgotPasswordLink, }} + slotProps={{ form: { noValidate: true } }} providers={providers} /> diff --git a/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js index 38d573b4453..14d3091fd3a 100644 --- 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() { .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 index d9ce9dc1702..675906f8dae 100644 --- 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() { .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 index 511c40e2811..493c55d7468 100644 --- 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({ .MuiStack-root': { marginTop: '2rem', diff --git a/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md b/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md index 2efbf13c51e..7af52424a3a 100644 --- a/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md +++ b/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md @@ -1,7 +1,7 @@ --- productId: toolpad-core title: Sign-in Page -components: SignInPage, Account, NotificationsProvider +components: SignInPage, Account, Remember, NotificationsProvider --- # Sign-in Page @@ -239,7 +239,7 @@ To enable deep customization beyond what is possible with custom props, the `Sig {{"demo": "SlotsSignIn.js", "iframe": true, "height": 540 }} -You can use the `slotProps` prop to pass props to the underlying components of each slot: +You can use the `slotProps` prop to pass props to the underlying components of each slot, and also to `form` element: {{"demo": "SlotPropsSignIn.js", "iframe": true, "height": 600 }} diff --git a/docs/data/toolpad/core/pagesApi.js b/docs/data/toolpad/core/pagesApi.js index c36b8e189db..27671e85334 100644 --- a/docs/data/toolpad/core/pagesApi.js +++ b/docs/data/toolpad/core/pagesApi.js @@ -10,6 +10,7 @@ module.exports = [ { pathname: '/toolpad/core/api/page-container' }, { pathname: '/toolpad/core/api/page-header' }, { pathname: '/toolpad/core/api/page-header-toolbar' }, + { pathname: '/toolpad/core/api/remember' }, { pathname: '/toolpad/core/api/sign-in-button' }, { pathname: '/toolpad/core/api/sign-in-page' }, { pathname: '/toolpad/core/api/sign-out-button' }, diff --git a/docs/pages/toolpad/core/api/remember.js b/docs/pages/toolpad/core/api/remember.js new file mode 100644 index 00000000000..f2ba3812e2f --- /dev/null +++ b/docs/pages/toolpad/core/api/remember.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './remember.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs-toolpad/translations/api-docs/remember', + false, + /\.\/remember.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/toolpad/core/api/remember.json b/docs/pages/toolpad/core/api/remember.json new file mode 100644 index 00000000000..bb6213530f7 --- /dev/null +++ b/docs/pages/toolpad/core/api/remember.json @@ -0,0 +1,11 @@ +{ + "props": {}, + "name": "Remember", + "imports": ["import { Remember } from '@toolpad/core/SignInPage';"], + "classes": [], + "muiName": "Remember", + "filename": "/packages/toolpad-core/src/SignInPage/Remember.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/toolpad/core/api/sign-in-page.json b/docs/pages/toolpad/core/api/sign-in-page.json index 132fb1607bc..8e16d47ffde 100644 --- a/docs/pages/toolpad/core/api/sign-in-page.json +++ b/docs/pages/toolpad/core/api/sign-in-page.json @@ -15,7 +15,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, passwordField?: object, rememberMe?: object, signUpLink?: object, submitButton?: object }" }, "default": "{}" }, @@ -85,7 +85,7 @@ }, { "name": "rememberMe", - "description": "A component to override the default \"Remember me\" checkbox in the Credentials form", + "description": "A custom checkbox placed in the credentials form", "default": "FormControlLabel", "class": null } diff --git a/docs/translations/api-docs/remember/remember.json b/docs/translations/api-docs/remember/remember.json new file mode 100644 index 00000000000..f93d4cbd8c7 --- /dev/null +++ b/docs/translations/api-docs/remember/remember.json @@ -0,0 +1 @@ +{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} } diff --git a/docs/translations/api-docs/sign-in-page/sign-in-page.json b/docs/translations/api-docs/sign-in-page/sign-in-page.json index de36472fb55..31c9dbd4593 100644 --- a/docs/translations/api-docs/sign-in-page/sign-in-page.json +++ b/docs/translations/api-docs/sign-in-page/sign-in-page.json @@ -21,7 +21,7 @@ "emailField": "The custom email field component used in the credentials form.", "forgotPasswordLink": "The custom forgot password link component used in the credentials form.", "passwordField": "The custom password field component used in the credentials form.", - "rememberMe": "A component to override the default "Remember me" checkbox in the Credentials form", + "rememberMe": "A custom checkbox placed in the credentials form", "signUpLink": "The custom sign up link component used in the credentials form.", "submitButton": "The custom submit button component used in the credentials form.", "subtitle": "A component to override the default subtitle section", diff --git a/packages/toolpad-core/src/SignInPage/Remember.tsx b/packages/toolpad-core/src/SignInPage/Remember.tsx new file mode 100644 index 00000000000..cc9ed1b9737 --- /dev/null +++ b/packages/toolpad-core/src/SignInPage/Remember.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { FormControlLabel, Checkbox } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; + +interface RememberMeProps { + slotProps?: { + typography?: React.ComponentProps['slotProps']; + } & Partial>; +} +/** + * + * Demos: + * + * - [Sign-in Page](https://mui.com/toolpad/core/react-sign-in-page/) + * + * API: + * + * - [Remember API](https://mui.com/toolpad/core/api/remember) + */ +function Remember(props: RememberMeProps) { + const theme = useTheme(); + return ( + + } + label="Remember me" + {...props} + slotProps={{ + typography: { + color: 'textSecondary', + fontSize: theme.typography.pxToRem(14), + }, + ...props?.slotProps?.typography, + }} + /> + ); +} + +Remember.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * @ignore + */ + slotProps: PropTypes.object, +} as any; + +export { Remember }; diff --git a/packages/toolpad-core/src/SignInPage/SignInPage.tsx b/packages/toolpad-core/src/SignInPage/SignInPage.tsx index 5a5c489d992..53e9a24c313 100644 --- a/packages/toolpad-core/src/SignInPage/SignInPage.tsx +++ b/packages/toolpad-core/src/SignInPage/SignInPage.tsx @@ -5,10 +5,9 @@ import PropTypes from 'prop-types'; import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; -import Checkbox from '@mui/material/Checkbox'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; -import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel'; +import { FormControlLabelProps } from '@mui/material/FormControlLabel'; import TextField, { TextFieldProps } from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import LoadingButton, { LoadingButtonProps } from '@mui/lab/LoadingButton'; @@ -209,7 +208,7 @@ export interface SignInPageSlots { */ subtitle?: React.ElementType; /** - * A component to override the default "Remember me" checkbox in the Credentials form + * A custom checkbox placed in the credentials form * @default FormControlLabel */ rememberMe?: React.ElementType; @@ -255,6 +254,7 @@ export interface SignInPageProps { forgotPasswordLink?: LinkProps; signUpLink?: LinkProps; rememberMe?: Partial; + form?: Partial>; }; /** * The prop used to customize the styles on the `SignInPage` container @@ -312,7 +312,7 @@ function SignInPage(props: SignInPageProps) { }} > - )} - + {error && isOauthProvider(selectedProviderId) ? ( {error} @@ -374,6 +374,7 @@ function SignInPage(props: SignInPageProps) { error: oauthResponse?.error, })); }} + {...slotProps?.form} > {singleProvider ? null : or} {error && selectedProviderId === 'passkey' ? ( - + {error} ) : null} @@ -423,6 +424,7 @@ function SignInPage(props: SignInPageProps) { error: passkeyResponse?.error, })); }} + {...slotProps?.form} > {slots?.emailField ? ( @@ -470,12 +472,12 @@ function SignInPage(props: SignInPageProps) { {singleProvider ? null : or} {error && selectedProviderId === 'nodemailer' ? ( - + {error} ) : null} {success && selectedProviderId === 'nodemailer' ? ( - + {success} ) : null} @@ -497,6 +499,7 @@ function SignInPage(props: SignInPageProps) { success: emailResponse?.success, })); }} + {...slotProps?.form} > {slots?.emailField ? ( @@ -544,7 +547,7 @@ function SignInPage(props: SignInPageProps) { {singleProvider ? null : or} {error && selectedProviderId === 'credentials' ? ( - + {error} ) : null} @@ -569,8 +572,9 @@ function SignInPage(props: SignInPageProps) { error: credentialsResponse?.error, })); }} + {...slotProps?.form} > - + {slots?.emailField ? ( ) : ( @@ -603,42 +607,23 @@ function SignInPage(props: SignInPageProps) { /> )} - - {slots?.rememberMe ? ( - - ) : ( - - } - label="Remember me" - {...slotProps?.rememberMe} - slotProps={{ - typography: { - color: 'textSecondary', - fontSize: theme.typography.pxToRem(14), - }, - ...slotProps?.rememberMe?.slotProps, - }} - /> - )} - {slots?.forgotPasswordLink ? ( - - ) : null} - + {slots?.forgotPasswordLink || slots?.rememberMe ? ( + + {slots?.rememberMe ? : null} + {slots?.forgotPasswordLink ? ( + + ) : null} + + ) : null} {slots?.submitButton ? ( ) : ( @@ -670,7 +655,7 @@ function SignInPage(props: SignInPageProps) { ) : null} - + ); @@ -710,6 +695,7 @@ SignInPage.propTypes /* remove-proptypes */ = { slotProps: PropTypes.shape({ emailField: PropTypes.object, forgotPasswordLink: PropTypes.object, + form: PropTypes.object, passwordField: PropTypes.object, rememberMe: PropTypes.object, signUpLink: PropTypes.object, diff --git a/packages/toolpad-core/src/SignInPage/index.ts b/packages/toolpad-core/src/SignInPage/index.ts index aa485859b44..3f04d6991f0 100644 --- a/packages/toolpad-core/src/SignInPage/index.ts +++ b/packages/toolpad-core/src/SignInPage/index.ts @@ -1 +1,2 @@ export * from './SignInPage'; +export * from './Remember'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9c30df23cd5..843954836d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -198,7 +198,7 @@ importers: version: 7.37.2(eslint@8.57.1) eslint-plugin-react-compiler: specifier: latest - version: 19.0.0-beta-b2e8e9c-20241220(eslint@8.57.1) + version: 19.0.0-beta-55955c9-20241229(eslint@8.57.1) eslint-plugin-react-hooks: specifier: 5.0.0 version: 5.0.0(eslint@8.57.1) @@ -1356,7 +1356,7 @@ importers: version: 18.3.1(react@18.3.1) recharts: specifier: alpha - version: 2.13.0-alpha.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 3.0.0-alpha.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react-is@19.0.0)(react@18.3.1)(redux@5.0.1) packages: @@ -3932,6 +3932,17 @@ packages: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + '@reduxjs/toolkit@2.5.0': + resolution: {integrity: sha512-awNe2oTodsZ6LmRqmkFhtb/KH03hUhxOamEQy411m3Njj3BbFvoBovxo4Q1cBWnV1ErprVj9MlF0UPXkng0eyg==} + peerDependencies: + react: ^16.9.0 || ^17.0.0 || ^18 || ^19 + react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0 + peerDependenciesMeta: + react: + optional: true + react-redux: + optional: true + '@remix-run/router@1.19.2': resolution: {integrity: sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==} engines: {node: '>=14.0.0'} @@ -4468,6 +4479,9 @@ packages: '@types/unist@3.0.3': resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} + '@types/use-sync-external-store@0.0.6': + resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==} + '@types/webidl-conversions@7.0.3': resolution: {integrity: sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==} @@ -6152,8 +6166,8 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-react-compiler@19.0.0-beta-b2e8e9c-20241220: - resolution: {integrity: sha512-STVaOQyivSBv0un6/ujYOPntKcCaD0qXIG8siBEs9QcWmQ7q3J3ozuAE86SlSc7ElIZgPoL9HoSN3EONS47nqQ==} + eslint-plugin-react-compiler@19.0.0-beta-55955c9-20241229: + resolution: {integrity: sha512-KsE6bQrNvtPDbMb9EolZ2C+Z2/uv2Y5cAUgN+pzbriXjKlf1FkbgiyE153m2mIT6gEZq2OrtFvX7uJj5IrNQlg==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} peerDependencies: eslint: '>=7' @@ -6927,6 +6941,9 @@ packages: immediate@3.0.6: resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} + immer@10.1.1: + resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==} + immer@9.0.21: resolution: {integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==} @@ -9125,6 +9142,18 @@ packages: react-is@19.0.0: resolution: {integrity: sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==} + react-redux@9.2.0: + resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==} + peerDependencies: + '@types/react': ^18.2.25 || ^19 + react: ^18.0 || ^19 + redux: ^5.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + redux: + optional: true + react-refresh@0.14.2: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} @@ -9258,15 +9287,13 @@ packages: resolution: {integrity: sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==} engines: {node: '>= 4'} - recharts-scale@0.4.5: - resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==} - - recharts@2.13.0-alpha.5: - resolution: {integrity: sha512-mm8ORfDusDhyWlrY/2NntUAsNeYukteplvRqKGkBEmqNPwqYq9GoEzaVsVDYj8bjGSKJynWGhjEO1NFcntl29g==} - engines: {node: '>=14'} + recharts@3.0.0-alpha.0: + resolution: {integrity: sha512-phxJucbwKseB0fwvu2JDhFsXValIcTe5PdzJEOZH2e+mL6zAAWMMZjp4MN8yrHMsfSiK2T63xQLp5HL6HQC3pA==} + engines: {node: '>=18'} peerDependencies: - react: ^16.0.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 recursive-readdir@2.2.3: resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==} @@ -9280,6 +9307,14 @@ packages: resolution: {integrity: sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==} engines: {node: '>=12'} + redux-thunk@3.1.0: + resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==} + peerDependencies: + redux: ^5.0.0 + + redux@5.0.1: + resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==} + reflect.getprototypeof@1.0.6: resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==} engines: {node: '>= 0.4'} @@ -10353,6 +10388,11 @@ packages: urlpattern-polyfill@8.0.2: resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==} + use-sync-external-store@1.4.0: + resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -10401,8 +10441,8 @@ packages: vfile@6.0.3: resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} - victory-vendor@36.9.2: - resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==} + victory-vendor@37.3.5: + resolution: {integrity: sha512-+K2VBMmB7peKG3Gjp79XjgsbfsYgD0eZRSmKz7p5a4V0NhYq43eM/b0gpSLq+Dhwag96QaWsU75/6bFVBjVE7A==} vite-node@2.1.7: resolution: {integrity: sha512-b/5MxSWd0ftWt1B1LHfzCw0ASzaxHztUwP0rcsBhkDSGy9ZDEDieSIjFG3I78nI9dUN0eSeD6LtuKPZGjwwpZQ==} @@ -13580,6 +13620,16 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@reduxjs/toolkit@2.5.0(react-redux@9.2.0(@types/react@18.3.18)(react@18.3.1)(redux@5.0.1))(react@18.3.1)': + dependencies: + immer: 10.1.1 + redux: 5.0.1 + redux-thunk: 3.1.0(redux@5.0.1) + reselect: 5.1.1 + optionalDependencies: + react: 18.3.1 + react-redux: 9.2.0(@types/react@18.3.18)(react@18.3.1)(redux@5.0.1) + '@remix-run/router@1.19.2': {} '@rollup/rollup-android-arm-eabi@4.24.3': @@ -14170,6 +14220,8 @@ snapshots: '@types/unist@3.0.3': {} + '@types/use-sync-external-store@0.0.6': {} + '@types/webidl-conversions@7.0.3': {} '@types/webpack-dev-server@3.11.6': @@ -16271,7 +16323,7 @@ snapshots: globals: 13.24.0 rambda: 7.5.0 - eslint-plugin-react-compiler@19.0.0-beta-b2e8e9c-20241220(eslint@8.57.1): + eslint-plugin-react-compiler@19.0.0-beta-55955c9-20241229(eslint@8.57.1): dependencies: '@babel/core': 7.26.0 '@babel/parser': 7.26.2 @@ -17313,6 +17365,8 @@ snapshots: immediate@3.0.6: {} + immer@10.1.1: {} + immer@9.0.21: {} import-fresh@3.3.0: @@ -19717,6 +19771,15 @@ snapshots: react-is@19.0.0: {} + react-redux@9.2.0(@types/react@18.3.18)(react@18.3.1)(redux@5.0.1): + dependencies: + '@types/use-sync-external-store': 0.0.6 + react: 18.3.1 + use-sync-external-store: 1.4.0(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.18 + redux: 5.0.1 + react-refresh@0.14.2: {} react-resizable-panels@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1): @@ -19884,22 +19947,25 @@ snapshots: tiny-invariant: 1.3.3 tslib: 2.8.1 - recharts-scale@0.4.5: - dependencies: - decimal.js-light: 2.5.1 - - recharts@2.13.0-alpha.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + recharts@3.0.0-alpha.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react-is@19.0.0)(react@18.3.1)(redux@5.0.1): dependencies: + '@reduxjs/toolkit': 2.5.0(react-redux@9.2.0(@types/react@18.3.18)(react@18.3.1)(redux@5.0.1))(react@18.3.1) clsx: 2.1.1 - eventemitter3: 4.0.7 + decimal.js-light: 2.5.1 + eventemitter3: 5.0.1 + immer: 10.1.1 lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-is: 18.3.1 + react-is: 19.0.0 + react-redux: 9.2.0(@types/react@18.3.18)(react@18.3.1)(redux@5.0.1) react-smooth: 4.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - recharts-scale: 0.4.5 tiny-invariant: 1.3.3 - victory-vendor: 36.9.2 + use-sync-external-store: 1.4.0(react@18.3.1) + victory-vendor: 37.3.5 + transitivePeerDependencies: + - '@types/react' + - redux recursive-readdir@2.2.3: dependencies: @@ -19915,6 +19981,12 @@ snapshots: indent-string: 5.0.0 strip-indent: 4.0.0 + redux-thunk@3.1.0(redux@5.0.1): + dependencies: + redux: 5.0.1 + + redux@5.0.1: {} + reflect.getprototypeof@1.0.6: dependencies: call-bind: 1.0.7 @@ -21105,6 +21177,10 @@ snapshots: urlpattern-polyfill@8.0.2: {} + use-sync-external-store@1.4.0(react@18.3.1): + dependencies: + react: 18.3.1 + util-deprecate@1.0.2: {} utils-merge@1.0.1: {} @@ -21146,7 +21222,7 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.2 - victory-vendor@36.9.2: + victory-vendor@37.3.5: dependencies: '@types/d3-array': 3.2.1 '@types/d3-ease': 3.0.2