5 files changed, 53 insertions, 0 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 975a8e227..7c0a752d2 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -301,6 +301,20 @@ $(function(){
         });
     }
 
+    /* Log in with email button */
+    var email_form = $('#js-social-email-hide'),
+        button = $('<button class="btn btn--social btn--social-email">Log in with email</button>'),
+        form_box = $('<div class="form-box"></div>');
+    button.click(function(e){
+        e.preventDefault();
+        email_form.fadeIn(500);
+        form_box.hide();
+    });
+    form_box.append(button).insertBefore(email_form);
+    if ($('.form-error').length) {
+        button.click();
+    }
+
     /*
      * Show on click - pretty generic
      */
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 79ed91d97..8992893bb 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -316,6 +316,9 @@ label{
     font-size:1.25em;
     margin:0.5em 0;
   }
+  h2 {
+    margin: 0 0 0.5em;
+  }
   h5 {
     margin:0 0 1em;
     font: {
@@ -738,6 +741,33 @@ input.final-submit {
   float: $right;
 }
 
+.btn--facebook {
+    @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
+
+    &:visited {
+        color: #fff;
+    }
+
+    img {
+        margin-right: 0.5em;
+        vertical-align: -0.2em;
+        height: 1.3em;
+        width: auto;
+    }
+}
+
+// Under the button to override its text transform and width
+.btn--social {
+    display: block;
+    width: 100%;
+    text-transform: none;
+    text-align: center;
+}
+
+.js #js-social-email-hide {
+    display: none;
+}
+
 .button-fwd {
   padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em);
   background: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg") $right 50% no-repeat;
diff --git a/web/cobrands/sass/_h5bp.scss b/web/cobrands/sass/_h5bp.scss
index f4078cca6..f2074532c 100644
--- a/web/cobrands/sass/_h5bp.scss
+++ b/web/cobrands/sass/_h5bp.scss
@@ -42,6 +42,9 @@ body, button, input, select, textarea {
     color: #222;
     background-color: #fff
 }
+input[disabled] {
+    color: #888;
+}
 
 /*
  * Remove text-shadow in selection highlight: h5bp.com/i
diff --git a/web/i/facebook-icon-32.png b/web/i/facebook-icon-32.png
new file mode 100644
index 000000000..460ddc8a6
--- /dev/null
+++ b/web/i/facebook-icon-32.png
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 51fa01559..312a3e294 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -128,6 +128,12 @@ $(function(){
         $('#form_name').addClass('required').removeClass('valid');
     } );
 
+    $('#facebook_sign_in').click(function(e){
+        $('#form_email').removeClass();
+        $('#form_rznvy').removeClass();
+        $('#email').removeClass();
+    });
+
     // Geolocation
     if (geo_position_js.init()) {
         var link = '<a href="#LINK" id="geolocate_link">&hellip; ' + translation_strings.geolocate + '</a>';