Sign In form UI refactoring

[lafriks]

Maybe remove tabs at all (there is already link to register) and openid can be moved as other external buttons

Originally posted by @lafriks in #28753 (comment)

[ijbarnes]

Can I work on this? Im looking to contribute to an open source project for the first time.

[lafriks]

Yes, currently as far as I know nobody is working on this

[joshuanazareth97]

Hi, is work being done on this issue or is it open to a PR? Would like to contribute

[delvh]

Sure, PRs are always welcome.
But no, no one is working on it currently

[joshuanazareth97]

Hi @delvh, just wanted to clarify 2 things and share my POA before tackling this PR.

Current behavior: Auth mechanisms are split up over 3 tabs: Sign In, Register and Open ID
Expected behavior: Remove the tabs, the links in the navbar will be used to navigate between Sign In and Registration, and Open ID will be moved to the sign in page.

I see 2 things that need to be considered in order to make the UX frictionless:

1. There should be no confusion for users about which fields are required for each sign in type, since unlike social login buttons, logging in with Open ID requires the additional input of a URL, which could be confusing if not clearly differentiated from the inputs needed for regular sign in (username and password)

2. The case where users enter a value in all 3 fields should be handled so that there is no unexpected behavior

Potential Solutions:

1. Add a button, "Sign In with OpenID" below the social login buttons. Clicking this button dynamically renders a new dismissible input for the OpenID url, while (possibly, if feasible) disabling the fields for regular sign in. Dismissing this new input returns the form to its original state.

2. Add another section (with another "OR" divider) below the social login buttons. This will simply be the OpenID form as it exists right now. Since the submit button is separate, even if values are entered in non-relevant fields, they will just be ignored when the form is submitted.

Would be grateful to know the views you / other maintainers have regarding which of these solutions is the better approach. Also please correct me if there is any gap in my understanding.

[lafriks]

I think it would be as button (same as other external auths) and when clicked then either:

• Go to existing OpenID form - so just like it is now only replacing tab link with button
• Open popup to enter URL

[joshuanazareth97]

Since there is only one field and the other auth related functionality doesn't trigger popups, I think it would be most consistent then to go with your first suggestion.
Will add another button that is just a simple link to the existing OpenID form, and on that form will add a button that allows the user to go back to the regular sign in page.

[delvh]

Yep, I too think that @lafriks proposal sounds like the best course of action.

[denyskon]

Solved by #31530