Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SignInPage] Revamp slots #4574

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

[SignInPage] Revamp slots #4574

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0171697
fix: Make `rememberMe` optional, add `form` slotProp
bharatkashyap Dec 30, 2024
0cc237c
fix: CI
bharatkashyap Dec 30, 2024
e703c98
fix: missed
bharatkashyap Dec 30, 2024
bf0042f
fix: Improvements
bharatkashyap Jan 2, 2025
a1b6be4
Merge branch 'master' into enh/signin-slots-1
bharatkashyap Jan 3, 2025
1ad8dad
Merge branch 'master' of github.com:mui/mui-toolpad into enh/signin-s…
bharatkashyap Jan 7, 2025
253afec
fix: Clearer and less confusing
bharatkashyap Jan 7, 2025
cc831be
fix: Proptypes
bharatkashyap Jan 7, 2025
fe77c05
Merge branch 'master' into enh/signin-slots-1
bharatkashyap Jan 8, 2025
b28a2b1
Update docs/data/toolpad/core/components/sign-in-page/sign-in-page.md
bharatkashyap Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ const BRANDING = {
<SignInPage
signIn={signIn}
providers={providers}
slotProps={{ emailField: { autoFocus: false } }}
slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
/>
</AppProvider>
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ resolve({
<SignInPage
signIn={signIn}
providers={providers}
slotProps={{ emailField: { autoFocus: false } }}
slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
/>
</AppProvider>
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ resolve({
<SignInPage
signIn={signIn}
providers={providers}
slotProps={{ emailField: { autoFocus: false } }}
slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
/>
</AppProvider>
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
8 changes: 5 additions & 3 deletions docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 { SignInPage, RememberCheckbox } from '@toolpad/core/SignInPage';
import { useTheme } from '@mui/material/styles';

const providers = [{ id: 'credentials', name: 'Email and Password' }];
Expand All @@ -16,17 +16,19 @@ export default function SlotPropsSignIn() {
`Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')} and checkbox value: ${formData.get('tandc')}`,
)
}
slots={{ checkbox: RememberCheckbox }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about RememberMeCheckbox, would it be just a bit more descriptive?

slotProps={{
form: { noValidate: true },
emailField: { variant: 'standard', autoFocus: false },
passwordField: { variant: 'standard' },
submitButton: { variant: 'outlined' },
rememberMe: {
checkbox: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

checkbox is more generic than rememberMe so I think it's an improvement, but could we make it more generic even as any type of content could go in this slot, such as a small disclaimer for example, or multiple checkboxes?
Not sure if something like formFooter would be a good name...
Anyway these are just some thoughts!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also I see we have a forgotPasswordLink slot too, so if when implementing these you saw that there's a benefit to these slots being more specific then it should be fine.

Copy link
Member Author

@bharatkashyap bharatkashyap Jan 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, formFooter makes more sense!

Agreed, I did feel thatforgotPasswordLink and signUpLink seem hyper-specific. If we're offering the entire formFooter area as a slot, perhaps it makes sense to remove forgotPasswordLink entirely with this PR? If someone wants a forgot password link, they can simply add it in their slot component.

I would propose removing forgotPasswordLink, rememberMe and signUpLink to create this structure (including a new form slot to override the entire form):

Screenshot 2025-01-09 at 5 53 28 PM

Wdyt? Also @Janpot and @prakhargupta1

Might make sense to move this to the next release and mark that as having a lot of breaking changes for the SignInPage slots

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving those to "plug-in" components seems good to me if they're complex enough!

control: (
<Checkbox
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',
Expand Down
8 changes: 5 additions & 3 deletions docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 { SignInPage, RememberCheckbox } from '@toolpad/core/SignInPage';
import { useTheme } from '@mui/material/styles';

const providers = [{ id: 'credentials', name: 'Email and Password' }];
Expand All @@ -16,17 +16,19 @@ export default function SlotPropsSignIn() {
`Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')} and checkbox value: ${formData.get('tandc')}`,
)
}
slots={{ checkbox: RememberCheckbox }}
slotProps={{
form: { noValidate: true },
emailField: { variant: 'standard', autoFocus: false },
passwordField: { variant: 'standard' },
submitButton: { variant: 'outlined' },
rememberMe: {
checkbox: {
control: (
<Checkbox
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',
Expand Down
33 changes: 5 additions & 28 deletions docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import * as React from 'react';
import {
Button,
FormControl,
FormControlLabel,
Checkbox,
InputLabel,
OutlinedInput,
TextField,
Expand All @@ -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, RememberCheckbox } from '@toolpad/core/SignInPage';
import { useTheme } from '@mui/material/styles';

const providers = [{ id: 'credentials', name: 'Email and Password' }];
Expand Down Expand Up @@ -125,42 +123,20 @@ function Title() {

function Subtitle() {
return (
<Alert sx={{ mb: 2, px: 1, py: 0.25 }} severity="warning">
<Alert sx={{ mb: 2, px: 1, py: 0.25, width: '100%' }} 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}>
<SignInPage
signIn={(provider, formData) =>
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={{
Expand All @@ -170,9 +146,10 @@ export default function SlotsSignIn() {
passwordField: CustomPasswordField,
submitButton: CustomButton,
signUpLink: SignUpLink,
rememberMe: AgreeWithTerms,
checkbox: RememberCheckbox,
forgotPasswordLink: ForgotPasswordLink,
}}
slotProps={{ form: { noValidate: true } }}
providers={providers}
/>
</AppProvider>
Expand Down
33 changes: 5 additions & 28 deletions docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import * as React from 'react';
import {
Button,
FormControl,
FormControlLabel,
Checkbox,
InputLabel,
OutlinedInput,
TextField,
Expand All @@ -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, RememberCheckbox } from '@toolpad/core/SignInPage';
import { useTheme } from '@mui/material/styles';

const providers = [{ id: 'credentials', name: 'Email and Password' }];
Expand Down Expand Up @@ -125,42 +123,20 @@ function Title() {

function Subtitle() {
return (
<Alert sx={{ mb: 2, px: 1, py: 0.25 }} severity="warning">
<Alert sx={{ mb: 2, px: 1, py: 0.25, width: '100%' }} 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}>
<SignInPage
signIn={(provider, formData) =>
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={{
Expand All @@ -170,9 +146,10 @@ export default function SlotsSignIn() {
passwordField: CustomPasswordField,
submitButton: CustomButton,
signUpLink: SignUpLink,
rememberMe: AgreeWithTerms,
checkbox: RememberCheckbox,
forgotPasswordLink: ForgotPasswordLink,
}}
slotProps={{ form: { noValidate: true } }}
providers={providers}
/>
</AppProvider>
Expand Down
1 change: 1 addition & 0 deletions docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export default function ThemeSignInPage() {
<SignInPage
signIn={signIn}
providers={providers}
slotProps={{ form: { noValidate: true } }}
sx={{
'& form > .MuiStack-root': {
marginTop: '2rem',
Expand Down
1 change: 1 addition & 0 deletions docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default function ThemeSignInPage() {
<SignInPage
signIn={signIn}
providers={providers}
slotProps={{ form: { noValidate: true } }}
sx={{
'& form > .MuiStack-root': {
marginTop: '2rem',
Expand Down
1 change: 1 addition & 0 deletions docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const THEME = createTheme({
<SignInPage
signIn={signIn}
providers={providers}
slotProps={{ form: { noValidate: true } }}
sx={{
'& form > .MuiStack-root': {
marginTop: '2rem',
Expand Down
4 changes: 2 additions & 2 deletions docs/data/toolpad/core/components/sign-in-page/sign-in-page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
productId: toolpad-core
title: Sign-in Page
components: SignInPage, Account, NotificationsProvider
components: SignInPage, Account, RememberCheckbox, NotificationsProvider
---

# Sign-in Page
Expand Down Expand Up @@ -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:
bharatkashyap marked this conversation as resolved.
Show resolved Hide resolved

{{"demo": "SlotPropsSignIn.js", "iframe": true, "height": 600 }}

Expand Down
1 change: 1 addition & 0 deletions docs/data/toolpad/core/pagesApi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-checkbox' },
{ pathname: '/toolpad/core/api/sign-in-button' },
{ pathname: '/toolpad/core/api/sign-in-page' },
{ pathname: '/toolpad/core/api/sign-out-button' },
Expand Down
Loading
Loading