Merge lp:~deadlight/canonical-identity-provider/registration-templates into lp:~deadlight/canonical-identity-provider/vanilla

[Karl Williams]

Converted the remaining registration templates to Vanilla

QA:
In terminal 1:
- npm i
- ./node_modules/gulp/bin/gulp.js sass
- source env/bin/activate
- make start-db
- make run
- Visit http://[CONTAINER IP]:8000/
- Create an account and login
- Add an SSO source
- Go to and test http://[CONTAINER IP]:8000/two_factor_auth?next=/
- Go to http://[CONTAINER IP]:8000/+logout-to-confirm and check the page renders properly

[Anthony Dillon (ya-bo-ng)]

LGTM one small comment

review: Approve

[lp:~deadlight/canonical-identity-provider/registration-templates]

1719. By Karl Williams on 2019-09-04

Make two factor form error use Vanilla form validation styles

=== modified file 'src/identityprovider/static_src/scss/styles.scss'
--- src/identityprovider/static_src/scss/styles.scss	2019-08-13 16:55:22 +0000
+++ src/identityprovider/static_src/scss/styles.scss	2019-09-04 08:33:12 +0000
@@ -78,3 +78,8 @@
   border-top: 1px solid $color-mid-light;
   border-bottom: 1px solid $color-mid-light;
 }
+
+// Custom table-of-contents override
+.p-table-of-contents {
+  font-size: 1rem;
+}

=== modified file 'src/webui/templates/registration/logout_to_confirm.html'
--- src/webui/templates/registration/logout_to_confirm.html	2013-06-18 07:43:33 +0000
+++ src/webui/templates/registration/logout_to_confirm.html	2019-09-04 08:33:12 +0000
@@ -1,20 +1,22 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2010 Canonical Ltd.  This software is licensed under the
+Copyright 2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
 {% block title %}{% trans "Can not use confirmation code while logged in" %}{% endblock %}
 
 {% block text_title %}
-  <h1 class="u1-h-main">{% trans "Can not use confirmation code while logged in" %}</h1>
+  <h1>{% trans "Can not use confirmation code while logged in" %}</h1>
 {% endblock %}
 
 {% block content %}
+  <div class="row">
     <p>{% blocktrans %}
       You have attempted to confirm an account while logged in as someone else.
-      We've cancelled your request. Please log out and create your new account again.
+      We've cancelled your request. Please <a href="/+logout">log out</a> and create your new account again.
     {% endblocktrans %}</p>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/registration/two_factor_information.html'
--- src/webui/templates/registration/two_factor_information.html	2016-12-09 10:16:50 +0000
+++ src/webui/templates/registration/two_factor_information.html	2019-09-04 08:33:12 +0000
@@ -1,11 +1,11 @@
 {% load i18n %}
 {% load static_url %}
-<div class="twofactor-information related-information">
-    <p>{% trans "Having trouble?" %}</p>
-    <p><a href="{% url 'device-addition' %}">{% trans "Add 2-factor authentication device" %}</a></p>
-    <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}<a href="{{ 2FFAQ }}">2-factor authentication FAQ</a>{% endblocktrans %}</p>
-    <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
+  <h3 class="p-heading--four">{% trans "Having trouble?" %}</h3>
+  <ul class="p-list--divided">
+    <li class="p-list__item"><a href="{% url 'device-addition' %}">{% trans "Add 2-factor authentication device" %}</a></li>
+    <li class="p-list__item">{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}<a href="{{ 2FFAQ }}">2-factor authentication FAQ</a>{% endblocktrans %}</li>
+    <li class="p-list__item"><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></li>
     {% if form.sync_2fa_available %}
-    <p><a href="{% url 'sync_2fa' %}">{% trans "Re-synchronize your device" %}</a></p>
+    <li class="p-list__item"><a href="{% url 'sync_2fa' %}">{% trans "Re-synchronize your device" %}</a></li>
     {% endif %}
-</div>
+  </ul>

=== modified file 'src/webui/templates/registration/twofactor.html'
--- src/webui/templates/registration/twofactor.html	2016-12-09 10:16:50 +0000
+++ src/webui/templates/registration/twofactor.html	2019-09-04 08:33:12 +0000
@@ -1,114 +1,77 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 
 {% load i18n %}
 {% load static_url %}
 
 {% block html_extra %}data-qa-id="two_factor_verify"{% endblock %}
 
-{% block extra_css %}
-    {% if rpconfig and rpconfig.logo_url %}
-    <style type="text/css" data-qa-id="test_2f_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;
-        }
-    </style>
-    {% endif %}
-{% endblock %}
-
 {% block text_title %}
-    <h1 class="u1-h-main">{% trans "One account to log in to everything on Ubuntu" %}</h1>
+<h1>{% trans "One account to log in to everything on Ubuntu" %}</h1>
 {% endblock %}
 
 {% block bodyclass %}{% endblock %}
 {% block menu %}{% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block content %}
-<div class="yui3-g-r">
-
-    <div id="auth" class="yui3-u-1-2">
-
-        {% if form %}
-        <div class="form-box">
-
-            <p class="title twofactor-title" data-qa-id="ubuntu_2fauth_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_2fauth">
-                    {% if rpconfig and rpconfig.displayname %}
-                        {{ rpconfig.displayname }}
-                    {% else %}
-                        Ubuntu One
-                    {% endif %}
-                </a><span class="action-title">{% trans "2-factor authentication" %}</span>
-            </p>
-
-            <form id="login-form" action="" method="post" name="loginform">
-                {% csrf_token %}
-                <p id="oathtoken" class="input-row{% if form.oath_token.errors or form.non_field_errors %} haserrors{% endif %}">
-
-                    <label for="id_oath_token">{% trans "Type your verification code:" %}</label>
-
-                    {{ form.oath_token }}
-
-                    {% if form.oath_token.errors %}
-                       <span class="error">{{ form.oath_token.errors|join:"" }}</span>
-                    {% endif %}
-
-                    {% if form.non_field_errors %}
-                        <span class="error">{{ form.non_field_errors|join:"" }}</span>
-                    {% endif %}
-                </p>
-                {% if form.non_field_errors and form.sync_2fa_available %}
-                <p class="formHelp">
-                    <a href="{% url 'sync_2fa' %}{% if next %}?next={{ next }}{% endif %}" data-qa-id="sync-2fa-link">
-                    {% trans "Device out of sync? Click here to re-synchronize" %}
-                    </a>
-                </p>
-                {% endif %}
-
-                <div class="actions">
-                    {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
-                    <button type="submit" class="cta" name="continue" data-qa-id="auth_button">
-                        <span>{% trans "Authenticate" %}</span>
-                    </button>
-                </div>
-
-            </form>
-
-        </div>
-        {% else %}
-        <div class="message info">
-            {% url 'device-addition' as device_add_url %}
-            <p>{% blocktrans %}Please <a href="{{ device_add_url }}">add a new 2-factor authentication device</a>.{% endblocktrans %}</p>
-        </div>
+<div class="row">
+  <div id="auth" class="col-6">
+    {% if form %}
+    <div class="p-card">
+      <h2 class="p-heading--four" data-qa-id="ubuntu_2fauth_title">
+        {% trans "Ubuntu One 2-factor authentication" %}
+      </h2>
+      <hr>
+      <form id="login-form" action="" method="post" name="loginform">
+        <div id="oathtoken" class="p-form-validation{% if form.oath_token.errors or form.non_field_errors %} is-error{% endif %}">
+          <label for="id_oath_token">{% trans "Type your verification code:" %}</label>
+          {{ form.oath_token }}
+
+          {% if form.oath_token.errors %}
+          <p class="p-form-validation__message">
+            <strong>Error:</strong> {{ form.oath_token.errors|join:"" }}
+          </p>
+          {% endif %}
+
+          {% if form.non_field_errors %}
+          <p class="p-form-validation__message">
+            <strong>Error:</strong> {{ form.non_field_errors|join:"" }}
+          </p>
+          {% endif %}
+        </div>
+        {% if form.non_field_errors and form.sync_2fa_available %}
+        <p>
+          <a href="{% url 'sync_2fa' %}{% if next %}?next={{ next }}{% endif %}" data-qa-id="sync-2fa-link">
+            {% trans "Device out of sync? Click here to re-synchronize" %}
+          </a>
+        </p>
         {% endif %}
-
-    </div>
-
-    <div class="yui3-u-1-3">
-
-        {% include "registration/two_factor_information.html" %}
-
-    </div>
-
+        {% csrf_token %}
+        {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
+        <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="auth_button">{% trans "Authenticate" %}</button>
+      </form>
+    </div>
+    {% else %}
+    {% url 'device-addition' as device_add_url %}
+    <p>{% blocktrans %}Please <a href="{{ device_add_url }}">add a new 2-factor authentication device</a>.{% endblocktrans %}</p>
+    {% endif %}
+  </div>
+  <div class="col-5 col-start-large-8">
+    <aside class="p-table-of-contents">
+      {% include "registration/two_factor_information.html" %}
+    </aside>
+  </div>
 </div>
 {% endblock %}
 
 {% block extra_js %}
 <script type="text/javascript">
-
-    YUI().use('node', function(Y) {
-        // autofocus shiv
-        if (!("autofocus" in document.createElement("input"))) {
-            Y.one('#oathtoken').focus();
-        }
-
-    });
-
+  YUI().use('node', function(Y) {
+    // autofocus shiv
+    if (!("autofocus" in document.createElement("input"))) {
+      Y.one('#oathtoken').focus();
+    }
+  });
 </script>
 {% endblock %}