[WP][UX] Remove "tabs" from log-in, register, and password reset pages.

[jenlampton]

A follow-up to https://github.com/backdrop/backdrop-issues/issues/3108

I'd really like to redesign the log-in page to remove the "tabs" entirely. The visual "tabs" are a strange way to navigate these three pages. Plus, they really give away that a site is Drupal/Backdrop.

I almost always remove these tabs in my custom themes, and replace them with a markup element in the form containing links to those pages instead. I'd love to see us do that by default for all Backdrop sites.

[laryn]

I like that idea.

[olafgrabienski]

Yes, good idea! @jenlampton can you provide a screenshot of one of your custom themes?

[docwilmot]

:+1: to this idea. would like to see @jenlampton's solution as well.

[findlabnet]

Would like to see new solution for help to decision. Right now these tabs just prepare an user for what he/she will see everywhere after log in.

[klonos]

I think that @jenlampton means something like this:

...instead of this:

...to which I say 👍

[jenlampton]

Yes, exactly @klonos.

Here's a Backdrop site with the tabs removed (http://arf.berkeley.edu/user/login):

And here's a Drupal 7 site (https://www.dogstardaily.com/user)

[olafgrabienski]

@jenlampton I like the example! Thing to consider: being on one of the other pages (Forgot PW, Create Account), there is no link (back) to the login page nor to the (other) other page. In the Backdrop implementation we should continue to provide these links.

[jenlampton]

@olafgrabienski That's a good point. I'd like to see the links below those forms too (like in this example) rather than rendered as "tabs".

[klonos]

@jenlampton ...are we talking about implementing this on the Basis theme level?

[jenlampton]

I was thinking about at the menu level, changing these items so they are not "menu local tasks" (and therefore would not be rendered as tabs).

We could also add them into the necessary forms, as links, to assure they stay on the pages where they are needed.

[klonos]

Hmm, wouldn't that break existing themes though? Whereas if we did it on the theme level, I think it'd have less impact. Just saying.

[klonos]

...may I add that if we do decide to do this on the theme level, perhaps it'd be worth to file a follow-up ticket to do it on the menu level, but set the target for that ticket to 2.0 where API changes are acceptable.

[jenlampton]

Hmm, wouldn't that break existing themes though?

No, it wouldn't break any themes. If a theme had thought to style the tabs on the user/login page specially (and most don't), then there might be some excess code in a theme that would become unnecessary with this change.

Whereas if we did it on the theme level, I think it'd have less impact.

Yes, that's true. If we made this change on the theme level, hardly any sites would benefit at all. Another good reason to do it at the menu level ;)

[jenlampton]

From @kreynen in https://github.com/backdrop/backdrop-issues/issues/3108#issuecomment-430746240

It is much easier to alter away a menu in a module than it is to figure out if we need to remove markup from a theme.

Also:

Please keep the SSO use case in mind while making these changes.

Is there a use-case for having tabs vs not having tabs when using SSO?

[kreynen]

With LDAP, you can run sites in "mixed mode" meaning that user can login via LDAP or a local account. In that use case, you'd want to be able to create accounts and reset passwords. I'm not sure if either of the SAML projects support mixed mode, but Github SSO does. The only local account on our sites is uid 1. All other users are invited to join the site using https://www.drupal.org/project/user_external_invite. An account is created when they authenticate using LDAP or SAML, but to reset their password they'd need to go to https://cuidm.colorado.edu/pwreset/password_reset.html and reset their password for all CU systems.

[jenlampton]

In today's meeting @quicksketch mentioned that he was not comfortable changing something like menu link types except in a minor release. Changing milestone to 1.13 and bumping type from task to feature request.

[sbgraphicdesign]

There's a Drupal module which improves the login experience and does what the OP asks:

https://www.drupal.org/project/betterlogin

I tried a straight conversion to Backdrop (by replacing the text "drupal" with "backdrop") which didn't work.

It's possible to use a custom layout and blocks (with some custom html) to replicate the Better Login module, but if someone could port the module then that would be much easier!

*Edited to include an example of what I've done with Better Login:

[oadaeh]

@sbgraphicdesign did you make those changes manually, or did you use Coder Upgrade? If not the later, maybe give it a shot and see if the module "magically" works after that.

[jenlampton]

@sbgraphicdesign can you post your code (in any state) to a Github repo? I'd love to get it working and use it on my sites, instead of my usual custom shenanigans.

[sbgraphicdesign]

@sbgraphicdesign did you make those changes manually, or did you use Coder Upgrade? If not the later, maybe give it a shot and see if the module "magically" works after that.

Hi, sorry I should have been clearer, that's what I did in D7. I couldn't make the Better Login module work for Backdrop, so I've gone another route, using a custom layout, displays and a ported module. I'm nearly there, just having some issues overriding the Login, Register, Password & Password Reset pages.

@jenlampton I'm going to add a repo with all my templates and CSS shortly so keep an eye out for that. Might need some helping refining things somewhat, but to get you started here's a module I've ported over from D7 to help with placeholders in forms: https://github.com/sbgraphicdesign/form_placeholder

[klonos]

I couldn't make the Better Login module work for Backdrop, so I've gone another route, using a custom layout

Actually, this is not such a bad idea. We could ship core with a "Login page" layout that would be disabled by default for existing sites (so that we don't end up breaking any custom theming they might already have in place), but be enabled on fresh installations.

If we shipped this new layout with nothing but a login block, then we'd be able to achieve a "separate" full-screen login page (no header/footer/menu), and thus provide a similar login experience as the one Wordpress/Joomla have. If people do not like that, they could simply disable that layout and get back to the good-ol' login page we currently have in place.

[jenlampton]

mind. blown.

[sbgraphicdesign]

Okay, here's my repo of what I've done to get a custom login. I hope this will be of use to someone!

Get it here: https://github.com/sbgraphicdesign/Backdrop-Custom-Login-Pages

I've created a login layout which offers two regions, the header, with which to place the site logo, and the main content area where everything else goes.

The layout includes a css file which is adapted from my own with some of the more esoteric elements removed. I've tried to use the core theme's colouring and design, but of course these pages pick up your theme's css as well, so feel free to adapt as necessary. This stylesheet uses Fontawesome for the icons on the input fields.

Links to the Register, Password and Reset pages are hard coded in the footer and display according to the path. These replace the usual Tabs navigation.

My approach uses 4 separate displays, based on a path visibility condition. I was rather hoping to be able to use one single display, however this cannot be achieved in the UI (can it?). The only issue I have with my approach is with the Password Reset page path condition. In my tests '/user/reset/%/%' worked but depends entirely on what url the system spits out, and whether there are two arguments in that url. I'd imagine this could be better handled programmatically.

Lastly there's a ported D7 module for Form Placeholders which does away with the need for labels above the input fields. Just looks neater imho.

The Read Me file contains full setup and config info.

Get it here: https://github.com/sbgraphicdesign/Backdrop-Custom-Login-Pages

Would be great to have a login layout in core by default. I know a lot of us don't always consider these small elements of websites but I think this sort of attention to detail matters, and does make a difference to (my) clients experience when using their websites.

And for those old-timey 'Drupallers' who prefer the olde ways (lol), it's their choice to use it or not

[jenlampton]

No PR here yet and it's feature freeze day, so removing milestone. (Since there is still somewhat recent activity, I'm not pulling milestone entirely...) Adding milestone candidate label.

[klonos]

So, how does everyone feel about implementing this as a separate layout (disabled for existing sites - enabled for new installations)?

[ghost]

@klonos I like it! Very Backdrop-y :wink:

[jenlampton]

I don't know. Approximately 0 of my backdrop sites have a layout for the log-in page. I'm not even sure there's a valid use case for this, and it's definitely not up to the 80% mark. I don't think we should fix UX bugs by adding features nobody needs?

edit: I'll check my D7 sites and see if any of them use a panel/layout for the log-in page.

[klonos]

Should we close this in favor of #4410?

So, how does everyone feel about implementing this as a separate layout (disabled for existing sites - enabled for new installations)?

^^ I've brought this up in that other issue 😉

[jenlampton]

Let's leave this open. A new layout won't remove the tabs, so that's not related, but the theme change there could be repurposed here to work for all themes.

On Wed, Jul 15, 2020, 6:49 PM Gregory Netsas notifications@github.com wrote:

Should we close this in favor of #4410 https://github.com/backdrop/backdrop-issues/issues/4410?

So, how does everyone feel about implementing this as a separate layout (disabled for existing sites - enabled for new installations)?

^^ I've brought this up in that other issue 😉

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/backdrop/backdrop-issues/issues/3309#issuecomment-659107988, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADBERYKBOVIBAM3WLSHA3TR3ZMDXANCNFSM4F3A55UA .

[ghost]

Here's a PR: https://github.com/backdrop/backdrop/pull/4103

It:

• Changes the menu items from local tasks (tabs) to normal menu items
• Adds 'reset' and 'register' links to the login form
• Adds 'login' link to the reset form
• Doesn't add anything to the register form since that already has a Cancel link that seems to take you to the login form anyway
• Removes the custom Login link from the User Account menu

That last point is due to the fact that now that the links are normal menu items, they're added to the menu automatically. So there were duplicate login links. But the issue is that the new links are added as children of the My Account link, whereas the Log Out link isn't (presumably because it's a menu callback). Not sure how to fix that. Assistance welcome.

[ghost]

And if you have user registrations enabled:

[indigoxela]

I have no clear example, but what worries me a bit is the possible impact for contrib modules that provide alternative login methods (like SAML or LDAP).

We should check in advance, if this change (to a different type in hook_menu) can have side effects for these modules.

[izmeez]

Did this idea stall? Getting rid of the tab menus on login page is a great idea. It seems like ordinary users don't see the tabs right away.

[kiamlaluno]

If the impact for contributed modules would be "negative," this could eventually done in Backdrop 2.x.
I agree that, in this case, a link to reset the password makes more sense than a separate tab, although I can understand that, with a tab, there is still a link users click. (The difference is how that link is rendered.)

[albanycomputers]

Having the same problem... UX is not good, people don't see the tabs... and get confused how to register or reset password.

I've implemented a block with visibility conditions... but even that is having problems where the visibility isn't working on copy blocks :-(

I'll post separately for that.

[klonos]

Just throwing this out there as well: https://www.drupal.org/project/gin_login is a "companion" module for the new Drupal core admin theme Claro, as well as for the Gin admin theme which is getting fast adoption in the community. It changes the login screen to this:

I believe that the images to the right are randomized/rotated, but we don't have to do anything like that - the simplified login form with links instead of tabs is the point which is relevant to this issue here.

[docwilmot]

Could this be a setting? Then we could implement easily in 1.x. Like "Use consolidated login page" or such.

[klonos]

I had a similar thought @docwilmot 👍🏼 ...I was thinking a bit more broadly though (having #4167 in mind etc.), but the gist of my thought was more or less the same. I was specifically considering if there was a way to do the following:

• new sites get the new type of login form
• old sites get the old style
• figure out if there's a way for existing contrib/custom themes do declare (in)compatibility with the new style of the login form.

[docwilmot]

This is a start, copied from @bwpanda's PR.

• this uses a config value to determine if user page uses tabs
• there is no UI yet to change this variable
• there's a template to theme the form. Its not quite satisfactory, I think though, because I've set the template to only be active if not using page tabs. That may be a bit confusing to have a template that doesnt work if you change a config value?
• the login link in account menu seems to be missing

Will work on the rest later.

[herbdool]

I think we could just make the change. I haven't seen anyone provide actual examples of where it'll break themes or ldap modules. I took a look at https://github.com/backdrop-contrib/ldap_sso/blob/1.x-2.x/ldap_sso.module and I think it would fine.

Let's do it for 1.29.0!

[klonos]

Thanks @docwilmot 🙏🏼 ...you beat me to it 🙂

This is looking promising 👍🏼 (the login link missing aside and all)

Perhaps we could add a setting for all themes, make the default be turned off, and then in 2.x we could switch to this being the only option for everyone (without any UI setting).

Eventually, I would like us to make the login a proper "pageless" page, without a header, navigation menu, breadcrumb etc. ...I think that we had an issue for that, but can't find it now to link to.

[docwilmot]

Updated PR:

• [x] Fixed missing login link in Account menu
• [x] Added UI for changing to no tabs (now under admin/config/people/login)
• [x] Added option to suppress layout on the login page
• [x] Page title missing on the suppressed page (title usually provided by layout)
• [x] Messages missing for same page (same reason)
• [ ] Suppress layout on password reset page?
• [ ] Move theming to Seven
• [ ] Fix page titles
• [ ] Fix tests

[klonos]

Thanks @docwilmot 🙏🏼 ...I realize it's still WIP, but it is looking awesome! ...well, it's actually looking rather "plain" at the moment, but perhaps it'll be different with the "Log in" title added back.

I think that caches should be cleared in the submit handler when the settings we are adding as part of this feature change. As it is now, you need to manually clear caches, otherwise what is configured appears to "not work" (those that are used to clearing caches in Drupal/Backdrop for everything will figure that out, but we should try to make this work seamlessly ...and clearing specific caches instead of everything if possible).

We can also consider the following:

• Adding the site/Backdrop logo (which can serve as a "home" link as well, since we are removing the breadcrumb)
• Add an option in admin/appearance to allow using the admin theme in the login form. Perhaps replicate the same setting in the newly-added settings in admin/config/people/login as well?
• Style the form to be inside some frame. If Seven is used as the theme, then we can use the same styling as the pages used in the installer and update.php (which I personally also like for the fact that it has the little folded corner to hint that this is Backdrop).

All these can be separate follow-ups, but mentioning them here in case we want to deliver a more complete thing as part of this feature here.

[docwilmot]

Made it less plain 🙂

what is configured appears to "not work"

Could you please give STR for this? I'm not getting anything needing cache clearing

Add an option in admin/appearance to allow using the admin theme

We by default don't use admin theme for anonymous though, which is everyone before login.

same styling as the pages used in the installer and update.php

Did consider this, but thought should get some opinions on how the page should look first. We can see how other opinions go?

[klonos]

Made it less plain 🙂

It is less plain indeed 😅 ...thanks for adding the page title in 👍🏼 🙏🏼

Could you please give STR for this? I'm not getting anything needing cache clearing

Pretty simply actually:

1. Logged in as an admin, switch from no tabs to using tabs in admin/config/people/login and save.
2. Launch the site as anonymous in a different browser or private browser window -> visit the login page -> page still shows no tabs 👎🏼
3. Back to the session as admin -> clear caches.
4. Back to the anon session -> refresh -> tabs are now back (but they should be available w/o having to clear caches and refresh the page)

We by default don't use admin theme for anonymous though ...

That's right 👍🏼 ...I've filed #6560 to explore this further and avoid derailing this issue here.

Did consider this, but thought should get some opinions on how the page should look first. We can see how other opinions go?

Absolutely! ...just wanted to be the first to express my opinion 😅

[herbdool]

The scope seems to keep expanding but we'll see where this goes. It mostly looks okay but some issues so far.

• Doesn't look good on mobile. The width isn't responsive.
• I still don't see a title for the login page.
• If I choose to display tabs and hide regions, it doesn't seem to work. I'm not sure why someone would want that combo.
• It's a bit jarring to have a plain view for the login but then goes back to regular regions for the request password and register pages.
• There should be a link on the register page back to login too.

@klonos there's already an old issue about using the admin theme for the login page. I can't recall what number.

[klonos]

I still don't see a title for the login page.

This is from the PR sandbox:

...there's already an old issue about using the admin theme for the login page. I can't recall what number.

You are right @herbdool ...I thought that it was the same as this request here, but it is not: #4410 ...and also the related #4487.

[herbdool]

Right. I was thinking of a logo or something. It could use something to indicate the website. Or leave that up to the site builder? Can blocks still be added to main region?

[klonos]

I was thinking of a logo or something. It could use something to indicate the website.

Yes 👍🏼 ...I also requested that:

• Adding the site/Backdrop logo (which can serve as a "home" link as well, since we are removing the breadcrumb)

Can blocks still be added to main region?

It was possible before (tested by adding a custom block with some test text in the "Content" region of the default layout - using the default Moscone Flipped template), but doesn't work now when the Hide layout regions setting is enabled. Disabling that setting and clearing caches renders any block previously added. I guess that this qualifies as a regression, so @docwilmot can we please make it so that that setting only suppresses blocks that aren't in the same region as the main content block? ...or at least the region that is defined as default region in the .info file of the layout template being used?

[docwilmot]

The scope seems to keep expanding but we'll see where this goes.

I didn't think it's expanded that much; the only new thing is removing layout regions, which seemed like a natural expansion of the initial scope, but I could roll that back if its too much.