browserid gets the sexy (bug 688210)

apps/users/templates/users/login.html

@@ -26,13 +26,14 @@
           </ul>
       </div>
   </div>
-  <section class="island hero primary prettyform grid">
+  <section class="island hero primary grid {{ 'browserid' if waffle.switch('browserid-login') else 'prettyform' }}">
     <h1>{{ _('Log In') }}</h1>
     {% if waffle.switch('browserid-login') %}
-      <button class="browserid-login" type="submit"
-              data-url="{{ url('users.browserid_login') }}">
-        {{ _('Log in with BrowserID') }}
-      </button>
+      <p>
+        {% trans url='https://browserid.org/' %}
+          The Add-ons website is in the process of switching to <a href="{{ url }}">BrowserID</a> for sign in.
+        {% endtrans %}
+      </p>
     {% endif %}
     {% include "users/login_form.html" %}
   </section>

apps/users/templates/users/login_form.html

@@ -10,32 +10,48 @@
         </ul>
       </div>
   {% endif %}
-  <fieldset>
-    <ul>
-      <li>
-      <label for="id_username">{{ _('Email address') }}</label>
-      {{ form.username }}
-      {{ form.username.errors }}
-      </li>
-      <li>
-      <label for="id_password">{{ _('Password') }}</label>
-      {{ form.password }}
-      {{ form.password.errors }}
-      </li>
-      <li id="remember-me">
-      <label for="id_rememberme" class="check">
-        {{ form.rememberme }}
-        {{ _('Remember me on this computer') }}
-      </label>
-      {{ form.rememberme.errors }}
-      </li>
-      {% if form.recaptcha %}
-      {{ form.recaptcha_shown }}
-      {{ recaptcha(form) }}
-      {% endif %}
-      <li class="footer-submit">
-        <button id="login-submit" type="submit">{{ _('Log in') }}</button>
-      </li>
-    </ul>
-  </fieldset>
+  {% if waffle.switch('browserid-login') %}
+    <div class="login-option">
+      <fieldset id="browserid-login">
+          <button class="browserid-login" type="submit"
+                  data-url="{{ url('users.browserid_login') }}">
+            {{ _('Log in with BrowserID') }}
+          </button>
+      </fieldset>
+    </div>
+  {% endif %}
+  <div class="login-option">
+    <div class="user-message">
+      <a href="#" id="show-normal-login">{{ _('Sign in with old system') }}</a>
+      {{ _('(required for admins and editors)') }}
+    </div>
+    <fieldset id="normal-login">
+      <ul>
+        <li>
+        <label for="id_username">{{ _('Email address') }}</label>
+        {{ form.username }}
+        {{ form.username.errors }}
+        </li>
+        <li>
+        <label for="id_password">{{ _('Password') }}</label>
+        {{ form.password }}
+        {{ form.password.errors }}
+        </li>
+        <li id="remember-me">
+        <label for="id_rememberme" class="check">
+          {{ form.rememberme }}
+          {{ _('Remember me on this computer') }}
+        </label>
+        {{ form.rememberme.errors }}
+        </li>
+        {% if form.recaptcha %}
+        {{ form.recaptcha_shown }}
+        {{ recaptcha(form) }}
+        {% endif %}
+        <li class="footer-submit">
+          <button id="login-submit" type="submit">{{ _('Log in') }}</button>
+        </li>
+      </ul>
+    </fieldset>
+  </div>
 </form>

media/css/impala/login.less

@@ -43,4 +43,40 @@
         top: 0;
         font-size: 11px;
     }
+    .user-message {
+        display: none;
+    }
+    .browserid {
+        p {
+            padding: 1em;
+        }
+        #remember-me {
+            padding-left: 0;
+        }
+        .user-message {
+            display: block;
+            text-align: center;
+            color: @medium-gray;
+            margin-top: 1em;
+            a {
+                display: block;
+            }
+        }
+        #browserid-login {
+            text-align: center;
+        }
+        #normal-login {
+            display: none;
+        }
+        .login-option {
+            .border-box();
+            padding: 1em;
+            margin-bottom: 1em;
+            width: 50%;
+            float: left;
+            li {
+                margin-bottom: 1em;
+            }
+        }
+    }
 }

media/js/impala/login.js

@@ -0,0 +1,8 @@
+// we don't want to wait for ready.
+if ($('.login .browserid').length) {
+    $('#show-normal-login').click(_pd(function(e) {
+        $('.user-message').hide();
+        $('#normal-login').show();
+        $('#id_username').focus();
+    }));
+}

settings.py

@@ -665,6 +665,9 @@ MINIFY_BUNDLES = {
             'js/impala/search.js',
             'js/impala/suggestions.js',
 
+            # Login
+            'js/impala/login.js',
+
             # Fix-up outgoing links
             'js/zamboni/outgoing_links.js',
         ),