[openstreetmap/openstreetmap-website] Re-arrange login and signup screens as discussed in #4128 (PR #4455)

[Milan Cvetkovic]

> This looks great! A few quick notes on the screenshots:

Thanks @tordans,
 
> 
> * Some field labels have ":" colons, some don't. I think without colons looks cleaner

I inherited the labels from the original login and signup pages, they were not consistent to start with... I will add colons to both of them.

> * The "or" has a line, right? That is nearly invisible in the screenshot. Should it have the same gray as the border of the box?

I had the horizontal line as $grey-100, will bump to $grey-300

> * Maybe move the "Lost your password" to the "Password"-Label line and align it to the right? It is pretty prominent for a secondary action.

I am not sure what you have in mind here - moving the link together with the label as "Password (<lost-password-link>):" seems straightforward, but I don't know what part of it would be aligned to the right. Again, I inherited this from the existing Login screen.

> * I think it would be great to have a custom primary navigation header for this flow. Except for the OSM Logo + Home-Link there is nothing there that I would expect a user to need in this case. Especially the sign up/…-buttons are just noise. But the others like "export" are not helpful in this use case either.

This is a regular header on top of the screen, I did not want to modify that at this point. Maybe this could be a part of a separate PR.

> * A bit off topic here: I am used to see the ToS- and privacy policy-link as secondary links in a footer area. I just checked and the website does not have them ATM. One has to find them in the text in "[About](https://www.openstreetmap.org/about)". At least in Germany that would not be considered "easily enough accessible" AFAIK. Should we add them to the login page as small link below the box? – I don't want to open a general discussion here … just asking for that page and UI element.

The regular header is on top of the screen, but because I resized the window when capturing, many menu items hid behind "More..." pull-down, including the "About" button.

> 
> @milan-cvetkovic could you mark which areas can of the sign up page can be customized by the requesting party? I assume it is those part…
> 
> > Free and editable
> > Unlike other maps, OpenStreetMap is completely created by people like you, and it's free for anyone to fix, update, download and use.
> 

This is fixed text, adopted from existing https://www.openstreetmap.org/user/new.

> and "Microsoft Map builder" in …
> 
> > Signup with OpenStreetMap to access Microsoft Map builder.

There are 2 things that can be customized by the 3rd party application authors:
 - "Microsoft Map builder" is the name of the application as registered by the application owner as OAuth2 application.
 - When the application triggers the authorization process, normally it would redirect user to `/www.openstreetmap.org/authorize` and pass a number of parameters required for authoriziation (client_id, resoinse_type,scope,...). If the client app sends and additional `preferred_auth_provider=...` parameter in this request, the resulting screen would bring the "sign-in" buttons to the top of the screen, and highlight the indicated auth-provider. The last screenshots were taken with `preferred_auth_provider=google` in addition to regular auth parameters. Switching between "Signup" and "Login" would preserve the authorization context (although it would not be displayed in the browser navigation bar, as captured in "/users/new" screenshot.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4455#issuecomment-1900126969
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4455/c1900126969 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240119/d444ca17/attachment-0001.htm>