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

[Karl Williams]

Converted the My Account page to Vanilla Framework

QA:

- npm i
- ./node_modules/gulp/bin/gulp.js sass

In container:
- source env/bin/activate
- make mail-debug

In container (new terminal)
- source env/bin/activate
- make start-db
- make run
- Visit http://[CONTAINER IP]:8000/ in your browser
- Create an account using the form
- See that you are prompted to confirm your account
- Look at the "mail-debug" terminal and copy the link to confirm your account
- QA the page visually and functionally
- Add auth devices and backup codes to see how the page changes

NOTE: The radio buttons on the auth device section do not yet work and are not visible

[Barry McGee (barry-mcgee)]

Some small comments when eye-balling code. No QA.

[lp:~deadlight/canonical-identity-provider/my-account]

1699. By Karl Williams on 2019-08-12

Remove superfluous spaces

1700. By Karl Williams on 2019-08-12

Add border to left menu

[Anthony Dillon (ya-bo-ng)]

LGTM +1

review: Approve

=== modified file 'src/identityprovider/forms.py'
--- src/identityprovider/forms.py	2019-06-18 20:13:31 +0000
+++ src/identityprovider/forms.py	2019-08-12 13:50:47 +0000
@@ -290,8 +290,8 @@
             emails_url = reverse('account-emails')
             text = _(
                 'Only verified email addresses are listed. Click '
-                '<a href="%s">Manage email addresses</a> '
-                'to add and verify email addresses.') % emails_url
+                '"Manage email addresses" '
+                'to add and verify email addresses.')
 
             # add and display a dropdown with the valid choices
             self.fields['preferred_email'] = PreferredEmailField(

=== modified file 'src/identityprovider/static_src/scss/styles.scss'
--- src/identityprovider/static_src/scss/styles.scss	2019-08-05 13:10:19 +0000
+++ src/identityprovider/static_src/scss/styles.scss	2019-08-12 13:50:47 +0000
@@ -31,3 +31,27 @@
     display: none;
   }
 }
+
+//Side navigation for logged in users
+.p-sidebar {
+  border-right: 1px solid $color-mid-light;
+
+  .is-active {
+    position: relative;
+
+    &::before {
+      background-color: $color-mid-light;
+      bottom: -$spv-inner--x-small;
+      content: '';
+      left: -$sph-inner;
+      position: absolute;
+      top: -$spv-inner--x-small;
+      width: $bar-thickness;
+    }
+  }
+}
+
+// Fix for mixed buttons
+[class^="p-button"] + [class^="p-button"] {
+  margin-left: $sph-inner;
+}

=== 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-08-12 13:50:47 +0000
@@ -1,207 +1,158 @@
-{% 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">
-    {% csrf_token %}
-    <fieldset class="">
-
-        <div data-qa-id="personal_details"></div>
-
-        <div class="{% if form.displayname.errors %}haserrors {% endif %}name-input input-row">
+  <section class="p-strip">
+    {% 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_fieldsets">
+      {% csrf_token %}
+      <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 %}
-                <span class="error">
-                    {{ form.displayname.errors|first }}
-                </span>
+            <p class="p-form-validation__message">
+              <strong>Error:</strong> {{ form.displayname.errors|first }}
+            </p>
             {% endif %}
-        </div>
+          </div>
 
-        {% if form.username %}
-        <div class="{% if form.username.errors %}haserrors {% endif %}username-input input-row">
+          {% if form.username %}
+          <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 %}
-                <span class="error">
-                    {{ form.username.errors|first }}
-                </span>
+            <p class="p-form-validation__message">
+              <strong>Error:</strong> {{ form.username.errors|first }}
+            </p>
             {% endif %}
-        </div>
-        {% endif %}
+          </div>
+          {% endif %}
 
-        <div class="{% if form.preferred_email.errors %}haserrors {% endif %}preferred-email-input input-row">
+          <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="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>
-
+              {% 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 %}
-                    <span class="error">
-                        {{ form.preferred_email.errors|first }}
-                    </span>
-                {% endif %}
-                {{ 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 %}
-        {% include "widgets/passwords.html" with edit_account_labels=1 fields=form %}
-        {% endif %}
-
-    </fieldset>
-
-    {% 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>
-    {% endif %}
-
-    <p class="actions">
-    {% if not readonly %}
-        <button type="submit" class="btn cta" name="update" data-qa-id="update_preferences">
-            <span>{% trans "Save changes" %}</span>
-        </button>
-    {% endif %}
-    {% if token %}
-        {% trans "or" %}
-        <a id="exit" href="{% if require_username %}{% url 'server-decide' token %}?continue{% else %}.{% endif %}">{% trans "exit without updating" %}</a>
-    {% 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" %}
+            {# 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 %}
+        </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 %}
+        </div>
+      </div>
+      {% endif %}
+
+      {% if enable_device_prefs %}
+      <div class="p-strip is-shallow">
+        <hr>
+      </div>
+      <h4 class="legend" data-qa-id="authentication_devices">{% trans "Authentication devices" %}</h4>
+      <div class="p-form-validation{% if form.twofactor_required.errors %} is-errors{% endif %}">
+        {{ form.twofactor_required }}
+        {% 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 %}
+
+      <div class="p-strip is-shallow">
+        <hr>
+      </div>
+
+      {% if not readonly %}
+      <button type="submit" class="p-button--positive" name="update" data-qa-id="update_preferences">
+        <span>{% trans "Save changes" %}</span>
+      </button>
+      {% endif %}
+      {% if token %}
+      {% trans "or" %}
+        <p><a id="exit" href="{% if require_username %}{% url 'server-decide' token %}?continue{% else %}.{% endif %}">{% trans "exit without updating" %}</a></p>
+      {% endif %}
+    </form>
+
+    <p><a href="/+delete" data-qa-id="delete_account_link">{% trans "Permanently delete account" %}</a></p>
+
+    {% include "widgets/last_auth_sites.html" %}
+  </section>
 
 {% 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/registration/email_sent.html'
--- src/webui/templates/registration/email_sent.html	2019-08-05 13:47:39 +0000
+++ src/webui/templates/registration/email_sent.html	2019-08-12 13:50:47 +0000
@@ -16,6 +16,8 @@
   <h1>{{ email_heading }}</h1>
 {% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block content %}
 <section class="p-strip">
   <div class="row">

=== modified file 'src/webui/templates/registration/forgot_password.html'
--- src/webui/templates/registration/forgot_password.html	2019-07-30 13:29:30 +0000
+++ src/webui/templates/registration/forgot_password.html	2019-08-12 13:50:47 +0000
@@ -16,6 +16,8 @@
 
 {% block content_id %}auth{% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block content %}
 <section class="p-strip">
   <div class="row">

=== modified file 'src/webui/templates/registration/login.html'
--- src/webui/templates/registration/login.html	2019-07-26 13:31:34 +0000
+++ src/webui/templates/registration/login.html	2019-08-12 13:50:47 +0000
@@ -39,6 +39,8 @@
   {% endif %}
 {% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block content %}
 
 <section class="p-strip">

=== modified file 'src/webui/templates/registration/logout.html'
--- src/webui/templates/registration/logout.html	2019-07-22 09:32:22 +0000
+++ src/webui/templates/registration/logout.html	2019-08-12 13:50:47 +0000
@@ -14,6 +14,8 @@
   <h1>{% trans "You have been logged out" %}</h1>
 {% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block content %}
   <section class="p-strip">
     <div class="row">

=== modified file 'src/webui/templates/registration/new_account.html'
--- src/webui/templates/registration/new_account.html	2019-07-26 13:31:34 +0000
+++ src/webui/templates/registration/new_account.html	2019-08-12 13:50:47 +0000
@@ -27,6 +27,8 @@
 
 {% block content_id %}auth{% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block content %}
 
 <section class="p-strip">

=== modified file 'src/webui/templates/registration/reset_password.html'
--- src/webui/templates/registration/reset_password.html	2019-08-05 13:47:39 +0000
+++ src/webui/templates/registration/reset_password.html	2019-08-12 13:50:47 +0000
@@ -16,6 +16,8 @@
 
 {% block content_id %}auth{% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block content %}
 <section class="p-strip">
   <div class="row">

=== modified file 'src/webui/templates/static/faq.html'
--- src/webui/templates/static/faq.html	2019-08-05 13:29:33 +0000
+++ src/webui/templates/static/faq.html	2019-08-12 13:50:47 +0000
@@ -18,6 +18,7 @@
 <h1 class="main">{% trans "Frequently asked questions" %}</h1>
 {% endblock %}
 
+{% block content_class %}{% endblock %}
 {% block content %}
 {% url 'account-index' as home_url %}
 {% url 'account-emails' as emails_url %}

=== modified file 'src/webui/templates/vanilla/_footer.html'
--- src/webui/templates/vanilla/_footer.html	2019-07-22 09:32:22 +0000
+++ src/webui/templates/vanilla/_footer.html	2019-08-12 13:50:47 +0000
@@ -5,7 +5,7 @@
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
-<footer class="p-strip" data-qa-id="ubuntuone_footer">
+<footer class="p-strip u-no-padding--top" data-qa-id="ubuntuone_footer">
   <hr>
   <div class="row">
     <p>{% trans "Ubuntu One. One place to log in to everything on Ubuntu." %}</p>

=== modified file 'src/webui/templates/vanilla/base.html'
--- src/webui/templates/vanilla/base.html	2019-07-26 13:31:34 +0000
+++ src/webui/templates/vanilla/base.html	2019-08-12 13:50:47 +0000
@@ -1,6 +1,5 @@
 {% load i18n static_url combo staticfiles %}
 <!DOCTYPE html>
-
 <!--[if IE 7 ]><html class="ie7" lang="en" dir="ltr"><![endif]-->
 <!--[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]-->
@@ -42,13 +41,6 @@
 
     <div id="cont" role="main">
       {% include "vanilla/_header.html" %}
-
-      {% block menu %}
-      {% if user.is_authenticated %}
-      {% include "widgets/personal-menu.html" %}
-      {% endif %}
-      {% endblock %}
-
       <div id="content">
         <section class="p-strip--dark p-cip-hero">
           <div class="row">
@@ -86,8 +78,17 @@
         {% endif %}
         {% endblock %}
 
-        <div id="{% block content_id %}box{% endblock %}">
-          {% block content %}{% endblock %}
+        <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 %}">
+            {% block content %}{% endblock %}
+          </div>
         </div>
 
       </div><!-- close #content -->

=== added directory 'src/webui/templates/vanilla/common'
=== added file 'src/webui/templates/vanilla/common/missing_backup_device_warning.html'
--- src/webui/templates/vanilla/common/missing_backup_device_warning.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/vanilla/common/missing_backup_device_warning.html	2019-08-12 13:50:47 +0000
@@ -0,0 +1,19 @@
+{% load i18n %}
+
+{% if need_backup_device_warning %}
+{% url 'device-addition' as add_device %}
+<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>
+    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 }}">add a backup device</a>.{% endblocktrans %}
+  </p>
+</div>
+{% endif %}

=== added file 'src/webui/templates/vanilla/common/printed_codes_nearly_exhausted_warning.html'
--- src/webui/templates/vanilla/common/printed_codes_nearly_exhausted_warning.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/vanilla/common/printed_codes_nearly_exhausted_warning.html	2019-08-12 13:50:47 +0000
@@ -0,0 +1,15 @@
+{% load i18n url_with_token %}
+
+{% if paper_devices_needing_renewal %}
+<div id="exhausted_warning" class="p-notification--caution">
+  <p class="p-notification__response">
+    <span class="p-notification__status">{% blocktrans %}Warning:{% endblocktrans %}</span>
+    {% blocktrans %}Your printed list of backup codes is nearly used up.
+    Please print a new list for the following devices.{% endblocktrans %}
+    <br><br>
+    {% for device in paper_devices_needing_renewal %}
+    {{ device.name }} <a href="{% url_with_token 'device-print' device_id=device.id %}" class="btn-sm"><span>{% trans 'Generate New Codes' %}</span></a>
+    {% endfor %}
+  </p>
+</div>
+{% endif %}

=== added file 'src/webui/templates/vanilla/common/unverified_email_warning.html'
--- src/webui/templates/vanilla/common/unverified_email_warning.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/vanilla/common/unverified_email_warning.html	2019-08-12 13:50:47 +0000
@@ -0,0 +1,14 @@
+{% load i18n url_with_token %}
+
+{% if need_verify_email_warning  %}
+{% url_with_token 'verify_email' email_address=unverified_email.email as verify_url %}
+<div class="p-notification--caution">
+  <p class="p-notification__response">
+    <span class="p-notification__status">{% blocktrans %}Warning:{% endblocktrans %}</span>
+    {% blocktrans %}
+    You have not verified your email address {{ unverified_email }}.
+    Click to <a href="{{ verify_url }}">verify your email address</a>.
+    {% endblocktrans %}
+  </p>
+</div>
+{% endif %}

=== added file 'src/webui/templates/vanilla/widgets/passwords.html'
--- src/webui/templates/vanilla/widgets/passwords.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/vanilla/widgets/passwords.html	2019-08-12 13:50:47 +0000
@@ -0,0 +1,40 @@
+{% load i18n %}
+{% if fields.oldpassword %}
+<p>{% trans "To edit any details on this page, you must confirm your current password." %}</p>
+
+{% if edit_account_labels %}
+<div class="p-form-validation{% if fields.oldpassword.errors or fields.non_field_errors %} is-error{% endif %}">
+  <label for="id_oldpassword">{% trans "Current password" %}</label>
+  {{ fields.oldpassword }}
+  {% if fields.oldpassword.errors %}
+  <p class="p-form-validation__message">
+    <strong>Error:</strong> {{ fields.oldpassword.errors|first }}
+  </p>
+  {% endif %}
+</div>
+{% endif %}
+{% endif %}
+
+{% if edit_account_labels %}
+<div class="p-form-validation{% if fields.password.errors or fields.non_field_errors %} is-error{% endif %}">
+  <label for="id_password">{% trans "Choose password" %}</label>
+  {{ fields.password }}
+  {% if fields.password.errors %}
+  <p class="p-form-validation__message">
+    <strong>Error:</strong> {{ fields.password.errors|first }}
+  </p>
+  {% endif %}
+</div>
+{% endif %}
+
+{% if edit_account_labels %}
+<div class="p-form-validation{% if fields.passwordconfirm.errors or fields.non_field_errors %} is-error{% endif %}">
+  <label for="id_passwordconfirm">{% trans "Re-type password" %}</label>
+  {{ fields.passwordconfirm }}
+  {% if fields.passwordconfirm.errors %}
+  <p class="p-form-validation__message">
+    <strong>Error:</strong> {{ fields.passwordconfirm.errors|first }}
+  </p>
+  {% endif %}
+</div>
+{% endif %}

=== added file 'src/webui/templates/vanilla/widgets/personal-menu.html'
--- src/webui/templates/vanilla/widgets/personal-menu.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/vanilla/widgets/personal-menu.html	2019-08-12 13:50:47 +0000
@@ -0,0 +1,50 @@
+{% comment %}
+Copyright 2010-2019 Canonical Ltd.  This software is licensed under
+the GNU Affero General Public License version 3 (see the file
+LICENSE).
+{% endcomment %}
+
+{% load gargoyle_tags %}
+{% load i18n %}
+{% load menu_item %}
+{% load url_with_token %}
+<div class="p-strip">
+  <ul class="p-list">
+  {% url_with_token 'account-index' as account_url %}
+
+  {% if current_section == 'account' %}
+    {% menu_item "account2" _("Personal details") account_url None "p-list__item is-active" %}
+  {% else %}
+    {% menu_item "account2" _("Personal details") account_url None "p-list__item" %}
+  {% endif %}
+
+  {% if not token and not readonly %}
+    {% ifswitch TWOFACTOR %}
+      {% url 'device-list' as device_url %}
+      {% if current_section == 'devices' %}
+        {% menu_item "devices" _("Authentication devices") device_url None "p-list__item is-active"  %}
+      {% else %}
+        {% menu_item "devices" _("Authentication devices") device_url None "p-list__item"  %}
+      {% endif %}
+    {% endifswitch %}
+    {% url 'applications' as applications_url %}
+    {% if current_section == 'applications' %}
+      {% menu_item "applications" _("Applications") applications_url None "p-list__item is-active"  %}
+    {% else %}
+      {% menu_item "applications" _("Applications") applications_url None "p-list__item"  %}
+    {% endif %}
+    {% ifswitch SSH_KEY_INTEGRATION %}
+      {% url 'ssh_keys' as ssh_url %}
+      {% menu_item "ssh_keys" _("SSH keys") ssh_url None "p-list__item"  %}
+    {% endifswitch %}
+    {% url 'auth_log' as auth_log_url %}
+    {% if current_section == 'auth_log' %}
+      {% menu_item "auth_log" _("Account activity") auth_log_url None "p-list__item is-active"  %}
+      {% menu_item "auth_log" _("Account activity") auth_log_url None "p-list__item is-active"  %}
+    {% else %}
+      {% menu_item "auth_log" _("Account activity") auth_log_url None "p-list__item"  %}
+    {% endif %}
+  {% endif %}
+
+  </ul>
+</div>