2 files changed, 39 insertions, 1 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 97d53dd01..ac064de99 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -814,6 +814,22 @@ $.extend(fixmystreet.set_up, {
   },
 
   email_login_form: function() {
+    // Password form split up
+    $('.js-sign-in-password-btn').click(function(e) {
+        if ($('.js-sign-in-password').is(':visible')) {
+        } else {
+            e.preventDefault();
+            $('.js-sign-in-password-hide').hide();
+            $('.js-sign-in-password').show().css('visibility', 'visible');
+            $('#password_sign_in').focus();
+        }
+    });
+    // This is if the password box is filled programmatically (by
+    // e.g. 1Password), show it so that it will auto-submit.
+    $('#password_sign_in').change(function() {
+        $('.js-sign-in-password').show().css('visibility', 'visible');
+    });
+
     // Log in with email button
     var email_form = $('#js-social-email-hide'),
         button = $('<button class="btn btn--social btn--social-email">'+translation_strings.login_with_email+'</button>'),
@@ -826,6 +842,7 @@ $.extend(fixmystreet.set_up, {
     form_box.append(button).insertBefore(email_form);
     if ($('.form-error').length) {
         button.click();
+        $('.js-sign-in-password-btn').click();
     }
   },
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 24eed252b..7715ff5e3 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -48,7 +48,17 @@ h1 {
   font-weight: normal;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
+
+  // Useful for extra inline text after a heading
+  small {
+    display: inline-block; // break onto its own line if not enough horizontal space
+    font-style: inherit;
+    font-family: inherit;
+    font-size: 0.5em; // back down to 1em from the 2em parent
+    line-height: 1em;
+  }
 }
+
 h1#reports_heading {
   margin-bottom: 0;
 }
@@ -172,7 +182,8 @@ select {
   width: 100%;
 }
 
-a {
+a,
+.fake-link {
   text-decoration: none;
   color: #0BA7D1;
 
@@ -187,6 +198,16 @@ a {
   }
 }
 
+.fake-link {
+  display: inline-block;
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  font-size: 1em;
+  padding: 0;
+  margin: 0;
+}
+
 // custom type
 .small-print {
   @extend small;