Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-design sign in form #390

Merged
merged 9 commits into from Aug 24, 2015
Merged

Re-design sign in form #390

merged 9 commits into from Aug 24, 2015

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Aug 24, 2015

This is a precursor to the styles and layout needed for 2-step verification.

  • Bigger hit point for sign in button
  • Larger text fields so that mistakes can be spotted sooner
  • Moved "Forgot your passphrase" link to be in the correct context
  • Add browser warning message
  • Remove copy which suggested that the user sign up

screen shot 2015-08-24 at 12 05 15

screen shot 2015-08-24 at 12 05 23

screen shot 2015-08-24 at 12 00 58

https://trello.com/c/wrAdnEyT/89-re-design-sign-in-form-small
https://trello.com/c/k0lQ9PzQ/77-display-unsupported-browser-warning-message-for-publishing-tools-small

As government editor, I need to be warned if I am using an unsupported/part supported browser, so I'm aware some layout may be disrupted and I can request my IT team upgrade the browser on my work computer.

fofr added 8 commits Aug 24, 2015
Users can’t sign up to sign on.
* Increase field sizes for larger hit points and to make it easier to
spot mistakes
* Use a larger sign in button for a bigger hit point
Allow them to be used for other forms that should be thin and centred.
Having the link below the form, and outside of the container made it
harder to find.

Move alongside passphrase field and explicitly set the tab index route
to avoid tab-enter mistakes.
* Match the sign in form
* Larger text inputs and buttons to spot mistakes and make interaction
easier
* Fixes display of email/passphrase fields
For users on older versions of IE, warn that pages might not work as
expected and suggest they or their IT administrator updates their
browser.
While the notices and alerts about sign in should be tied more closely
to the form itself, for now it’s better to restrict the width of these
messages so they at least appear connected.
@@ -0,0 +1,8 @@
.thin-form {

This comment has been minimized.

@edds

edds Aug 24, 2015
Contributor

This file is called sign_in but the styles are for a .thin-form. So that developers know what to expect in this file and to let other developers know there is generic styling for thin forms can this be called thin_form.scss or could the selector be made to only attach to sign-in elements?

This comment has been minimized.

@fofr

fofr Aug 24, 2015
Author Contributor

Good point. I've fixed the inconsistency in 042c675 by renaming the file.

The form styles are generic and are used on more than just the sign in
page.
@jamiecobbett

This comment has been minimized.

Copy link
Contributor

@jamiecobbett jamiecobbett commented on app/assets/stylesheets/sign_in.scss in 5e9458c Aug 24, 2015

Naive question: could we use 6 * variable_name?

@jamiecobbett
Copy link
Contributor

@jamiecobbett jamiecobbett commented Aug 24, 2015

👍

jamiecobbett added a commit that referenced this pull request Aug 24, 2015
@jamiecobbett jamiecobbett merged commit 542c9e7 into master Aug 24, 2015
2 checks passed
2 checks passed
Test signon changes against gds-sso master "Testing gds-sso against changes #97 succeeded on Jenkins"
Details
default "Build #713 succeeded on Jenkins"
Details
@jamiecobbett jamiecobbett deleted the redesigned-sign-in branch Aug 24, 2015
fofr added a commit to alphagov/govuk_admin_template that referenced this pull request Jan 19, 2018
Only 25 users successfully logged in to an admin tool using IE7 in
2017, most of those in the beginning of the year.

* Remove all IE7 shims and fixes
* We still warn about unsupported browsers here:
https://github.com/alphagov/signon/blob/d56e25d6feb94c82c136689746dc19b2
c7b858bb/app/views/devise/sessions/new.html.erb#L8-L12
* alphagov/signon#390
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.