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 9 commits into from Aug 24, 2015

Re-design sign in form #390

merged 9 commits into from Aug 24, 2015


Copy link

@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

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
* 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
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 Aug 24, 2015

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 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

This comment has been minimized.

Copy link

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

Naive question: could we use 6 * variable_name?

Copy link

@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"
default "Build #713 succeeded on Jenkins"
@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:
* alphagov/signon#390
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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.