[material-ui] Sign-in template improvements

[oliviertassinari]

The issue I can see on https://next--material-ui.netlify.app/material-ui/getting-started/templates/sign-in/:

• 1. People would zoom because they have struggle reading, can't access the buttons. It's impossible to scroll: [material-ui][docs] Refine templates theme selector #43396

• 2. This should likely be a color primary [material-ui] Refine and unify custom template themes #43220

• 3. This textfield doesn't exist in Material Design

• 4. There are more violations on the page https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-42605--material-ui.netlify.app%2Fmaterial-ui%2Fgetting-started%2Ftemplates%2Fsign-in%2F

• 5. We are missing landmark on the page no? Axe complains about it

could be

• 6. The focus UI is strange, I don't understand why the outline is not right on the border. Is here other websites using a double focus border? I don't see it working well: [material-ui] Refine and unify custom template themes #43220

• 7. Padding should be added to the <input> not it's container, because of autofill style:

this would be correct

• 8. I assume that https://mui.com/material-ui/getting-started/templates/sign-in-side/ is a mistake. Showing infos on the side only makes sense for a sign up?
• 9. The "forgot your password?" button is in the tab sequence between email and password. I don't think this can work. it should be after the submit button. https://auth.planetscale.com/sign-in, https://auth.campsite.com/sign-in. I mean, nobody does what our template does?

Screen.Recording.2024-09-21.at.23.17.57.mov