Mobile FxA login form (fixes #1660)

mozilla · Feb 10, 2016 · cca5e7a · cca5e7a
1 parent b989ecc
commit cca5e7a
Show file tree

Hide file tree

Showing 14 changed files with 122 additions and 70 deletions.
diff --git a/src/olympia/lib/settings_base.py b/src/olympia/lib/settings_base.py
@@ -582,6 +582,8 @@ def JINJA_CONFIG():
             'css/mobile/search.less',
             'css/mobile/listing.less',
             'css/mobile/footer.less',
+            'css/impala/fxa-migration.less',
+            'css/mobile/notifications.less',
         ),
         'zamboni/admin': (
             'css/zamboni/admin-django.css',
@@ -703,6 +705,10 @@ def JINJA_CONFIG():
             'js/lib/jquery-ui/datepicker.js',
             'js/lib/jquery-ui/sortable.js',
 
+            # Firefox Accounts
+            'js/lib/uri.js',
+            'js/common/fxa-login.js',
+
             'js/lib/truncate.js',
             'js/zamboni/truncation.js',
             'js/impala/ajaxcache.js',
@@ -762,10 +768,6 @@ def JINJA_CONFIG():
             # Fix-up outgoing links
             'js/zamboni/outgoing_links.js',
         ),
-        'fxa': [
-            'js/lib/uri.js',
-            'js/common/fxa-login.js',
-        ],
         'zamboni/discovery': (
             'js/lib/jquery-1.12.0.js',
             'js/lib/jquery.browser.js',
@@ -866,6 +868,10 @@ def JINJA_CONFIG():
             'js/zamboni/helpers.js',
             'js/zamboni/mobile/general.js',
             'js/common/ratingwidget.js',
+
+            # Firefox Accounts
+            'js/lib/uri.js',
+            'js/common/fxa-login.js',
         ),
         'zamboni/stats': (
             'js/lib/highcharts.src.js',

diff --git a/src/olympia/templates/impala/base.html b/src/olympia/templates/impala/base.html
@@ -58,6 +58,7 @@
         data-raven-dsn="{{ settings.RAVEN_DSN }}"
         data-raven-urls="{{ settings.RAVEN_WHITELIST }}"
         {% if switch_is_active('fxa-auth') %}
+          data-fxa-auth="true"
           data-fxa-config="{{ fxa_config()|json }}"
         {% endif %}
         {% block bodyattrs %}{% endblock %}>
@@ -222,9 +223,6 @@ <h3>{{ _('On the go?') }}</h3>
     {# js #}
     {% block site_js %}
       <script src="{{ cache_buster(url('jsi18n')) }}"></script>
-      {% if switch_is_active('fxa-auth') %}
-        {{ js('fxa') }}
-      {% endif %}
       {{ js('impala') }}
       <script async defer src="{{ cache_buster(url('addons.buttons.js')) }}"></script>
     {% endblock %}

diff --git a/src/olympia/templates/mobile/base_addons.html b/src/olympia/templates/mobile/base_addons.html
@@ -22,7 +22,7 @@
 
     {% block extrahead %}{% endblock %}
   </head>
-  <body class="html-{{ DIR }} {{ request.APP.short }} lang-{{ LANG }} {% block bodyclass %}{% endblock %}"
+  <body class="html-{{ DIR }} mobile {{ request.APP.short }} lang-{{ LANG }} {% block bodyclass %}{% endblock %}"
         data-app="{{ request.APP.short }}"
         data-appname="{{ request.APP.pretty }}"
         data-appid="{{ request.APP.id }}"
@@ -31,6 +31,10 @@
         data-readonly="{{ settings.READ_ONLY|json }}"
         data-media-url="{{ MEDIA_URL }}"
         data-static-url="{{ STATIC_URL }}"
+        {% if switch_is_active('fxa-auth') %}
+          data-fxa-auth="true"
+          data-fxa-config="{{ fxa_config()|json }}"
+        {% endif %}
         {% block bodyattrs %}{% endblock %}>
 
     <div id="page">
@@ -68,6 +72,8 @@ <h1 class="site-title">
         </header>
       {% endblock %}
 
+      {% include 'messages.html' %}
+
       <section id="content" class="{% block contentclass %}{% endblock %}">
         {% block page %}
         {% endblock page %}

diff --git a/src/olympia/users/templates/users/fxa_migration.html b/src/olympia/users/templates/users/fxa_migration.html
@@ -9,21 +9,7 @@
 <div class="primary">
   <section class="island hero primary grid prettyform fxa-migration-prompt">
     <h1>{{ _('Migrate to Firefox Accounts') }}</h1>
-    <img alt="{{ request.APP.pretty }}" src="{{ static('img/icons/firefox.png')|safe }}" class="firefox-logo">
-    <p>
-      {% trans %}
-        Mozilla Add-ons has transitioned to Firefox Accounts for login.
-        Continue to complete the simple upgrade process.
-      {% endtrans %}
-    </p>
-    <div class="migrate-button">
-      <a href="{{ url('users.login') }}" class="fxa-login button prominent">
-        {{ _('Continue') }}
-      </a>
-    </div>
-    <div class="skip-migrate-link">
-      <a href="{{ to }}">{{ _('Skip') }}</a>
-    </a>
+    {% include 'users/fxa_migration_prompt_content.html' %}
   </section>
 </div>
 {% endblock content %}
diff --git a/src/olympia/users/templates/users/fxa_migration_prompt_content.html b/src/olympia/users/templates/users/fxa_migration_prompt_content.html
@@ -0,0 +1,15 @@
+<img alt="{{ request.APP.pretty }}" src="{{ static('img/icons/firefox.png')|safe }}" class="firefox-logo">
+<p>
+  {% trans %}
+    Mozilla Add-ons has transitioned to Firefox Accounts for login.
+    Continue to complete the simple upgrade process.
+  {% endtrans %}
+</p>
+<div class="migrate-button">
+  <a href="{{ url('users.login') }}" class="fxa-login button prominent">
+    {{ _('Continue') }}
+  </a>
+</div>
+<div class="skip-migrate-link">
+  <a href="{{ to }}">{{ _('Skip') }}</a>
+</a>
diff --git a/src/olympia/users/templates/users/login_form.html b/src/olympia/users/templates/users/login_form.html
@@ -1,5 +1,5 @@
 <form method="post" action="{{ action }}"
-      class="{% if is_ajax %}ajax-submit {% endif %}listing-footer{% if login_source_form %} login-source-form{% else %} login-form{% endif %}">
+      class="{% if is_ajax %}ajax-submit {% endif %}listing-footer {% if login_source_form %}login-source-form{% else %}login-form{% endif %}">
   {{ csrf() }}
   {% if form.non_field_errors() %}
       <div class="notification-box error">

diff --git a/src/olympia/users/templates/users/mobile/fxa_migration.html b/src/olympia/users/templates/users/mobile/fxa_migration.html
@@ -0,0 +1,11 @@
+{% extends "mobile/base.html" %}
+
+{% block title %}{{ page_title(_('Migrate to Firefox Accounts')) }}{% endblock %}
+
+{% block page %}
+
+<div class="primary fxa-migration-prompt" role="main">
+  <h2>{{ _('Migrate to Firefox Accounts') }}</h2>
+  {% include 'users/fxa_migration_prompt_content.html' %}
+</div>
+{% endblock page %}
diff --git a/src/olympia/users/templates/users/mobile/login.html b/src/olympia/users/templates/users/mobile/login.html
@@ -18,7 +18,7 @@ <h2>{{ error }}</h2>
   {% endif %}
   <h2>{{ _('Log In') }}</h2>
   <section id="content">
-    <form method="post" class="form-mobile featured-inner object-lead user-input">
+    <form method="post" class="form-mobile featured-inner object-lead user-input {% if login_source_form %}login-source-form{% else %}login-form{% endif %}">
       {{ csrf() }}
       <fieldset>
         <ul>
@@ -27,12 +27,12 @@ <h2>{{ _('Log In') }}</h2>
             {{ form.username }}
             {{ form.username.errors }}
           </li>
-          <li>
+          <li class="login-field">
             <label for="id_password">{{ _('Password') }}</label>
             {{ form.password }}
             {{ form.password.errors }}
           </li>
-          <li>
+          <li class="login-field">
             <label for="id_rememberme" class="check">
               {{ form.rememberme }}
               {{ _('Remember me on this device') }}
@@ -47,7 +47,8 @@ <h2>{{ _('Log In') }}</h2>
         </ul>
       </fieldset>
       <div class="fm-control">
-        <button id="login-submit" class="button">{{ _('Log in') }}</button>
+        <button id="login-submit" class="button login-button">{{ _('Log in') }}</button>
+        <button class="login-source-button" type="submit">{{ _('Continue') }}</button>
       </div>
     </form>
   </section>

diff --git a/src/olympia/users/views.py b/src/olympia/users/views.py
@@ -752,11 +752,12 @@ def unsubscribe(request, hash=None, token=None, perm_setting=None):
 
 
 @waffle_switch('fxa-auth')
-def migrate(request):
+@mobile_template('users/{mobile/}fxa_migration.html')
+def migrate(request, template=None):
     next_path = request.GET.get('to')
     if not next_path or not is_safe_url(next_path):
         next_path = reverse('home')
     if not request.user.is_authenticated() or request.user.fxa_migrated():
         return redirect(next_path)
     else:
-        return render(request, 'users/fxa_migration.html', {'to': next_path})
+        return render(request, template, {'to': next_path})
diff --git a/static/css/impala/fxa-migration.less b/static/css/impala/fxa-migration.less
@@ -23,6 +23,7 @@
     }
     p {
         font-size: 14px;
+        font-family: @head-sans;
     }
 }
 
@@ -39,3 +40,45 @@
         text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
     }
 }
+.fxa-migrate-page:after {
+    content: '';
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(256, 256, 256, 0.75);
+    z-index: 65;
+}
+.fxa-migration-prompt {
+    font-family: "Trebuchet MS", sans-serif;
+    line-height: 1.25;
+    text-align: center;
+    z-index: 75;
+
+    p {
+        margin: 5px;
+    }
+    .migrate-button {
+        margin: 20px;
+    }
+    .firefox-logo {
+        height: 100px;
+        margin: 20px;
+        width: 100px;
+    }
+}
+.mobile {
+    .skip-migrate-link {
+        a,
+        a:visited,
+        a:hover {
+            color: #669BE1;
+        }
+    }
+}
+.notification-box.anonymous {
+    p {
+        margin-bottom: 0;
+    }
+}
diff --git a/static/css/impala/users.less b/static/css/impala/users.less
@@ -330,39 +330,3 @@ img.icon {
 #my-themes .view-all {
     float: right;
 }
-
-.fxa-migrate-page:after {
-    content: '';
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(256, 256, 256, 0.75);
-    z-index: 65;
-}
-
-.fxa-migration-prompt {
-    font-family: "Trebuchet MS", sans-serif;
-    line-height: 1.25;
-    text-align: center;
-    z-index: 75;
-
-    p {
-        margin: 5px;
-    }
-    .migrate-button {
-        margin: 20px;
-    }
-    .firefox-logo {
-        height: 100px;
-        margin: 20px;
-        width: 100px;
-    }
-}
-
-.notification-box.anonymous {
-    p {
-        margin-bottom: 0;
-    }
-}
diff --git a/static/css/mobile/forms.less b/static/css/mobile/forms.less
@@ -38,15 +38,15 @@
     input[type=checkbox] {
         margin-bottom: .5em;
     }
-    input[type=text], input[type=password], select, textarea {
+    input[type=email], input[type=text], input[type=password], select, textarea {
         margin-bottom: 1em;
         font-size: 1.3em;
 
         + .errorlist {
             margin-top: -.5em;
         }
     }
-    textarea, input[type=text], input[type=password] {
+    textarea, input[type=email], input[type=text], input[type=password] {
         border: 1px solid #ccc;
         padding: 3px;
         .border-radius(5px);

diff --git a/static/css/mobile/notifications.less b/static/css/mobile/notifications.less
@@ -0,0 +1,17 @@
+.notification-box {
+    line-height: 1.25;
+    margin: 10px 0;
+    padding: 10px;
+
+    h2 {
+        font-size: 20px;
+    }
+    p {
+        font-size: 18px;
+        margin-top: 10px;
+    }
+}
+.notification-box.error {
+    background-color: #FFA5A5;
+    color: #444;
+}
diff --git a/static/js/common/fxa-login.js b/static/js/common/fxa-login.js
@@ -1,4 +1,8 @@
-(function() {
+if ($('body').data('fxa-auth')) {
+    enableFxALogin();
+}
+
+function enableFxALogin() {
     var config = $('body').data('fxa-config');
 
     function nextPath() {
@@ -84,4 +88,4 @@
             showLoginSourceForm($form);
         }
     });
-})();
+}