Merge lp:~deadlight/canonical-identity-provider/devices-list into lp:canonical-identity-provider/release

Proposed by Karl Williams on 2019-08-13
Status: Superseded
Proposed branch: lp:~deadlight/canonical-identity-provider/devices-list
Merge into: lp:canonical-identity-provider/release
Prerequisite: lp:~deadlight/canonical-identity-provider/emails
Diff against target: 1024 lines (+367/-390)
15 files modified
src/identityprovider/static_src/scss/styles.scss (+16/-2)
src/webui/templates/common/missing_backup_device_warning.html (+5/-5)
src/webui/templates/device/addition-generic.html (+58/-69)
src/webui/templates/device/addition-google.html (+42/-41)
src/webui/templates/device/addition-yubi.html (+11/-13)
src/webui/templates/device/code-list.html (+4/-6)
src/webui/templates/device/device-help.html (+40/-37)
src/webui/templates/device/list.html (+46/-63)
src/webui/templates/device/print-codes.html (+9/-22)
src/webui/templates/device/removal.html (+16/-19)
src/webui/templates/device/rename.html (+22/-24)
src/webui/templates/device/types.html (+69/-58)
src/webui/templates/vanilla/_footer.html (+2/-2)
src/webui/templates/vanilla/base.html (+26/-28)
src/webui/templates/vanilla/widgets/personal-menu.html (+1/-1)
To merge this branch: bzr merge lp:~deadlight/canonical-identity-provider/devices-list
Reviewer Review Type Date Requested Status
Anthony Dillon (community) 2019-08-13 Approve on 2019-08-13
Review via email: mp+371260@code.launchpad.net

This proposal has been superseded by a proposal from 2019-08-19.

Description of the change

- Updated the devices list page to Vanilla
- Styled the left-hand user nav so that it works on small screens/mobile

QA:
- npm i
- ./node_modules/gulp/bin/gulp.js sass
- source env/bin/activate
- make start-db
- make run
- Visit http://[CONTAINER IP]:8000/ in your browser
- Create an account using the form
- Go to http://[CONTAINER IP]:8000/device-list and try adding some devices to see the list update

To post a comment you must log in.
Karl Williams (deadlight) wrote :

Hold off on the review. I'm going to merge a few more commits into this one.

Anthony Dillon (ya-bo-ng) wrote :

LGTM +1

review: Approve
Anthony Dillon (ya-bo-ng) wrote :

Will check the further commits

1706. By Karl Williams on 2019-08-13

Upgrade all auth device pages to Vanilla framework. Fix footer markup. Fix small screen styling for sidebar nav

Karl Williams (deadlight) wrote :

I've pushed up all pages in this section. Ready for full review.

Unmerged revisions

1706. By Karl Williams on 2019-08-13

Upgrade all auth device pages to Vanilla framework. Fix footer markup. Fix small screen styling for sidebar nav

1705. By Karl Williams on 2019-08-13

Convert devices page to Vanilla. Fix vanilla left nav on small screens

1704. By Karl Williams on 2019-08-13

Bumped Vanilla version and styled 'Your email addresses' page

1703. By Karl Williams on 2019-08-12

Convert auth log page to Vanilla. Fix duplication in personal menu. Add truncated stable cells style

1702. By Karl Williams on 2019-08-12

Convert auth log page to Vanilla. Fix duplication in personal menu. Add truncated stable cells style

1701. By Karl Williams on 2019-08-12

Update delete account page to Vanilla

1700. By Karl Williams on 2019-08-12

Add border to left menu

1699. By Karl Williams on 2019-08-12

Remove superfluous spaces

1698. By Karl Williams on 2019-08-12

Update My Account page to use Vanilla. Configure full-width pages

1697. By Karl Williams on 2019-08-06

merge from vanilla branch

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'src/identityprovider/static_src/scss/styles.scss'
2--- src/identityprovider/static_src/scss/styles.scss 2019-08-13 16:55:52 +0000
3+++ src/identityprovider/static_src/scss/styles.scss 2019-08-13 16:55:52 +0000
4@@ -34,7 +34,14 @@
5
6 //Side navigation for logged in users
7 .p-sidebar {
8- border-right: 1px solid $color-mid-light;
9+ @media only screen and (max-width: $breakpoint-medium) {
10+ padding: 0 $sph-inner--small;
11+ border-bottom: 1px solid $color-mid-light;
12+ }
13+
14+ @media only screen and (min-width: $breakpoint-medium + 1) {
15+ border-right: 1px solid $color-mid-light;
16+ }
17
18 .is-active {
19 position: relative;
20@@ -53,7 +60,8 @@
21
22 // Fix for mixed buttons
23 @media only screen and (min-width: $breakpoint-x-small + 1) {
24- [class^="p-button"] + [class^="p-button"] {
25+ button[class^="p-button"] + a[class^="p-button"],
26+ a[class^="p-button"] + button[class^="p-button"] {
27 margin-left: $sph-inner;
28 }
29 }
30@@ -64,3 +72,9 @@
31 overflow: hidden;
32 white-space: nowrap;
33 }
34+
35+// Custom table style
36+.p-table--bordered {
37+ border-top: 1px solid $color-mid-light;
38+ border-bottom: 1px solid $color-mid-light;
39+}
40
41=== modified file 'src/webui/templates/common/missing_backup_device_warning.html'
42--- src/webui/templates/common/missing_backup_device_warning.html 2013-04-17 13:23:35 +0000
43+++ src/webui/templates/common/missing_backup_device_warning.html 2019-08-13 16:55:52 +0000
44@@ -2,17 +2,17 @@
45
46 {% if need_backup_device_warning %}
47 {% url 'device-addition' as add_device %}
48-<div class="message warning" id="missing_backup_device">
49- <p>
50+<div id="missing_backup_device" class="p-notification--caution">
51+ <p class="p-notification__response">
52+ <span class="p-notification__status">{% blocktrans %}Warning:{% endblocktrans %}</span>
53 {% blocktrans %}We strongly recommend having two authentication devices,
54 a <strong>primary</strong> device and a <strong>secondary</strong>
55 or backup device.
56- </br>
57+ <br><br>
58 Having two authentication devices means you can continue to access your
59 account with your secondary device should your primary device be lost or
60 stolen.
61- </br>
62- </br>
63+ <br><br>
64 Click to <a href="{{ add_device }}">add a backup device</a>.{% endblocktrans %}
65 </p>
66 </div>
67
68=== modified file 'src/webui/templates/device/addition-generic.html'
69--- src/webui/templates/device/addition-generic.html 2016-12-14 11:00:33 +0000
70+++ src/webui/templates/device/addition-generic.html 2019-08-13 16:55:52 +0000
71@@ -1,4 +1,4 @@
72-{% extends "base.html" %}
73+{% extends "vanilla/base.html" %}
74 {% load i18n %}
75
76 {% comment %}
77@@ -8,81 +8,70 @@
78
79 {% block html_extra %}data-qa-id="generic_device_addition"{% endblock %}
80
81-{% block extra_header %}
82-<style type="text/css">
83-p span.key
84-{
85- font-family: monospace;
86- font-size: large;
87-}
88-</style>
89-{% endblock %}
90-
91-
92 {% block title %}
93 {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
94 {% endblock %}
95
96
97 {% block text_title %}
98- <h1 class="main">{% trans "Add device" %}</h1>
99+ <h1>{% trans "My account" %}</h1>
100 {% endblock %}
101
102 {% block content %}
103-
104-<form method="post" action="">
105- {% csrf_token %}
106-
107- <p><label>
108- {% trans "Name:" %}<br>
109- {{ form.name }}
110- {% if form.name.errors %}
111- <span class="error" id="name-error">{{ form.name.errors|first }}</span>
112- {% endif %}
113- </label></p>
114-
115-
116- {% block device_instructions %}
117- <p>
118- {% trans "Shared OATH HOTP/TOTP key:" %}<br>
119- <span class="key">
120- {{ formatted_key }}
121- </span>
122- </p>
123- <p>{% blocktrans %}Enter the shared OATH HOTP/TOTP key into your device.
124- You can use both Time and Counter based methods. The system will recognize
125- the one you've used that will be preserved for future authentications.</p>
126- {% endblocktrans %}
127- {% endblock %}
128-
129- <br/>
130- <p>{% blocktrans %}
131- Now, verify your device is configured correctly. Use your device
132- <em>once</em> to generate a one-time password and enter it below.
133- {% endblocktrans %}</p>
134-
135- <p><label>
136- {% trans "One-time password:" %}<br>
137- {{ form.otp }}
138- {% if form.otp.errors %}
139- <span class="error" id="otp-error">{{ form.otp.errors|first }}</span>
140- {% else %}
141- {% if error %}
142- <span class="error">{{ error }}</span>
143- {% endif %}
144- {% endif %}
145- </label></p>
146-
147- <p>
148- <input type="hidden" name="type" value="{{ type }}">
149- <input type="hidden" name="hex_key" value="{{ hex_key }}">
150- <button class="btn" type="submit" data-qa-id="confirm_add_device">
151- <span><span>{% trans "Add device" %}</span></span>
152- </button>
153- {% trans "or" %}
154- <a data-qa-id="cancel_add_device" href="{{ device_list_path }}">{% trans "cancel" %}</a>
155- </p>
156-
157-</form>
158-
159+ <section class="p-strip">
160+ <h2>{% trans "Add device" %}</h2>
161+ <form method="post" action="">
162+ {% csrf_token %}
163+ <div class="row">
164+ <div class="p-form-validation is-error col-4">
165+ <label for="id_name">{% trans "Name" %}</label>
166+ {{ form.name }}
167+ {% if form.name.errors %}
168+ <p class="p-form-validation__message">
169+ <strong>Error:</strong> {{ form.name.errors|first }}
170+ </p>
171+ {% endif %}
172+ </div>
173+ </div>
174+ {% block device_instructions %}
175+ <p>
176+ {% trans "Shared OATH HOTP/TOTP key:" %}<br>
177+ <code>
178+ {{ formatted_key }}
179+ </code>
180+ </p>
181+ <p>
182+ {% blocktrans %}Enter the shared OATH HOTP/TOTP key into your device.
183+ You can use both Time and Counter based methods. The system will recognize
184+ the one you've used that will be preserved for future authentications.{% endblocktrans %}
185+ </p>
186+ {% endblock %}
187+
188+ <p>{% blocktrans %}
189+ Now, verify your device is configured correctly. Use your device
190+ <em>once</em> to generate a one-time password and enter it below.
191+ {% endblocktrans %}</p>
192+ <div class="row">
193+ <div class="p-form-validation is-error col-4">
194+ <label for="id_otp">{% trans "One-time password:" %}</label>
195+ {{ form.otp }}
196+ {% if form.otp.errors %}
197+ <p class="p-form-validation__message">
198+ <strong>Error:</strong> {{ form.otp.errors|first }}
199+ </p>
200+ {% else %}
201+ {% if error %}
202+ <p class="p-form-validation__message">
203+ <strong>Error:</strong> {{ error }}
204+ </p>
205+ {% endif %}
206+ {% endif %}
207+ </div>
208+ </div>
209+ <input type="hidden" name="type" value="{{ type }}">
210+ <input type="hidden" name="hex_key" value="{{ hex_key }}">
211+ <button class="p-button--primary" type="submit" data-qa-id="confirm_add_device">{% trans "Add device" %}</button>
212+ <a data-qa-id="cancel_add_device" href="{{ device_list_path }}" class="p-button--neutral">{% trans "cancel" %}</a>
213+ </form>
214+ </section>
215 {% endblock %}
216
217=== modified file 'src/webui/templates/device/addition-google.html'
218--- src/webui/templates/device/addition-google.html 2016-12-07 11:32:39 +0000
219+++ src/webui/templates/device/addition-google.html 2019-08-13 16:55:52 +0000
220@@ -5,49 +5,50 @@
221
222 {% load qrcode %}
223 {% block device_instructions %}
224-<p>{% blocktrans %}To use your smartphone as an authentication device, please
225-install "Google Authenticator" on it. Go to
226-<a href="http://m.google.com/authenticator">http://m.google.com/authenticator</a>
227-in your phone's browser or search for "Google Authenticator" on your phone's app
228-store/market.{% endblocktrans %}</p>
229-
230-<p><strong>
231- {% trans "Note: If you flash your phone, you will lose your auth data!" %}
232- </strong>
233- {% trans "Be sure you have a backup auth device before flashing your phone." %}
234-</b>
235-
236-<p>{% trans 'In the "Google Authenticator" app, add a new token and scan this barcode.' %}</p>
237- <img width="250" height="250" class="qrcode" id="id_qrcode" />
238- <p>{% trans "Or, to set up manually, please enter:" %}</p>
239- <ul>
240- <li>{% trans "Type of key" %}:
241- <select id="id_oath_type", onchange="setQRcodeUri()">
242- {% for mode, description in oath_modes.items %}
243- <option value="{{mode}}">{{description}}</option>
244- {% endfor %}
245- </select>
246-
247- {% block extra_js %}
248+ <p>{% blocktrans %}To use your smartphone as an authentication device, please
249+ install "Google Authenticator" on it. Go to
250+ <a href="http://m.google.com/authenticator">http://m.google.com/authenticator</a>
251+ in your phone's browser or search for "Google Authenticator" on your phone's app
252+ store/market.{% endblocktrans %}</p>
253+
254+ <p>
255+ <strong>{% trans "Note: If you flash your phone, you will lose your auth data!" %}</strong>
256+ {% trans "Be sure you have a backup auth device before flashing your phone." %}
257+ </p>
258+
259+ <p>{% trans 'In the "Google Authenticator" app, add a new token and scan this barcode.' %}</p>
260+ <img width="250" height="250" class="qrcode" id="id_qrcode" />
261+ <p>{% trans "Or, to set up manually, please enter:" %}</p>
262+ <div class="row">
263+ <ul class="p-list col-4">
264+ <li class="p-list__item">{% trans "Type of key" %}:
265+ <select id="id_oath_type", onchange="setQRcodeUri()">
266+ {% for mode, description in oath_modes.items %}
267+ <option value="{{mode}}">{{description}}</option>
268+ {% endfor %}
269+ </select>
270+
271+ {% block extra_js %}
272 <script id="id_qrcode_script">
273- function setQRcodeUri() {
274- var QRCODE_URIS = {
275- {% for mode in oath_modes %}
276+ function setQRcodeUri() {
277+ var QRCODE_URIS = {
278+ {% for mode in oath_modes %}
279 {{mode}}: "{% qrcode_url mode ident hex_key %}",
280- {% endfor %}
281- };
282-
283- var qrcodeImg = document.getElementById('id_qrcode');
284- var oathSelector = document.getElementById('id_oath_type');
285- var oathType = oathSelector.options[oathSelector.selectedIndex].value;
286- qrcodeImg.src = QRCODE_URIS[oathType];
287- }
288-
289- setQRcodeUri();
290+ {% endfor %}
291+ };
292+
293+ var qrcodeImg = document.getElementById('id_qrcode');
294+ var oathSelector = document.getElementById('id_oath_type');
295+ var oathType = oathSelector.options[oathSelector.selectedIndex].value;
296+ qrcodeImg.src = QRCODE_URIS[oathType];
297+ }
298+
299+ setQRcodeUri();
300 </script>
301- {% endblock %}
302- </li>
303- <li>{% trans "Account" %}: {{ ident }}</li>
304- <li>{% trans "Key" %}: {{ hex_key|b32encode_hexstring }}</li>
305+ {% endblock %}
306+ </li>
307+ <li class="p-list__item">{% trans "Account" %}: <code>{{ ident }}</code></li>
308+ <li class="p-list__item">{% trans "Key" %}: <code>{{ hex_key|b32encode_hexstring }}</code></li>
309 </ul>
310+ </div>
311 {% endblock %}
312
313=== modified file 'src/webui/templates/device/addition-yubi.html'
314--- src/webui/templates/device/addition-yubi.html 2015-06-29 18:11:04 +0000
315+++ src/webui/templates/device/addition-yubi.html 2019-08-13 16:55:52 +0000
316@@ -7,17 +7,15 @@
317 {% block device_instructions %}
318 <p>
319 {% trans "Shared OATH/HOTP key:" %}<br>
320- <span class="key" id="formatted_key">
321- {{ formatted_key }}
322- </span>
323-</p>
324-<p>
325- {% blocktrans %}Programming a YubiKey requires you to{% endblocktrans %}
326- <a href="apt:yubikey-personalization">{% trans "install" %} yubikey-personalization</a>.
327-</p>
328-<p>
329- {% blocktrans %}To program the YubiKey as an authentication device, on
330- the short press of the YubiKey, execute the following command line:{% endblocktrans %}
331+ <code id="formatted_key">{{ formatted_key }}</code>
332+</p>
333+<p>
334+ {% blocktrans %}Programming a YubiKey requires you to{% endblocktrans %}
335+ <a href="apt:yubikey-personalization">{% trans "install" %} yubikey-personalization</a>.
336+</p>
337+<p>
338+ {% blocktrans %}To program the YubiKey as an authentication device, on
339+ the short press of the YubiKey, execute the following command line:{% endblocktrans %}
340 </p>
341 <p>
342 <code id="short_press">
343@@ -25,8 +23,8 @@
344 </code>
345 </p>
346 <p>
347- {% blocktrans %}To program the long press of the YubiKey,
348- execute the following command line:{% endblocktrans %}
349+ {% blocktrans %}To program the long press of the YubiKey,
350+ execute the following command line:{% endblocktrans %}
351 </p>
352 <p>
353 <code id="long_press">
354
355=== modified file 'src/webui/templates/device/code-list.html'
356--- src/webui/templates/device/code-list.html 2016-06-21 15:39:25 +0000
357+++ src/webui/templates/device/code-list.html 2019-08-13 16:55:52 +0000
358@@ -1,21 +1,19 @@
359 {% load i18n %}
360-<div id="codes" class="yui3-g-r codelist" data-qa-id="codelist">
361- <ol class="yui3-u-1-5">
362+<div id="codes" data-qa-id="codelist">
363+ <ol class="p-list">
364 {% for code in codes %}
365- <li>{% spaceless %}
366+ <li class="p-list__item">{% spaceless %}
367 {% if forloop.counter0 < counter|default:0 %}
368 <strike>{{ code }}</strike>
369 {% else %}
370 {{ code }}
371 {% endif %}
372 {% endspaceless %}</li>
373- {% if forloop.counter|divisibleby:"5" and not forloop.last %}
374- {%endif%}
375 {% endfor %}
376 </ol>
377 </div>
378
379 <style media="print">
380-header, .menu, footer, p { display: none; }
381+header, .p-sidebar, footer, p { display: none; }
382 #codes ol { list-style:none; margin:0; padding:0 }
383 </style>
384
385=== modified file 'src/webui/templates/device/device-help.html'
386--- src/webui/templates/device/device-help.html 2016-08-16 08:26:48 +0000
387+++ src/webui/templates/device/device-help.html 2019-08-13 16:55:52 +0000
388@@ -1,4 +1,4 @@
389-{% extends "base.html" %}
390+{% extends "vanilla/base.html" %}
391 {% load i18n %}
392 {% load static_url %}
393
394@@ -10,43 +10,46 @@
395 {% block title %}{% blocktrans %}Authentication device help - Ubuntu One{% endblocktrans %}{% endblock %}
396
397 {% block text_title %}
398- <h1 class="main">{% trans "Authentication device help" %}</h1>
399+ <h1>{% trans "My account" %}</h1>
400 {% endblock %}
401
402 {% block content %}
403- <p>
404- {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
405- If your device is lost or stolen or you are having trouble logging in,
406- please review the
407- <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
408- for details on how to get help and the type of information you will need
409- to provide.
410- {% endblocktrans %}
411- </p>
412-
413- <h2>{% trans "Device lost or stolen?" %}</h2>
414- <p>
415- {% blocktrans %}We need to remove the device from your account to prevent
416- someone using it to gain access to your account. Please contact us
417- immediately to resolve this! You can reach ISD in the #isd channel on
418- IRC, or IS in the #webops channel, or phone the IS emergency helpline.
419- {% endblocktrans %}
420- </p>
421-
422- <h2>{% trans "Problems logging in?" %}</h2>
423- <p>
424- {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
425- We can help get a device working again or set you up with some temporary
426- tokens to enable you to continue with your work. If it's not urgent,
427- please send email to the ISD Support address as described in the
428- <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
429- and someone will get back to you soon.
430- {% endblocktrans %}
431- </p>
432- {% if support_phone %}
433- <p>
434- {% blocktrans %}If it is urgent, please phone the IS emergency helpline at
435- <span id="support-phone">{{ support_phone }}</span>.{% endblocktrans %}
436- </p>
437- {% endif %}
438+ <section class="p-strip">
439+ <h3>{% trans "Authentication device help" %}</h3>
440+ <p>
441+ {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
442+ If your device is lost or stolen or you are having trouble logging in,
443+ please review the
444+ <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
445+ for details on how to get help and the type of information you will need
446+ to provide.
447+ {% endblocktrans %}
448+ </p>
449+
450+ <h3>{% trans "Device lost or stolen?" %}</h3>
451+ <p>
452+ {% blocktrans %}We need to remove the device from your account to prevent
453+ someone using it to gain access to your account. Please contact us
454+ immediately to resolve this! You can reach ISD in the #isd channel on
455+ IRC, or IS in the #webops channel, or phone the IS emergency helpline.
456+ {% endblocktrans %}
457+ </p>
458+
459+ <h3>{% trans "Problems logging in?" %}</h3>
460+ <p>
461+ {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
462+ We can help get a device working again or set you up with some temporary
463+ tokens to enable you to continue with your work. If it's not urgent,
464+ please send email to the ISD Support address as described in the
465+ <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
466+ and someone will get back to you soon.
467+ {% endblocktrans %}
468+ </p>
469+ {% if support_phone %}
470+ <p>
471+ {% blocktrans %}If it is urgent, please phone the IS emergency helpline at
472+ <span id="support-phone">{{ support_phone }}</span>.{% endblocktrans %}
473+ </p>
474+ {% endif %}
475+ </section>
476 {% endblock %}
477
478=== modified file 'src/webui/templates/device/list.html'
479--- src/webui/templates/device/list.html 2016-07-06 02:49:14 +0000
480+++ src/webui/templates/device/list.html 2019-08-13 16:55:52 +0000
481@@ -1,80 +1,63 @@
482-{% extends "base.html" %}
483+{% extends "vanilla/base.html" %}
484 {% load i18n %}
485 {% load static_url %}
486
487 {% comment %}
488-Copyright 2012 Canonical Ltd. This software is licensed under the GNU
489+Copyright 2012-2019 Canonical Ltd. This software is licensed under the GNU
490 Affero General Public License version 3 (see the file LICENSE).
491 {% endcomment %}
492
493 {% block html_extra %}data-qa-id="device_list"{% endblock %}
494
495-{% block extra_header %}
496-<style type="text/css">
497-table#device-list td.command
498-{
499- width: 0;
500-}
501-</style>
502-{% endblock %}
503-
504-
505 {% block title %}
506 {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
507 {% endblock %}
508
509
510-{% block text_title %}<h1 class="u1-h-main">{% trans "Authentication devices" %}</h1>{% endblock %}
511+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
512
513 {% block content %}
514-
515-{% include "common/missing_backup_device_warning.html" %}
516-{% include "common/printed_codes_nearly_exhausted_warning.html" %}
517-
518-<div id="auth-devices">
519- {% if devices %}
520-
521- <section class="devices-you-added">
522-
523- <h3>{% trans "Authentication devices you've added" %}</h3>
524-
525- <table id="device-list" data-qa-id="device_list">
526- <tbody>
527- {% for device in devices %}
528- <tr>
529- <td class="name" data-qa-id="device_name">{{ device.name }}</td>
530- <td class="actions">
531- <a class="btn-sm" href="{% url 'device-rename' device.id %}" data-qa-id="rename_device">
532- <span>{% trans "Rename" %}</span>
533- </a>
534- <a class="btn-sm" href="{% url 'device-removal' device.id %}" data-qa-id="delete_device">
535- <span>{% trans "Delete" %}</span>
536- </a>
537- {% if device.device_type == 'paper' %}
538- <a class="btn-sm" href="{% url 'device-print' device.id %}" data-qa-id="print_device">
539- <span>{% trans "View Codes" %}</span>
540- </a>
541- {% endif %}
542- </td>
543- </tr>
544- {% endfor %}
545- </tbody>
546- </table>
547- </section>
548-
549- {% else %}
550- <p>{% trans "You don't have any authentication devices associated with this account." %}</p>
551- {% endif %}
552-
553- <p><a data-qa-id="add_new_device" href="{{ device_addition_path }}">
554- {% trans "Add a new authentication device" %}
555- </a></p>
556-
557- <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
558-
559- <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
560- <a href="{{ 2FFAQ }}">2-Factor Auth FAQ</a>
561- {% endblocktrans %}</p>
562-</div>
563-
564+<section class="p-strip">
565+ {% include "vanilla/common/missing_backup_device_warning.html" %}
566+ {% include "vanilla/common/printed_codes_nearly_exhausted_warning.html" %}
567+ <div id="auth-devices">
568+ <h2>{% trans "Authentication devices" %}</h2>
569+ {% if devices %}
570+ <h3 class="p-heading--four">{% trans "Authentication devices you've added" %}</h3>
571+ <div class="p-strip is-shallow">
572+ <table id="device-list" data-qa-id="device_list" class="p-table--bordered">
573+ <tbody>
574+ {% for device in devices %}
575+ <tr>
576+ <td class="name" data-qa-id="device_name">{{ device.name }}</td>
577+ <td class="u-align-text--right">
578+ <ul class="p-inline-list u-no-margin--bottom">
579+ <li class="p-inline-list__item"><a href="{% url 'device-rename' device.id %}" data-qa-id="rename_device">{% trans "Rename" %}</a></li>
580+ <li class="p-inline-list__item"><a href="{% url 'device-removal' device.id %}" data-qa-id="delete_device">{% trans "Delete" %}</a></li>
581+ {% if device.device_type == 'paper' %}
582+ <li class="p-inline-list__item"><a href="{% url 'device-print' device.id %}" data-qa-id="print_device">{% trans "View Codes" %}</a></li>
583+ {% endif %}
584+ </ul>
585+ </td>
586+ </tr>
587+ {% endfor %}
588+ </tbody>
589+ </table>
590+ </div>
591+
592+ {% else %}
593+ <p>{% trans "You don't have any authentication devices associated with this account." %}</p>
594+ {% endif %}
595+
596+ <p><a data-qa-id="add_new_device" href="{{ device_addition_path }}">
597+ {% trans "Add a new authentication device" %}
598+ </a></p>
599+
600+ <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
601+
602+ <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
603+ <a href="{{ 2FFAQ }}">2-Factor Auth FAQ</a>
604+ {% endblocktrans %}</p>
605+ </div>
606+</section>
607 {% endblock %}
608
609=== modified file 'src/webui/templates/device/print-codes.html'
610--- src/webui/templates/device/print-codes.html 2017-04-19 15:36:34 +0000
611+++ src/webui/templates/device/print-codes.html 2019-08-13 16:55:52 +0000
612@@ -1,4 +1,4 @@
613-{% extends "base.html" %}
614+{% extends "vanilla/base.html" %}
615 {% load i18n url_with_token %}
616
617 {% comment %}
618@@ -13,32 +13,19 @@
619 {% endblock %}
620
621
622-{% block text_title %}<h1 class="u1-h-main">{% trans "Printable backup codes" %}</h1>{% endblock %}
623+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
624
625 {% block content %}
626-
627-<p>{% trans "Print this list of backup codes and keep them safe." %}</p>
628-
629-<p class="print-new-codes">
630-
631-</p>
632-
633-
634-{% include 'device/code-list.html' %}
635-
636-<p>
637- <button class="btn cta" id="printbtn" onclick="window.print()" data-qa-id="print_codes">
638- <span>{% trans "Print Codes" %}</span>
639- </button>
640+ <h2>{% trans "Printable backup codes" %}</h2>
641+ <p>{% trans "Print this list of backup codes and keep them safe." %}</p>
642+ {% include 'device/code-list.html' %}
643+ <button class="p-button--positive" id="printbtn" onclick="window.print()" data-qa-id="print_codes">{% trans "Print Codes" %}</button>
644 {% if token and not needs_renewal %}
645- <a class="cta secondary" href="{% url_with_token 'server-decide' %}" data-qa-id="continue_to_rp">{% trans "Continue" %}</a>
646+ <a class="p-button--neutral" href="{% url_with_token 'server-decide' %}" data-qa-id="continue_to_rp">{% trans "Continue" %}</a>
647 {% else %}
648- <a class="cta secondary" href="{% url 'device-list' %}" data-qa-id="cancel_print_codes">{% trans "Go back" %}</a>
649+ <a class="p-button--neutral" href="{% url 'device-list' %}" data-qa-id="cancel_print_codes">{% trans "Go back" %}</a>
650 {% endif %}
651 {% if generation_enabled %}
652- <a class="btn cta secondary print-new-codes" href="{% url_with_token 'device-generate' device_id=device_id %}" data-qa-id="generate_codes">
653- <span>{% trans "Generate new codes" %}</span>
654- </a>
655+ <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>
656 {% endif %}
657-</p>
658 {% endblock %}
659
660=== modified file 'src/webui/templates/device/removal.html'
661--- src/webui/templates/device/removal.html 2014-12-09 21:41:56 +0000
662+++ src/webui/templates/device/removal.html 2019-08-13 16:55:52 +0000
663@@ -1,8 +1,8 @@
664-{% extends "base.html" %}
665+{% extends "vanilla/base.html" %}
666 {% load i18n %}
667
668 {% comment %}
669-Copyright 2012 Canonical Ltd. This software is licensed under the GNU
670+Copyright 2012-2019 Canonical Ltd. This software is licensed under the GNU
671 Affero General Public License version 3 (see the file LICENSE).
672 {% endcomment %}
673
674@@ -13,23 +13,20 @@
675 {% endblock %}
676
677
678-{% block text_title %}<h1 class="u1-h-main">{% trans "Delete device?" %}</h1>{% endblock %}
679+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
680
681 {% block content %}
682-
683-<p>{% blocktrans %}Are you sure that you want to delete the following
684-authentication device?{% endblocktrans %}</p>
685-
686-<p class="device-name" data-qa-id="device_removal_device_name">{{ name }}</p>
687-
688-<form method="post" action="">
689- {% csrf_token %}
690- <p>
691- <button class="btn cta" type="submit" data-qa-id="delete_this_device">
692- <span>{% trans "Delete this device" %}</span>
693- </button>
694- <a class="cta secondary" data-qa-id="cancel_deleting_this_device" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
695- </p>
696-</form>
697-
698+ <section class="p-strip">
699+ <h2>{% trans "Delete device?" %}</h2>
700+ <p>{% blocktrans %}Are you sure that you want to delete the following
701+ authentication device?{% endblocktrans %}</p>
702+
703+ <p class="device-name" data-qa-id="device_removal_device_name">{{ name }}</p>
704+
705+ <form method="post" action="">
706+ {% csrf_token %}
707+ <button class="p-button--negative" type="submit" data-qa-id="delete_this_device">{% trans "Delete this device" %}</button>
708+ <a class="p-button--neutral" data-qa-id="cancel_deleting_this_device" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
709+ </form>
710+ </section>
711 {% endblock %}
712
713=== modified file 'src/webui/templates/device/rename.html'
714--- src/webui/templates/device/rename.html 2014-12-09 21:41:56 +0000
715+++ src/webui/templates/device/rename.html 2019-08-13 16:55:52 +0000
716@@ -1,8 +1,8 @@
717-{% extends "base.html" %}
718+{% extends "vanilla/base.html" %}
719 {% load i18n %}
720
721 {% comment %}
722-Copyright 2012 Canonical Ltd. This software is licensed under the GNU
723+Copyright 2012-2019 Canonical Ltd. This software is licensed under the GNU
724 Affero General Public License version 3 (see the file LICENSE).
725 {% endcomment %}
726
727@@ -13,28 +13,26 @@
728 {% endblock %}
729
730
731-{% block text_title %}<h1 class="u1-h-main">{% trans "Rename device" %}</h1>{% endblock %}
732+{% block text_title %}<h1 class="u1-h-main">{% trans "My account" %}</h1>{% endblock %}
733
734 {% block content %}
735-
736-<form method="post" action="">
737- {% csrf_token %}
738-
739- <p><label for="id_name">
740- {% trans "Name:" %}
741- {{ form.name }}
742- {% if form.name.errors %}
743- <span class="error" id="name-error">{{ form.name.errors|first }}</span>
744- {% endif %}
745- </label></p>
746-
747- <p>
748- <button class="btn cta" type="submit" data-qa-id="rename_this_device">
749- <span>{% trans "Rename" %}</span>
750- </button>
751- <a class="cta secondary" href="{{ device_list_path }}" data-qa-id="cancel_renaming_this_device">{% trans "Cancel" %}</a>
752- </p>
753-
754-</form>
755-
756+ <section class="p-strip">
757+ <h2>{% trans "Rename device" %}</h2>
758+ <form method="post" action="">
759+ {% csrf_token %}
760+ <div class="row">
761+ <div class="p-form-validation is-error col-4">
762+ <label for="id_name">Name</label>
763+ {{ form.name }}
764+ {% if form.name.errors %}
765+ <p class="p-form-validation__message">
766+ <strong>Error:</strong> {{ form.name.errors|first }}
767+ </p>
768+ {% endif %}
769+ </div>
770+ </div>
771+ <button class="p-button--positive" type="submit" data-qa-id="rename_this_device">{% trans "Rename" %}</button>
772+ <a class="p-button--neutral" href="{{ device_list_path }}" data-qa-id="cancel_renaming_this_device">{% trans "Cancel" %}</a>
773+ </form>
774+ </section>
775 {% endblock %}
776
777=== modified file 'src/webui/templates/device/types.html'
778--- src/webui/templates/device/types.html 2016-12-06 16:53:22 +0000
779+++ src/webui/templates/device/types.html 2019-08-13 16:55:52 +0000
780@@ -1,75 +1,86 @@
781-{% extends "base.html" %}
782+{% extends "vanilla/base.html" %}
783 {% load i18n %}
784 {% load static_url %}
785 {% load gargoyle_tags %}
786
787 {% comment %}
788-Copyright 2012 Canonical Ltd. This software is licensed under the GNU
789+Copyright 2012-2019 Canonical Ltd. This software is licensed under the GNU
790 Affero General Public License version 3 (see the file LICENSE).
791 {% endcomment %}
792
793 {% block html_extra %}data-qa-id="device_addition"{% endblock %}
794
795 {% block title %}
796- {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
797+ {% trans "Add a new authentication device" %}
798 {% endblock %}
799
800
801-{% block text_title %}<h1 class="u1-h-main">{% trans "Add a new authentication device" %}</h1>{% endblock %}
802+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
803
804 {% block content %}
805-
806-<form method="post" action="">
807- {% csrf_token %}
808-
809- <dl class="device-types">
810-
811- <dt><label>
812- <input type="radio" name="type" value="google" id="type_google" checked="checked"> {% trans "Smartphone or Tablet" %}
813- </label></dt>
814- <dd>
815- <p><label for="type_google">{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app;
816- or Windows phone with the Auth7 app{% endblocktrans %}</label></p>
817- </dd>
818-
819- <dt><label>
820- <input type="radio" name="type" value="yubi" id="type_yubi"> {% trans "YubiKey" %}
821- </label></dt>
822- <dd>
823- <p><label for="type_yubi">{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</label></p>
824- </dd>
825-
826- <dt><label>
827- <input type="radio" name="type" value="generic" id="type_generic"> {% trans "Generic HOTP/TOTP device" %}
828- </label></dt>
829- <dd>
830- <p><label for="type_generic">{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</label></p>
831- </dd>
832-
833- <dt><label>
834- <input type="radio" name="type" value="paper" id="type_paper"> {% trans "Printable Backup Codes" %}
835- </label></dt>
836- <dd>
837- <p><label for="type_paper">{% blocktrans %}A list of backup codes to
838- print.{% endblocktrans %}</label></p>
839- </dd>
840-
841- </dl>
842-
843- <p>
844- <button class="btn cta" type="submit" data-qa-id="add_device_from_type">
845- <span>{% trans "Add device" %}</span>
846- </button>
847- <a class="cta secondary" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
848- </p>
849- <p>
850- {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
851- The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>
852- has details on compatible devices.
853- {% endblocktrans %}
854- </p>
855-
856-
857-</form>
858-
859+ <section class="p-strip">
860+ <h2>{% trans "Add a new authentication device" %}</h2>
861+ <form method="post" action="">
862+ {% csrf_token %}
863+
864+ <ul class="p-list">
865+ <li class="p-list__item">
866+ <div class="row">
867+ <div class="col-3">
868+ <input type="radio" name="type" value="google" id="type_google" checked="checked">
869+ <label for="type_google">{% trans "Smartphone or Tablet" %}</label>
870+ </div>
871+ <div class="col-5">
872+ <p>{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app; or Windows phone with the Auth7 app{% endblocktrans %}</p>
873+ </div>
874+ </div>
875+ </li>
876+ <li class="p-list__item">
877+ <div class="row">
878+ <div class="col-3 col-medium-3">
879+ <input type="radio" name="type" value="yubi" id="type_yubi">
880+ <label for="type_yubi">{% trans "YubiKey" %}</label>
881+ </div>
882+ <div class="col-5 col-medium-3">
883+ <p>{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</p>
884+ </div>
885+ </div>
886+ </li>
887+ <li class="p-list__item">
888+ <div class="row">
889+ <div class="col-3 col-medium-3">
890+ <input type="radio" name="type" value="generic" id="type_generic">
891+ <label for="type_generic">{% trans "Generic HOTP/TOTP device" %}</label>
892+ </div>
893+ <div class="col-5 col-medium-3">
894+ <p>{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</p>
895+ </div>
896+ </div>
897+ </li>
898+ <li class="p-list__item">
899+ <div class="row">
900+ <div class="col-3 col-medium-3">
901+ <input type="radio" name="type" value="paper" id="type_paper">
902+ <label for="type_paper">{% trans "Printable Backup Codes" %}</label>
903+ </div>
904+ <div class="col-5 col-medium-3">
905+ <p>{% blocktrans %}A list of backup codes to
906+ print.{% endblocktrans %}</p>
907+ </div>
908+ </div>
909+ </li>
910+ </ul>
911+
912+ <button class="p-button--positive" type="submit" data-qa-id="add_device_from_type">{% trans "Add device" %}</button>
913+ <a class="p-button--neutral" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
914+ <p>
915+ {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
916+ The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>
917+ has details on compatible devices.
918+ {% endblocktrans %}
919+ </p>
920+
921+
922+ </form>
923+ </section>
924 {% endblock %}
925
926=== modified file 'src/webui/templates/vanilla/_footer.html'
927--- src/webui/templates/vanilla/_footer.html 2019-08-13 16:55:52 +0000
928+++ src/webui/templates/vanilla/_footer.html 2019-08-13 16:55:52 +0000
929@@ -5,8 +5,8 @@
930 GNU Affero General Public License version 3 (see the file LICENSE).
931 {% endcomment %}
932
933-<footer class="p-strip u-no-padding--top" data-qa-id="ubuntuone_footer">
934- <hr>
935+<hr>
936+<footer class="p-strip is-shallow" data-qa-id="ubuntuone_footer">
937 <div class="row">
938 <p>{% trans "Ubuntu One. One place to log in to everything on Ubuntu." %}</p>
939 {% spaceless %}
940
941=== modified file 'src/webui/templates/vanilla/base.html'
942--- src/webui/templates/vanilla/base.html 2019-08-13 16:55:52 +0000
943+++ src/webui/templates/vanilla/base.html 2019-08-13 16:55:52 +0000
944@@ -50,34 +50,6 @@
945 </div>
946 </section>
947
948- {% block readonly %}
949- {% if readonly %}
950- <div class="p-notification--caution">
951- <p class="p-notification__response">
952- {% 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 %}
953- </p>
954- </div>
955- {% endif %}
956- {% endblock %}
957-
958- {% block messages %}
959- {% if messages %}
960- <section class="p-strip is-shallow">
961- {% for message in messages %}
962- <div class="row">
963- <div class="col-12">
964- <div class="p-notification">
965- <p class="p-notification__response">
966- {{ message }}
967- </p>
968- </div>
969- </div>
970- </div>
971- {% endfor %}
972- </section>
973- {% endif %}
974- {% endblock %}
975-
976 <div id="{% block content_id %}box{% endblock %}" class="row">
977 {% block menu %}
978 {% if user.is_authenticated %}
979@@ -87,6 +59,32 @@
980 {% endif %}
981 {% endblock %}
982 <div class="{% block content_class %}col-8{% endblock %}">
983+ {% block readonly %}
984+ {% if readonly %}
985+ <div class="p-notification--caution">
986+ <p class="p-notification__response">
987+ {% 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 %}
988+ </p>
989+ </div>
990+ {% endif %}
991+ {% endblock %}
992+ {% block messages %}
993+ {% if messages %}
994+ <section class="p-strip is-shallow">
995+ {% for message in messages %}
996+ <div class="row">
997+ <div class="col-12">
998+ <div class="p-notification">
999+ <p class="p-notification__response">
1000+ {{ message }}
1001+ </p>
1002+ </div>
1003+ </div>
1004+ </div>
1005+ {% endfor %}
1006+ </section>
1007+ {% endif %}
1008+ {% endblock %}
1009 {% block content %}{% endblock %}
1010 </div>
1011 </div>
1012
1013=== modified file 'src/webui/templates/vanilla/widgets/personal-menu.html'
1014--- src/webui/templates/vanilla/widgets/personal-menu.html 2019-08-13 16:55:52 +0000
1015+++ src/webui/templates/vanilla/widgets/personal-menu.html 2019-08-13 16:55:52 +0000
1016@@ -9,7 +9,7 @@
1017 {% load menu_item %}
1018 {% load url_with_token %}
1019 <div class="p-strip">
1020- <ul class="p-list">
1021+ <ul class="p-list u-no-margin--bottom">
1022 {% url_with_token 'account-index' as account_url %}
1023
1024 {% if current_section == 'account' %}