Repository: wagtail/wagtail

Issue:
Visual design of login screen
On any decent-resolution monitor, both the following look a bit ridiculous. Compared to our competitors It's certainly eye-catching in an unusual way, but I don't feel it's an attractive first impression to make.

![screen shot 2016-03-04 at 10 02 36](https://cloud.githubusercontent.com/assets/352835/13523935/43a776da-e1f0-11e5-94a4-e5bddd389519.png)
![screen shot 2016-03-04 at 10 02 41](https://cloud.githubusercontent.com/assets/352835/13523936/43bf7d70-e1f0-11e5-9dba-78202ced91cf.png)

A brief skim of any "Design Inspiration" site indicates a fad of centralised boxes with giant shadows and background textures e.g  http://collectui.com/challenges/sign-up  

I'm keen to _avoid_ an approach which dates quickly, so I'm not suggesting we jump blindly onto the bandwagons illustrated above, but there are qualities in all these examples which I feel wagtail shares, which our login screen doesn't convey.



Discussion:
Agree with this, and I think this ties in with lots of other ongoing conversations within these issues at the moment. There's clearly a few things that we can improve within the UI. Some already raised as issues here on Github e.g. where to locate help text, how to articulate the explorer and how to amend StreamField; and others not, such as the offline conversations happening around the dashboard

Having said that I'm not sure about any of the examples shared from collectui though. I think they're going to get in the way of the users logging in and get in the way of developers wanting to extend that login area if it ever needs to be closer to their client's branding.

My personal feeling is that Github, Squarespace, Wordpress et al have good login patterns to use as inspiration. They're all simple screens that do their best to not get in the way of the user task. One of the things, for example, that Wordpress does well is how easy it is to 'brand' the login screen as a developer.

With that in mind some thoughts are below for discussion. Beyond styling, there's some slight structural change to the existing template: the sitename is being printed, the user and password icons have been removed, input placeholders (e.g. `enter your username`) have been removed, the Wagtail logo has been introduced and been placed under the signin button

#### 1. Sign-in {site name}

![_0003_login - idea 3 2x](https://cloud.githubusercontent.com/assets/11335309/13554336/14321d02-e39d-11e5-95c7-19e47a85e760.jpg)

![_0004_login - idea 4 2x](https://cloud.githubusercontent.com/assets/11335309/13554335/1431db44-e39d-11e5-85e1-cb7e5788288c.jpg)
Dark and light variations of login screen following a minimalist approach.

#### 2. {Site name}

![_0005_login - idea 5 2x](https://cloud.githubusercontent.com/assets/11335309/13554346/72fbf02e-e39d-11e5-88f0-d76778dd956e.jpg)

![_0007_login - idea 7 2x](https://cloud.githubusercontent.com/assets/11335309/13554347/72feb5a2-e39d-11e5-8266-a8eb1ccf0dfc.jpg)
Very minor amend from suggestion 1: Removal of `Sign into` within the title and an outline for `sign in` button rather than solid green

#### 3. Taking a boxed/ card approach to the problem

![_0010_login - idea 10 2x](https://cloud.githubusercontent.com/assets/11335309/13554369/fbc9c3ae-e39d-11e5-9b1e-57293b28f5f8.jpg)

![_0009_login - idea 9 2x](https://cloud.githubusercontent.com/assets/11335309/13554370/fbc9facc-e39d-11e5-9036-e2f654fb8f2e.jpg)

![_0011_login - idea 11 2x](https://cloud.githubusercontent.com/assets/11335309/13554371/fbca4388-e39d-11e5-8401-aa5f52badc86.jpg)
_Simple way screen could be personalised_

![_0013_forgotten password - idea 10](https://cloud.githubusercontent.com/assets/11335309/13554372/fbcaefcc-e39d-11e5-8a9a-e5551f5eba32.jpg)
_Lost password screen_

It feels like option 3 would give developers the most flexibility in terms of extending the screen. 

To mention, I've included both dark and light approaches, because we currently take the dark approach on this login screen. However, the dark approach does create a fair amount of dissonance for the user since the dashboard, and rest of the UI, is a light grey.

Look forward to discussion on this, but in terms of decision think it should thought of holistically within the whole flow of the user's journey within the UI. @davecranwell has mentioned trying to arrange a conversation around that, and I think that would be really useful to have.

Wow, really beautiful! I love the card approach.

Have been thinking about this a little in relation to how @JoshBarr has been using the salmon highlight colour, and a brighter background colour, on other screens he's been sharing on github. An iteration with that in mind: 
![_0014_login - idea 13 2x](https://cloud.githubusercontent.com/assets/11335309/13617224/838d4ed6-e575-11e5-8fcf-eae0497d2b81.jpg)

Yeah, that's heading down the path we've been thinking about:

![sign-in](https://cloud.githubusercontent.com/assets/1715456/13618285/2e762b16-e5e8-11e5-8e75-4e348ff61a39.png)

This is a boilerplate login component we sometimes use: 

<img width="1280" alt="screen shot 2016-03-09 at 11 17 48 am" src="https://cloud.githubusercontent.com/assets/1715456/13618371/a0be6396-e5e8-11e5-8c06-f9eb31fb4a14.png">

Any of these would be an improvement over what we have. I do like those bottom-stroked minimalist examples, however if we want to make the background customisable (a desirable feature imo) I expect a "card" style (like josh's last two) might be slightly more flexible.

And the last five from me :)

Will think about making a PR unless you guys are already working on something @JoshBarr ?

What happen with my comment?

:+1: 

Please, do a PR.

I think that @heymonkeyriot, your second template example it's the better.

I have to say, I really like the blue in @JoshBarr's design. But I think it's an emotional attraction that I can't really rationalize logically.

@heymonkeyriot's more neutral color-scheme, especially with the optional background image, seems like the more agnostic and flexible approach. It makes no assumptions, and is likely better for a product that will be used globally for an indeterminate range of applications.

@SalahAdDin your comment was removed because it was interruptive to the flow of the discussion. We welcome you adding your opinion, or ":+1: " support for a Github Issue, particularly if you can help guide the Issue towards resolution/completion, however your question was not constructive. Please consider whether your comments are _helpful_ before posting them on any issue in future.

Cool, will work on a PR, though suspect it'll need more conversation once submitted.

@heymonkeyriot Well, second example also first example are very handsome, modern, elegant, simple but elegant, put a full color background isn't eye candy, is anoying, so, your semi transparent font and inputs are that your desing are the best.

I think it's fair that a full width background image could be annoying. I can't actually envision a scenario where it would be correct.

For instance, say you're making a website for a restaurant, What do you put, a picture of the food? Or a photo of the storefront? None of those things would provide value.

IMO the admin should be neutral by default and able to easily be branded. That's the important thing.

It might benefit from being able to configure one or two colors in accordance with the client's style guide. And there should definitely be a place for the client's logo.

For instance, here's Craft's login screen with the client’s logo from a previous project I worked on:

![screenshot from 2016-03-10 13 48 41](https://cloud.githubusercontent.com/assets/3639540/13680552/107c4b56-e6c7-11e5-8925-1adbf49ceb08.png)

It should also be standard practice to replace the Wagtail bird in the admin with the client's logo.

Personally I think the Wagtail bird should always sit underneath the login area, since its a supplementary element, and would be nice for it to always be present. I think client logos should replace the text above the login.

I think this is all heading down the right path. 

Before anyone runs off and codes this up – let's get a designer to spend a couple of hours getting the sizing, spacing and proportions of everything right, thinking about password reset flow, etc. The login view is the first thing people see, and if we're going to change it, we should make sure it's beautiful and well crafted. 

Well, then put for the 1.5 milestone, i think that will be great put in the new version, but, the new version have many good features, so, isn't necessary.

- [x] Visual design for login screen without background image 
- [x] Visual design for password reset screen 
- [x] Password/username fail message in design 
- [ ] Front end development

Note on scope: We're not aiming to redesign the flow or functionality on this ticket. It's a beautifying exercise. I've documented tasks that could be assigned to another ticket. 

- [x] Visual design for login with background image
- [ ] Add image field to site settings to control (optional) background image
- [ ] Add site title or logo to login page (design, FE and BE)
- [ ] Explore improvements password reset UX
- [ ] Explore improvements to login UX 


:+1:
Diving into this there are some workflow issues around password reset and username recall. I'm going to include some AC here. 

- [ ] A user can login using their username & password
- [ ] A user can reset their password
- [ ] A user can get a reminder of their username

All these are currently provided features but a user may not be aware of the last one.

So AC I would like to address at some point but not here include: 
- A user can get a reminder of their email
- A user can login using their email 
- A user with more than one account associated with their email can choose which account they want to use

There is currently no way for a user to retrieve a forgotten password. Perhaps we could add a link that uses admin email address to contact them directly? It's relying on admin having good security practises though...

Relates to #722 and #2240




For those that are interested we've done a bit of user research on this. I've created a few options and we did a simple preference test. You can see the results here https://usabilityhub.com/tests/6cdf3c108b8e/results/8e89cb060147

The general feeling was that a lighter, centrally aligned login screen was the best way forward. I've developed the designs a little further. I'll include them below. 
![sign-in-workflows](https://user-images.githubusercontent.com/7290588/33564133-a8f11022-d911-11e7-9252-bd2e637d91ad.png)

![sign-in-v2 2](https://user-images.githubusercontent.com/7290588/33564205-d98c09d0-d911-11e7-8dda-225f4774a5ea.png)

Welcome any feedback and thoughts. 
Thanks for sharing the whole process, that's very interesting! I like the smaller, centered form, and the overall lighter tone.

With all of those pages using the same modal metaphor, it would be very cool if they all acted like a single page without hard reloads from one step to the next, and smooth transitions instead (and routing in the browser, client-side). That's adding quite a bit more work though so probably for a later stage.

I have only one concern – some people choose to customise the login screen to show their site's name ("Sign in to Super Site"), and they can also replace the Wagtail logo in the main admin section with their own. This design introduces a different image with another form factor, and with a white background instead of grey. I'm not sure whether this should be customisable, and if so how that would work. The Wagtail logotype looks great, but it might look a bit strange to have some company's square logo sitting there.

In any case, personally I don't think it's good to whitelabel the CMS like that so I'm not sure what people doing this would be trying to achieve in the first place.
@tmsndrs i think it screen login is very commonly, the current login is more "wagtail"'s way.
@thibaudcolas thanks

I did consider the whitelabel approach. It doesn't look pretty but I'm not sure that's our job. Also it's always going to be hard to get any possible combination of logo styles working with the Wagtail brand.

<img width="619" alt="screen shot 2017-12-05 at 10 57 23" src="https://user-images.githubusercontent.com/7290588/33603680-4945a936-d9ab-11e7-9fe7-5fec7fd73293.png">

I did think about playing around with some transitions between different states but as you pointed out that's going to add a bunch of FE overhead. Perhaps something for another day? 

@SalahAdDin sorry, I'm not sure I understand? 
@tmsndrs The photo looks great, but i feel that now all login page have the same layout, same desing, so, it gets out the `wagtail` identity.
@SalahAdDin if you look at the usability test results posted above (https://usabilityhub.com/tests/6cdf3c108b8e/results/8e89cb060147), you'll see that multiple people said this was the reason why they preferred this design over the other options, eg. ) _"It looks modern and easy to use. This form is the most similar to the login forms that users are already seeing on the websites (familiar environment)."_.
Thanks @SalahAdDin. I appreciate your thoughts. I think there is space for Wagtail to have 'identity' but not in compromising usability. The sign in screen is the first thing a lot of people will experience so I'm keen we make it simple. This wasn't my personal favourite but I can see why people like the centred and lighter approach. 
Adding this to further argue for the "AJAX login flow" approach: https://github.com/wagtail/wagtail/issues/1359#issuecomment-313970658, and #2199
Any updates on this?
> Any updates on this?

I think they forgot this issue totally.
I have messaged the core team to see where this is at and if there is any capacity for this to be included in some Google Summer of Code scope.

OR alternatively, we may try to get this into a clearer picture for anyone to contribute to.
I don’t think there’s much of an update on this aside beyond what the comments further up already covers. No one is actively blocked from doing anything by the lacklustre design of the login screen, and we don’t have any sponsors lining up to fund this particular development – so this is low-priority compared to other UI improvements in the CMS, and will only move if someone steps up with a clear interest in delivering this.

It might be of higher value and move faster if we changed the actual experience of the login – potentially introducing a modal elsewhere in the CMS to re-connect after a session timeout. Perhaps just introducing better branding options to the login screen. But as stated so far, this seems too close to a cosmetics-only change to warrant priority over more important parts of the CMS.

---

These days Wagtail’s UI process is as productive as it’s ever been, with a dedicated UI team and @benenright regularly involved with the project as our lead designer. So if someone wants to dedicate serious time to building this, I’m sure we could provide timely design direction in a matter of weeks / couple months. Alternatively, we’d need a contributor to further refine what’s already been shared here, and perhaps think of how to break this down into smaller tasks.
Update - there are some designs made now that head in this direction. 
https://www.figma.com/file/h67EsVXdWsfu38WGGxWfpi/Wagtail-Design-System?node-id=6899%3A41010

Potential PR from @PaarthAgarwal (still a Wip) https://github.com/wagtail/wagtail/pull/8925

I'm not sure where we will head with adding customisable logos/titles or the modal approach. Might just try to do new designs first. 

Any thoughts on the figma above would be appreciated. 
Need to consider messages in this work - e.g.

<img width="1366" alt="Screen Shot 2022-08-01 at 9 06 31 pm" src="https://user-images.githubusercontent.com/1396140/182135127-3ee87818-628e-4420-ac19-007dfb4b5083.png">



Resolving patch:
diff --git a/wagtail/admin/forms/auth.py b/wagtail/admin/forms/auth.py
--- a/wagtail/admin/forms/auth.py
+++ b/wagtail/admin/forms/auth.py
@@ -23,6 +23,7 @@ def __init__(self, request=None, *args, **kwargs):
         self.fields["username"].widget.attrs["placeholder"] = (
             gettext_lazy("Enter your %s") % self.username_field.verbose_name
         )
+        self.fields["username"].widget.attrs["autofocus"] = ""
 
     @property
     def extra_fields(self):


Test patch: