Merge lp:~deadlight/canonical-identity-provider/resync-2fa into lp:~deadlight/canonical-identity-provider/vanilla

[Karl Williams]

Updated the 2fa resync page to Vanilla

QA:
- npm i
- ./node_modules/gulp/bin/gulp.js sass
- source env/bin/activate
- make start-db
- make run
- Visit http://[CONTAINER IP]:8000//sync_2fa

[Karl Williams (deadlight)]

QA'd in person

[Anthony Dillon (ya-bo-ng)]

Some small suggestions in code

review: Needs Fixing

[lp:~deadlight/canonical-identity-provider/resync-2fa]

1714. By Karl Williams on 2019-08-23

Add vanilla notification and validation styles

[Anthony Dillon (ya-bo-ng)]

LGTM +1

review: Approve

=== modified file 'src/webui/templates/registration/sync_2fa.html'
--- src/webui/templates/registration/sync_2fa.html	2014-12-09 21:32:43 +0000
+++ src/webui/templates/registration/sync_2fa.html	2019-08-23 14:06:35 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 
 {% load i18n %}
 
@@ -7,88 +7,69 @@
 {% block extra_css %}
     {% if rpconfig and rpconfig.logo_url %}
     <style type="text/css" data-qa-id="test_2fs_rp">
-        .title .trusted-rp-name {
-            background-image: url('{{ rpconfig.logo_url }}');
-            background-repeat: no-repeat;
-            background-position: 0 100%;
-            padding-left: 24px;
-            padding-top: 2px;
-        }
+      .title .trusted-rp-name {
+        background-image: url('{{ rpconfig.logo_url }}');
+        background-repeat: no-repeat;
+        background-position: 0 100%;
+        padding-left: 24px;
+        padding-top: 2px;
+      }
     </style>
     {% endif %}
 {% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block text_title %}
-    <h1 class="u1-h-main">{% trans "One account to log in to everything on Ubuntu" %}</h1>
-    <h2 class="u1-h-med u1-h-pair">{% trans "Enter three consecutive verification codes" %}</h2>
+    <h1>{% trans "One account to log in to everything on Ubuntu" %}</h1>
 {% endblock %}
 
 {% block bodyclass %}{% endblock %}
 {% block menu %}{% endblock %}
 
 {% block content %}
-<div class="yui3-g-r">
-
-    <div id="auth" class="yui3-u-1-2">
-
-        <div class="form-box">
-
-            <p class="title twofactor-title" data-qa-id="ubuntu_2fsync_title">
-                {% if token %}{% url 'cancel' token as cancel_url %}
-                {% else %}{% url 'account-index' as cancel_url %}{% endif %}
-
-                <a href="{{cancel_url}}" class="trusted-rp-name" data-qa-id="trusted_rp_2fsync">
-                    {% if rpconfig and rpconfig.displayname %}
-                        {{ rpconfig.displayname }}
-                    {% else %}
-                        Ubuntu One
-                    {% endif %}
-                </a><span class="action-title">{% trans "2-factor synchronization" %}</span>
-            </p>
-
-            <form id="sync-form" action="" method="post" name="syncform">
-                {% csrf_token %}
-
-                {% if form.non_field_errors %}
-                <div class="input-row haserrors">
-                   <span class="error">{{ form.non_field_errors|join:"" }}</span>
-                </div>
-                {% endif %}
-
-                {% for field in form %}
-                <p id="oathtoken{{ forloop.counter }}" class="input-row oath-token{% if field.errors or form.non_field_errors %} haserrors{% endif %}">
-                    <label for="{{ field.id_for_label }}">{% trans "Verification code" %} {{ forloop.counter }}:</label>
-
-                    {{ field }}
-
-                    {% if field.errors %}
-                      <span class="error">{{ field.errors|join:"" }}</span>
-                    {% endif %}
-                </p>
-                {% endfor %}
-
-                <div class="actions">
-                    {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
-                    <button type="submit" class="cta" name="continue" data-qa-id="sync_button">
-                        <span>{% trans "Synchronize" %}</span>
-                    </button>
-                </div>
-
-            </form>
-
-        </div>
-
+  <div class="row">
+    <div id="auth" class="col-6">
+      <div class="p-card">
+        <h2>{% trans "Enter three consecutive verification codes" %}</h2>
+        <hr>
+        <form id="sync-form" action="" method="post" name="syncform">
+          {% csrf_token %}
+          {% if form.non_field_errors %}
+          <div class="p-notification--negative">
+            <p class="p-notification__response">
+              <span class="p-notification__status">Error:</span>{{ form.non_field_errors|join:"" }}
+            </p>
+          </div>
+          {% endif %}
+
+          {% for field in form %}
+          <div id="oathtoken{{ forloop.counter }}" class="p-form-validation oath-token{% if field.errors or form.non_field_errors %} is-error{% endif %}">
+            <label for="{{ field.id_for_label }}">{% trans "Verification code" %} {{ forloop.counter }}:</label>
+            {{ field }}
+            {% if field.errors %}
+            <p class="p-form-validation__message">
+              <strong>Error:</strong> {{ field.errors|join:"" }}
+            </p>
+            {% endif %}
+          </div>
+          {% endfor %}
+
+          {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
+          <button type="submit" class="p-button--positive" name="continue" data-qa-id="sync_button">
+            <span>{% trans "Synchronize" %}</span>
+          </button>
+        </form>
+      </div>
     </div>
-
-    <div class="yui3-u-1-3">
-
+    <div class="col-4">
+      <div class="p-card">
         {% include "registration/two_factor_information.html" %}
-
+      </div>
     </div>
-
-</div>
+  </div>
 {% endblock %}
 
 {% block extra_js %}
-{% include "common/sync_2fa_javascript.html" %}
+  {% include "common/sync_2fa_javascript.html" %}
 {% endblock %}