Merge lp:~deadlight/canonical-identity-provider/merge-3-user into lp:canonical-identity-provider/release

[Karl Williams]

Convert all error and logged-in user pages to Vanilla templates

Converted all error and logged-in user pages to Vanilla templates

QA:
 - Run through the registration and create an account
 - Check adding devices and other account functions

[Karl Williams (deadlight)]

Ok, I've refactored this one too. The first commit is a cleanup so it should be easier to see the actual changes split out in later commits. I've also chunked the changes into logical, grouped commits.

[Daniel Manrique (roadmr)]

Thanks for the refactoring! as usual. much easier to review the actual changes separately from formatting.

Looks OK to me, I read the code (mostly reformatting and that kind of change) plus I ran this locally to visually check, didn't find any showstoppers (some tweaks might be needed for smaller-sized browser windows) but this is as discussed with Anthony, we can tweak later.

It still merges cleanly on trunk and all tests pass \o/

review: Approve

[Maximiliano Bertacchini (maxiberta)]

As Daniel said, thanks for the splitting :)

Changes look good codewise, all tests pass and it looks awesome \o/

A couple of UI details:
- Formatting of the "Preferred email address" help popup is broken.
- Error messages on Password/New password/Password confirmation lack any style.
- As discussed earlier, overall UI density could be a bit more compact!

I don't think any of that is a blocker, so I'm +1 to land and try on staging.

Thanks!

review: Approve

[Daniel Manrique (roadmr)]

For reference, the preferred email address popup text is in identityprovider/forms.py line 296:

            text = _(
                'Only verified email addresses are listed. Click '
                '<a href="%s">Manage email addresses</a> '
                'to add and verify email addresses.') % emails_url

Then this is included in the template in src/webui/templates/account/edit.html line 71. That line could use some formatting: there's a stray <b>, it's missing a space after a period, and it's escaping the help_text for the preferredemail field (maybe needs to be marked safe or something?).

Can be done in subsequent MP :)

https://docs.djangoproject.com/en/1.11/ref/forms/fields/#help-text

=== modified file 'src/identityprovider/tests/utils.py'
--- src/identityprovider/tests/utils.py	2019-10-22 14:03:48 +0000
+++ src/identityprovider/tests/utils.py	2019-12-17 18:04:01 +0000
@@ -45,26 +45,9 @@
 gargoyle.autodiscover()
 
 
-MISSING_BACKUP_DEVICE = """
-<div class="message warning" id="missing_backup_device">
-  <p>
-    We strongly recommend having two authentication devices,
-    a <strong>primary</strong> device and a <strong>secondary</strong>
-    or backup device.
-    </br>
-    Having two authentication devices means you can continue to access your
-    account with your secondary device should your primary device be lost or
-    stolen.
-    </br>
-    </br>
-    Click to <a href="{add_device_link}">add a backup device</a>.
-  </p>
-</div>
-
-"""
-
-EXHAUSTED_WARNING = """Your printed list of backup codes is nearly used up.
-  Please print a new list for the following devices."""
+MISSING_BACKUP_DEVICE = """We strongly recommend having two authentication"""
+
+EXHAUSTED_WARNING = """Your printed list of backup codes is nearly used up."""
 
 
 def assert_exhausted_warning(testcase, devices, response):
@@ -72,14 +55,10 @@
     dom = PyQuery(response.content)
     warning = dom.find('#exhausted_warning')
     testcase.assertEqual(len(warning), 1)
-    elems = warning.find('p')
-    testcase.assertEqual(elems[0].text.strip(), EXHAUSTED_WARNING)
-    testcase.assertEqual(len(devices), len(elems) - 1)
-    for device, elem in zip(devices, elems[1:]):
-        testcase.assertIn(device.name, elem.text)
-        link = elem.find('a')
-        testcase.assertNotEqual(link, None)
-        testcase.assertIn("Generate New Codes", link.find('span').text)
+    testcase.assertContains(response, EXHAUSTED_WARNING)
+    for device in devices:
+        testcase.assertContains(response, device.name)
+    testcase.assertContains(response, "Generate New Codes")
 
 
 class SSOBaseTestCaseMixin(object):

=== modified file 'src/webui/templates/403-csrf.html'
--- src/webui/templates/403-csrf.html	2014-12-09 21:32:43 +0000
+++ src/webui/templates/403-csrf.html	2019-12-17 18:04:01 +0000
@@ -1,41 +1,40 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2010-2013 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 %}
 
 {% block title %}
-    {% comment %}Translators: This is the title of a page only displayed when the browser request was old (ie. had an incorrect csrf token).{% endcomment %}
-    {% trans "Stale request" %}
+  {% comment %}Translators: This is the title of a page only displayed when the browser request was old (ie. had an incorrect csrf token).{% endcomment %}
+  {% trans "Stale request" %}
 {% endblock %}
 
 {% block text_title %}
-    {% comment %}Translators: This is the heading of a page only displayed when the browser request was old (ie. had an incorrect csrf token).{% endcomment %}
-    <h1 class="main">{% trans "Your page was stale." %}</h1>
+  {% comment %}Translators: This is the heading of a page only displayed when the browser request was old (ie. had an incorrect csrf token).{% endcomment %}
+  <h1>{% trans "Your page was stale." %}</h1>
 {% endblock %}
 
 {% block content %}
-        <div>
-          <p>
-            {% comment %}Translators: This is the text of a page only displayed when the browser request was old (ie. had an incorrect csrf token).{% endcomment %}
-            {% blocktrans %}Apologies, the page you came from was a little old.  Perhaps you navigated here from a browser window other than the one you used to login.  If so, try using the other browser window.  Or, try your action again, starting from our home page.{% endblocktrans %}
-          </p>
-
-          <h3>{% trans "The most common reasons for seeing this page are:" %}</h3>
-          <dl class="u1-list">
-            <dt>{% trans "Cookies have been disabled either globally or selectively." %}</dt>
-            <dd>{% blocktrans %}Ubuntu One requires cookies for delivering the best experience. Please make sure cookies are allowed for Ubuntu One.{% endblocktrans %}</dd>
-
-            <dt>{% trans "HTTP Referer header is disabled." %}</dt>
-            <dd>{% blocktrans %}Ubuntu One requires the HTTP Referer header to be present in the request. Please make sure this header isn't being blocked by any browser extensions.{% endblocktrans %}</dd>
-          </dl>
-
-          <p>{% blocktrans %}If neither of these solve the issue, please try accessing Ubuntu One from a completely fresh, unconfigured browser. This will help us better diagnose the problem in case it's still happening. If the issue is solved by using a clean browser session, try to verify your browser settings and extensions.{% endblocktrans %}</p>
-
-          {% include "static/_contact_support_snippet.html" %}
-
-          <a class="btn" href="/"><span><span>{% trans "Go to our home page" %}</span></span></a>
-        </div>
+  <div class="row">
+    <p>
+      {% comment %}Translators: This is the text of a page only displayed when the browser request was old (ie. had an incorrect csrf token).{% endcomment %}
+      {% blocktrans %}Apologies, the page you came from was a little old.  Perhaps you navigated here from a browser window other than the one you used to login.  If so, try using the other browser window.  Or, try your action again, starting from our home page.{% endblocktrans %}
+    </p>
+
+    <h3>{% trans "The most common reasons for seeing this page are:" %}</h3>
+    <dl>
+      <dt>{% trans "Cookies have been disabled either globally or selectively." %}</dt>
+      <dd>{% blocktrans %}Ubuntu One requires cookies for delivering the best experience. Please make sure cookies are allowed for Ubuntu One.{% endblocktrans %}</dd>
+      <dt>{% trans "HTTP Referer header is disabled." %}</dt>
+      <dd>{% blocktrans %}Ubuntu One requires the HTTP Referer header to be present in the request. Please make sure this header isn't being blocked by any browser extensions.{% endblocktrans %}</dd>
+    </dl>
+
+    <p>{% blocktrans %}If neither of these solve the issue, please try accessing Ubuntu One from a completely fresh, unconfigured browser. This will help us better diagnose the problem in case it's still happening. If the issue is solved by using a clean browser session, try to verify your browser settings and extensions.{% endblocktrans %}</p>
+
+    {% include "static/_contact_support_snippet.html" %}
+
+    <a href="/">{% trans "Go to our home page" %}</a>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/404-no-token.html'
--- src/webui/templates/404-no-token.html	2019-05-10 19:47:22 +0000
+++ src/webui/templates/404-no-token.html	2019-12-17 18:04:01 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
@@ -7,21 +7,21 @@
 {% endcomment %}
 
 {% block title %}
-    {% trans "Not found" %}
+  {% trans "Not found" %}
 {% endblock %}
 
 {% block text_title %}
-    <h1 class="main">Invalid address validation link</h1>
+  <h1>Invalid address validation link</h1>
 {% endblock %}
 
 {% block content %}
-        <div>
-          <p>{% blocktrans %}You clicked on an e-mail address validation link from Ubuntu One SSO; however, the information from the link seems to be invalid or stale.{% endblocktrans %}</p>
-          <p>{% blocktrans %}This could be for one of the following reasons:{% endblocktrans %}</p>
-          <ol class="u1-list">
-              <li>{% blocktrans %}The link has already been used. You don't need to validate your address again. {% endblocktrans %}</li>
-              <li>{% blocktrans %}You created your Ubuntu One SSO account while starting a session on another site. You must click the validation link on the same browser where you started your session on the other site.{% endblocktrans %}</li>
-          </ol>
-          <p>{% blocktrans %}You can also go to <a href="{{email_url}}">Your account's e-mail page</a> and click on "Verify" next to the e-mail address you want to verify. This is the best solution if you are unable to click the link on the same browser where you started your session on the other site.{% endblocktrans %}</p>
-        </div>
+  <div class="row">
+    <p>{% blocktrans %}You clicked on an e-mail address validation link from Ubuntu One SSO; however, the information from the link seems to be invalid or stale.{% endblocktrans %}</p>
+    <p>{% blocktrans %}This could be for one of the following reasons:{% endblocktrans %}</p>
+    <ol class="p-list">
+      <li class="p-list__item">{% blocktrans %}The link has already been used. You don't need to validate your address again. {% endblocktrans %}</li>
+      <li class="p-list__item">{% blocktrans %}You created your Ubuntu One SSO account while starting a session on another site. You must click the validation link on the same browser where you started your session on the other site.{% endblocktrans %}</li>
+    </ol>
+    <p>{% blocktrans %}You can also go to <a href="{{email_url}}">Your account's e-mail page</a> and click on "Verify" next to the e-mail address you want to verify. This is the best solution if you are unable to click the link on the same browser where you started your session on the other site.{% endblocktrans %}</p>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/404.html'
--- src/webui/templates/404.html	2014-12-09 21:32:43 +0000
+++ src/webui/templates/404.html	2019-12-17 18:04:01 +0000
@@ -1,24 +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 "Not found" %}
+  {% trans "Not found" %}
 {% endblock %}
 
 {% block text_title %}
-    <h1 class="main">Lost something?</h1>
+  <h1>Lost something?</h1>
 {% endblock %}
 
 {% block content %}
-        <div>
-          <p>{% blocktrans %}There's no page with this address in the Ubuntu One service. Check that you entered the address correctly and try again.{% endblocktrans %}</p>
-          <p>
-            {% blocktrans %}(Error <abbr>ID</abbr>: {{oopsid}}){% endblocktrans %}
-          </p>
-        </div>
+  <p>{% blocktrans %}There's no page with this address in the Ubuntu One service. Check that you entered the address correctly and try again.{% endblocktrans %}</p>
+  {% if oopsid %}
+  <p>{% blocktrans %}(Error <abbr>ID</abbr>: {{oopsid}}){% endblocktrans %}</p>
+  {% endif %}
 {% endblock %}

=== modified file 'src/webui/templates/500.html'
--- src/webui/templates/500.html	2015-09-30 19:30:01 +0000
+++ src/webui/templates/500.html	2019-12-17 18:04:01 +0000
@@ -1,36 +1,42 @@
-{% 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 "Oops!" %}
+  {% trans "Oops!" %}
 {% endblock %}
 
 {% block text_title %}
-    <h1 class="main">Oops!</h1>
+  <h1>Oops!</h1>
 {% endblock %}
 
 {% block content %}
-        <div>
-          <h3>
-            {% blocktrans %}Sorry, something just went wrong in Ubuntu One.{% endblocktrans %}
-          </h3>
-          {% if errormsg %}<p>{{ errormsg }}</p>{% endif %}
-          <p>
-            {% blocktrans %}We&#8217;ve recorded what happened, and we&#8217;ll fix it as soon as possible. Apologies for the inconvenience.{% endblocktrans %}
-          </p>
-          <p>
-            OOPS <abbr>ID</abbr>: {{ oopsid }}
-          </p>
-          {% if request.sentry.id %}
-          <p>Sentry <abbr>ID</abbr>: {{ request.sentry.id }}</p>
-          {% endif %}
-          <pre style="overflow:auto">
-{{traceback}}
-          </pre>
-        </div>
+  <div class="row">
+    <h3>
+      {% blocktrans %}Sorry, something just went wrong in Ubuntu One.{% endblocktrans %}
+    </h3>
+    {% if errormsg %}
+    <div class="p-notification--negative">
+      <p class="p-notification__response">
+        <span class="p-notification__status">Error: </span>{{ errormsg }}
+      </p>
+    </div>
+    {% endif %}
+    <p>
+      {% blocktrans %}We&#8217;ve recorded what happened, and we&#8217;ll fix it as soon as possible. Apologies for the inconvenience.{% endblocktrans %}
+    </p>
+    <p>
+      OOPS <abbr>ID</abbr>: {{ oopsid }}
+    </p>
+    {% if request.sentry.id %}
+    <p>Sentry <abbr>ID</abbr>: {{ request.sentry.id }}</p>
+    {% endif %}
+    <pre style="overflow:auto">
+      {{traceback}}
+    </pre>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/account/account_deleted.html'
--- src/webui/templates/account/account_deleted.html	2013-11-05 14:09:37 +0000
+++ src/webui/templates/account/account_deleted.html	2019-12-17 18:04:01 +0000
@@ -1,33 +1,35 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2013 Canonical Ltd.  This software is licensed under the
+Copyright 2013-2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
 {% block title %}
-    {% blocktrans %}Account Deleted{% endblocktrans %}
+  {% blocktrans %}Account Deleted{% endblocktrans %}
 {% endblock %}
 
 {% block text_title %}
-  <h1 class="main">{% trans "Account Deleted" %}</h1>
+  <h1>{% trans "Account Deleted" %}</h1>
 {% endblock %}
 
 {% block content %}
-<p>{% blocktrans %}Your Ubuntu One account has now been deleted.
-All emails associated with the account have been removed. 
-You can sign up for a new account with any of those emails if you want.
-{% endblocktrans %}</p>
-
-<p>{% blocktrans %}All authentication tokens associated with the account have
-also been deleted. That means any apps using that account will have to login
-again with a different account.
-{% endblocktrans %}</p>
-
-<p>{% blocktrans %}The openid identifier associated with the account has
-been reserved so that it cannot be given out to anyone else. This is so that
-no-one can impersonate you using openid. If you sign up for a new account
-you will have a different openid identifier.
-{% endblocktrans %}</p>
+  <div class="row">
+    <div class="col-8">
+      <p>{% blocktrans %}Your Ubuntu One account has now been deleted.
+      All emails associated with the account have been removed.
+      You can sign up for a new account with any of those emails if you want.
+      {% endblocktrans %}</p>
+      <p>{% blocktrans %}All authentication tokens associated with the account have
+      also been deleted. That means any apps using that account will have to login
+      again with a different account.
+      {% endblocktrans %}</p>
+      <p>{% blocktrans %}The openid identifier associated with the account has
+      been reserved so that it cannot be given out to anyone else. This is so that
+      no-one can impersonate you using openid. If you sign up for a new account
+      you will have a different openid identifier.
+      {% endblocktrans %}</p>
+    </div>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/account/applications.html'
--- src/webui/templates/account/applications.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/account/applications.html	2019-12-17 18:04:01 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
@@ -9,42 +9,46 @@
 {% block title %}{% trans "Applications you use" %}{% endblock %}
 
 {% block text_title %}
-    <h1 class="u1-h-main">{% trans "Applications you use" %}</h1>
+  <h1>{% trans "My account" %}</h1>
 {% endblock %}
 
 {% block content %}
-{% if tokens %}
-<p>
-  {% blocktrans %}You have used the applications shown here to access your account. If you have stopped using one of these and would like to prevent it from being used to access your account, click its "Delete" button below.{% endblocktrans %}
-</p>
-
-<p>
-  {% blocktrans %}You can choose to allow an application to have access again if you like by opening that application and instructing it to access your account. You'll have to provide your username and password before it will be granted access.{% endblocktrans %}
-</p>
-
-<section class="used-applications">
-    <h3>{% trans "Applications you last used" %}</h3>
-    <table class="listing">
-        <tbody>
-            {% for token in tokens %}
-            <tr>
-                <td data-qa-id="application_token">{{ token.name }}</td>
-                <td class="application-date">{{ token.date_created|date:"Y/m/d" }}</td>
-                <td class="actions">
-                    <form action="{% url 'applications' %}" method="post">
-                        {% csrf_token %}
-                        <input type="hidden" name="token_id" value="{{ token.pk }}" />
-                        <button type="submit" class="cta btn-sm secondary" name="Delete" data-qa-id="delete_application">
-                            <span>{% trans "Delete" %}</span>
-                        </button>
-                    </form>
-                </td>
-            </tr>
+  <h2>{% trans "Applications you use" %}</h2>
+  {% if tokens %}
+  <p>
+    {% blocktrans %}You have used the applications shown here to access your account. If you have stopped using one of these and would like to prevent it from being used to access your account, click its "Delete" button below.{% endblocktrans %}
+  </p>
+  <p>
+    {% blocktrans %}You can choose to allow an application to have access again if you like by opening that application and instructing it to access your account. You'll have to provide your username and password before it will be granted access.{% endblocktrans %}
+  </p>
+  <h3>{% trans "Applications you last used" %}</h3>
+  <div style="overflow: scroll">
+    <table class="p-table" style="min-width: 28em">
+      <thead>
+        <tr>
+          <th style="width: 50%;">Application name</th>
+          <th style="width: 30%;">Date created</th>
+          <th style="width: 20%;"></th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for token in tokens %}
+        <tr>
+          <td data-qa-id="application_token">{{ token.name }}</td>
+          <td>{{ token.date_created|date:"Y/m/d" }}</td>
+          <td class="u-align--right">
+            <form action="{% url 'applications' %}" method="post">
+              {% csrf_token %}
+              <input type="hidden" name="token_id" value="{{ token.pk }}" />
+              <button type="submit" class="p-button--negative" name="Delete" data-qa-id="delete_application">{% trans "Delete" %}</button>
+            </form>
+          </td>
+        </tr>
         {% endfor %}
-        </tbody>
+      </tbody>
     </table>
-</section>
-{% else %}
-<p>{% trans "You don't have any applications associated with this account." %}</p>
-{% endif %}
+  </div>
+  {% else %}
+  <p>{% trans "You don't have any applications associated with this account." %}</p>
+  {% endif %}
 {% endblock %}

=== modified file 'src/webui/templates/account/auth_log.html'
--- src/webui/templates/account/auth_log.html	2016-07-06 02:49:14 +0000
+++ src/webui/templates/account/auth_log.html	2019-12-17 18:04:01 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% comment %}
 Copyright 2015 Canonical Ltd.  This software is licensed under the
@@ -8,46 +8,46 @@
 {% block title %}{% trans "Account activity" %}{% endblock %}
 
 {% block text_title %}
-    <h1 class="u1-h-main">{% trans "Account activity" %}</h1>
+  <h1>{% trans "My account" %}</h1>
 {% endblock %}
 
 {% block content %}
-{% if auth_log %}
-{% if full_auth_log_length > auth_log|length %}
-<p>
-  {% blocktrans with accesses=auth_log|length%}The {{ accesses }} most recent accesses made with your account are shown here.{% endblocktrans %}
-</p>
-{% else %}
-<p>
-  {% blocktrans %}Recent accesses made with your account are shown here.{% endblocktrans %}
-</p>
-{% endif %}
-<p>
-  {% blocktrans %}This includes authentication requests made by other sites and devices.{% endblocktrans %}
-</p>
-<section class="account-activity">
-    <table class="listing">
-        <thead>
-            <tr>
-                <td class='time-date'>{% trans "Time/date" %}</td>
-                <td class='log-type'>{% trans "Type" %}</td>
-                <td class='ip-address'>{% trans "IP address" %}</td>
-                <td class='user-agent'>{% trans "User Agent/Browser" %}</td>
-            </tr>
-        </thead>
-        <tbody>
-            {% for attempt in auth_log %}
-            <tr>
-                <td class="time-date">{{ attempt.when_created }}</td>
-                <td class="log-type">{{ attempt.log_type_label }}</td>
-                <td class="ip-address">{{ attempt.remote_ip }}</td>
-                <td class="user-agent">{{ attempt.user_agent }}</td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
-</section>
-{% else %}
-<p>{% trans "Your account has no activity yet." %}</p>
-{% endif %}
+  <h2>Account activity</h2>
+  {% if auth_log %}
+  {% if full_auth_log_length > auth_log|length %}
+
+  <p>
+    {% blocktrans with accesses=auth_log|length%}The {{ accesses }} most recent accesses made with your account are shown here.{% endblocktrans %}
+  </p>
+  {% else %}
+  <p>
+    {% blocktrans %}Recent accesses made with your account are shown here.{% endblocktrans %}
+  </p>
+  {% endif %}
+  <p>
+    {% blocktrans %}This includes authentication requests made by other sites and devices.{% endblocktrans %}
+  </p>
+  <table class="p-table">
+    <thead>
+      <tr>
+        <th>{% trans "Time/date" %}</th>
+        <th>{% trans "Type" %}</th>
+        <th>{% trans "IP address" %}</th>
+        <th>{% trans "User Agent/Browser" %}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for attempt in auth_log %}
+      <tr>
+        <td class="p-table__item--truncate" title="{{ attempt.when_created }}">{{ attempt.when_created }}</td>
+        <td>{{ attempt.log_type_label }}</td>
+        <td>{{ attempt.remote_ip }}</td>
+        <td class="p-table__item--truncate" title="{{ attempt.user_agent }}">{{ attempt.user_agent }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  {% else %}
+  <p>{% trans "Your account has no activity yet." %}</p>
+  {% endif %}
 {% endblock %}

=== modified file 'src/webui/templates/account/confirm_email_invalidation.html'
--- src/webui/templates/account/confirm_email_invalidation.html	2018-09-07 16:32:46 +0000
+++ src/webui/templates/account/confirm_email_invalidation.html	2019-12-17 18:04:01 +0000
@@ -1,32 +1,31 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2010-2013 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 %}
 
 {% block title %}{% trans "Email invalidation" %}{% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Email invalidation" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "Email invalidation" %}</h1>{% endblock %}
 
 {% block content %}
-
-<div class="info">
-  <p>{% blocktrans %}<strong>WARNING:</strong> Invalidating an e-mail address will prevent logging in to Ubuntu One using that address.{% endblocktrans %}</p>
-  <p>{% blocktrans %}If you intended to <em>validate</em> the address instead, please check the confirmation e-mail you received and click on the first URL to confirm the address.{% endblocktrans %}</p>
-  <p>{% blocktrans %}Are you sure you want to <strong>invalidate</strong> the email address {{ email }}?{% endblocktrans %}</p>
-</div>
-<div class="actions">
-  <form action="" method="POST">
-    {% csrf_token %}
-    <p>
-      <button type="submit" class="btn cta" name="invalidate" data-qa-id="confirm_email_invalidation">
-        <span>{% trans "Yes, invalidate" %}</span>
-    </button>
-    {% include "common/cancel_link.html" %}
-</p>
-</form>
+<div class="row">
+  <div class="col-8">
+    <div class="p-notification--caution">
+      <p class="p-notification__response">
+        {% blocktrans %}<span class="p-notification__status">WARNING:</span> Invalidating an e-mail address will prevent logging in to Ubuntu One using that address.{% endblocktrans %}
+      </p>
+    </div>
+    <p>{% blocktrans %}If you intended to <em>validate</em> the address instead, please check the confirmation e-mail you received and click on the first URL to confirm the address.{% endblocktrans %}</p>
+    <p>{% blocktrans %}Are you sure you want to <strong>invalidate</strong> the email address {{ email }}?{% endblocktrans %}</p>
+    <form action="" method="POST">
+      {% csrf_token %}
+      <button type="submit" class="p-button--negative" name="invalidate" data-qa-id="confirm_email_invalidation">{% trans "Yes, invalidate" %}</button>
+      {% include "common/cancel_link.html" %}
+    </form>
+  </div>
 </div>
 
 {% endblock %}

=== modified file 'src/webui/templates/account/confirm_new_email.html'
--- src/webui/templates/account/confirm_new_email.html	2016-12-02 21:16:07 +0000
+++ src/webui/templates/account/confirm_new_email.html	2019-12-17 18:04:01 +0000
@@ -1,8 +1,8 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% 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 %}
 
@@ -10,37 +10,28 @@
 
 {% block title %}{% trans "Complete email address validation" %}{% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% blocktrans %}Validate {{ email }}?{% endblocktrans %}</h1>{% endblock %}
+{% block text_title %}<h1>{% blocktrans %}Validate {{ email }}?{% endblocktrans %}</h1>{% endblock %}
 
 {% block content_id %}auth{% endblock %}
 
 {% block content %}
-<p>{% blocktrans %}Are you sure you want to confirm and validate this email address?{% endblocktrans %}</p>
-
-<div class="actions">
+<div class="row">
+  <p>{% blocktrans %}Are you sure you want to confirm and validate this email address?{% endblocktrans %}</p>
   <form action="" method="post">
     {% csrf_token %}
-
     {% if captcha_required %}
     <p class="captcha" id="captcha">
-        {% if captcha_error_message %}
-            <span class="error">
-                {{ captcha_error_message }}
-            </span>
-        {% endif %}
-        {% include "widgets/recaptcha-v2.html" %}
+      {% if captcha_error_message %}
+      <span class="error">
+        {{ captcha_error_message }}
+      </span>
+      {% endif %}
+      {% include "widgets/recaptcha-v2.html" %}
     </p>
     {% endif %}
-
-    <p>
-      <input type="hidden" name="post" value="yes" />
-      <button type="submit" name="continue" class="btn cta" data-qa-id="confirm_email_validation">
-        <span>{% trans "Yes, I'm sure" %}</span>
-      </button>
-      <a class="cta secondary" href="{% if token %}/{{ token }}{% endif %}/" data-qa-id="cancel_email_validation">{% trans "Cancel" %}</a>
-    </p>
+    <input type="hidden" name="post" value="yes" />
+    <button type="submit" name="continue" class="p-button--positive" data-qa-id="confirm_email_validation">{% trans "Yes, I'm sure" %}</button>
+    <a class="p-button--base" href="{% if token %}/{{ token }}{% endif %}/" data-qa-id="cancel_email_validation">{% trans "Cancel" %}</a>
   </form>
 </div>
-
-<br style="clear: both" />
 {% endblock %}

=== modified file 'src/webui/templates/account/deactivated.html'
--- src/webui/templates/account/deactivated.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/account/deactivated.html	2019-12-17 18:04:01 +0000
@@ -2,18 +2,22 @@
 {% 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 %}
 
 {% block title %}{% trans "Account deactivated" %}{% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Account deactivated" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "Account deactivated" %}</h1>{% endblock %}
 
 {% block content %}
-<div>
-    <p>
-    {% blocktrans %}Your account has been deactivated.{% endblocktrans %}
-    </p>
+<div class="row">
+  <div class="col-8">
+    <div class="p-notification--negative">
+      <p class="p-notification__response">
+        {% blocktrans %}Your account has been deactivated.{% endblocktrans %}
+      </p>
+    </div>
+  </div>
 </div>
 {% endblock %}

=== modified file 'src/webui/templates/account/delete.html'
--- src/webui/templates/account/delete.html	2018-12-13 17:22:24 +0000
+++ src/webui/templates/account/delete.html	2019-12-17 18:04:01 +0000
@@ -1,71 +1,62 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2013 Canonical Ltd.  This software is licensed under the
+Copyright 2013-2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
 {% block html_extra %}data-qa-id="edit_account"{% endblock %}
 
 {% block title %}
-    {% blocktrans %}Delete account{% endblocktrans %}
+  {% blocktrans %}Delete account{% endblocktrans %}
 {% endblock %}
 
 {% block text_title %}
-  <h1 class="main">{% trans "Delete account" %}</h1>
+  <h1>{% trans "My account" %}</h1>
 {% endblock %}
 
 {% block content %}
-
-<p>{% blocktrans %}Please be aware that deleting your Ubuntu One 
-account means you'll lose access to all your accounts tied to your 
-Ubuntu One login. This means you won't be able to change their 
-status or cancel any services associated.
-{% endblocktrans %}</p>
-
-<h2>Launchpad:</h2>
-
-<p>{% blocktrans %}All content published under your Launchpad user will remain
-public unless you deactivate your launchpad account first.
-{% endblocktrans %}</p>
-
-<h2>{% trans "Other services:" %}</h2>
-
-<p>{% blocktrans %}Landscape, Ubuntu wiki sites, Ubuntu Forum and AskUbuntu 
-accounts won't be deleted, but you will lose access to those too. You should 
-contact each team if you want to make sure each of those are eliminated too.
-{% endblocktrans %}</p>
-
-<p>{% blocktrans %}For more information check out:{% endblocktrans %}
-<a href="https://login.ubuntu.com/+faq#can-i-delete-my-ubuntu-one-account">{% trans "Can I delete my account?" %}</a>. 
-</p>
-<p>{% blocktrans %}Please take a moment to read through this page and make sure
-you understand the consequences of deleting your account before you confirm
-this action.
-{% endblocktrans %}</p>
-
-
-{% include "widgets/last_auth_sites.html" %}
-<form action="" method="post" class="confirm-password-deletion">
-    {% csrf_token %}
-
-    {% if not readonly %}
-    <p>{% trans "Please confirm your account's password before deletion." %}</p>
-    <div class="input-row{% if fields.password.errors or fields.non_field_errors %} haserrors{% endif %} password-input">
+  <h2>{% trans "Delete account" %}</h2>
+  <p>{% blocktrans %}Please be aware that deleting your Ubuntu One
+  account means you'll lose access to all your accounts tied to your
+  Ubuntu One login. This means you won't be able to change their
+  status or cancel any services associated.
+  {% endblocktrans %}</p>
+  <h3>Launchpad:</h3>
+  <p>{% blocktrans %}All content published under your Launchpad user will remain
+  public unless you deactivate your Launchpad account first.
+  {% endblocktrans %}</p>
+  <h3>{% trans "Other services:" %}</h3>
+  <p>{% blocktrans %}Landscape, Ubuntu wiki sites, Ubuntu Forum and AskUbuntu
+  accounts won't be deleted, but you will lose access to those too. You should
+  contact each team if you want to make sure each of those are eliminated too.
+  {% endblocktrans %}</p>
+  <p>{% blocktrans %}For more information check out:{% endblocktrans %}
+  <a href="/+faq#can-i-delete-my-ubuntu-one-account">{% trans "Can I delete my account?" %}</a>.
+  </p>
+  <p>{% blocktrans %}Please take a moment to read through this page and make sure
+  you understand the consequences of deleting your account before you confirm
+  this action.
+  {% endblocktrans %}</p>
+
+
+  {% include "widgets/last_auth_sites.html" %}
+  <form action="" method="post" class="row">
+    <div class="col-8 col-medium-6">
+      {% csrf_token %}
+
+      {% if not readonly %}
+      <p>{% trans "Please confirm your account's password before deletion." %}</p>
+      <div class="input-row{% if fields.password.errors or fields.non_field_errors %} haserrors{% endif %} password-input">
         {{ form }}
+      </div>
+      {% endif %}
+
+      {% if not readonly %}
+        <button type="submit" class="p-button--negative">{% trans "Permanently delete account" %}</button>
+      {% endif %}
+      <a class="p-button" href="/">{% trans "Cancel" %}</a>
     </div>
-    {% endif %}
-
-    <p class="actions">
-        <a class="cta secondary" href="/">{% trans "Cancel" %}</a>
-    {% if not readonly %}
-        {% trans "or" %}
-        <button type="submit" class="btn cta delete-button">
-            <span><span>{% trans "Permanently delete account" %}</span></span>
-        </button>
-    {% endif %}
-    </p>
-</form>
-
+  </form>
 {% endblock %}

=== modified file 'src/webui/templates/account/delete_email.html'
--- src/webui/templates/account/delete_email.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/account/delete_email.html	2019-12-17 18:04:01 +0000
@@ -1,35 +1,30 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2013 Canonical Ltd.  This software is licensed under the
+Copyright 2013-2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
 {% block html_extra %}data-qa-id="delete_email"{% endblock %}
 
 {% block title %}
-    {% trans "Delete unverified email" %}
+  {% trans "Delete unverified email" %}
 {% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% blocktrans %}Delete {{ email }}?{% endblocktrans %}</h1>{% endblock %}
+{% block text_title %}<h1>{% blocktrans %}Delete {{ email }}?{% endblocktrans %}</h1>{% endblock %}
 
 {% block content_id %}auth{% endblock %}
 
 {% block content %}
-    <div class="info">
-        <p>{% blocktrans %}Are you sure you want to delete this email address?{% endblocktrans %}</p>
-    </div>
-    <div class="actions">
-        <form action="" method="POST">
-            {% csrf_token %}
-            <p>
-                <button type="submit" class="btn cta" name="delete" data-qa-id="confirm_delete_email">
-                    <span>{% trans "Yes, delete" %}</span>
-                </button>
-                {% include "common/cancel_link.html" %}
-            </p>
-        </form>
-    </div>
-    <br style="clear: both" />
+  <div class="row">
+    <div class="col-8">
+      <p>{% blocktrans %}Are you sure you want to delete this email address?{% endblocktrans %}</p>
+      <form action="" method="POST">
+        {% csrf_token %}
+        <button type="submit" class="p-button--negative" name="delete" data-qa-id="confirm_delete_email">{% trans "Yes, delete" %}</button>
+        <a href="/" class="p-button--base">Cancel</a>
+      </form>
+    </div>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/account/edit.html'
--- src/webui/templates/account/edit.html	2018-07-31 15:57:21 +0000
+++ src/webui/templates/account/edit.html	2019-12-17 18:04:01 +0000
@@ -1,207 +1,155 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n static url_with_token %}
 
 {% 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 %}
 
 {% block html_extra %}data-qa-id="edit_account"{% endblock %}
 
 {% block title %}
-    {% blocktrans %}Personal details{% endblocktrans %}
+  {% blocktrans %}Personal details{% endblocktrans %}
 {% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Personal details" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block extra_css %}
 
-    {% if last_authenticated_sites %}
+  {% if last_authenticated_sites %}
     <style type="text/css">
-        {% for site in last_authenticated_sites %}
+      {% for site in last_authenticated_sites %}
         {% if rpconfig.logo_url %}
-        a[href='{{site.trust_root}}'] {
+          a[href='{{site.trust_root}}'] {
             background-image: url('{{ rpconfig.logo_url }}');
             background-repeat: no-repeat;
             background-position: 0 0;
             padding-left: 24px;
             padding-top: 1px;
-        }
+          }
         {% endif %}
-        {% endfor %}
+      {% endfor %}
     </style>
-    {% endif %}
+  {% endif %}
 
 {% endblock %}
 
 {% block content %}
-
-<div>
-{% include "common/unverified_email_warning.html" %}
-{% include "common/missing_backup_device_warning.html" %}
-{% include "common/printed_codes_nearly_exhausted_warning.html" %}
-</div>
-
-<form action="" method="post" class="edit-account-details" data-qa-id="edit_fieldsets">
+  {% include "vanilla/common/unverified_email_warning.html" %}
+  {% include "vanilla/common/missing_backup_device_warning.html" %}
+  {% include "vanilla/common/printed_codes_nearly_exhausted_warning.html" %}
+  <h2>Personal details</h2>
+  <form action="" method="post" class="edit-account-details" data-qa-id="edit_form">
     {% csrf_token %}
-    <fieldset class="">
-
-        <div data-qa-id="personal_details"></div>
-
-        <div class="{% if form.displayname.errors %}haserrors {% endif %}name-input input-row">
-            <label class="formLabel" for="id_displayname">{% trans "Full name:" %}</label>
-            {{ form.displayname }}
-            {% if form.displayname.errors %}
-                <span class="error">
-                    {{ form.displayname.errors|first }}
-                </span>
-            {% endif %}
+    <div data-qa-id="personal_details"></div>
+
+    <div class="row">
+      <div class="col-8">
+        <div class="p-form-validation{% if form.displayname.errors %} is-error{% endif %}">
+          <label class="formLabel" for="id_displayname">{% trans "Full name:" %}</label>
+          {{ form.displayname }}
+          {% if form.displayname.errors %}
+          <p class="p-form-validation__message">
+            <strong>Error:</strong> {{ form.displayname.errors|first }}
+          </p>
+          {% endif %}
         </div>
 
         {% if form.username %}
-        <div class="{% if form.username.errors %}haserrors {% endif %}username-input input-row">
-            <label class="formLabel" for="id_username">{% trans "Username:" %}</label>
-            {{ form.username }}
-            {% if form.username.errors %}
-                <span class="error">
-                    {{ form.username.errors|first }}
-                </span>
-            {% endif %}
+        <div class="p-form-validation{% if form.username.errors %} is-error{% endif %}">
+          <label class="formLabel" for="id_username">{% trans "Username:" %}</label>
+          {{ form.username }}
+          {% if form.username.errors %}
+          <p class="p-form-validation__message">
+            <strong>Error:</strong> {{ form.username.errors|first }}
+          </p>
+          {% endif %}
         </div>
         {% endif %}
 
-        <div class="{% if form.preferred_email.errors %}haserrors {% endif %}preferred-email-input input-row">
-            <label class="formLabel tooltip" for="id_preferred_email">
-              {% trans "Preferred email address:" %}
-
-                <span class="description tooltip sprite help question-mark"
-                    title="{%spaceless%}
-                        {% blocktrans %}This email address is passed on to other sites when requested as part of the login process.{% endblocktrans %}
-                        {{ form.preferred_email.help_text }}
-                    {% endspaceless %}">
-                    ?
-                </span>
-
-            </label>
-
-            {% if form.preferred_email %}
-                {% if form.preferred_email.errors %}
-                    <span class="error">
-                        {{ form.preferred_email.errors|first }}
-                    </span>
-                {% endif %}
-                {{ form.preferred_email }}
-            {% else %}
-                {# Manually added, it will be ignored by the django form #}
-                <input type="text" value="{{ unverified_email|default_if_none:'' }}" disabled="true" />
-            {% endif %}
-
+        <div class="p-form-validation {{% if form.preferred_email.errors %} is-error{% endif %}">
+          <label class="formLabel tooltip" for="id_preferred_email">
+            {% trans "Preferred email address:" %} <span class="p-tooltip--right" aria-describedby="email-tooltip"><i class="p-icon--help"></i><span class="p-tooltip__message" role="tooltip" id="email-tooltip">{%spaceless%}{% blocktrans %}This email address is passed on to other sites <br>when requested as part of the login process.{% endblocktrans %}{{ form.preferred_email.help_text }}{% endspaceless %}</span></span>
+          </label>
+
+          {% if form.preferred_email %}
+          {% if form.preferred_email.errors %}
+          <p class="p-form-validation__message">
+            <strong>Error: </strong>{{ form.preferred_email.errors|first }}
+          </p>
+          {% endif %}
+          {{ form.preferred_email }}
+          {% else %}
+          {# Manually added, it will be ignored by the django form #}
+          <input type="text" value="{{ unverified_email|default_if_none:'' }}" disabled="true" />
+          {% endif %}
         </div>
 
         {% if not embedded %}
         <p class="manage-email-adresses"><a href="{% url_with_token 'account-emails' %}" data-qa-id="manage_email_addresses_link">{% trans "Manage email addresses" %}</a></p>
         {% endif %}
-
-        {% if not readonly %}
+      </div>
+    </div>
+
+    {% if not readonly %}
+    <div class="p-strip is-shallow">
+      <hr>
+    </div>
+
+    <div class="row">
+      <div class="col-8">
         {% include "widgets/passwords.html" with edit_account_labels=1 fields=form %}
-        {% endif %}
-
-    </fieldset>
+      </div>
+    </div>
+    {% endif %}
 
     {% if enable_device_prefs %}
-    <fieldset class="undecorated boxed device-prefs">
-        <h4 class="legend" data-qa-id="authentication_devices">{% trans "Authentication devices" %}</h4>
-        <div class="{% if form.twofactor_required.errors %}haserrors {% endif %}twofactor-input input-row">
-            {{ form.twofactor_required }}
-            {% if form.twofactor_required.errors %}
-            <span class="error">{{ form.twofactor_required.errors|first }}</span>
-            {% endif %}
-        </div>
-        <div class="{% if form.warn_about_backup_device.errors %}haserrors {% endif %}backupdevice-warn-input input-row">
-            {{ form.warn_about_backup_device }}
-            <label class="formLabel" for="id_warn_about_backup_device">
-            {{ form.warn_about_backup_device.label }}
-            </label>
-            {% if form.warn_about_backup_device.errors %}
-            <span class="error">{{ form.warn_about_backup_device.errors|first }}</span>
-            {% endif %}
-        </div>
-    </fieldset>
+    <div class="p-strip is-shallow">
+      <hr>
+    </div>
+
+    <div class="p-form-validation{% if form.twofactor_required.errors %} is-errors{% endif %}">
+      <h4 class="legend" data-qa-id="authentication_devices">{% trans "Authentication devices" %}</h4>
+      <input type="radio" name="twofactor_required" value="True" {% if form.twofactor_required.value == True %}checked{% endif %} id="id_twofactor_required_0"><label for="id_twofactor_required_0">Always require an authentication device</label>
+      <input type="radio" name="twofactor_required" value="False" id="id_twofactor_required_1" {% if form.twofactor_required.value == False %}checked{% endif %}><label for="id_twofactor_required_1">Require only when logging in to sites that request it</label>
+      {% if form.twofactor_required.errors %}
+      <p class="p-form-validation__message">
+        <strong>Error:</strong> {{ form.twofactor_required.errors|first }}
+      </p>
+      {% endif %}
+    </div>
+
+    <div class="p-form-validation{% if form.warn_about_backup_device.errors %} is-error{% endif %}">
+      {{ form.warn_about_backup_device }}
+      <label class="formLabel" for="id_warn_about_backup_device">
+        {{ form.warn_about_backup_device.label }}
+      </label>
+      {% if form.warn_about_backup_device.errors %}
+      <p class="p-form-validation__message">
+        <strong>Error:</strong> {{ form.warn_about_backup_device.errors|first }}
+      </p>
+      {% endif %}
+    </div>
     {% endif %}
 
-    <p class="actions">
+    <div class="p-strip is-shallow">
+      <hr>
+    </div>
+
     {% if not readonly %}
-        <button type="submit" class="btn cta" name="update" data-qa-id="update_preferences">
-            <span>{% trans "Save changes" %}</span>
-        </button>
+    <button type="submit" class="p-button--positive" name="update" data-qa-id="update_preferences">{% trans "Save changes" %}</button>
+    <a href="/+delete" data-qa-id="delete_account_link" class="p-button--base">{% trans "Permanently delete account" %}</a>
     {% endif %}
     {% if token %}
-        {% trans "or" %}
-        <a id="exit" href="{% if require_username %}{% url 'server-decide' token %}?continue{% else %}.{% endif %}">{% trans "exit without updating" %}</a>
+    {% trans "or" %}
+      <p><a id="exit" href="{% if require_username %}{% url 'server-decide' token %}?continue{% else %}.{% endif %}">{% trans "exit without updating" %}</a></p>
     {% endif %}
-    </p>
-</form>
-
-<p><a href="/+delete" data-qa-id="delete_account_link">{% trans "Permanently delete account" %}</a></p>
-
-{% include "widgets/last_auth_sites.html" %}
+  </form>
+
+  {% include "widgets/last_auth_sites.html" %}
 
 {% endblock %}
 
 {% block extra_js %}
-
-{% include "registration/_password_meter.html" with pwd_selector="#id_password" pwd_confirm_selector="#id_passwordconfirm" %}
-
-<script type="text/javascript">
-
-    YUI({
-        groups: {
-
-            u1: {
-                base: '{% static "identityprovider/js/u1/build/" %}',
-                combine: {{ combine|lower }},
-                root: 'identityprovider/js/u1/build/',
-                modules:  {
-                    'one-widget-tooltip': {
-                        type: 'js',
-                        path: 'one-widget-tooltip/one-widget-tooltip-min.js'
-                    }
-                }
-            }
-        }
-    }).use('one-widget-tooltip', function(Y) {
-
-        tt = new Y.U1.Widget.Tooltip({
-            triggerNodes:".tooltip",
-            delegate: ".tooltip",
-            shim:false,
-            hideDelay: 1500,
-            autoHideDelay: 100000,
-            zIndex:100,
-            compass: 'east',
-            content: '<p class="tooltip-title">{% trans "Preferred email address" %}</p>' +
-                     '<p>{% blocktrans %}This email address is passed on to other sites when requested as part of the login process.{% endblocktrans %}</p>' +
-                     '<p>{{ form.preferred_email.help_text|escapejs }}</p>',
-            escapeHTML: false
-        });
-
-        // lighter version
-        tt.get('srcNode').addClass('tooltip-light');
-
-        // users should be able to enter tooltip to click links
-        tt.on('mouseover', function () {
-            this._clearTimers();
-        }, tt);
-        tt.on('mouseleave', function () {
-            this.hide();
-        }, tt);
-
-        tt.render();
-
-
-    });
-
-</script>
-
-
+  {% include "registration/_password_meter.html" with pwd_selector="#id_password" pwd_confirm_selector="#id_passwordconfirm" %}
 {% endblock %}

=== modified file 'src/webui/templates/account/emails.html'
--- src/webui/templates/account/emails.html	2017-02-26 01:28:59 +0000
+++ src/webui/templates/account/emails.html	2019-12-17 18:04:01 +0000
@@ -1,34 +1,33 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n url_with_token %}
 
 {% 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 %}
 
 {% block html_extra %}data-qa-id="account_emails"{% endblock %}
 
 {% block title %}
-  {% blocktrans %}{{ account_displayname }}'s email addresses{% endblocktrans %}
+  {% trans "Your email addresses" %}
 {% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Your email addresses" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<p>
-
-{% if not verified_emails and not unverified_emails %}
-  <p>{% blocktrans %}You have no email addresses associated with your account.{% endblocktrans %}</p>
-{% endif %}
-
-{% if verified_emails %}
-
-  <section class="verified-emails">
-
-    <h3>{% trans "Verified" %}</h3>
-
-    <table class="listing hover">
+  <h2>{% trans "Your email addresses" %}</h2>
+  {% if not verified_emails and not unverified_emails %}
+    <p>{% blocktrans %}You have no email addresses associated with your account.{% endblocktrans %}</p>
+  {% endif %}
+  {% if verified_emails %}
+  <section class="p-strip is-shallow {% if unverified_emails %} u-no-padding--bottom{% endif %}">
+    <table class="p-table">
+      <thead>
+        <tr>
+          <th>{% trans "Verified" %}</th>
+        </tr>
+      </thead>
+      <tbody>
       {% for email in verified_emails %}
         <tr>
           <td class="email{% if email.is_preferred %} preferred-email{% endif %}">
@@ -38,76 +37,67 @@
             {% endif %}
           </td>
           {% if not readonly %}
-            <td class="actions">
-                {% if not email.is_preferred and num_emails > 1 %}
-                <a href="{% url_with_token 'delete_email' email_address=email.email %}" class="btn-sm" data-qa-id="delete_verified_{{ email }}">
-                    <span>{% trans "Delete" %}</span>
-                </a>
+            <td class="u-align-text--right">
+              {% if not email.is_preferred and num_emails > 1 %}
+                <a href="{% url_with_token 'delete_email' email_address=email.email %}" class="btn-sm" data-qa-id="delete_verified_{{ email }}">{% trans "Delete" %}</a>
               {% endif %}
             </td>
           {% endif %}
         </tr>
       {% endfor %}
+      </tbody>
     </table>
-
   </section>
-
-{% endif %}
-
-{% if unverified_emails %}
-
-  <section class="unverified-emails">
-
-    <h3>{% trans "Unverified" %}</h3>
-
-    <table class="listing hover">
+  {% endif %}
+
+  {% if unverified_emails %}
+  <section class="p-strip is-shallow">
+    <table class="p-table">
+      <thead>
+        <tr>
+          <th>{% trans "unverified" %}</th>
+        </tr>
+      </thead>
+      <tbody>
       {% for email in unverified_emails %}
         <tr class="unverified-emails">
           <td class="email">{{ email }}</td>
           {% if not readonly %}
-            <td class="actions">
-              <a href="{% url_with_token 'verify_email' email_address=email.email %}" data-qa-id="verify_unverified_{{ email }}" class="verify-email btn-sm"><span>{% trans "Verify" %}</span></a>
+            <td class="u-align-text--right">
+              <a href="{% url_with_token 'verify_email' email_address=email.email %}" data-qa-id="verify_unverified_{{ email }}"{% trans "Verify" %}</a>
               {% if num_emails > 1 %}
-              <a href="{% url_with_token 'delete_email' email_address=email.email %}" data-qa-id="delete_unverified_{{ email }}" class="btn-sm">
-                <span>{% trans "Delete" %}</span>
-              </a>
+              <a href="{% url_with_token 'delete_email' email_address=email.email %}" data-qa-id="delete_unverified_{{ email }}">{% trans "Delete" %}</a>
               {% endif %}
             </td>
           {% endif %}
         </tr>
       {% endfor %}
     </table>
-
   </section>
-
-{% endif %}
-
-{% if not readonly %}
-
-  <section class="add-emails">
-
+  {% endif %}
+
+  {% if not readonly %}
     <h3>{% trans "Add email address" %}</h3>
-
     <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to verify it.{% endblocktrans %}</p>
-
-    <form action="{% url_with_token 'new_email' %}" method="post">
-      {% csrf_token %}
-      <div class="input-row">
-        {{ form.newemail }}
-        {% if form.newemail.errors %}
-          <span class="error">{{ form.newemail.errors|first }}</span>
-        {% endif %}
+    <div class="row">
+      <div class="col-6">
+        <form action="{% url_with_token 'new_email' %}" method="post" id="add-email">
+          {% csrf_token %}
+          <div class="p-form-validation{% if form.newemail.errors %} is-error{% endif %}">
+            <label for="id_newemail">Email address</label>
+            {{ form.newemail }}
+            {% if form.newemail.errors %}
+            <p class="p-form-validation__message">
+              <strong>Error:</strong> {{ form.newemail.errors|first }}
+            </p>
+            {% endif %}
+          </div>
+          <p class="actions">
+            <button type="submit" class="p-button--positive" name="continue" data-qa-id="add_new_email">{% trans "Add address" %}</button>
+            <a class="p-button--neutral" href="/">{% trans "Cancel" %}</a>
+          </p>
+        </form>
       </div>
-      <p class="actions">
-        <button type="submit" class="btn cta" name="continue" data-qa-id="add_new_email">
-          <span>{% trans "Add address" %}</span>
-        </button>
-        <a class="cta secondary" href="/">{% trans "Cancel" %}</a>
-      </p>
-    </form>
-
-  </section>
-
-{% endif %}
-
+    </div>
+  {% endif %}
 {% endblock %}

=== modified file 'src/webui/templates/account/invalidate_email.html'
--- src/webui/templates/account/invalidate_email.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/account/invalidate_email.html	2019-12-17 18:04:01 +0000
@@ -1,20 +1,27 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2010-2013 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 %}
 
 {% block title %}{% trans "Email invalidated" %}{% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Email invalidated" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "Email invalidated" %}</h1>{% endblock %}
 
 {% block content %}
-<p>{% blocktrans %}
-The email {{ email }} was successfully invalidated in our system.
-{% endblocktrans %}</p>
-<p>{% blocktrans %}
-Thank you for helping us provide a better service!
-{% endblocktrans %}</p>
+  <div class="row">
+    <div class="p-notification" id="notification">
+      <p class="p-notification__response">
+        {% blocktrans %}
+        The email {{ email }} was successfully invalidated in our system.
+        {% endblocktrans %}
+      </p>
+      <button class="p-icon--close" aria-label="Close notification" onclick="closeNotification('notification')">Close</button>
+    </div>
+    <p>{% blocktrans %}
+    Thank you for helping us provide a better service!
+    {% endblocktrans %}</p>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/account/new_email.html'
--- src/webui/templates/account/new_email.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/account/new_email.html	2019-12-17 18:04:01 +0000
@@ -1,37 +1,39 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% 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 %}
 
 {% block title %}{% trans "Add an email" %}{% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Add an email address to your account" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "Add an email address to your account" %}</h1>{% endblock %}
 
 {% block content_id %}auth{% endblock %}
 
 {% block content %}
+<div class="row">
+  <div class="col-8">
     <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to confirm your account.{% endblocktrans %}</p>
-
     <form action="{% url 'new_email' %}" method="post" name="newemailform">
-        {% csrf_token %}
-        <p class="input-row{% if form.newemail.errors %} haserrors{% endif %}">
-            <label for="id_newemail">{% trans "Email address" %}</label>
-            {{ form.newemail }}
-            {% if form.newemail.errors %}
-                <span class="error">{{ form.newemail.errors|first }}</span>
-            {% endif %}
-        </p>
-        <p class="actions">
-            <button type="submit" class="btn cta" name="continue" data-qa-id="send_instructions_confirm_email">
-                <span>{% trans "Send instructions" %}</span>
-            </button>
-            <a class="cta secondary" href=".">{% trans "Cancel" %}</a>
-        </p>
+      {% csrf_token %}
+      <div class="p-form-validation{% if form.newemail.errors %} is-error{% endif %}">
+        <label for="id_newemail">{% trans "Email address" %}</label>
+        {{ form.newemail }}
+        {% if form.newemail.errors %}
+        <p class="p-form-validation__message" id="input-error-message-inline" role="alert">
+          <strong>Error:</strong> {{ form.newemail.errors|first }}
+        </p>
+        {% endif %}
+      </div>
+      <button type="submit" class="p-button--primary" name="continue" data-qa-id="send_instructions_confirm_email">{% trans "Send instructions" %}</button>
+      <a class="p-button--base" href="/">{% trans "Cancel" %}</a>
     </form>
-    <script type="text/javascript">
-    document.newemailform.newemail.focus();
-    </script>
+  </div>
+</div>
+
+<script type="text/javascript">
+  document.newemailform.newemail.focus();
+</script>
 {% endblock %}

=== modified file 'src/webui/templates/account/ssh_keys.html'
--- src/webui/templates/account/ssh_keys.html	2016-07-13 04:07:52 +0000
+++ src/webui/templates/account/ssh_keys.html	2019-12-17 18:04:01 +0000
@@ -1,58 +1,104 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% comment %}
-Copyright 2016 Canonical Ltd.  This software is licensed under the
+Copyright 2016-2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file LICENSE).
 {% endcomment %}
 
 {% block title %}{% trans "SSH keys" %}{% endblock %}
 
 {% block text_title %}
-  <h1 class="u1-h-main">{% trans "SSH keys" %}</h1>
+  <h1>{% trans "My account" %}</h1>
 {% endblock %}
 
 {% block content %}
-{% if delete_key_form.fields.ssh_keys.choices %}
-  <section class="delete-ssh-keys">
-    <form action="" method="POST">
-      {% csrf_token %}
-      {{ delete_key_form }}
-      <input class="cta" type="submit" name="delete_keys" value="{% trans "Delete Selected Keys" %}"/>
-    </form>
+  <section class="p-strip is-shallow u-no-padding--top">
+    <h2>{% trans "SSH keys" %}</h2>
+    {% if delete_key_form.fields.ssh_keys.choices %}
+      <section class="delete-ssh-keys">
+        <form action="" method="POST">
+            <ul class="p-list--divided">
+            {% csrf_token %}
+            {% for value, key_info in delete_key_form.fields.ssh_keys.choices %}
+              <li class="p-list__item">
+                <input id="id_ssh_keys_{{ forloop.counter0 }}" name="ssh_keys" type="checkbox" value="{{ value }}"><label for="id_ssh_keys_{{ forloop.counter0 }}">{{ key_info.label }}</label>
+                <aside class="p-accordion" role="tablist" aria-multiselect="true">
+                  <ul class="p-accordion__list" style="margin-bottom: 0;">
+                    <li class="p-accordion__group">
+                      <button type="button" class="p-accordion__tab" id="tab{{ forloop.counter0 }}" role="tab" aria-controls="#tab{{ forloop.counter0 }}-section" aria-expanded="false">{% trans "Key details" %}</button>
+                      <section class="p-accordion__panel" id="tab{{ forloop.counter0 }}-section" role="tabpanel" aria-hidden="true" aria-labelledby="tab{{ forloop.counter0 }}-section">
+                        <dl>
+                          <dt>Type</dt>
+                          <dd>{{ key_info.type }}</dd>
+                          <dt>Text</dt>
+                          <dd><code>{{ key_info.text }}</code></dd>
+                        </dl>
+                      </section>
+                    </li>
+                  </ul>
+                </aside>
+              </li>
+            {% endfor %}
+          </ul>
+          <input class="p-button--negative" type="submit" name="delete_keys" value="{% trans "Delete selected keys" %}"/>
+        </form>
+      </section>
+    {% endif %}
+    <hr>
   </section>
-{% endif %}
-
-<h3>{% trans "Import new SSH key" %}</h3>
-<p>{% blocktrans %}
-  Insert the contents of your public key (usually
-  <code>~/.ssh/id_dsa.pub</code> or
-  <code>~/.ssh/id_rsa.pub</code>).</p>
-<p>Note: Only SSH v2 keys are supported.
-  {% endblocktrans %}</p>
-
-<form id="import_key" action="" method="POST">
-  {% csrf_token %}
-  {{ import_key_form }}
-  <input class="cta" type="submit" name="import_key" value="{% trans "Import SSH key" %}"/>
-</form>
+  <h3>{% trans "Import new SSH key" %}</h3>
+  <p>{% blocktrans %}
+    Insert the contents of your public key (usually
+    <code>~/.ssh/id_dsa.pub</code> or
+    <code>~/.ssh/id_rsa.pub</code>).</p>
+  <p>Note: Only SSH v2 keys are supported.
+    {% endblocktrans %}</p>
+
+  <form id="import_key" action="" method="POST">
+    {% csrf_token %}
+    {{ import_key_form }}
+    <input class="cta" type="submit" name="import_key" value="{% trans "Import SSH key" %}"/>
+  </form>
 {% endblock %}
+
 {% block extra_js %}
-<script>
- var pubkey = document.getElementById('id_ssh_key');
- var submit = document.querySelector('.cta');
- var keytext = document.querySelector('.key-text');
- var keytext_els = document.querySelectorAll('.key-text a');
- 
- if (pubkey.disabled) {
-   submit.disabled = true;
- }
+  <script>
+    /**
+      Attaches event listeners for the accordion open and close click events.
+      @param {String} accordionContainerSelector The selector of the accordion container.
+    */
+    function setupAccordionListener(accordionContainerSelector) {
+      /**
+        Toggles the necessary values on the accordion panels and handles to show or
+        hide depending on the supplied values.
+        @param {HTMLElement} element The tab that acts as the handles for the
+          accordion panes.
+        @param {Boolean} show Whether to show or hide the accordion panel.
+      */
+      const toggle = (element, show) => {
+        element.setAttribute('aria-expanded', show);
+        document
+          .querySelector(element.getAttribute('aria-controls'))
+          .setAttribute('aria-hidden', !show);
+      }
+      // Set up an event listener on the container so that panels can be added
+      // and removed and events do not need to be managed separately.
+      document
+        .querySelector(accordionContainerSelector)
+        .addEventListener('click', e => {
+          const target = e.target;
+          const isTargetOpen = target.getAttribute('aria-expanded') === 'true';
+          // Find any open panels within the container and close them.
+          if (target.classList.contains('p-accordion__tab')) {
+            e.currentTarget
+              .querySelectorAll('[aria-expanded=true]')
+              .forEach(element => toggle(element, false));
+            // Toggle the target.
+            toggle(target, !isTargetOpen);
+          }
+        });
+    }
 
- if (keytext) {
-   for (i = 0; i < keytext_els.length; ++i) {
-     keytext_els[i].addEventListener('click', function() {
-       this.classList.toggle('key-text-full');
-     });
-   }
- }
-</script>
+    setupAccordionListener('.delete-ssh-keys');
+  </script>
 {% endblock %}

=== modified file 'src/webui/templates/account/suspended.html'
--- src/webui/templates/account/suspended.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/account/suspended.html	2019-12-17 18:04:01 +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 %}
 
@@ -10,12 +10,16 @@
 
 {% block title %}{% trans "Account suspended" %}{% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Account suspended" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "Account suspended" %}</h1>{% endblock %}
 
 {% block content %}
-<div>
-    <p>
-    {% blocktrans %}Your account has been suspended.{% endblocktrans %}
-    </p>
+<div class="row">
+  <div class="col-8">
+    <div class="p-notification--negative">
+      <p class="p-notification__response">
+        {% blocktrans %}Your account has been suspended.{% endblocktrans %}
+      </p>
+    </div>
+  </div>
 </div>
 {% endblock %}

=== modified file 'src/webui/templates/account/user_logged_out_no_valid_emails.html'
--- src/webui/templates/account/user_logged_out_no_valid_emails.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/account/user_logged_out_no_valid_emails.html	2019-12-17 18:04:01 +0000
@@ -1,21 +1,25 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 
 {% comment %}
-Copyright 2010-2013 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 %}
 
 {% block title %}{% trans "Your account does not have a valid email address" %}{% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Your account does not have a valid email address" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "Your account does not have a valid email address" %}</h1>{% endblock %}
 
 {% block content %}
-<p>{% blocktrans %}
-You have no valid email addresses linked to your account, so it was deactivated.
-To reactivate the account please contact our support team at:{% endblocktrans %}
-<a href="{{ 'support_form'|static_url }}">{{ 'support_form'|static_url }}</a>
-</p>
+<div class="row">
+  <div class="col-8">
+    <p>{% blocktrans %}
+    You have no valid email addresses linked to your account, so it was deactivated.
+    To reactivate the account please contact our support team at:{% endblocktrans %}
+    <a href="{{ 'support_form'|static_url }}">{{ 'support_form'|static_url }}</a>
+    </p>
+  </div>
+</div>
 
 {% endblock %}

=== modified file 'src/webui/templates/bad_token.html'
--- src/webui/templates/bad_token.html	2013-02-27 12:19:30 +0000
+++ src/webui/templates/bad_token.html	2019-12-17 18:04:01 +0000
@@ -1,24 +1,30 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 
 {% 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 %}
 
 {% block title %}{% trans "Unauthorized confirmation code" %}{% endblock %}
 
 {% block text_title %}
-  <h1 class="main">{% trans "Unauthorized confirmation code" %}</h1>
+<h1>{% trans "Unauthorized confirmation code" %}</h1>
 {% endblock %}
 
 {% block content %}
-<p>{% blocktrans %}You are not authorized to use this confirmation code.
-If this URL was sent to you by email, please make sure you open it in the same browser where you requested it.
-{% endblocktrans %}</p>
-
-<p>{% blocktrans %}You can also seek further assistance on:{% endblocktrans %}</p>
-
-<a href="{{ 'support_form'|static_url }}">{{ "support_form"|static_url }}</a>
+  <div class="row">
+    <div class="col-8">
+      <div class="p-notification--negative">
+        <p class="p-notification__response">
+          <span class="p-notification__status">Error:</span>{% blocktrans %}You are not authorised to use this confirmation code.
+          If this URL was sent to you by email, please make sure you open it in the same browser where you requested it.
+          {% endblocktrans %}
+        </p>
+      </div>
+      <p>{% blocktrans %}You can also seek further assistance on:{% endblocktrans %}</p>
+      <p><a href="{{ 'support_form'|static_url }}">{{ "support_form"|static_url }}</a></p>
+    </div>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/common/missing_backup_device_warning.html'
--- src/webui/templates/common/missing_backup_device_warning.html	2013-04-17 13:23:35 +0000
+++ src/webui/templates/common/missing_backup_device_warning.html	2019-12-17 18:04:01 +0000
@@ -2,17 +2,17 @@
 
 {% if need_backup_device_warning %}
 {% url 'device-addition' as add_device %}
-<div class="message warning" id="missing_backup_device">
-  <p>
+<div id="missing_backup_device" class="p-notification--caution">
+  <p class="p-notification__response">
+    <span class="p-notification__status">{% blocktrans %}Warning:{% endblocktrans %}</span>
     {% blocktrans %}We strongly recommend having two authentication devices,
     a <strong>primary</strong> device and a <strong>secondary</strong>
     or backup device.
-    </br>
+    <br><br>
     Having two authentication devices means you can continue to access your
     account with your secondary device should your primary device be lost or
     stolen.
-    </br>
-    </br>
+    <br><br>
     Click to <a href="{{ add_device }}">add a backup device</a>.{% endblocktrans %}
   </p>
 </div>

=== modified file 'src/webui/templates/cookies.html'
--- src/webui/templates/cookies.html	2012-12-04 18:51:42 +0000
+++ src/webui/templates/cookies.html	2019-12-17 18:04:01 +0000
@@ -9,13 +9,13 @@
 {% block title %}{% trans "Cookies required" %}{% endblock %}
 
 {% block text_title %}
-    <h1 class="main">{% trans "Cookies required" %}</h1>
+  <h1>{% trans "Cookies required" %}</h1>
 {% endblock %}
 
 {% block content %}
-<div>
-    <p>
-    {% blocktrans %}Cookies are required to use this service. Please enable cookies in your browser.{% endblocktrans %}
-    </p>
+<div class="row">
+  <p>
+  {% blocktrans %}Cookies are required to use this service. Please enable cookies in your browser.{% endblocktrans %}
+  </p>
 </div>
 {% endblock %}

=== modified file 'src/webui/templates/device/addition-generic.html'
--- src/webui/templates/device/addition-generic.html	2016-12-14 11:00:33 +0000
+++ src/webui/templates/device/addition-generic.html	2019-12-17 18:04:01 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
@@ -8,81 +8,68 @@
 
 {% block html_extra %}data-qa-id="generic_device_addition"{% endblock %}
 
-{% block extra_header %}
-<style type="text/css">
-p span.key
-{
-  font-family: monospace;
-  font-size: large;
-}
-</style>
-{% endblock %}
-
-
 {% block title %}
   {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
 {% endblock %}
 
 
 {% block text_title %}
-  <h1 class="main">{% trans "Add device" %}</h1>
+  <h1>{% trans "My account" %}</h1>
 {% endblock %}
 
 {% block content %}
-
-<form method="post" action="">
-  {% csrf_token %}
-
-  <p><label>
-    {% trans "Name:" %}<br>
-    {{ form.name }}
-    {% if form.name.errors %}
-      <span class="error" id="name-error">{{ form.name.errors|first }}</span>
-    {% endif %}
-  </label></p>
-
-
-  {% block device_instructions %}
-  <p>
-    {% trans "Shared OATH HOTP/TOTP key:" %}<br>
-    <span class="key">
-      {{ formatted_key }}
-    </span>
-  </p>
-  <p>{% blocktrans %}Enter the shared OATH HOTP/TOTP key into your device.
-     You can use both Time and Counter based methods. The system will recognize
-     the one you've used that will be preserved for future authentications.</p>
-  {% endblocktrans %}
-  {% endblock %}
-
-  <br/>
-  <p>{% blocktrans %}
-    Now, verify your device is configured correctly.  Use your device
-    <em>once</em> to generate a one-time password and enter it below.
+  <h2>{% trans "Add device" %}</h2>
+  <form method="post" action="">
+    {% csrf_token %}
+    <div class="row">
+      <div class="p-form-validation is-error col-4">
+        <label for="id_name">{% trans "Name" %}</label>
+        {{ form.name }}
+        {% if form.name.errors %}
+          <p class="p-form-validation__message">
+            <strong>Error:</strong> {{ form.name.errors|first }}
+          </p>
+        {% endif %}
+      </div>
+    </div>
+    {% block device_instructions %}
+      <p>
+        {% trans "Shared OATH HOTP/TOTP key:" %}<br>
+        <code>
+          {{ formatted_key }}
+        </code>
+      </p>
+      <p>
+        {% blocktrans %}Enter the shared OATH HOTP/TOTP key into your device.
+         You can use both Time and Counter based methods. The system will recognize
+         the one you've used that will be preserved for future authentications.{% endblocktrans %}
+      </p>
+    {% endblock %}
+
+    <p>{% blocktrans %}
+      Now, verify your device is configured correctly.  Use your device
+      <em>once</em> to generate a one-time password and enter it below.
     {% endblocktrans %}</p>
-
-  <p><label>
-    {% trans "One-time password:" %}<br>
-    {{ form.otp }}
-    {% if form.otp.errors %}
-      <span class="error" id="otp-error">{{ form.otp.errors|first }}</span>
-    {% else %}
-      {% if error %}
-        <span class="error">{{ error }}</span>
-      {% endif %}
-    {% endif %}
-  </label></p>
-
-  <p>
+    <div class="row">
+      <div class="p-form-validation is-error col-4">
+        <label for="id_otp">{% trans "One-time password:" %}</label>
+        {{ form.otp }}
+        {% if form.otp.errors %}
+          <p class="p-form-validation__message">
+            <strong>Error:</strong> {{ form.otp.errors|first }}
+          </p>
+        {% else %}
+          {% if error %}
+            <p class="p-form-validation__message">
+              <strong>Error:</strong> {{ error }}
+            </p>
+          {% endif %}
+        {% endif %}
+      </div>
+    </div>
     <input type="hidden" name="type" value="{{ type }}">
     <input type="hidden" name="hex_key" value="{{ hex_key }}">
-    <button class="btn" type="submit" data-qa-id="confirm_add_device">
-      <span><span>{% trans "Add device" %}</span></span>
-    </button>
-    {% trans "or" %}
-    <a data-qa-id="cancel_add_device" href="{{ device_list_path }}">{% trans "cancel" %}</a>
-  </p>
-
-</form>
-
+    <button class="p-button--primary" type="submit" data-qa-id="confirm_add_device">{% trans "Add device" %}</button>
+    <a data-qa-id="cancel_add_device" href="{{ device_list_path }}" class="p-button--neutral">{% trans "Cancel" %}</a>
+  </form>
 {% endblock %}

=== modified file 'src/webui/templates/device/addition-google.html'
--- src/webui/templates/device/addition-google.html	2016-12-07 11:32:39 +0000
+++ src/webui/templates/device/addition-google.html	2019-12-17 18:04:01 +0000
@@ -5,49 +5,50 @@
 
 {% load qrcode %}
 {% block device_instructions %}
-<p>{% blocktrans %}To use your smartphone as an authentication device, please
-install "Google Authenticator" on it.  Go to
-<a href="http://m.google.com/authenticator">http://m.google.com/authenticator</a>
-in your phone's browser or search for "Google Authenticator" on your phone's app
-store/market.{% endblocktrans %}</p>
-
-<p><strong>
-  {% trans "Note: If you flash your phone, you will lose your auth data!" %}
-  </strong>
-  {% trans "Be sure you have a backup auth device before flashing your phone." %}
-</b>
-
-<p>{% trans 'In the "Google Authenticator" app, add a new token and scan this barcode.' %}</p>
-    <img width="250" height="250" class="qrcode" id="id_qrcode" />
-    <p>{% trans "Or, to set up manually, please enter:" %}</p>
-    <ul>
-        <li>{% trans "Type of key" %}:
-          <select id="id_oath_type", onchange="setQRcodeUri()">
-            {% for mode, description in oath_modes.items %}
-              <option value="{{mode}}">{{description}}</option>
-            {% endfor %}
-          </select>
-
-          {% block extra_js %}
+  <p>{% blocktrans %}To use your smartphone as an authentication device, please
+  install "Google Authenticator" on it.  Go to
+  <a href="http://m.google.com/authenticator">http://m.google.com/authenticator</a>
+  in your phone's browser or search for "Google Authenticator" on your phone's app
+  store/market.{% endblocktrans %}</p>
+
+  <p>
+    <strong>{% trans "Note: If you flash your phone, you will lose your auth data!" %}</strong>
+    {% trans "Be sure you have a backup auth device before flashing your phone." %}
+  </p>
+
+  <p>{% trans 'In the "Google Authenticator" app, add a new token and scan this barcode.' %}</p>
+  <img width="250" height="250" class="qrcode" id="id_qrcode" />
+  <p>{% trans "Or, to set up manually, please enter:" %}</p>
+  <div class="row">
+    <ul class="p-list col-4">
+      <li class="p-list__item">{% trans "Type of key" %}:
+        <select id="id_oath_type", onchange="setQRcodeUri()">
+          {% for mode, description in oath_modes.items %}
+          <option value="{{mode}}">{{description}}</option>
+          {% endfor %}
+        </select>
+
+        {% block extra_js %}
           <script id="id_qrcode_script">
-          function setQRcodeUri() {
-            var QRCODE_URIS = {
-              {% for mode in oath_modes %}
+            function setQRcodeUri() {
+              var QRCODE_URIS = {
+                {% for mode in oath_modes %}
                 {{mode}}: "{% qrcode_url mode ident hex_key %}",
-              {% endfor %}
-            };
-
-            var qrcodeImg = document.getElementById('id_qrcode');
-            var oathSelector = document.getElementById('id_oath_type');
-            var oathType = oathSelector.options[oathSelector.selectedIndex].value;
-            qrcodeImg.src = QRCODE_URIS[oathType];
-          }
-
-          setQRcodeUri();
+                {% endfor %}
+              };
+
+              var qrcodeImg = document.getElementById('id_qrcode');
+              var oathSelector = document.getElementById('id_oath_type');
+              var oathType = oathSelector.options[oathSelector.selectedIndex].value;
+              qrcodeImg.src = QRCODE_URIS[oathType];
+            }
+
+            setQRcodeUri();
           </script>
-          {% endblock %}
-        </li>
-        <li>{% trans "Account" %}: {{ ident }}</li>
-        <li>{% trans "Key" %}: {{ hex_key|b32encode_hexstring }}</li>
+        {% endblock %}
+      </li>
+      <li class="p-list__item">{% trans "Account" %}: <code>{{ ident }}</code></li>
+      <li class="p-list__item">{% trans "Key" %}: <code>{{ hex_key|b32encode_hexstring }}</code></li>
     </ul>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/device/addition-yubi.html'
--- src/webui/templates/device/addition-yubi.html	2015-06-29 18:11:04 +0000
+++ src/webui/templates/device/addition-yubi.html	2019-12-17 18:04:01 +0000
@@ -7,17 +7,15 @@
 {% block device_instructions %}
 <p>
   {% trans "Shared OATH/HOTP key:" %}<br>
-  <span class="key" id="formatted_key">
-    {{ formatted_key }}
-  </span>
-</p>
-<p>
-    {% blocktrans %}Programming a YubiKey requires you to{% endblocktrans %}
-    <a href="apt:yubikey-personalization">{% trans "install" %} yubikey-personalization</a>.
-</p>
-<p>
-    {% blocktrans %}To program the YubiKey as an authentication device, on
-    the short press of the YubiKey, execute the following command line:{% endblocktrans %}
+  <code id="formatted_key">{{ formatted_key }}</code>
+</p>
+<p>
+  {% blocktrans %}Programming a YubiKey requires you to{% endblocktrans %}
+  <a href="apt:yubikey-personalization">{% trans "install" %} yubikey-personalization</a>.
+</p>
+<p>
+  {% blocktrans %}To program the YubiKey as an authentication device, on
+  the short press of the YubiKey, execute the following command line:{% endblocktrans %}
 </p>
 <p>
   <code id="short_press">
@@ -25,8 +23,8 @@
   </code>
 </p>
 <p>
-    {% blocktrans %}To program the long press of the YubiKey,
-    execute the following command line:{% endblocktrans %}
+  {% blocktrans %}To program the long press of the YubiKey,
+  execute the following command line:{% endblocktrans %}
 </p>
 <p>
   <code id="long_press">

=== modified file 'src/webui/templates/device/code-list.html'
--- src/webui/templates/device/code-list.html	2016-06-21 15:39:25 +0000
+++ src/webui/templates/device/code-list.html	2019-12-17 18:04:01 +0000
@@ -1,21 +1,19 @@
 {% load i18n %}
-<div id="codes" class="yui3-g-r codelist" data-qa-id="codelist">
-    <ol class="yui3-u-1-5">
+<div id="codes" data-qa-id="codelist">
+    <ol class="p-list">
     {% for code in codes %}
-      <li>{% spaceless %}
+      <li class="p-list__item">{% spaceless %}
         {% if forloop.counter0 < counter|default:0 %}
           <strike>{{ code }}</strike>
         {% else %}
           {{ code }}
         {% endif %}
       {% endspaceless %}</li>
-        {% if forloop.counter|divisibleby:"5" and not forloop.last %}
-        {%endif%}
       {% endfor %}
     </ol>
 </div>
 
 <style media="print">
-header, .menu, footer, p { display: none; }
+header, .p-sidebar, footer, p { display: none; }
 #codes ol { list-style:none; margin:0; padding:0 }
 </style>

=== modified file 'src/webui/templates/device/device-help.html'
--- src/webui/templates/device/device-help.html	2016-08-16 08:26:48 +0000
+++ src/webui/templates/device/device-help.html	2019-12-17 18:04:01 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 
@@ -10,10 +10,11 @@
 {% block title %}{% blocktrans %}Authentication device help - Ubuntu One{% endblocktrans %}{% endblock %}
 
 {% block text_title %}
-  <h1 class="main">{% trans "Authentication device help" %}</h1>
+  <h1>{% trans "My account" %}</h1>
 {% endblock %}
 
 {% block content %}
+  <h3>{% trans "Authentication device help" %}</h3>
   <p>
     {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
     If your device is lost or stolen or you are having trouble logging in,
@@ -24,7 +25,7 @@
     {% endblocktrans %}
   </p>
 
-  <h2>{% trans "Device lost or stolen?" %}</h2>
+  <h3>{% trans "Device lost or stolen?" %}</h3>
   <p>
     {% blocktrans %}We need to remove the device from your account to prevent
     someone using it to gain access to your account.  Please contact us
@@ -33,7 +34,7 @@
     {% endblocktrans %}
   </p>
 
-  <h2>{% trans "Problems logging in?" %}</h2>
+  <h3>{% trans "Problems logging in?" %}</h3>
   <p>
     {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
     We can help get a device working again or set you up with some temporary

=== modified file 'src/webui/templates/device/generate-codes.html'
--- src/webui/templates/device/generate-codes.html	2013-06-12 16:20:01 +0000
+++ src/webui/templates/device/generate-codes.html	2019-12-17 18:04:01 +0000
@@ -1,8 +1,8 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
+Copyright 2012-2019 Canonical Ltd.  This software is licensed under the GNU
 Affero General Public License version 3 (see the file LICENSE).
 {% endcomment %}
 
@@ -14,26 +14,33 @@
 
 
 {% block text_title %}
-<h1 class="main">{% trans "Generate new codes" %}</h1>
+<h1>{% trans "Generate new codes" %}</h1>
 {% endblock %}
 
 {% block content %}
-
-<h3>{% blocktrans %}
-Confirming the new codes will <strong>invalidate</strong> all the previous codes.<br/>
-Please print this new list and <strong>destroy any old lists</strong>.
-{% endblocktrans %}</h3>
-
-{% include 'device/code-list.html' %}
-
-<form method="post">
-  {% csrf_token %}
-  <p>
-    <button class="btn" type="submit" data-qa-id="confirm_new_codes">
-      <span><span>{% trans "Confirm new codes" %}</span></span>
-    </button>
-    {% trans "or" %}
-    <a href="{% url 'device-print' device_id %}" data-qa-id="cancel_new_codes">{% trans "cancel" %}</a>
-  </p>
-</form>
+<div class="row">
+  <div class="col-8">
+    <div class="p-notification--warning">
+      <p class="p-notification__response">
+        {% blocktrans %}
+        Confirming the new codes will <strong>invalidate</strong> all the previous codes.<br/>
+        Please print this new list and <strong>destroy any old lists</strong>.
+        {% endblocktrans %}
+      </p>
+    </div>
+
+    <hr>
+
+    {% include 'device/code-list.html' %}
+
+    <hr>
+
+    <form method="post">
+      {% csrf_token %}
+      <button class="p-button--positive" type="submit" data-qa-id="confirm_new_codes">{% trans "Confirm new codes" %}</button>
+      {% trans "or" %}
+      <a href="{% url 'device-print' device_id %}" data-qa-id="cancel_new_codes">{% trans "cancel" %}</a>
+    </form>
+  </div>
+</div>
 {% endblock %}

=== modified file 'src/webui/templates/device/list.html'
--- src/webui/templates/device/list.html	2016-07-06 02:49:14 +0000
+++ src/webui/templates/device/list.html	2019-12-17 18:04:01 +0000
@@ -1,80 +1,61 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 
 {% comment %}
-Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
+Copyright 2012-2019 Canonical Ltd.  This software is licensed under the GNU
 Affero General Public License version 3 (see the file LICENSE).
 {% endcomment %}
 
 {% block html_extra %}data-qa-id="device_list"{% endblock %}
 
-{% block extra_header %}
-<style type="text/css">
-table#device-list td.command
-{
-  width: 0;
-}
-</style>
-{% endblock %}
-
-
 {% block title %}
   {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Authentication devices" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-{% include "common/missing_backup_device_warning.html" %}
-{% include "common/printed_codes_nearly_exhausted_warning.html" %}
-
-<div id="auth-devices">
-  {% if devices %}
-
-  <section class="devices-you-added">
-
-    <h3>{% trans "Authentication devices you've added" %}</h3>
-
-    <table id="device-list" data-qa-id="device_list">
-      <tbody>
-      {% for device in devices %}
-        <tr>
-          <td class="name" data-qa-id="device_name">{{ device.name }}</td>
-          <td class="actions">
-              <a class="btn-sm" href="{% url 'device-rename' device.id %}" data-qa-id="rename_device">
-              <span>{% trans "Rename" %}</span>
-            </a>
-            <a class="btn-sm" href="{% url 'device-removal' device.id %}" data-qa-id="delete_device">
-              <span>{% trans "Delete" %}</span>
-            </a>
-            {% if device.device_type == 'paper' %}
-            <a class="btn-sm" href="{% url 'device-print' device.id %}" data-qa-id="print_device">
-              <span>{% trans "View Codes" %}</span>
-            </a>
-            {% endif %}
-          </td>
-        </tr>
-      {% endfor %}
-      </tbody>
-    </table>
-  </section>
-
-  {% else %}
-    <p>{% trans "You don't have any authentication devices associated with this account." %}</p>
-  {% endif %}
-
-  <p><a data-qa-id="add_new_device" href="{{ device_addition_path }}">
-    {% trans "Add a new authentication device" %}
-  </a></p>
-
-  <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
-
-  <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
-    <a href="{{ 2FFAQ }}">2-Factor Auth FAQ</a>
-  {% endblocktrans %}</p>
-</div>
-
+  {% include "vanilla/common/missing_backup_device_warning.html" %}
+  {% include "vanilla/common/printed_codes_nearly_exhausted_warning.html" %}
+  <div id="auth-devices">
+    <h2>{% trans "Authentication devices" %}</h2>
+    {% if devices %}
+    <h3 class="p-heading--four">{% trans "Authentication devices you've added" %}</h3>
+    <div class="p-strip is-shallow">
+      <table id="device-list" data-qa-id="device_list" class="p-table--bordered">
+        <tbody>
+        {% for device in devices %}
+          <tr>
+            <td class="name" data-qa-id="device_name">{{ device.name }}</td>
+            <td class="u-align-text--right">
+              <ul class="p-inline-list u-no-margin--bottom">
+                <li class="p-inline-list__item"><a href="{% url 'device-rename' device.id %}" data-qa-id="rename_device">{% trans "Rename" %}</a></li>
+                <li class="p-inline-list__item"><a href="{% url 'device-removal' device.id %}" data-qa-id="delete_device">{% trans "Delete" %}</a></li>
+                {% if device.device_type == 'paper' %}
+                <li class="p-inline-list__item"><a href="{% url 'device-print' device.id %}" data-qa-id="print_device">{% trans "View Codes" %}</a></li>
+                {% endif %}
+              </ul>
+            </td>
+          </tr>
+        {% endfor %}
+        </tbody>
+      </table>
+    </div>
+
+    {% else %}
+      <p>{% trans "You don't have any authentication devices associated with this account." %}</p>
+    {% endif %}
+
+    <p><a data-qa-id="add_new_device" href="{{ device_addition_path }}">
+      {% trans "Add a new authentication device" %}
+    </a></p>
+
+    <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
+
+    <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
+      <a href="{{ 2FFAQ }}">2-Factor Auth FAQ</a>
+    {% endblocktrans %}</p>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/device/print-codes.html'
--- src/webui/templates/device/print-codes.html	2017-04-19 15:36:34 +0000
+++ src/webui/templates/device/print-codes.html	2019-12-17 18:04:01 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n url_with_token %}
 
 {% comment %}
@@ -13,32 +13,19 @@
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Printable backup codes" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<p>{% trans "Print this list of backup codes and keep them safe." %}</p>
-
-<p class="print-new-codes">
-
-</p>
-
-
-{% include 'device/code-list.html' %}
-
-<p>
-  <button class="btn cta" id="printbtn" onclick="window.print()" data-qa-id="print_codes">
-    <span>{% trans "Print Codes" %}</span>
-  </button>
+  <h2>{% trans "Printable backup codes" %}</h2>
+  <p>{% trans "Print this list of backup codes and keep them safe." %}</p>
+  {% include 'device/code-list.html' %}
+  <button class="p-button--positive" id="printbtn" onclick="window.print()" data-qa-id="print_codes">{% trans "Print Codes" %}</button>
   {% if token and not needs_renewal %}
-  <a class="cta secondary" href="{% url_with_token 'server-decide' %}" data-qa-id="continue_to_rp">{% trans "Continue" %}</a>
+    <a class="p-button--neutral" href="{% url_with_token 'server-decide' %}" data-qa-id="continue_to_rp">{% trans "Continue" %}</a>
   {% else %}
-  <a class="cta secondary" href="{% url 'device-list' %}" data-qa-id="cancel_print_codes">{% trans "Go back" %}</a>
+    <a class="p-button--neutral" href="{% url 'device-list' %}" data-qa-id="cancel_print_codes">{% trans "Go back" %}</a>
   {% endif %}
   {% if generation_enabled %}
-  <a class="btn cta secondary print-new-codes" href="{% url_with_token 'device-generate' device_id=device_id %}" data-qa-id="generate_codes">
-    <span>{% trans "Generate new codes" %}</span>
-  </a>
+    <a class="p-button--base" href="{% url_with_token 'device-generate' device_id=device_id %}" data-qa-id="generate_codes">{% trans "Generate new codes" %}</a>
   {% endif %}
-</p>
 {% endblock %}

=== modified file 'src/webui/templates/device/removal.html'
--- src/webui/templates/device/removal.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/device/removal.html	2019-12-17 18:04:01 +0000
@@ -1,8 +1,8 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
+Copyright 2012-2019 Canonical Ltd.  This software is licensed under the GNU
 Affero General Public License version 3 (see the file LICENSE).
 {% endcomment %}
 
@@ -13,23 +13,18 @@
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Delete device?" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<p>{% blocktrans %}Are you sure that you want to delete the following
-authentication device?{% endblocktrans %}</p>
-
-<p class="device-name" data-qa-id="device_removal_device_name">{{ name }}</p>
-
-<form method="post" action="">
-  {% csrf_token %}
-  <p>
-    <button class="btn cta" type="submit" data-qa-id="delete_this_device">
-      <span>{% trans "Delete this device" %}</span>
-    </button>
-    <a class="cta secondary" data-qa-id="cancel_deleting_this_device" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
-  </p>
-</form>
-
+  <h2>{% trans "Delete device?" %}</h2>
+  <p>{% blocktrans %}Are you sure that you want to delete the following
+  authentication device?{% endblocktrans %}</p>
+
+  <p class="device-name" data-qa-id="device_removal_device_name">{{ name }}</p>
+
+  <form method="post" action="">
+    {% csrf_token %}
+    <button class="p-button--negative" type="submit" data-qa-id="delete_this_device">{% trans "Delete this device" %}</button>
+    <a class="p-button--neutral" data-qa-id="cancel_deleting_this_device" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
+  </form>
 {% endblock %}

=== modified file 'src/webui/templates/device/rename.html'
--- src/webui/templates/device/rename.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/device/rename.html	2019-12-17 18:04:01 +0000
@@ -1,8 +1,8 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
+Copyright 2012-2019 Canonical Ltd.  This software is licensed under the GNU
 Affero General Public License version 3 (see the file LICENSE).
 {% endcomment %}
 
@@ -13,28 +13,24 @@
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Rename device" %}</h1>{% endblock %}
+{% block text_title %}<h1 class="u1-h-main">{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<form method="post" action="">
-  {% csrf_token %}
-
-  <p><label for="id_name">
-      {% trans "Name:" %}
-      {{ form.name }}
-      {% if form.name.errors %}
-        <span class="error" id="name-error">{{ form.name.errors|first }}</span>
-      {% endif %}
-  </label></p>
-
-  <p>
-    <button class="btn cta" type="submit" data-qa-id="rename_this_device">
-      <span>{% trans "Rename" %}</span>
-    </button>
-    <a class="cta secondary" href="{{ device_list_path }}" data-qa-id="cancel_renaming_this_device">{% trans "Cancel" %}</a>
-  </p>
-
-</form>
-
+  <h2>{% trans "Rename device" %}</h2>
+  <form method="post" action="">
+    {% csrf_token %}
+    <div class="row">
+      <div class="p-form-validation is-error col-4">
+        <label for="id_name">Name</label>
+        {{ form.name }}
+        {% if form.name.errors %}
+          <p class="p-form-validation__message">
+            <strong>Error:</strong> {{ form.name.errors|first }}
+          </p>
+        {% endif %}
+      </div>
+    </div>
+    <button class="p-button--positive" type="submit" data-qa-id="rename_this_device">{% trans "Rename" %}</button>
+    <a class="p-button--neutral" href="{{ device_list_path }}" data-qa-id="cancel_renaming_this_device">{% trans "Cancel" %}</a>
+  </form>
 {% endblock %}

=== modified file 'src/webui/templates/device/types.html'
--- src/webui/templates/device/types.html	2016-12-06 16:53:22 +0000
+++ src/webui/templates/device/types.html	2019-12-17 18:04:01 +0000
@@ -1,75 +1,82 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 {% load gargoyle_tags %}
 
 {% comment %}
-Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
+Copyright 2012-2019 Canonical Ltd.  This software is licensed under the GNU
 Affero General Public License version 3 (see the file LICENSE).
 {% endcomment %}
 
 {% block html_extra %}data-qa-id="device_addition"{% endblock %}
 
 {% block title %}
-  {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
+  {% trans "Add a new authentication device" %}
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Add a new authentication device" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<form method="post" action="">
-  {% csrf_token %}
-
-  <dl class="device-types">
-
-    <dt><label>
-      <input type="radio" name="type" value="google" id="type_google" checked="checked"> {% trans "Smartphone or Tablet" %}
-    </label></dt>
-    <dd>
-    <p><label for="type_google">{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app;
-          or Windows phone with the Auth7 app{% endblocktrans %}</label></p>
-    </dd>
-
-    <dt><label>
-      <input type="radio" name="type" value="yubi" id="type_yubi"> {% trans "YubiKey" %}
-      </label></dt>
-    <dd>
-      <p><label for="type_yubi">{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</label></p>
-    </dd>
-
-    <dt><label>
-      <input type="radio" name="type" value="generic" id="type_generic"> {% trans "Generic HOTP/TOTP device" %}
-    </label></dt>
-    <dd>
-      <p><label for="type_generic">{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</label></p>
-    </dd>
-
-    <dt><label>
-      <input type="radio" name="type" value="paper" id="type_paper"> {% trans "Printable Backup Codes" %}
-    </label></dt>
-    <dd>
-      <p><label for="type_paper">{% blocktrans %}A list of backup codes to
-      print.{% endblocktrans %}</label></p>
-    </dd>
-
-  </dl>
-
-  <p>
-    <button class="btn cta" type="submit" data-qa-id="add_device_from_type">
-      <span>{% trans "Add device" %}</span>
-    </button>
-    <a class="cta secondary" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
-  </p>
-  <p>
-    {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
-    The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>
-    has details on compatible devices.
-    {% endblocktrans %}
-  </p>
-
-
-</form>
-
+  <h2>{% trans "Add a new authentication device" %}</h2>
+  <form method="post" action="">
+    {% csrf_token %}
+
+    <ul class="p-list">
+      <li class="p-list__item">
+        <div class="row">
+          <div class="col-3">
+            <input type="radio" name="type" value="google" id="type_google" checked="checked">
+            <label for="type_google">{% trans "Smartphone or Tablet" %}</label>
+          </div>
+          <div class="col-5">
+            <p>{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app; or Windows phone with the Auth7 app{% endblocktrans %}</p>
+          </div>
+        </div>
+      </li>
+      <li class="p-list__item">
+        <div class="row">
+          <div class="col-3 col-medium-3">
+            <input type="radio" name="type" value="yubi" id="type_yubi">
+            <label for="type_yubi">{% trans "YubiKey" %}</label>
+          </div>
+          <div class="col-5 col-medium-3">
+            <p>{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</p>
+          </div>
+        </div>
+      </li>
+      <li class="p-list__item">
+        <div class="row">
+          <div class="col-3 col-medium-3">
+            <input type="radio" name="type" value="generic" id="type_generic">
+            <label for="type_generic">{% trans "Generic HOTP/TOTP device" %}</label>
+          </div>
+          <div class="col-5 col-medium-3">
+            <p>{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</p>
+          </div>
+        </div>
+      </li>
+      <li class="p-list__item">
+        <div class="row">
+          <div class="col-3 col-medium-3">
+            <input type="radio" name="type" value="paper" id="type_paper">
+            <label for="type_paper">{% trans "Printable Backup Codes" %}</label>
+          </div>
+          <div class="col-5 col-medium-3">
+            <p>{% blocktrans %}A list of backup codes to
+            print.{% endblocktrans %}</p>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <button class="p-button--positive" type="submit" data-qa-id="add_device_from_type">{% trans "Add device" %}</button>
+    <a class="p-button--neutral" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
+    <p>
+      {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
+      The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>
+      has details on compatible devices.
+      {% endblocktrans %}
+    </p>
+  </form>
 {% endblock %}

=== modified file 'src/webui/templates/limitexceeded.html'
--- src/webui/templates/limitexceeded.html	2014-12-09 21:32:43 +0000
+++ src/webui/templates/limitexceeded.html	2019-12-17 18:04:01 +0000
@@ -1,27 +1,27 @@
-{% 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 "Rate limit exceeded" %}
+  {% trans "Rate limit exceeded" %}
 {% endblock %}
 
 {% block text_title %}
-    <h1 class="main">{% trans "Rate limit exceeded" %}</h1>
+  <h1>{% trans "Rate limit exceeded" %}</h1>
 {% endblock %}
 
 {% block content %}
-        <div>
-          <p>
-            {% blocktrans %}You have made too many failed requests to the Ubuntu One authentication server over a short period of time.{% endblocktrans %}
-          </p>
-          <p>
-            {% blocktrans %}Please try again in a while.{% endblocktrans %}
-          </p>
-          <a class="btn" href="/"><span><span>{% trans "Try again" %}</span></span></a>
-        </div>
+  <div class="row">
+    <p>
+      {% blocktrans %}You have made too many failed requests to the Ubuntu One authentication server over a short period of time.{% endblocktrans %}
+    </p>
+    <p>
+      {% blocktrans %}Please try again in a while.{% endblocktrans %}
+    </p>
+    <a href="/">{% trans "Try again" %}</a>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/readonly.html'
--- src/webui/templates/readonly.html	2012-12-04 18:51:42 +0000
+++ src/webui/templates/readonly.html	2019-12-17 18:04:01 +0000
@@ -1,28 +1,29 @@
-{% 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 "Read-only mode" %}
+  {% trans "Read-only mode" %}
 {% endblock %}
 
 {% block text_title %}
-    <h1 class="main">{% trans "We're currently in read-only mode." %}</h1>
+  <h1>{% trans "We're currently in read-only mode." %}</h1>
 {% endblock %}
 
 {% block content %}
-        <div>
-          <p>
-            {% blocktrans %}Apologies, the page you're requesting isn't accessible at the moment, as we're running with a minimum set of features. Hopefully we will have the full service up and running again in no time.{% endblocktrans %}
-          </p>
-          <p>
-            {% blocktrans %}Please try again in a while.{% endblocktrans %}
-          </p>
-          <a class="btn" href=""><span><span>{% trans "Try again" %}</span></span></a> {% trans "or" %}
-          <a class="btn alt" href="/"><span><span>{% trans "Go to our home page" %}</span></span></a>
-        </div>
+  <div class="row">
+    <p>
+      {% blocktrans %}Apologies, the page you're requesting isn't accessible at the moment, as we're running with a minimum set of features. Hopefully we will have the full service up and running again in no time.{% endblocktrans %}
+    </p>
+    <p>
+      {% blocktrans %}Please try again in a while.{% endblocktrans %}
+    </p>
+    <p>
+      <a href=""><span><span>{% trans "Try again" %}</span></span></a> {% trans "or" %}
+      <a href="/"><span><span>{% trans "go to our home page" %}</span></span></a>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/select_language.html'
--- src/webui/templates/select_language.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/select_language.html	2019-12-17 18:04:01 +0000
@@ -1,78 +1,59 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% 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 %}
 
 {% block title %}
-    {% trans "Choose your language" %}
+  {% trans "Choose your language" %}
 {% endblock %}
 
 {% block text_title %}
-    <h1 class="u1-h-main">{% trans "Choose your language" %}</h1>
+  <h1>{% trans "Choose your language" %}</h1>
 {% endblock %}
 
 {% block bodyclass %}set-language{% endblock %}
 {% block menu %}{% endblock %}
 
 {% block extra_css %}
-<style type="text/css">
+  <style type="text/css">
     .set-language footer .language {
-        display: none;
+      display: none;
     }
-</style>
+  </style>
 {% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block content %}
-
-<div class="yui3-g-r">
-
-    <div class="yui3-u-1-2 language-select">
-
-        <form action="" method="post">
-
-            {% csrf_token %}
-            <input type="hidden" name="next" value="{{next}}">
-
-            {% for lang in supported_languages %}
-                <p>
-                    <input id="lang-{{lang.0}}" type="radio" name="language"
-                        {% if LANGUAGE_CODE == lang.0 %}checked="checked"{% endif %}
-                        value="{{lang.0}}">
-
-                    <label for="lang-{{lang.0}}">
-                        {{lang.1}}
-                    </label>
-                </p>
-            {% endfor %}
-
-            <button type="submit" name="submit" data-qa-id="choose_language" class="btn cta">
-                {% trans "Choose language" %}
-            </button>
-        </form>
-
-    </div>
-
-    <div class="yui3-u-1-3 cannot-find-language">
-
-        <div class="box">
-
-            <div class="title">
-                <h3>{% trans "Can't find your language?" %}</h3>
-            </div>
-
-            <div class="body">
-
-                <p>{% blocktrans %}We welcome volunteers to help us translate this site to new languages. If you are able to help, please visit our <a href="https://translations.launchpad.net/canonical-identity-provider">translations site</a> to get started.{% endblocktrans %}
-                </p>
-
-            </div>
-
-        </div>
-
-    </div>
-
-</div>
+  <div class="row">
+    <div class="col-8">
+      <form action="" method="post">
+        {% csrf_token %}
+        <input type="hidden" name="next" value="{{next}}">
+        <ul class="p-list is-split">
+        {% for lang in supported_languages %}
+          <li class="p-list__item">
+            <input id="lang-{{lang.0}}" type="radio" name="language" {% if LANGUAGE_CODE == lang.0 %}checked="checked"{% endif %} value="{{lang.0}}">
+            <label for="lang-{{lang.0}}">
+              {{lang.1}}
+            </label>
+          </li>
+        {% endfor %}
+        </ul>
+        <button type="submit" name="submit" data-qa-id="choose_language" class="p-button--positive">
+          {% trans "Choose language" %}
+        </button>
+      </form>
+    </div>
+    <div class="col-4">
+      <div class="p-card">
+        <h3>{% trans "Can't find your language?" %}</h3>
+        <p>{% blocktrans %}We welcome volunteers to help us translate this site to new languages. If you are able to help, please visit our <a class="p-link--external" href="https://translations.launchpad.net/canonical-identity-provider">translations site</a> to get started.{% endblocktrans %}
+        </p>
+      </div>
+    </div>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/ssh_messages/username_unset.html'
--- src/webui/templates/ssh_messages/username_unset.html	2016-11-01 10:53:35 +0000
+++ src/webui/templates/ssh_messages/username_unset.html	2019-12-17 18:04:01 +0000
@@ -1,5 +1,5 @@
 {% load i18n %}
 {% blocktrans %}
-<p>To import an ssh key, you must have a username set in your Personal Details.</p>
+To import an ssh key, you must have a username set in your Personal Details.
 {% endblocktrans %}
-<p><a href="{% url 'account-index' %}">Edit Personal details</a></p>
+<a href="{% url 'account-index' %}">Edit Personal details</a></p>

=== modified file 'src/webui/templates/vanilla/_header.html'
--- src/webui/templates/vanilla/_header.html	2019-11-11 14:04:50 +0000
+++ src/webui/templates/vanilla/_header.html	2019-12-17 18:04:01 +0000
@@ -10,9 +10,9 @@
     <div class="p-navigation__banner">
       <div class="p-navigation__logo">
         {% if not embedded %}
-          <a href="/" id="u1-logo" class="p-navigation__link">
-            <img src="https://assets.ubuntu.com/v1/d738f754-Ubuntu_One_Mono_Logo.svg" alt="{% blocktrans %}Ubuntu One{% endblocktrans %}" width="90">
-          </a>
+        <a href="/" id="u1-logo" class="p-navigation__link">
+          <img src="https://assets.ubuntu.com/v1/d738f754-Ubuntu_One_Mono_Logo.svg" alt="{% blocktrans %}Ubuntu One{% endblocktrans %}" width="90">
+        </a>
         {% endif %}
       </div>
       <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
@@ -23,7 +23,7 @@
         <a href="#main-content">Jump to main content</a>
       </span>
       {% block me-menu %}
-        {% include "vanilla/widgets/header-me-menu.html" %}
+      {% include "vanilla/widgets/header-me-menu.html" %}
       {% endblock %}
 
       {% block navigation %}{% endblock %}

=== modified file 'src/webui/templates/vanilla/base.html'
--- src/webui/templates/vanilla/base.html	2019-11-11 14:04:50 +0000
+++ src/webui/templates/vanilla/base.html	2019-12-17 18:04:01 +0000
@@ -4,182 +4,181 @@
 <!--[if IE 8 ]><html class="ie8" lang="en" dir="ltr"><![endif]-->
 <!--[if (gte IE 9)|!(IE)]><!--><html lang="en" dir="ltr" class="no-js" {% block html_extra %}{% endblock %}><!--<![endif]-->
 {% comment %}Copyright 2019 Canonical Ltd. This software is licensed under the GNU Affero General Public License version 3 (see the file LICENSE).{% endcomment %}
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    {% block extra_meta %}{% endblock %}
-
-    {% block extra_header %}{% endblock %}
-
-    <title>{% block title %}{% trans "Log in" %}{% endblock %}</title>
-    <link rel="icon" type="image/vnd.microsoft.icon"
-    href="{% static 'identityprovider/img/favicon.ico' %}">
-
-    {% block corecss %}
-    <link href="{% static 'vanilla-css/styles.css' %}" rel="stylesheet">
-    {% endblock %}
-    {% block extra_css %}{% endblock %}
-
-    <!--[if lt IE 9]>
-    <script type="text/javascript" src="{% static 'identityprovider/js/ie/html5shiv.js' %}"></script>
-    <![endif]-->
-    <script>
-      document.documentElement.className=document.documentElement.className.replace(/\bno-js\b/,'') + ' js';
-    </script>
-  </head>
-  <body data-qa-id="{% block qaid %}{% endblock %}" {% if embedded %}onload="blank_targets()"{% endif %}
-  class="{% block bodyclass %}{% if user.is_authenticated %}with-menu{% endif %}{% endblock %}{% if readonly %} readonly{% endif %}">
-  {% get_current_language as LANGUAGE_CODE %}
-  <!-- Current language: {{ LANGUAGE_CODE }} -->
-
-  {% if google_tag_manager_id %}
-  <!-- Google Tag Manager (noscript) -->
-  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ google_tag_manager_id }}"
-    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-    <!-- End Google Tag Manager (noscript) -->
-    {% endif %}
-
-    <div id="cont" role="main">
-      {% include "vanilla/_header.html" %}
-      <div id="content">
-        <section class="p-strip--dark p-cip-hero">
-          <div class="row">
-            <div class="col-7">
-              {% block text_title %}{% endblock %}
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  {% block extra_meta %}{% endblock %}
+
+  {% block extra_header %}{% endblock %}
+
+  <title>{% block title %}{% trans "Log in" %}{% endblock %}</title>
+  <link rel="icon" type="image/vnd.microsoft.icon"
+  href="{% static 'identityprovider/img/favicon.ico' %}">
+
+  {% block corecss %}
+  <link href="{% static 'vanilla-css/styles.css' %}" rel="stylesheet">
+  {% endblock %}
+  {% block extra_css %}{% endblock %}
+
+  <!--[if lt IE 9]>
+  <script type="text/javascript" src="{% static 'identityprovider/js/ie/html5shiv.js' %}"></script>
+  <![endif]-->
+  <script>
+  document.documentElement.className=document.documentElement.className.replace(/\bno-js\b/,'') + ' js';
+  </script>
+</head>
+<body data-qa-id="{% block qaid %}{% endblock %}" {% if embedded %}onload="blank_targets()"{% endif %}
+class="{% block bodyclass %}{% if user.is_authenticated %}with-menu{% endif %}{% endblock %}{% if readonly %} readonly{% endif %}">
+{% get_current_language as LANGUAGE_CODE %}
+<!-- Current language: {{ LANGUAGE_CODE }} -->
+
+{% if google_tag_manager_id %}
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ google_tag_manager_id }}"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+  {% endif %}
+
+  <div id="cont" role="main">
+    {% include "vanilla/_header.html" %}
+    <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>
+
+      <div id="{% block content_id %}box{% endblock %}" class="row">
+        {% block menu %}
+        {% if user.is_authenticated %}
+        <div class="col-4 p-sidebar">
+          {% include "vanilla/widgets/personal-menu.html" %}
+        </div>
+        {% endif %}
+        {% endblock %}
+        <div class="{% block content_class %}col-8{% endblock %}">
+          <section class="p-strip">
+            {% block readonly %}
+            {% if readonly %}
+            <div class="p-notification--caution">
+              <p class="p-notification__response">
+                {% blocktrans %}We are currently in read-only mode. That means that at the moment you can't create new accounts, update your personal information, or request password reminders.{% endblocktrans %}
+              </p>
             </div>
-          </div>
-        </section>
-
-        <div id="{% block content_id %}box{% endblock %}" class="row">
-          {% block menu %}
-            {% if user.is_authenticated %}
-              <div class="col-4 p-sidebar">
-                {% include "vanilla/widgets/personal-menu.html" %}
+            {% endif %}
+            {% endblock %}
+            {% block messages %}
+            {% if messages %}
+            <section class="p-strip is-shallow">
+              {% for message in messages %}
+              <div class="row">
+                <div class="col-12">
+                  <div class="p-notification">
+                    <p class="p-notification__response">
+                      {{ message }}
+                    </p>
+                  </div>
+                </div>
               </div>
-            {% endif %}
-          {% endblock %}
-          <div class="{% block content_class %}col-8{% endblock %}">
-            <section class="p-strip">
-              {% block readonly %}
-                {% if readonly %}
-                <div class="p-notification--caution">
-                  <p class="p-notification__response">
-                    {% blocktrans %}We are currently in read-only mode. That means that at the moment you can't create new accounts, update your personal information, or request password reminders.{% endblocktrans %}
-                  </p>
-                </div>
-                {% endif %}
-              {% endblock %}
-              {% block messages %}
-                {% if messages %}
-                <section class="p-strip is-shallow">
-                  {% for message in messages %}
-                  <div class="row">
-                    <div class="col-12">
-                      <div class="p-notification">
-                        <p class="p-notification__response">
-                          {{ message }}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                  {% endfor %}
-                </section>
-                {% endif %}
-              {% endblock %}
-              {% block content %}{% endblock %}
+              {% endfor %}
             </section>
-          </div>
+            {% endif %}
+            {% endblock %}
+            {% block content %}{% endblock %}
+          </section>
         </div>
-        </section>
-      </div><!-- close #content -->
-
-      {% include "vanilla/_footer.html" %}
-
-    </div><!-- close #cont -->
-
-    {% block general_js %}
-    <script type="text/javascript">
-    YUI_config = {
-      maxURLLength: 2000,
-      combine: {{ combine|lower }},
-      comboBase: '{{ combo_url }}?',
-      base: '{% static "yui/3.15.0/" %}',
-      root: 'yui/3.15.0/'
+      </div>
+  </div><!-- close #content -->
+
+  {% include "vanilla/_footer.html" %}
+
+</div><!-- close #cont -->
+
+{% block general_js %}
+<script type="text/javascript">
+YUI_config = {
+  maxURLLength: 2000,
+  combine: {{ combine|lower }},
+  comboBase: '{{ combo_url }}?',
+  base: '{% static "yui/3.15.0/" %}',
+  root: 'yui/3.15.0/'
+}
+</script>
+{# use combo to load yui, to provide far future caching, as whitenoise doesn't for non-hashed urls #}
+{# notexist disables optimisation in template tag that avoids combo if only one file #}
+{% combo 'yui/3.15.0/yui/yui-min.js' 'notexist' %}
+
+<script type="text/javascript">
+YUI().use('node', 'transition', function (Y) {
+  Y.all('.message.temporary').transition({
+    easing: 'ease-out',
+    duration: 0.1,
+    delay: 5,
+    height: 0,
+    opacity: 0,
+    marginTop: 0,
+    marginBottom: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    on: {
+      start: function () {
+        this.setStyle('overflow', 'hidden');
+      }
     }
-  </script>
-  {# use combo to load yui, to provide far future caching, as whitenoise doesn't for non-hashed urls #}
-  {# notexist disables optimisation in template tag that avoids combo if only one file #}
-  {% combo 'yui/3.15.0/yui/yui-min.js' 'notexist' %}
-
-  <script type="text/javascript">
-  YUI().use('node', 'transition', function (Y) {
-    Y.all('.message.temporary').transition({
-      easing: 'ease-out',
-      duration: 0.1,
-      delay: 5,
-      height: 0,
-      opacity: 0,
-      marginTop: 0,
-      marginBottom: 0,
-      paddingTop: 0,
-      paddingBottom: 0,
-      on: {
-        start: function () {
-          this.setStyle('overflow', 'hidden');
-        }
-      }
-    });
   });
-  </script>
-
-  {% endblock %}
-
-  {% block test_js %}{% endblock %}
-  {% block extra_js %}{% endblock %}
-
-  {% block disable_submit_buttons_js %}
-  <script type="text/javascript">
-  (function(){
-    // disable all submit buttons after initial form submission
-    // to prevent double-clicks
-    var formEls = document.querySelectorAll('form');
-
-    if (formEls && formEls.length) {
-      for (var i = formEls.length; i--;) {
-        formEls[i].addEventListener('submit', disableAfterSubmit);
-      }
-    }
-
-    function disableAfterSubmit(e) {
-      var formEl = e.currentTarget;
-      var submitEl = formEl.querySelector('input[type=submit],button[type=submit]');
-
-      if (!submitEl.classList.contains('disabled')) {
-        disableSubmitEl(submitEl);
-      } else {
-        e.preventDefault();
-      }
-    }
-
-    function disableSubmitEl(el) {
-      el.classList.add('disabled');
-    }
-
-  })();
-  </script>
-  {% endblock %}
-
-  {% block analytics %}
-  {% if google_tag_manager_id %}
-  <!-- Google Tag Manager -->
-  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-  })(window,document,'script','dataLayer','{{ google_tag_manager_id }}');</script>
-  <!-- End Google Tag Manager -->
-  {% endif %}
-  {% endblock %}
-
-  </body>
+});
+</script>
+
+{% endblock %}
+
+{% block test_js %}{% endblock %}
+{% block extra_js %}{% endblock %}
+
+{% block disable_submit_buttons_js %}
+<script type="text/javascript">
+(function(){
+  // disable all submit buttons after initial form submission
+  // to prevent double-clicks
+  var formEls = document.querySelectorAll('form');
+
+  if (formEls && formEls.length) {
+    for (var i = formEls.length; i--;) {
+      formEls[i].addEventListener('submit', disableAfterSubmit);
+    }
+  }
+
+  function disableAfterSubmit(e) {
+    var formEl = e.currentTarget;
+    var submitEl = formEl.querySelector('input[type=submit],button[type=submit]');
+
+    if (!submitEl.classList.contains('disabled')) {
+      disableSubmitEl(submitEl);
+    } else {
+      e.preventDefault();
+    }
+  }
+
+  function disableSubmitEl(el) {
+    el.classList.add('disabled');
+  }
+
+})();
+</script>
+{% endblock %}
+
+{% block analytics %}
+{% if google_tag_manager_id %}
+<!-- Google Tag Manager -->
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','{{ google_tag_manager_id }}');</script>
+<!-- End Google Tag Manager -->
+{% endif %}
+{% endblock %}
+
+</body>
 </html>

=== modified file 'src/webui/templates/versions.html'
--- src/webui/templates/versions.html	2012-12-04 18:51:42 +0000
+++ src/webui/templates/versions.html	2019-12-17 18:04:01 +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 %}
 

=== modified file 'src/webui/templates/widgets/other_sites.html'
--- src/webui/templates/widgets/other_sites.html	2014-12-10 15:30:54 +0000
+++ src/webui/templates/widgets/other_sites.html	2019-12-17 18:04:01 +0000
@@ -1,22 +1,30 @@
 {% 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 %}
 
 {% load i18n %}
 
-<section class="other-sites listing-section">
-    <h3>{% trans "Sites you may still be logged into" %} <span class="subtitle">Date</span></h3>
+<div class="row">
+  <div class="col-6">
+    <h3>{% trans "Sites you may still be logged into" %}</h3>
 
-    <table class="listing">
-        <tbody>
+    <table>
+      <thead>
+        <tr>
+          <th>{% trans "Website" %}</th>
+          <th>{% trans "Last used" %}</th>
+        </tr>
+      </thead>
+      <tbody>
         {% for site in other_sites %}
-            <tr>
-                <td class="site-url">{% if embedded %}{{ site.trust_root }}{% else %}
-                <a href="{{ site.trust_root }}">{{ site.trust_root }}</a>{% endif %}</td>
-                <td class="site-date">{{ site.date_last_used|date:"Y/m/d" }}</td>
-            </tr>
+        <tr>
+          <td>{% if embedded %}{{ site.trust_root }}{% else %}
+          <a href="{{ site.trust_root }}">{{ site.trust_root }}</a>{% endif %}</td>
+          <td>{{ site.date_last_used|date:"Y/m/d" }}</td>
+        </tr>
         {% endfor %}
-        </tbody>
+      </tbody>
     </table>
-</section>
+  </div>
+</div>

=== modified file 'src/webui/tests/test_views_account.py'
--- src/webui/tests/test_views_account.py	2019-10-22 14:03:48 +0000
+++ src/webui/tests/test_views_account.py	2019-12-17 18:04:01 +0000
@@ -54,7 +54,7 @@
                                       token=None):
         tree = PyQuery(response.content)
         # verified_emails -> first listing table
-        verified_emails = tree.find('table.listing')[0]
+        verified_emails = tree.find('table')[0]
         emails_td = PyQuery(verified_emails).find('td.email')
         for email_td in emails_td:
             email_address = PyQuery(email_td).find('span.email').text()
@@ -77,7 +77,7 @@
         tree = PyQuery(response.content)
         # unverified emails -> second listing table
         # (or first if there are no verified emails)
-        unverified_emails = tree.find('table.listing')[-1]
+        unverified_emails = tree.find('table')[-1]
         emails_td = PyQuery(unverified_emails).find('td.email')
         for email_td in emails_td:
             if email_td.text == email.email:
@@ -101,12 +101,12 @@
 
     def assert_add_email_action(self, response, token=None):
         tree = PyQuery(response.content)
-        form = tree.find('section.add-emails')[0].find('form')
+        form = tree.find('#add-email')
         kwargs = {}
         if token is not None:
             kwargs['token'] = token
         url = reverse('new_email', kwargs=kwargs)
-        self.assertEqual(form.get('action'), url)
+        self.assertEqual(form[0].get('action'), url)
 
     def test_cannot_delete_verified_email_if_its_the_only_one(self):
         assert self.account.emailaddress_set.count() == 1
@@ -816,14 +816,16 @@
 
     def test_backup_device_warning(self):
         response = self.client.get(self.url)
-        backup_warning = MISSING_BACKUP_DEVICE.format(
-            add_device_link=reverse('device-addition'))
+        backup_warning = MISSING_BACKUP_DEVICE
+
+        add_device_link = reverse('device-addition')
 
         if (self.twofactor_enabled is False or self.devices_count != 1 or
                 not self.user_wants_warn):
             self.assertNotContains(response, backup_warning)
         else:
             self.assertContains(response, backup_warning)
+            self.assertContains(response, add_device_link)
 
     def test_codes_nearly_exhausted_warning(self):
         response = self.client.get(self.url)
@@ -1012,16 +1014,15 @@
         self.assertEqual(response.status_code, 200)
 
         tree = PyQuery(response.content)
-        return tree.find('[data-qa-id="edit_fieldsets"] fieldset')
+        return tree.find('[data-qa-id="edit_form"]')
 
     def test_with_flag_for_user(self):
-        fieldset = self.get_devices_fieldset()
-        self.assertEqual(len(fieldset), 2)
+        form = self.get_devices_fieldset()
 
-        self.assertIsNotNone(fieldset.find(
+        self.assertIsNotNone(form.find(
             '[data-qa-id="personal_details"]'
         ))
-        self.assertIsNotNone(fieldset.find(
+        self.assertIsNotNone(form.find(
             '[data-qa-id="authentication_devices"]'
         ))
 
@@ -1050,7 +1051,7 @@
     def assert_verify_warning(self, response, token=None):
         tree = PyQuery(response.content)
         # check warning
-        warning = tree.find('div#unverified_email_warning')
+        warning = tree.find('.p-notification__response')
         self.assertEqual(len(warning), 1)
         # check verify email link
         links = warning.find('a')
@@ -1069,7 +1070,7 @@
 
     def assert_no_verify_warning(self, response):
         tree = PyQuery(response.content)
-        warning = tree.find('div#unverified_email_warning')
+        warning = tree.find('#unverified_email_warning')
         self.assertEqual(len(warning), 0)
 
     def test_verify_email_link_available(self):

=== modified file 'src/webui/tests/test_views_account_ssh.py'
--- src/webui/tests/test_views_account_ssh.py	2018-05-28 20:15:33 +0000
+++ src/webui/tests/test_views_account_ssh.py	2019-12-17 18:04:01 +0000
@@ -112,7 +112,7 @@
 
         self.assertContains(
             resp,
-            "<h1 class='main'>We're currently in read-only mode.</h1>",
+            "We're currently in read-only mode.",
             status_code=403,
             html=True)
 

=== modified file 'src/webui/tests/test_views_devices.py'
--- src/webui/tests/test_views_devices.py	2018-05-28 20:15:33 +0000
+++ src/webui/tests/test_views_devices.py	2019-12-17 18:04:01 +0000
@@ -98,12 +98,15 @@
         self.factory.make_device(account=self.account, name='bar')
 
         response = self.client.get(self.url)
-        content = response.content
-        idx_device = content.find('foo')
-        idx_device2 = content.find('bar')
-        self.assertNotEqual(idx_device, -1)
-        self.assertNotEqual(idx_device2, -1)
-        self.assertTrue(idx_device < idx_device2)
+        tree = PyQuery(response.content)
+
+        devices = tree.find('[data-qa-id="device_name"]')
+
+        # check both devices exist
+        self.assertEqual(len(devices), 2)
+
+        # check that foo is first in the markup
+        self.assertTrue(devices[0].text == 'foo')
 
     def assert_backup_device_warning(self, show_warning):
         response = self.client.get(self.url)
@@ -196,15 +199,17 @@
 
         tree = PyQuery(response.content)
 
-        rows = tree.find('table#device-list').find('tbody tr')
-        self.assertEqual(len(rows), 1)
-        name, command = rows.find('td')
-        links = command.findall('a')
-        self.assertEqual(len(links), 2)
+        devices = tree.find('[data-qa-id="device_name"]')
+        self.assertEqual(len(devices), 1)
+
+        print_device = tree.find('[data-qa-id="print_device"]')
+        self.assertEqual(len(print_device), 0)
+
+        remove_device = tree.find('[data-qa-id="delete_device"]')
+        self.assertEqual(len(remove_device), 1)
         self.assertEqual(
-            links[1].get('href'),
+            remove_device[0].get('href'),
             reverse('device-removal', kwargs=dict(device_id=device.id)))
-        self.assertEqual(name.text, device.name)
 
 
 class DeviceRenameViewTestCase(DeviceViewsTestCaseBase):
@@ -500,7 +505,7 @@
             response, 'form', 'otp', ['This field is required.'])
 
         tree = PyQuery(response.content)
-        self.assertEqual(len(tree.find('.error')), 2)
+        self.assertEqual(len(tree.find('.p-form-validation__message')), 2)
 
     def test_add_second_device_unathenticated(self):
         self.assert_successful_post()