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

[Karl Williams]

Upgraded the login and create user forms to the Vanilla template.

QA
---

- source the env
- make start-db
- make run
- visit [node]:8000
- try both the login and create user flows

[Karl Williams (deadlight)]

NOTE: To create a new user, you might want to see the email the systems sends. You can run "make mail-debug" in another terminal where you've sourced the env and you'll see all email content that's sent.

[Barry McGee (barry-mcgee)]

Eyeballed code - some comments inline.

[Karl Williams (deadlight)]

Addressed in-code comments

[lp:~deadlight/canonical-identity-provider/login]

1694. By Karl Williams on 2019-08-05

Optimise sass

[Anthony Dillon (ya-bo-ng)]

LGTM +1

review: Approve

=== modified file 'src/identityprovider/static_src/scss/styles.scss'
--- src/identityprovider/static_src/scss/styles.scss	2019-07-22 15:01:03 +0000
+++ src/identityprovider/static_src/scss/styles.scss	2019-08-05 13:10:49 +0000
@@ -5,6 +5,7 @@
 
 @import 'vanilla-framework/scss/build';
 
+//Navigation spacing tweaks
 .p-navigation .row {
   justify-content: space-between;
 }
@@ -13,6 +14,20 @@
   width: auto;
 }
 
+//Standard gradient hero
 .p-cip-hero {
   background-image: linear-gradient(212deg, #E95420 0%, #C44631 6%, #A33940 12%, #8B304A 18%, #7C2B51 24%, #772953 29%, #55163B 51%, #370626 75%, #2C001E 100%);
 }
+
+// Login/register headers hide/show
+.selected-create {
+  .login-form, .login-title {
+    display: none;
+  }
+}
+
+.selected-login {
+  .create-form, .create-title {
+    display: none;
+  }
+}

=== modified file 'src/webui/templates/registration/_create_account_form.html'
--- src/webui/templates/registration/_create_account_form.html	2018-10-16 19:32:57 +0000
+++ src/webui/templates/registration/_create_account_form.html	2019-08-05 13:10:49 +0000
@@ -2,71 +2,58 @@
 
 <form action="{% url_with_token 'new_account' %}" method="post" name="newaccountform" data-qa-id="create_account_form">
 
-    {% csrf_token %}
-
-    <div class="input-row{% if create_form.email.errors %} haserrors{% endif %} email-input">
-        <label for="id_email">{% trans "Please type your email:" %}</label>
-
-        {% if create_form.email.errors %}
-            <span class="error">{{ create_form.email.errors|first }}</span>
-        {% endif %}
-
-        {{ create_form.email }}
-    </div>
-
-    {% if selected_form == 'create' %}
-    {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
-    {% endif %}
-
-    {% if create_form.username %}
-        <label class="label-passwords">{% trans "Please tell us your full name and choose a username and password:" %}</label>
-    {% else %}
-        <label class="label-passwords">{% trans "Please tell us your full name and choose a password:" %}</label>
-    {% endif %}
-
-    <div class="input-row{% if create_form.displayname.errors %} haserrors{% endif %} name-input">
-
-        {% if create_form.displayname.errors %}
-            <span class="error">
-                {{ create_form.displayname.errors|first }}
-            </span>
-        {% endif %}
-
-        {{ create_form.displayname }}
-    </div>
-
-    {% if create_form.username %}
-        <div class="input-row{% if create_form.username.errors %} haserrors{% endif %} username-input">
-
-            {% if create_form.username.errors %}
-                 <span class="error">
-                    {{ create_form.username.errors|first }}
-                 </span>
-            {% endif %}
-
-            {{ create_form.username }}
-        </div>
-    {% endif %}
-
-    {% include "widgets/passwords.html" with fields=create_form %}
-
-    <div class="input-row{% if create_form.accept_tos.errors %} haserrors{% endif %} accept-tos-input">
-
-        {% if create_form.accept_tos.errors %}
-            <span class="error">
-                {{ create_form.accept_tos.errors|first }}
-            </span>
-        {% endif %}
-
-        {{ create_form.accept_tos }}
-
-	<label for="id_accept_tos">{% blocktrans with tos_url="terms_of_service"|static_url privacy_url="privacy_policy"|static_url privacy_notice_url="privacy_notice"|static_url %}I have read and accept the <a href="{{ tos_url }}" class="external" target="_blank">Ubuntu One terms of service</a>, <a href="{{ privacy_url }}" class="external" target="_blank">data privacy policy</a> and <a href="{{ privacy_notice_url }}" class="external" target="_blank">Canonical's SSO privacy notice</a>.{% endblocktrans %}</label>
-
-    </div>
-
-    <div class="actions">
-        <button type="submit" class="btn cta" name="continue" data-qa-id="register_button">
-            <span>{% trans "Create account" %}</span>
-        </button>
-    </div>
+{% csrf_token %}
+
+  <div class="p-form-validation{% if create_form.email.errors %} is-error{% endif %} email-input">
+    <label for="id_email">{% trans "Please type your email:" %}</label>
+    {% if create_form.email.errors %}
+    <span class="p-form-validation__message">{{ create_form.email.errors|first }}</span>
+    {% endif %}
+    {{ create_form.email }}
+  </div>
+
+  {% if selected_form == 'create' %}
+  {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
+  {% endif %}
+
+  {% if create_form.username %}
+  <label class="label-passwords">{% trans "Please tell us your full name and choose a username and password:" %}</label>
+  {% else %}
+  <label class="label-passwords">{% trans "Please tell us your full name and choose a password:" %}</label>
+  {% endif %}
+
+  <div class="p-form-validation{% if create_form.displayname.errors %} is-error{% endif %} name-input">
+    {% if create_form.displayname.errors %}
+    <span class="p-form-validation__message">
+      {{ create_form.displayname.errors|first }}
+    </span>
+    {% endif %}
+    {{ create_form.displayname }}
+  </div>
+
+  {% if create_form.username %}
+  <div class="p-form-validation{% if create_form.username.errors %} is-error{% endif %} username-input">
+    {% if create_form.username.errors %}
+    <span class="p-form-validation__message">
+      {{ create_form.username.errors|first }}
+    </span>
+    {% endif %}
+    {{ create_form.username }}
+  </div>
+  {% endif %}
+  {% include "widgets/passwords.html" with fields=create_form %}
+
+  <div class="p-form-validation{% if create_form.accept_tos.errors %} is-error{% endif %} accept-tos-input">
+    {% if create_form.accept_tos.errors %}
+    <span class="p-form-validation__message">
+      {{ create_form.accept_tos.errors|first }}
+    </span>
+    {% endif %}
+    {{ create_form.accept_tos }}
+    <label for="id_accept_tos">{% blocktrans with tos_url="terms_of_service"|static_url privacy_url="privacy_policy"|static_url privacy_notice_url="privacy_notice"|static_url %}I have read and accept the <a href="{{ tos_url }}" class="external" target="_blank">Ubuntu One terms of service</a>, <a href="{{ privacy_url }}" class="external" target="_blank">data privacy policy</a> and <a href="{{ privacy_notice_url }}" class="external" target="_blank">Canonical's SSO privacy notice</a>.{% endblocktrans %}</label>
+  </div>
+
+  <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="register_button">
+    <span>{% trans "Create account" %}</span>
+  </button>
 </form>

=== modified file 'src/webui/templates/registration/_login_form.html'
--- src/webui/templates/registration/_login_form.html	2019-01-09 18:37:18 +0000
+++ src/webui/templates/registration/_login_form.html	2019-08-05 13:10:49 +0000
@@ -1,58 +1,56 @@
 {% load i18n url_with_token %}
 
 <form id="login-form" action="{% url_with_token 'login' %}" method="post" name="loginform" data-qa-id="login_form">
-    {% csrf_token %}
-    <div class="input-row{% if form.email.errors or form.non_field_errors %} haserrors{% endif %} email-input">
-        <label for="id_email">{% trans "Please type your email:" %}</label>
-        {{ form.email }}
-        {% if form.email.errors %}
-          <span class="error">{{ form.email.errors|join:"" }}</span>
-        {% endif %}
-    </div>
-
-    {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
-
-    <div class="input-row{% if form.password.errors or form.non_field_errors %} haserrors{% endif %} password-input">
-        {% if form.password.errors %}
-            <span class="error">{{ form.password.errors|join:"" }}</span>
-        {% endif %}
-        {% if not form.oath_token and form.non_field_errors %}
-            <span class="error">{{ form.non_field_errors|join:"" }}</span>
-        {% endif %}
-        {{ form.password }}
-    </div>
-
-    {% if form.oath_token %}
-    <div class="input-row twofactor-input">
-        <h4 class="main">{% blocktrans %}Two Factor Authentication{% endblocktrans %}</h4>
-        <p id="oathtoken" class="input-row{% if form.oath_token.errors or form.non_field_errors %} haserrors{% endif %}">
-            <label class="formLabel" for="id_oath_token">{% trans "Device Password" %}</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>
-    </div>
-    {% endif %}
-
-    <div class="actions">
-        {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
-        <button type="submit" class="btn cta" name="continue" data-qa-id="login_button">
-            <span>{% trans "Log in" %}</span>
-        </button>
-        {% if not readonly %}
-        <input type="submit" class="forgot-password" name="forgot_password" formnovalidate formaction="{% url_with_token 'forgot_password' %}"
-            style="border:none; outline:none; background:none; cursor:pointer; color:#dd4814;"
-            value="{% trans 'Forgot your password?' %}">
-        {% endif %}
-
-        {% comment %}
-        {% if token %}{% trans "or" %}
-        {% include "common/cancel_link.html" %}{% endif %}
-        {% endcomment %}
-    </div>
+  {% csrf_token %}
+  <div class="p-form-validation{% if form.email.errors or form.non_field_errors %} is-error{% endif %} email-input">
+    <label for="id_email">{% trans "Please type your email:" %}</label>
+    {{ form.email }}
+    {% if form.email.errors %}
+    <span class="p-form-help-text">{{ form.email.errors|join:"" }}</span>
+    {% endif %}
+  </div>
+
+  {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
+
+  <div class="p-form-validation{% if form.password.errors or form.non_field_errors %} is-error{% endif %} password-input">
+    {% if form.password.errors %}
+    <span class="p-form-help-text">{{ form.password.errors|join:"" }}</span>
+    {% endif %}
+    {% if not form.oath_token and form.non_field_errors %}
+    <span class="p-form-help-text">{{ form.non_field_errors|join:"" }}</span>
+    {% endif %}
+    {{ form.password }}
+  </div>
+
+  {% if form.oath_token %}
+  <div class="p-form-validation twofactor-input">
+    <h4 class="main">{% blocktrans %}Two Factor Authentication{% endblocktrans %}</h4>
+    <p id="oathtoken" class="input-row{% if form.oath_token.errors or form.non_field_errors %} is-error{% endif %}">
+      <label class="formLabel" for="id_oath_token">{% trans "Device Password" %}</label>
+      {{ form.oath_token }}
+      {% if form.oath_token.errors %}
+      <span class="p-form-help-text">{{ form.oath_token.errors|join:"" }}</span>
+      {% endif %}
+      {% if form.non_field_errors %}
+      <span class="p-form-help-text">{{ form.non_field_errors|join:"" }}</span>
+      {% endif %}
+    </p>
+  </div>
+  {% endif %}
+
+  <div class="actions">
+    {% 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="login_button">
+      <span>{% trans "Log in" %}</span>
+    </button>
+    {% if not readonly %}
+    <input type="submit" class="p-button--base u-no-margin--bottom" name="forgot_password" formnovalidate formaction="{% url_with_token 'forgot_password' %}" value="{% trans 'Forgot your password?' %}">
+    {% endif %}
+
+    {% comment %}
+    {% if token %}{% trans "or" %}
+    {% include "common/cancel_link.html" %}{% endif %}
+    {% endcomment %}
+  </div>
 
 </form>

=== modified file 'src/webui/templates/registration/_password_meter.html'
--- src/webui/templates/registration/_password_meter.html	2014-12-10 15:30:54 +0000
+++ src/webui/templates/registration/_password_meter.html	2019-08-05 13:10:49 +0000
@@ -1,59 +1,54 @@
 {% load i18n static %}
 
 <script type="text/javascript">
-
-    YUI({
-        groups: {
-
-            u1: {
-                base: '{% static "identityprovider/js/u1/build/" %}',
-                combine: {{ combine|lower }},
-                root: 'identityprovider/js/u1/build/',
-                modules:  {
-                    'one-password-meter': {
-                        type: 'js',
-                        path: 'one-password-meter/one-password-meter-min.js',
-                        skinnable: true
-                    }
-                }
-            }
-        }
-    }).use('one-password-meter', function(Y) {
-
-        var passwordMeter = new Y.U1.Widgets.PasswordMeter({
-            input: '{{ pwd_selector }}',
-            inputConfirm: '{{ pwd_confirm_selector }}',
-            feedback: {
-                strengths: [
-                    {
-                        className: 'weak',
-                        text: '{% trans "Strength: weak" %}'
-                    },
-                    {
-                        className: 'fair',
-                        text: '{% trans "Strength: fair" %}'
-                    },
-                    {
-                        className: 'good',
-                        text: '{% trans "Strength: good" %}'
-                    },
-                    {
-                        className: 'strong',
-                        text: '{% trans "Strength: strong" %}'
-                    }
-                ],
-                'short': {
-                    className: 'short',
-                    text: '{% trans "Password too short" %}'
-                },
-                'asymmetric': {
-                    className: 'asymmetric',
-                    text: '{% trans "The passwords do not match" %}'
-                }
-            }
-        });
-        passwordMeter.render();
-
+  YUI({
+    groups: {
+      u1: {
+        base: '{% static "identityprovider/js/u1/build/" %}',
+        combine: {{ combine|lower }},
+        root: 'identityprovider/js/u1/build/',
+        modules:  {
+          'one-password-meter': {
+            type: 'js',
+            path: 'one-password-meter/one-password-meter-min.js',
+            skinnable: true
+          }
+        }
+      }
+    }
+  }).use('one-password-meter', function(Y) {
+    var passwordMeter = new Y.U1.Widgets.PasswordMeter({
+      input: '{{ pwd_selector }}',
+      inputConfirm: '{{ pwd_confirm_selector }}',
+      feedback: {
+        strengths: [
+        {
+          className: 'weak',
+          text: '{% trans "Strength: weak" %}'
+        },
+        {
+          className: 'fair',
+          text: '{% trans "Strength: fair" %}'
+        },
+        {
+          className: 'good',
+          text: '{% trans "Strength: good" %}'
+        },
+        {
+          className: 'strong',
+          text: '{% trans "Strength: strong" %}'
+        }
+        ],
+        'short': {
+          className: 'short',
+          text: '{% trans "Password too short" %}'
+        },
+        'asymmetric': {
+          className: 'asymmetric',
+          text: '{% trans "The passwords do not match" %}'
+        }
+      }
     });
-
+    passwordMeter.render();
+  });
 </script>

=== modified file 'src/webui/templates/registration/_title.html'
--- src/webui/templates/registration/_title.html	2014-12-09 21:32:43 +0000
+++ src/webui/templates/registration/_title.html	2019-08-05 13:10:49 +0000
@@ -1,16 +1,26 @@
 {% load i18n %}
-<p class="title login-title" data-qa-id="ubuntu_login_title">
-    {% if rpconfig and rpconfig.displayname %}
-    <{% if token %}a href="{% url 'cancel' token %}" {% else %}span {% endif %}class="trusted-rp-name" data-qa-id="trusted_rp_login">{{ rpconfig.displayname }}{% if token %}</a>{% else %}</span>{% endif %}
+<h2 class="p-heading--four title login-title" data-qa-id="ubuntu_login_title">
+  {% if rpconfig and rpconfig.displayname %}
+    {% if token %}
+      <a href="{% url 'cancel' token %}" class="trusted-rp-name" data-qa-id="trusted_rp_login">{{ rpconfig.displayname }}</a>
+    {% else %}
+      <span class="trusted-rp-name" data-qa-id="trusted_rp_login">{{ rpconfig.displayname }}</span>
+    {% endif %}
     <span class="action-title">{% blocktrans %}log in with Ubuntu One{% endblocktrans %}
-    {% else %}
+  {% else %}
     <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "log in" %}</span>
+  {% endif %}
+</h2>
+<h2 class="p-heading--four title create-title u-no-margin--top">
+  {% if rpconfig and rpconfig.displayname %}
+    {% if token %}
+      <a href="{% url 'cancel' token %}" class="trusted-rp-name">{{ rpconfig.displayname }}</a>
+    {% else %}
+      <span href="{% url 'cancel' token %}" class="trusted-rp-name">{{ rpconfig.displayname }}</span>
+      <span class="action-title">{% blocktrans %}create Ubuntu One account{% endblocktrans %}</span>
     {% endif %}
-</p>
-<p class="title create-title">
-    {% if rpconfig and rpconfig.displayname %}
-    <{% if token %}a href="{% url 'cancel' token %}" {% else %}span {% endif %}class="trusted-rp-name">{{ rpconfig.displayname }}{% if token %}</a>{% else %}</span>{% endif %}
-    <span class="action-title">{% blocktrans %}create Ubuntu One account{% endblocktrans %}</span>
-    {% else %}
-    <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "create account" %}</span>{% endif %}
-</p>
+  {% else %}
+    <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "create account" %}</span>
+  {% endif %}
+</h2>
+<hr>

=== modified file 'src/webui/templates/registration/_user_intention_radios.html'
--- src/webui/templates/registration/_user_intention_radios.html	2018-05-14 13:21:33 +0000
+++ src/webui/templates/registration/_user_intention_radios.html	2019-08-05 13:10:49 +0000
@@ -1,17 +1,8 @@
 {% load i18n %}
-<div class="hide-nojs user-intention"
-    data-qa-id="login_create_account_radio">
-
-    <label for="id_new_user" class="new-user">
-        <input type="radio" id="id_new_user" name="user-intentions" {% if readonly %}disabled="disabled"{%endif%}
-        {%if selected_form == "create" %} checked="checked"{%endif%} tabindex="20" value="create"
-        data-qa-id="user_intention_create">
-        <span>{% trans "I don’t have an Ubuntu One account" %}</span>
-    </label>
-
-    <label for="id_returning_user" class="returning-user">
-        <input type="radio" id="id_returning_user" name="user-intentions"{%if selected_form == "login" %} checked="checked"{%endif%}
-        tabindex="30" value="login" data-qa-id="user_intention_login">
-        <span>{% trans "I have an Ubuntu One account <i>and my password is:</i>" %}</span>
-    </label>
+<div class="hide-nojs user-intention" data-qa-id="login_create_account_radio">
+  <input type="radio" id="id_new_user" name="user-intentions" {% if readonly %}disabled="disabled"{%endif%} {%if selected_form == "create" %} checked="checked"{%endif%} tabindex="20" value="create" data-qa-id="user_intention_create">
+  <label for="id_new_user" class="new-user"><span>{% trans "I don’t have an Ubuntu One account" %}</span></label>
+
+  <input type="radio" id="id_returning_user" name="user-intentions"{%if selected_form == "login" %} checked="checked"{%endif%} tabindex="30" value="login" data-qa-id="user_intention_login">
+  <label for="id_returning_user" class="returning-user"><span>{% trans "I have an Ubuntu One account <i>and my password is:</i>" %}</span></label>
 </div>

=== modified file 'src/webui/templates/registration/confirm_new_account.html'
--- src/webui/templates/registration/confirm_new_account.html	2014-12-09 21:32:43 +0000
+++ src/webui/templates/registration/confirm_new_account.html	2019-08-05 13:10:49 +0000
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% comment %}
-Copyright 2010 Canonical Ltd.  This software is licensed under the
+Copyright 2010-2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
@@ -17,11 +17,11 @@
 {% block content %}
 <p>{% blocktrans %}The account for {{ email }} is ready to be created.{% endblocktrans %}</p>
 
-<form id="login-form" class="longfields" method="post" name="loginform">
+<form id="login-form" method="post" name="loginform">
   {% csrf_token %}
   <p class="actions">
-    <button type="submit" name="continue" class="btn" data-qa-id="complete_account_creation">
-        <span><span>{% trans "Complete account creation" %}</span></span>
+    <button type="submit" name="continue" class="p-button--positive" data-qa-id="complete_account_creation">
+      <span><span>{% trans "Complete account creation" %}</span></span>
     </button>
     {% trans "or" %}
     {% include "common/cancel_link.html" %}

=== modified file 'src/webui/templates/registration/login.html'
--- src/webui/templates/registration/login.html	2019-01-09 18:35:07 +0000
+++ src/webui/templates/registration/login.html	2019-08-05 13:10:49 +0000
@@ -1,140 +1,136 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n static_url %}
 
 {% comment %}
-Copyright 2010-2013 Canonical Ltd.  This software is licensed under
+Copyright 2010-2019 Canonical Ltd.  This software is licensed under
 the GNU Affero General Public License version 3 (see the file
 LICENSE).
 {% endcomment %}
 
 {% block extra_meta %}
-    <meta http-equiv="Expires" content="0">
-    <meta http-equiv="Cache-Control" content="no-cache">
-    <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
+  <meta http-equiv="Cache-Control" content="no-cache">
+  <meta http-equiv="Pragma" content="no-cache">
 {% endblock %}
 
 {% block messages %}
 {{ block.super }}
-{% if form.email.errors or form.password.errors or form.oath_token.errors or form.non_field_errors %}
-<div class="message error notopbar"><p>There were some problems with the information you gave us. Please check below and try again.</div>
-{% endif %}
 {% endblock %}
 
 {% block html_extra %}data-qa-id="login"{% 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 %}
 
 </div>
 
 {% block extra_css %}
-    {% if rpconfig and rpconfig.logo_url %}
-    <style type="text/css" data-qa-id="test_login_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>
+  {% if rpconfig and rpconfig.logo_url %}
+  <style type="text/css" data-qa-id="test_login_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 content %}
+
+<section class="p-strip">
+  <div class="row">
+    {% if form.email.errors or form.password.errors or form.oath_token.errors or form.non_field_errors %}
+    <div class="col-6">
+      <div class="p-notification--negative">
+        <p class="p-notification__response">
+          There were some problems with the information you gave us. Please check below and try again.
+        </p>
+      </div>
+    </div>
     {% endif %}
-{% endblock %}
-
-{% block content %}
-
-
-<div class="yui3-g-r">
-
-    <div id="auth" class="yui3-u-1-2 login">
-
-        {% with selected_form="login" %}
-        <div class="form-box selected-{{selected_form}}">
-
-            {% include "registration/_title.html" %}
-
-            <div class="dual-forms">
-
-                <div class="login-form">
-                    {% include "registration/_login_form.html" with selected_form=selected_form %}
-                </div>
-
-                {% if not readonly %}
-                <noscript>
-                    <p class="no-js-create-account">{% trans "Or create a new account:" %}</p>
-                </noscript>
-
-                <div class="create-form show-no-js">
-                    {% include "registration/_create_account_form.html" with create_form=create_account_form csrf_token=csrf_token %}
-                </div>
-                {% endif %}
-
-            </div>
-
+  </div>
+  <div class="row">
+    <div id="auth" class="login col-6">
+      {% with selected_form="login" %}
+      <div class="form-box p-card selected-{{selected_form}}">
+        {% include "registration/_title.html" %}
+        <div>
+          <div class="login-form">
+            {% include "registration/_login_form.html" with selected_form=selected_form %}
+          </div>
+
+          {% if not readonly %}
+          <noscript>
+            <p class="no-js-create-account">{% trans "Or create a new account:" %}</p>
+          </noscript>
+
+          <div class="create-form show-no-js">
+            {% include "registration/_create_account_form.html" with create_form=create_account_form csrf_token=csrf_token %}
+          </div>
+          {% endif %}
         </div>
-        {% endwith %}
-
+      </div>
+      {% endwith %}
     </div>
-
-    <div class="yui3-u-1-3">
-
+    <aside class="col-6">
+      <div class="p-table-of-contents">
         {% include "registration/_ubuntuone_information.html" %}
-
-    </div>
-
-</div>
+      </div>
+    </aside>
+  </div>
+</section>
 
 {% endblock %}
 
 {% block extra_js %}
 <script type="text/javascript">
-
-    'use strict';
-
-    YUI().use('node', function(Y) {
-        var CREATE      = 'create',
-            LOGIN       = 'login',
-            VALUE       = 'value',
-            CLICK       = 'click',
-            PAGESHOW    = 'pageshow',
-            SELECTED    = 'selected',
-
-            formBox     = Y.one('.form-box'),
-            classes     = [CREATE, LOGIN],
-            change,
-            win         = Y.config.win;
-
-        change = function (target) {
-
-            var show = target.get(VALUE),
-                hide = classes[target.get(VALUE) === classes[0] ? 1 : 0],
-                newEmail = formBox.one('.'+hide+'-form input[type=email]').get(VALUE);
-
-            formBox.removeClass(SELECTED + '-' + hide).addClass(SELECTED + '-' + show);
-
-            // transfer email
-            if(newEmail) {
-                formBox.one('.'+show+'-form input[type=email]').set(VALUE, newEmail);
-            }
-
-            // move radios
-            Y.one('.'+show+'-form .email-input').insert(Y.one('.user-intention').remove(), 'after');
-        };
-
-        // bind radios
-        formBox.all('.user-intention input[type=radio]').on(CLICK, function (e) {
-            change(e.target);
-        });
-        // for back buttons, or when firefox caches the radio value
-        if(win.addEventListener) {
-            win.addEventListener(PAGESHOW, function () {
-                change(Y.one('.user-intention input:checked'));
-            }, false);
-        }
-
+  'use strict';
+
+  YUI().use('node', function(Y) {
+    var CREATE      = 'create',
+    LOGIN       = 'login',
+    VALUE       = 'value',
+    CLICK       = 'click',
+    PAGESHOW    = 'pageshow',
+    SELECTED    = 'selected',
+
+    formBox     = Y.one('.form-box'),
+    classes     = [CREATE, LOGIN],
+    change,
+    win         = Y.config.win;
+
+    change = function (target) {
+
+      var show = target.get(VALUE),
+      hide = classes[target.get(VALUE) === classes[0] ? 1 : 0],
+      newEmail = formBox.one('.' + hide + '-form input[type=email]').get(VALUE);
+
+      formBox.removeClass(SELECTED + '-' + hide).addClass(SELECTED + '-' + show);
+
+      // transfer email
+      if(newEmail) {
+        formBox.one('.' + show + '-form input[type=email]').set(VALUE, newEmail);
+      }
+
+      // move radios
+      Y.one('.' + show + '-form .email-input').insert(Y.one('.user-intention').remove(), 'after');
+    };
+
+    // bind radios
+    formBox.all('.user-intention input[type=radio]').on(CLICK, function (e) {
+      change(e.target);
     });
-
+    // for back buttons, or when firefox caches the radio value
+    if(win.addEventListener) {
+      win.addEventListener(PAGESHOW, function () {
+        change(Y.one('.user-intention input:checked'));
+      }, false);
+    }
+  });
 </script>
 
 {% include "registration/_password_meter.html" with pwd_selector=".create-form #id_password" pwd_confirm_selector=".create-form #id_passwordconfirm" %}

=== modified file 'src/webui/templates/registration/new_account.html'
--- src/webui/templates/registration/new_account.html	2014-12-10 15:30:54 +0000
+++ src/webui/templates/registration/new_account.html	2019-08-05 13:10:49 +0000
@@ -1,9 +1,9 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load gargoyle_tags %}
 
 {% comment %}
-Copyright 2010-2013 Canonical Ltd.  This software is licensed under
+Copyright 2010-2019 Canonical Ltd.  This software is licensed under
 the GNU Affero General Public License version 3 (see the file
 LICENSE).
 {% endcomment %}
@@ -16,79 +16,70 @@
 {% block menu %}{% endblock %}
 
 {% block text_title %}
-    <h1 class="u1-h-main">
-    {% if rpconfig and rpconfig.logo_url %}
-        <img id="rpconfig_logo" src="{{ rpconfig.logo_url }}">
-    {% else %}
-        {% trans "One account to log in to everything on Ubuntu" %}
-    {% endif %}
-    </h1>
+<h1>
+  {% if rpconfig and rpconfig.logo_url %}
+  <img id="rpconfig_logo" src="{{ rpconfig.logo_url }}">
+  {% else %}
+  {% trans "One account to log in to everything on Ubuntu" %}
+  {% endif %}
+</h1>
 {% endblock %}
 
 {% block content_id %}auth{% endblock %}
 
 {% block content %}
 
-<div class="yui3-g-r">
-
-    <div class="yui3-u-1-2 create-account">
-
-        {% with selected_form="create" %}
-        <div class="form-box selected-{{selected_form}}">
-
-            {% include "registration/_title.html" %}
-
-            <div class="create-form">
-                {% include "registration/_create_account_form.html" with create_form=form  selected_form=selected_form %}
-            </div>
-
+<section class="p-strip">
+  <div class="row">
+    <div class="col-6 create-account">
+      {% with selected_form="create" %}
+      <div class="form-box selected-{{selected_form}}">
+        {% include "registration/_title.html" %}
+        <div class="create-form">
+          {% include "registration/_create_account_form.html" with create_form=form  selected_form=selected_form %}
         </div>
-        {% endwith %}
+      </div>
+      {% endwith %}
     </div>
-
-    <div class="yui3-u-1-3">
-
+    <aside class="col-6">
+      <div class="p-table-of-contents">
         {% include "registration/_ubuntuone_information.html" %}
-
-    </div>
-
-
-</div>
+      </div>
+    </aside>
+  </div>
+</section>
 
 {% endblock %}
 
 {% block extra_js %}
 
 <script type="text/javascript">
-
-    YUI().use('node', function(Y) {
-        var email = Y.one('#id_email'),
-            win = Y.config.win;
-            toLogin = function () {
-                win.location.href = '{% url 'login' %}';
-            }
-
-        // autofocus shiv
-        if (!("autofocus" in document.createElement("input"))) {
-            email.focus();
-        }
-
-        // send user back to login on radio click
-        Y.one('.returning-user').on('click', function () {
-            toLogin();
-        });
-
-        // send user back if the radio should be checked on pageshow
-        if(win.addEventListener) {
-            win.addEventListener('pageshow', function () {
-                if(Y.one('.returning-user input:checked')) {
-                    toLogin();
-                }
-            }, false);
-        }
-
+  YUI().use('node', function(Y) {
+    var email = Y.one('#id_email'),
+    win = Y.config.win;
+    toLogin = function () {
+      win.location.href = '{% url 'login' %}';
+    }
+
+    // autofocus shiv
+    if (!("autofocus" in document.createElement("input"))) {
+      email.focus();
+    }
+
+    // send user back to login on radio click
+    Y.one('.returning-user').on('click', function () {
+      toLogin();
     });
 
+    // send user back if the radio should be checked on pageshow
+    if(win.addEventListener) {
+      win.addEventListener('pageshow', function () {
+        if(Y.one('.returning-user input:checked')) {
+          toLogin();
+        }
+      }, false);
+    }
+  });
 </script>
 
 {% include "registration/_password_meter.html" with pwd_selector="#id_password" pwd_confirm_selector="#id_passwordconfirm" %}

=== modified file 'src/webui/templates/vanilla/base.html'
--- src/webui/templates/vanilla/base.html	2019-07-17 13:41:04 +0000
+++ src/webui/templates/vanilla/base.html	2019-08-05 13:10:49 +0000
@@ -50,6 +50,13 @@
       {% endblock %}
 
       <div id="content">
+        <section class="p-strip--dark p-cip-hero">
+          <div class="row">
+            <div class="col-7">
+              {% block text_title %}{% endblock %}
+            </div>
+          </div>
+        </section>
 
         {% block readonly %}
         {% if readonly %}
@@ -63,23 +70,21 @@
 
         {% block messages %}
         {% if messages %}
-        {% for message in messages %}
-        <div class="p-notification">
-          <p class="p-notification__response">
-            {{ message }}
-          </p>
-        </div>
-        {% endfor %}
-        {% endif %}
-        {% endblock %}
-
-        <section class="p-strip--dark p-cip-hero">
+        <section class="p-strip is-shallow">
+          {% for message in messages %}
           <div class="row">
-            <div class="col-7">
-              {% block text_title %}{% endblock %}
+            <div class="col-12">
+              <div class="p-notification">
+                <p class="p-notification__response">
+                  {{ message }}
+                </p>
+              </div>
             </div>
           </div>
+          {% endfor %}
         </section>
+        {% endif %}
+        {% endblock %}
 
         <div id="{% block content_id %}box{% endblock %}">
           {% block content %}{% endblock %}