Provide an option for SignInPage to skip the stack with "Remember Me" and "Forgot Password"

[kirill-konshin]

Summary

Currently <SignInPage slots={{ rememberMe: () => null }} /> results in an empty stack:

And a gap between field and button:

Also note the padding on "Password" is off by few pixels, label is shifted down.

Examples

Something like <SignInPage slots={{ rememberMe: null }} /> and not providing the forgotPasswordLink.

Currently it's not allowed:

Motivation

There are cases when users should not be presented neither with "Remember Me" nor "Forgot Password". The stack is unconditional now:

Search keywords: SignInPage Stack

[kirill-konshin]

P.S. Allow to pass custom props to form: < SignInPage slotProps: {form: {noValidate: true}}> to disable client side browser-default validation:

[bharatkashyap]

Sounds good. I feel like the "Remember Me" checkbox shouldn't be there by default at all - instead, we can export a Remember component from SignInPage and allow users to pass that into the rememberMe slot if they need it.
Wdyt @mui/toolpad?

[kirill-konshin]

@bharatkashyap I'd agree. It would be much simpler to use the component as a composite with slots, instead of configuration based. Some slots can be a bit more general purpose, e.g. "area between fields and submit". Btw, "subtitle" and "title" seem to be swapped ("subtitle" is "Sign In" now), should be the other way.

Btw, the gap is there even if I set "display: none" for the Stack, margin-bottom of text field adds up with margin-top of button.

[bharatkashyap]

Btw, "subtitle" and "title" seem to be swapped ("subtitle" is "Sign In" now), should be the other way.

I can't seem to catch where this issue is

Btw, the gap is there even if I set "display: none" for the Stack, margin-bottom of text field adds up with margin-top of button.

Yes, the text field margin-bottom would also need to go

[kirill-konshin]

Btw, "subtitle" and "title" seem to be swapped ("subtitle" is "Sign In" now), should be the other way.

I can't seem to catch where this issue is

Looks like I messed up during my experiments, I can't reproduce it now, please disregard.

[kirill-konshin]

Btw, "subtitle" and "title" seem to be swapped ("subtitle" is "Sign In" now), should be the other way.

I can't seem to catch where this issue is

Btw, the gap is there even if I set "display: none" for the Stack, margin-bottom of text field adds up with margin-top of button.

Yes, the text field margin-bottom would also need to go

You can have a Stack instead of the Box, this way simple gap will give equal spacing between form and the rest (and between titles too), and form itself is a Stack anyway.

Or titles and other things can just reside inside the form, less markup this way. I usually make the whole Card a form and CardContent a Stack, this way I get correct spacing and can put buttons in CardFooter. It should be semantically correct too.