refactor(site): refactor login screen #10768
Conversation
|
I think we should keep the username password fields collapsed when an OAuth login is available. |
|
Honestly, I never saw this pattern before and I find it a bit strange. If email/password is not important, it can be disabled. Make the user have to click in a button to show the form that could be displayed right away, does not sound good to me. |
|
@BrunoQuaresma, I am okay with the new design, too. It does look more premium ❤️. I have seen the experience I describe with other self-hosted enterprise tools, e.g., Artifactory. |
| @@ -26,49 +25,47 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({ | |||
| return ( | |||
| <Box display="grid" gap="16px"> | |||
| {authMethods?.github.enabled && ( | |||
| <Link | |||
| <Button | |||
There was a problem hiding this comment.
What's the trade-off between having an MUI Button component take an anchor as its underlying component, vs using one of the <a>/<Link> elements directly?
If this is meant to act as a link, I feel like the markup should be more straightforward, but I don't know if this accounting for some edge case
There was a problem hiding this comment.
Link works well when doing internal navigation to handle react-router state changes but when it is external, I don't see why to use a Link.
Ps: Link when it is from import { Link } from "react-router-dom".
I use Link from MUI when I want to style it as a link with the blue color and decoration on hover.
| @@ -31,6 +31,10 @@ declare module "@mui/material/Button" { | |||
| interface ButtonPropsColorOverrides { | |||
| neutral: true; | |||
| } | |||
|
|
|||
| interface ButtonPropsSizeOverrides { | |||
| xlarge: true; | |||
There was a problem hiding this comment.
Just making sure I understand the overrides here: is the true value here set up as a boolean property just because of MUI's syntax?
Basically, does having xlarge: true just mean that the type of the component's size prop becomes builtInType | "xlarge"?
Before:
After:
