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

Proposed by Karl Williams
Status: Merged
Approved by: Karl Williams
Approved revision: 1706
Merged at revision: 1706
Proposed branch: lp:~deadlight/canonical-identity-provider/devices-list
Merge into: lp:~deadlight/canonical-identity-provider/vanilla
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) Approve
Review via email: mp+371445@code.launchpad.net

This proposal supersedes a proposal from 2019-08-13.

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.
Revision history for this message
Karl Williams (deadlight) wrote : Posted in a previous version of this proposal

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

Revision history for this message
Anthony Dillon (ya-bo-ng) wrote : Posted in a previous version of this proposal

LGTM +1

review: Approve
Revision history for this message
Anthony Dillon (ya-bo-ng) wrote : Posted in a previous version of this proposal

Will check the further commits

Revision history for this message
Karl Williams (deadlight) wrote : Posted in a previous version of this proposal

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

Revision history for this message
Barry McGee (barry-mcgee) wrote :

Some comments inline.

Revision history for this message
Anthony Dillon (ya-bo-ng) wrote :

QA looks good but would be nice to overflow the tables. I believe they will require a wrapping div with some styles.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'src/identityprovider/static_src/scss/styles.scss'
--- src/identityprovider/static_src/scss/styles.scss 2019-08-19 08:29:07 +0000
+++ src/identityprovider/static_src/scss/styles.scss 2019-08-19 08:29:07 +0000
@@ -34,7 +34,14 @@
3434
35//Side navigation for logged in users35//Side navigation for logged in users
36.p-sidebar {36.p-sidebar {
37 border-right: 1px solid $color-mid-light;37 @media only screen and (max-width: $breakpoint-medium) {
38 padding: 0 $sph-inner--small;
39 border-bottom: 1px solid $color-mid-light;
40 }
41
42 @media only screen and (min-width: $breakpoint-medium + 1) {
43 border-right: 1px solid $color-mid-light;
44 }
3845
39 .is-active {46 .is-active {
40 position: relative;47 position: relative;
@@ -53,7 +60,8 @@
5360
54// Fix for mixed buttons61// Fix for mixed buttons
55@media only screen and (min-width: $breakpoint-x-small + 1) {62@media only screen and (min-width: $breakpoint-x-small + 1) {
56 [class^="p-button"] + [class^="p-button"] {63 button[class^="p-button"] + a[class^="p-button"],
64 a[class^="p-button"] + button[class^="p-button"] {
57 margin-left: $sph-inner;65 margin-left: $sph-inner;
58 }66 }
59}67}
@@ -64,3 +72,9 @@
64 overflow: hidden;72 overflow: hidden;
65 white-space: nowrap;73 white-space: nowrap;
66}74}
75
76// Custom table style
77.p-table--bordered {
78 border-top: 1px solid $color-mid-light;
79 border-bottom: 1px solid $color-mid-light;
80}
6781
=== 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-08-19 08:29:07 +0000
@@ -2,17 +2,17 @@
22
3{% if need_backup_device_warning %}3{% if need_backup_device_warning %}
4{% url 'device-addition' as add_device %}4{% url 'device-addition' as add_device %}
5<div class="message warning" id="missing_backup_device">5<div id="missing_backup_device" class="p-notification--caution">
6 <p>6 <p class="p-notification__response">
7 <span class="p-notification__status">{% blocktrans %}Warning:{% endblocktrans %}</span>
7 {% blocktrans %}We strongly recommend having two authentication devices,8 {% blocktrans %}We strongly recommend having two authentication devices,
8 a <strong>primary</strong> device and a <strong>secondary</strong>9 a <strong>primary</strong> device and a <strong>secondary</strong>
9 or backup device.10 or backup device.
10 </br>11 <br><br>
11 Having two authentication devices means you can continue to access your12 Having two authentication devices means you can continue to access your
12 account with your secondary device should your primary device be lost or13 account with your secondary device should your primary device be lost or
13 stolen.14 stolen.
14 </br>15 <br><br>
15 </br>
16 Click to <a href="{{ add_device }}">add a backup device</a>.{% endblocktrans %}16 Click to <a href="{{ add_device }}">add a backup device</a>.{% endblocktrans %}
17 </p>17 </p>
18</div>18</div>
1919
=== 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-08-19 08:29:07 +0000
@@ -1,4 +1,4 @@
1{% extends "base.html" %}1{% extends "vanilla/base.html" %}
2{% load i18n %}2{% load i18n %}
33
4{% comment %}4{% comment %}
@@ -8,81 +8,70 @@
88
9{% block html_extra %}data-qa-id="generic_device_addition"{% endblock %}9{% block html_extra %}data-qa-id="generic_device_addition"{% endblock %}
1010
11{% block extra_header %}
12<style type="text/css">
13p span.key
14{
15 font-family: monospace;
16 font-size: large;
17}
18</style>
19{% endblock %}
20
21
22{% block title %}11{% block title %}
23 {% blocktrans %}{{ user }}'s devices{% endblocktrans %}12 {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
24{% endblock %}13{% endblock %}
2514
2615
27{% block text_title %}16{% block text_title %}
28 <h1 class="main">{% trans "Add device" %}</h1>17 <h1>{% trans "My account" %}</h1>
29{% endblock %}18{% endblock %}
3019
31{% block content %}20{% block content %}
3221 <section class="p-strip">
33<form method="post" action="">22 <h2>{% trans "Add device" %}</h2>
34 {% csrf_token %}23 <form method="post" action="">
3524 {% csrf_token %}
36 <p><label>25 <div class="row">
37 {% trans "Name:" %}<br>26 <div class="p-form-validation is-error col-4">
38 {{ form.name }}27 <label for="id_name">{% trans "Name" %}</label>
39 {% if form.name.errors %}28 {{ form.name }}
40 <span class="error" id="name-error">{{ form.name.errors|first }}</span>29 {% if form.name.errors %}
41 {% endif %}30 <p class="p-form-validation__message">
42 </label></p>31 <strong>Error:</strong> {{ form.name.errors|first }}
4332 </p>
4433 {% endif %}
45 {% block device_instructions %}34 </div>
46 <p>35 </div>
47 {% trans "Shared OATH HOTP/TOTP key:" %}<br>36 {% block device_instructions %}
48 <span class="key">37 <p>
49 {{ formatted_key }}38 {% trans "Shared OATH HOTP/TOTP key:" %}<br>
50 </span>39 <code>
51 </p>40 {{ formatted_key }}
52 <p>{% blocktrans %}Enter the shared OATH HOTP/TOTP key into your device.41 </code>
53 You can use both Time and Counter based methods. The system will recognize42 </p>
54 the one you've used that will be preserved for future authentications.</p>43 <p>
55 {% endblocktrans %}44 {% blocktrans %}Enter the shared OATH HOTP/TOTP key into your device.
56 {% endblock %}45 You can use both Time and Counter based methods. The system will recognize
5746 the one you've used that will be preserved for future authentications.{% endblocktrans %}
58 <br/>47 </p>
59 <p>{% blocktrans %}48 {% endblock %}
60 Now, verify your device is configured correctly. Use your device49
61 <em>once</em> to generate a one-time password and enter it below.50 <p>{% blocktrans %}
62 {% endblocktrans %}</p>51 Now, verify your device is configured correctly. Use your device
6352 <em>once</em> to generate a one-time password and enter it below.
64 <p><label>53 {% endblocktrans %}</p>
65 {% trans "One-time password:" %}<br>54 <div class="row">
66 {{ form.otp }}55 <div class="p-form-validation is-error col-4">
67 {% if form.otp.errors %}56 <label for="id_otp">{% trans "One-time password:" %}</label>
68 <span class="error" id="otp-error">{{ form.otp.errors|first }}</span>57 {{ form.otp }}
69 {% else %}58 {% if form.otp.errors %}
70 {% if error %}59 <p class="p-form-validation__message">
71 <span class="error">{{ error }}</span>60 <strong>Error:</strong> {{ form.otp.errors|first }}
72 {% endif %}61 </p>
73 {% endif %}62 {% else %}
74 </label></p>63 {% if error %}
7564 <p class="p-form-validation__message">
76 <p>65 <strong>Error:</strong> {{ error }}
77 <input type="hidden" name="type" value="{{ type }}">66 </p>
78 <input type="hidden" name="hex_key" value="{{ hex_key }}">67 {% endif %}
79 <button class="btn" type="submit" data-qa-id="confirm_add_device">68 {% endif %}
80 <span><span>{% trans "Add device" %}</span></span>69 </div>
81 </button>70 </div>
82 {% trans "or" %}71 <input type="hidden" name="type" value="{{ type }}">
83 <a data-qa-id="cancel_add_device" href="{{ device_list_path }}">{% trans "cancel" %}</a>72 <input type="hidden" name="hex_key" value="{{ hex_key }}">
84 </p>73 <button class="p-button--primary" type="submit" data-qa-id="confirm_add_device">{% trans "Add device" %}</button>
8574 <a data-qa-id="cancel_add_device" href="{{ device_list_path }}" class="p-button--neutral">{% trans "cancel" %}</a>
86</form>75 </form>
8776 </section>
88{% endblock %}77{% endblock %}
8978
=== 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-08-19 08:29:07 +0000
@@ -5,49 +5,50 @@
55
6{% load qrcode %}6{% load qrcode %}
7{% block device_instructions %}7{% block device_instructions %}
8<p>{% blocktrans %}To use your smartphone as an authentication device, please8 <p>{% blocktrans %}To use your smartphone as an authentication device, please
9install "Google Authenticator" on it. Go to9 install "Google Authenticator" on it. Go to
10<a href="http://m.google.com/authenticator">http://m.google.com/authenticator</a>10 <a href="http://m.google.com/authenticator">http://m.google.com/authenticator</a>
11in your phone's browser or search for "Google Authenticator" on your phone's app11 in your phone's browser or search for "Google Authenticator" on your phone's app
12store/market.{% endblocktrans %}</p>12 store/market.{% endblocktrans %}</p>
1313
14<p><strong>14 <p>
15 {% trans "Note: If you flash your phone, you will lose your auth data!" %}15 <strong>{% trans "Note: If you flash your phone, you will lose your auth data!" %}</strong>
16 </strong>16 {% trans "Be sure you have a backup auth device before flashing your phone." %}
17 {% trans "Be sure you have a backup auth device before flashing your phone." %}17 </p>
18</b>18
1919 <p>{% trans 'In the "Google Authenticator" app, add a new token and scan this barcode.' %}</p>
20<p>{% trans 'In the "Google Authenticator" app, add a new token and scan this barcode.' %}</p>20 <img width="250" height="250" class="qrcode" id="id_qrcode" />
21 <img width="250" height="250" class="qrcode" id="id_qrcode" />21 <p>{% trans "Or, to set up manually, please enter:" %}</p>
22 <p>{% trans "Or, to set up manually, please enter:" %}</p>22 <div class="row">
23 <ul>23 <ul class="p-list col-4">
24 <li>{% trans "Type of key" %}:24 <li class="p-list__item">{% trans "Type of key" %}:
25 <select id="id_oath_type", onchange="setQRcodeUri()">25 <select id="id_oath_type", onchange="setQRcodeUri()">
26 {% for mode, description in oath_modes.items %}26 {% for mode, description in oath_modes.items %}
27 <option value="{{mode}}">{{description}}</option>27 <option value="{{mode}}">{{description}}</option>
28 {% endfor %}28 {% endfor %}
29 </select>29 </select>
3030
31 {% block extra_js %}31 {% block extra_js %}
32 <script id="id_qrcode_script">32 <script id="id_qrcode_script">
33 function setQRcodeUri() {33 function setQRcodeUri() {
34 var QRCODE_URIS = {34 var QRCODE_URIS = {
35 {% for mode in oath_modes %}35 {% for mode in oath_modes %}
36 {{mode}}: "{% qrcode_url mode ident hex_key %}",36 {{mode}}: "{% qrcode_url mode ident hex_key %}",
37 {% endfor %}37 {% endfor %}
38 };38 };
3939
40 var qrcodeImg = document.getElementById('id_qrcode');40 var qrcodeImg = document.getElementById('id_qrcode');
41 var oathSelector = document.getElementById('id_oath_type');41 var oathSelector = document.getElementById('id_oath_type');
42 var oathType = oathSelector.options[oathSelector.selectedIndex].value;42 var oathType = oathSelector.options[oathSelector.selectedIndex].value;
43 qrcodeImg.src = QRCODE_URIS[oathType];43 qrcodeImg.src = QRCODE_URIS[oathType];
44 }44 }
4545
46 setQRcodeUri();46 setQRcodeUri();
47 </script>47 </script>
48 {% endblock %}48 {% endblock %}
49 </li>49 </li>
50 <li>{% trans "Account" %}: {{ ident }}</li>50 <li class="p-list__item">{% trans "Account" %}: <code>{{ ident }}</code></li>
51 <li>{% trans "Key" %}: {{ hex_key|b32encode_hexstring }}</li>51 <li class="p-list__item">{% trans "Key" %}: <code>{{ hex_key|b32encode_hexstring }}</code></li>
52 </ul>52 </ul>
53 </div>
53{% endblock %}54{% endblock %}
5455
=== 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-08-19 08:29:07 +0000
@@ -7,17 +7,15 @@
7{% block device_instructions %}7{% block device_instructions %}
8<p>8<p>
9 {% trans "Shared OATH/HOTP key:" %}<br>9 {% trans "Shared OATH/HOTP key:" %}<br>
10 <span class="key" id="formatted_key">10 <code id="formatted_key">{{ formatted_key }}</code>
11 {{ formatted_key }}11</p>
12 </span>12<p>
13</p>13 {% blocktrans %}Programming a YubiKey requires you to{% endblocktrans %}
14<p>14 <a href="apt:yubikey-personalization">{% trans "install" %} yubikey-personalization</a>.
15 {% blocktrans %}Programming a YubiKey requires you to{% endblocktrans %}15</p>
16 <a href="apt:yubikey-personalization">{% trans "install" %} yubikey-personalization</a>.16<p>
17</p>17 {% blocktrans %}To program the YubiKey as an authentication device, on
18<p>18 the short press of the YubiKey, execute the following command line:{% endblocktrans %}
19 {% blocktrans %}To program the YubiKey as an authentication device, on
20 the short press of the YubiKey, execute the following command line:{% endblocktrans %}
21</p>19</p>
22<p>20<p>
23 <code id="short_press">21 <code id="short_press">
@@ -25,8 +23,8 @@
25 </code>23 </code>
26</p>24</p>
27<p>25<p>
28 {% blocktrans %}To program the long press of the YubiKey,26 {% blocktrans %}To program the long press of the YubiKey,
29 execute the following command line:{% endblocktrans %}27 execute the following command line:{% endblocktrans %}
30</p>28</p>
31<p>29<p>
32 <code id="long_press">30 <code id="long_press">
3331
=== 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-08-19 08:29:07 +0000
@@ -1,21 +1,19 @@
1{% load i18n %}1{% load i18n %}
2<div id="codes" class="yui3-g-r codelist" data-qa-id="codelist">2<div id="codes" data-qa-id="codelist">
3 <ol class="yui3-u-1-5">3 <ol class="p-list">
4 {% for code in codes %}4 {% for code in codes %}
5 <li>{% spaceless %}5 <li class="p-list__item">{% spaceless %}
6 {% if forloop.counter0 < counter|default:0 %}6 {% if forloop.counter0 < counter|default:0 %}
7 <strike>{{ code }}</strike>7 <strike>{{ code }}</strike>
8 {% else %}8 {% else %}
9 {{ code }}9 {{ code }}
10 {% endif %}10 {% endif %}
11 {% endspaceless %}</li>11 {% endspaceless %}</li>
12 {% if forloop.counter|divisibleby:"5" and not forloop.last %}
13 {%endif%}
14 {% endfor %}12 {% endfor %}
15 </ol>13 </ol>
16</div>14</div>
1715
18<style media="print">16<style media="print">
19header, .menu, footer, p { display: none; }17header, .p-sidebar, footer, p { display: none; }
20#codes ol { list-style:none; margin:0; padding:0 }18#codes ol { list-style:none; margin:0; padding:0 }
21</style>19</style>
2220
=== 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-08-19 08:29:07 +0000
@@ -1,4 +1,4 @@
1{% extends "base.html" %}1{% extends "vanilla/base.html" %}
2{% load i18n %}2{% load i18n %}
3{% load static_url %}3{% load static_url %}
44
@@ -10,43 +10,46 @@
10{% block title %}{% blocktrans %}Authentication device help - Ubuntu One{% endblocktrans %}{% endblock %}10{% block title %}{% blocktrans %}Authentication device help - Ubuntu One{% endblocktrans %}{% endblock %}
1111
12{% block text_title %}12{% block text_title %}
13 <h1 class="main">{% trans "Authentication device help" %}</h1>13 <h1>{% trans "My account" %}</h1>
14{% endblock %}14{% endblock %}
1515
16{% block content %}16{% block content %}
17 <p>17 <section class="p-strip">
18 {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}18 <h3>{% trans "Authentication device help" %}</h3>
19 If your device is lost or stolen or you are having trouble logging in,19 <p>
20 please review the20 {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
21 <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>21 If your device is lost or stolen or you are having trouble logging in,
22 for details on how to get help and the type of information you will need22 please review the
23 to provide.23 <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
24 {% endblocktrans %}24 for details on how to get help and the type of information you will need
25 </p>25 to provide.
2626 {% endblocktrans %}
27 <h2>{% trans "Device lost or stolen?" %}</h2>27 </p>
28 <p>28
29 {% blocktrans %}We need to remove the device from your account to prevent29 <h3>{% trans "Device lost or stolen?" %}</h3>
30 someone using it to gain access to your account. Please contact us30 <p>
31 immediately to resolve this! You can reach ISD in the #isd channel on31 {% blocktrans %}We need to remove the device from your account to prevent
32 IRC, or IS in the #webops channel, or phone the IS emergency helpline.32 someone using it to gain access to your account. Please contact us
33 {% endblocktrans %}33 immediately to resolve this! You can reach ISD in the #isd channel on
34 </p>34 IRC, or IS in the #webops channel, or phone the IS emergency helpline.
3535 {% endblocktrans %}
36 <h2>{% trans "Problems logging in?" %}</h2>36 </p>
37 <p>37
38 {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}38 <h3>{% trans "Problems logging in?" %}</h3>
39 We can help get a device working again or set you up with some temporary39 <p>
40 tokens to enable you to continue with your work. If it's not urgent,40 {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
41 please send email to the ISD Support address as described in the41 We can help get a device working again or set you up with some temporary
42 <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>42 tokens to enable you to continue with your work. If it's not urgent,
43 and someone will get back to you soon.43 please send email to the ISD Support address as described in the
44 {% endblocktrans %}44 <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
45 </p>45 and someone will get back to you soon.
46 {% if support_phone %}46 {% endblocktrans %}
47 <p>47 </p>
48 {% blocktrans %}If it is urgent, please phone the IS emergency helpline at48 {% if support_phone %}
49 <span id="support-phone">{{ support_phone }}</span>.{% endblocktrans %}49 <p>
50 </p>50 {% blocktrans %}If it is urgent, please phone the IS emergency helpline at
51 {% endif %}51 <span id="support-phone">{{ support_phone }}</span>.{% endblocktrans %}
52 </p>
53 {% endif %}
54 </section>
52{% endblock %}55{% endblock %}
5356
=== 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-08-19 08:29:07 +0000
@@ -1,80 +1,63 @@
1{% extends "base.html" %}1{% extends "vanilla/base.html" %}
2{% load i18n %}2{% load i18n %}
3{% load static_url %}3{% load static_url %}
44
5{% comment %}5{% comment %}
6Copyright 2012 Canonical Ltd. This software is licensed under the GNU6Copyright 2012-2019 Canonical Ltd. This software is licensed under the GNU
7Affero General Public License version 3 (see the file LICENSE).7Affero General Public License version 3 (see the file LICENSE).
8{% endcomment %}8{% endcomment %}
99
10{% block html_extra %}data-qa-id="device_list"{% endblock %}10{% block html_extra %}data-qa-id="device_list"{% endblock %}
1111
12{% block extra_header %}
13<style type="text/css">
14table#device-list td.command
15{
16 width: 0;
17}
18</style>
19{% endblock %}
20
21
22{% block title %}12{% block title %}
23 {% blocktrans %}{{ user }}'s devices{% endblocktrans %}13 {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
24{% endblock %}14{% endblock %}
2515
2616
27{% block text_title %}<h1 class="u1-h-main">{% trans "Authentication devices" %}</h1>{% endblock %}17{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
2818
29{% block content %}19{% block content %}
3020<section class="p-strip">
31{% include "common/missing_backup_device_warning.html" %}21 {% include "vanilla/common/missing_backup_device_warning.html" %}
32{% include "common/printed_codes_nearly_exhausted_warning.html" %}22 {% include "vanilla/common/printed_codes_nearly_exhausted_warning.html" %}
3323 <div id="auth-devices">
34<div id="auth-devices">24 <h2>{% trans "Authentication devices" %}</h2>
35 {% if devices %}25 {% if devices %}
3626 <h3 class="p-heading--four">{% trans "Authentication devices you've added" %}</h3>
37 <section class="devices-you-added">27 <div class="p-strip is-shallow">
3828 <table id="device-list" data-qa-id="device_list" class="p-table--bordered">
39 <h3>{% trans "Authentication devices you've added" %}</h3>29 <tbody>
4030 {% for device in devices %}
41 <table id="device-list" data-qa-id="device_list">31 <tr>
42 <tbody>32 <td class="name" data-qa-id="device_name">{{ device.name }}</td>
43 {% for device in devices %}33 <td class="u-align-text--right">
44 <tr>34 <ul class="p-inline-list u-no-margin--bottom">
45 <td class="name" data-qa-id="device_name">{{ device.name }}</td>35 <li class="p-inline-list__item"><a href="{% url 'device-rename' device.id %}" data-qa-id="rename_device">{% trans "Rename" %}</a></li>
46 <td class="actions">36 <li class="p-inline-list__item"><a href="{% url 'device-removal' device.id %}" data-qa-id="delete_device">{% trans "Delete" %}</a></li>
47 <a class="btn-sm" href="{% url 'device-rename' device.id %}" data-qa-id="rename_device">37 {% if device.device_type == 'paper' %}
48 <span>{% trans "Rename" %}</span>38 <li class="p-inline-list__item"><a href="{% url 'device-print' device.id %}" data-qa-id="print_device">{% trans "View Codes" %}</a></li>
49 </a>39 {% endif %}
50 <a class="btn-sm" href="{% url 'device-removal' device.id %}" data-qa-id="delete_device">40 </ul>
51 <span>{% trans "Delete" %}</span>41 </td>
52 </a>42 </tr>
53 {% if device.device_type == 'paper' %}43 {% endfor %}
54 <a class="btn-sm" href="{% url 'device-print' device.id %}" data-qa-id="print_device">44 </tbody>
55 <span>{% trans "View Codes" %}</span>45 </table>
56 </a>46 </div>
57 {% endif %}47
58 </td>48 {% else %}
59 </tr>49 <p>{% trans "You don't have any authentication devices associated with this account." %}</p>
60 {% endfor %}50 {% endif %}
61 </tbody>51
62 </table>52 <p><a data-qa-id="add_new_device" href="{{ device_addition_path }}">
63 </section>53 {% trans "Add a new authentication device" %}
6454 </a></p>
65 {% else %}55
66 <p>{% trans "You don't have any authentication devices associated with this account." %}</p>56 <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
67 {% endif %}57
6858 <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
69 <p><a data-qa-id="add_new_device" href="{{ device_addition_path }}">59 <a href="{{ 2FFAQ }}">2-Factor Auth FAQ</a>
70 {% trans "Add a new authentication device" %}60 {% endblocktrans %}</p>
71 </a></p>61 </div>
7262</section>
73 <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
74
75 <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
76 <a href="{{ 2FFAQ }}">2-Factor Auth FAQ</a>
77 {% endblocktrans %}</p>
78</div>
79
80{% endblock %}63{% endblock %}
8164
=== 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-08-19 08:29:07 +0000
@@ -1,4 +1,4 @@
1{% extends "base.html" %}1{% extends "vanilla/base.html" %}
2{% load i18n url_with_token %}2{% load i18n url_with_token %}
33
4{% comment %}4{% comment %}
@@ -13,32 +13,19 @@
13{% endblock %}13{% endblock %}
1414
1515
16{% block text_title %}<h1 class="u1-h-main">{% trans "Printable backup codes" %}</h1>{% endblock %}16{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
1717
18{% block content %}18{% block content %}
1919 <h2>{% trans "Printable backup codes" %}</h2>
20<p>{% trans "Print this list of backup codes and keep them safe." %}</p>20 <p>{% trans "Print this list of backup codes and keep them safe." %}</p>
2121 {% include 'device/code-list.html' %}
22<p class="print-new-codes">22 <button class="p-button--positive" id="printbtn" onclick="window.print()" data-qa-id="print_codes">{% trans "Print Codes" %}</button>
23
24</p>
25
26
27{% include 'device/code-list.html' %}
28
29<p>
30 <button class="btn cta" id="printbtn" onclick="window.print()" data-qa-id="print_codes">
31 <span>{% trans "Print Codes" %}</span>
32 </button>
33 {% if token and not needs_renewal %}23 {% if token and not needs_renewal %}
34 <a class="cta secondary" href="{% url_with_token 'server-decide' %}" data-qa-id="continue_to_rp">{% trans "Continue" %}</a>24 <a class="p-button--neutral" href="{% url_with_token 'server-decide' %}" data-qa-id="continue_to_rp">{% trans "Continue" %}</a>
35 {% else %}25 {% else %}
36 <a class="cta secondary" href="{% url 'device-list' %}" data-qa-id="cancel_print_codes">{% trans "Go back" %}</a>26 <a class="p-button--neutral" href="{% url 'device-list' %}" data-qa-id="cancel_print_codes">{% trans "Go back" %}</a>
37 {% endif %}27 {% endif %}
38 {% if generation_enabled %}28 {% if generation_enabled %}
39 <a class="btn cta secondary print-new-codes" href="{% url_with_token 'device-generate' device_id=device_id %}" data-qa-id="generate_codes">29 <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>
40 <span>{% trans "Generate new codes" %}</span>
41 </a>
42 {% endif %}30 {% endif %}
43</p>
44{% endblock %}31{% endblock %}
4532
=== 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-08-19 08:29:07 +0000
@@ -1,8 +1,8 @@
1{% extends "base.html" %}1{% extends "vanilla/base.html" %}
2{% load i18n %}2{% load i18n %}
33
4{% comment %}4{% comment %}
5Copyright 2012 Canonical Ltd. This software is licensed under the GNU5Copyright 2012-2019 Canonical Ltd. This software is licensed under the GNU
6Affero General Public License version 3 (see the file LICENSE).6Affero General Public License version 3 (see the file LICENSE).
7{% endcomment %}7{% endcomment %}
88
@@ -13,23 +13,20 @@
13{% endblock %}13{% endblock %}
1414
1515
16{% block text_title %}<h1 class="u1-h-main">{% trans "Delete device?" %}</h1>{% endblock %}16{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
1717
18{% block content %}18{% block content %}
1919 <section class="p-strip">
20<p>{% blocktrans %}Are you sure that you want to delete the following20 <h2>{% trans "Delete device?" %}</h2>
21authentication device?{% endblocktrans %}</p>21 <p>{% blocktrans %}Are you sure that you want to delete the following
2222 authentication device?{% endblocktrans %}</p>
23<p class="device-name" data-qa-id="device_removal_device_name">{{ name }}</p>23
2424 <p class="device-name" data-qa-id="device_removal_device_name">{{ name }}</p>
25<form method="post" action="">25
26 {% csrf_token %}26 <form method="post" action="">
27 <p>27 {% csrf_token %}
28 <button class="btn cta" type="submit" data-qa-id="delete_this_device">28 <button class="p-button--negative" type="submit" data-qa-id="delete_this_device">{% trans "Delete this device" %}</button>
29 <span>{% trans "Delete this device" %}</span>29 <a class="p-button--neutral" data-qa-id="cancel_deleting_this_device" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
30 </button>30 </form>
31 <a class="cta secondary" data-qa-id="cancel_deleting_this_device" href="{{ device_list_path }}">{% trans "Cancel" %}</a>31 </section>
32 </p>
33</form>
34
35{% endblock %}32{% endblock %}
3633
=== 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-08-19 08:29:07 +0000
@@ -1,8 +1,8 @@
1{% extends "base.html" %}1{% extends "vanilla/base.html" %}
2{% load i18n %}2{% load i18n %}
33
4{% comment %}4{% comment %}
5Copyright 2012 Canonical Ltd. This software is licensed under the GNU5Copyright 2012-2019 Canonical Ltd. This software is licensed under the GNU
6Affero General Public License version 3 (see the file LICENSE).6Affero General Public License version 3 (see the file LICENSE).
7{% endcomment %}7{% endcomment %}
88
@@ -13,28 +13,26 @@
13{% endblock %}13{% endblock %}
1414
1515
16{% block text_title %}<h1 class="u1-h-main">{% trans "Rename device" %}</h1>{% endblock %}16{% block text_title %}<h1 class="u1-h-main">{% trans "My account" %}</h1>{% endblock %}
1717
18{% block content %}18{% block content %}
1919 <section class="p-strip">
20<form method="post" action="">20 <h2>{% trans "Rename device" %}</h2>
21 {% csrf_token %}21 <form method="post" action="">
2222 {% csrf_token %}
23 <p><label for="id_name">23 <div class="row">
24 {% trans "Name:" %}24 <div class="p-form-validation is-error col-4">
25 {{ form.name }}25 <label for="id_name">Name</label>
26 {% if form.name.errors %}26 {{ form.name }}
27 <span class="error" id="name-error">{{ form.name.errors|first }}</span>27 {% if form.name.errors %}
28 {% endif %}28 <p class="p-form-validation__message">
29 </label></p>29 <strong>Error:</strong> {{ form.name.errors|first }}
3030 </p>
31 <p>31 {% endif %}
32 <button class="btn cta" type="submit" data-qa-id="rename_this_device">32 </div>
33 <span>{% trans "Rename" %}</span>33 </div>
34 </button>34 <button class="p-button--positive" type="submit" data-qa-id="rename_this_device">{% trans "Rename" %}</button>
35 <a class="cta secondary" href="{{ device_list_path }}" data-qa-id="cancel_renaming_this_device">{% trans "Cancel" %}</a>35 <a class="p-button--neutral" href="{{ device_list_path }}" data-qa-id="cancel_renaming_this_device">{% trans "Cancel" %}</a>
36 </p>36 </form>
3737 </section>
38</form>
39
40{% endblock %}38{% endblock %}
4139
=== 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-08-19 08:29:07 +0000
@@ -1,75 +1,86 @@
1{% extends "base.html" %}1{% extends "vanilla/base.html" %}
2{% load i18n %}2{% load i18n %}
3{% load static_url %}3{% load static_url %}
4{% load gargoyle_tags %}4{% load gargoyle_tags %}
55
6{% comment %}6{% comment %}
7Copyright 2012 Canonical Ltd. This software is licensed under the GNU7Copyright 2012-2019 Canonical Ltd. This software is licensed under the GNU
8Affero General Public License version 3 (see the file LICENSE).8Affero General Public License version 3 (see the file LICENSE).
9{% endcomment %}9{% endcomment %}
1010
11{% block html_extra %}data-qa-id="device_addition"{% endblock %}11{% block html_extra %}data-qa-id="device_addition"{% endblock %}
1212
13{% block title %}13{% block title %}
14 {% blocktrans %}{{ user }}'s devices{% endblocktrans %}14 {% trans "Add a new authentication device" %}
15{% endblock %}15{% endblock %}
1616
1717
18{% block text_title %}<h1 class="u1-h-main">{% trans "Add a new authentication device" %}</h1>{% endblock %}18{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
1919
20{% block content %}20{% block content %}
2121 <section class="p-strip">
22<form method="post" action="">22 <h2>{% trans "Add a new authentication device" %}</h2>
23 {% csrf_token %}23 <form method="post" action="">
2424 {% csrf_token %}
25 <dl class="device-types">25
2626 <ul class="p-list">
27 <dt><label>27 <li class="p-list__item">
28 <input type="radio" name="type" value="google" id="type_google" checked="checked"> {% trans "Smartphone or Tablet" %}28 <div class="row">
29 </label></dt>29 <div class="col-3">
30 <dd>30 <input type="radio" name="type" value="google" id="type_google" checked="checked">
31 <p><label for="type_google">{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app;31 <label for="type_google">{% trans "Smartphone or Tablet" %}</label>
32 or Windows phone with the Auth7 app{% endblocktrans %}</label></p>32 </div>
33 </dd>33 <div class="col-5">
3434 <p>{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app; or Windows phone with the Auth7 app{% endblocktrans %}</p>
35 <dt><label>35 </div>
36 <input type="radio" name="type" value="yubi" id="type_yubi"> {% trans "YubiKey" %}36 </div>
37 </label></dt>37 </li>
38 <dd>38 <li class="p-list__item">
39 <p><label for="type_yubi">{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</label></p>39 <div class="row">
40 </dd>40 <div class="col-3 col-medium-3">
4141 <input type="radio" name="type" value="yubi" id="type_yubi">
42 <dt><label>42 <label for="type_yubi">{% trans "YubiKey" %}</label>
43 <input type="radio" name="type" value="generic" id="type_generic"> {% trans "Generic HOTP/TOTP device" %}43 </div>
44 </label></dt>44 <div class="col-5 col-medium-3">
45 <dd>45 <p>{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</p>
46 <p><label for="type_generic">{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</label></p>46 </div>
47 </dd>47 </div>
4848 </li>
49 <dt><label>49 <li class="p-list__item">
50 <input type="radio" name="type" value="paper" id="type_paper"> {% trans "Printable Backup Codes" %}50 <div class="row">
51 </label></dt>51 <div class="col-3 col-medium-3">
52 <dd>52 <input type="radio" name="type" value="generic" id="type_generic">
53 <p><label for="type_paper">{% blocktrans %}A list of backup codes to53 <label for="type_generic">{% trans "Generic HOTP/TOTP device" %}</label>
54 print.{% endblocktrans %}</label></p>54 </div>
55 </dd>55 <div class="col-5 col-medium-3">
5656 <p>{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</p>
57 </dl>57 </div>
5858 </div>
59 <p>59 </li>
60 <button class="btn cta" type="submit" data-qa-id="add_device_from_type">60 <li class="p-list__item">
61 <span>{% trans "Add device" %}</span>61 <div class="row">
62 </button>62 <div class="col-3 col-medium-3">
63 <a class="cta secondary" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>63 <input type="radio" name="type" value="paper" id="type_paper">
64 </p>64 <label for="type_paper">{% trans "Printable Backup Codes" %}</label>
65 <p>65 </div>
66 {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}66 <div class="col-5 col-medium-3">
67 The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>67 <p>{% blocktrans %}A list of backup codes to
68 has details on compatible devices.68 print.{% endblocktrans %}</p>
69 {% endblocktrans %}69 </div>
70 </p>70 </div>
7171 </li>
7272 </ul>
73</form>73
7474 <button class="p-button--positive" type="submit" data-qa-id="add_device_from_type">{% trans "Add device" %}</button>
75 <a class="p-button--neutral" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
76 <p>
77 {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
78 The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>
79 has details on compatible devices.
80 {% endblocktrans %}
81 </p>
82
83
84 </form>
85 </section>
75{% endblock %}86{% endblock %}
7687
=== modified file 'src/webui/templates/vanilla/_footer.html'
--- src/webui/templates/vanilla/_footer.html 2019-08-19 08:29:07 +0000
+++ src/webui/templates/vanilla/_footer.html 2019-08-19 08:29:07 +0000
@@ -5,8 +5,8 @@
5GNU Affero General Public License version 3 (see the file LICENSE).5GNU Affero General Public License version 3 (see the file LICENSE).
6{% endcomment %}6{% endcomment %}
77
8<footer class="p-strip u-no-padding--top" data-qa-id="ubuntuone_footer">8<hr>
9 <hr>9<footer class="p-strip is-shallow" data-qa-id="ubuntuone_footer">
10 <div class="row">10 <div class="row">
11 <p>{% trans "Ubuntu One. One place to log in to everything on Ubuntu." %}</p>11 <p>{% trans "Ubuntu One. One place to log in to everything on Ubuntu." %}</p>
12 {% spaceless %}12 {% spaceless %}
1313
=== modified file 'src/webui/templates/vanilla/base.html'
--- src/webui/templates/vanilla/base.html 2019-08-19 08:29:07 +0000
+++ src/webui/templates/vanilla/base.html 2019-08-19 08:29:07 +0000
@@ -50,34 +50,6 @@
50 </div>50 </div>
51 </section>51 </section>
5252
53 {% block readonly %}
54 {% if readonly %}
55 <div class="p-notification--caution">
56 <p class="p-notification__response">
57 {% 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 %}
58 </p>
59 </div>
60 {% endif %}
61 {% endblock %}
62
63 {% block messages %}
64 {% if messages %}
65 <section class="p-strip is-shallow">
66 {% for message in messages %}
67 <div class="row">
68 <div class="col-12">
69 <div class="p-notification">
70 <p class="p-notification__response">
71 {{ message }}
72 </p>
73 </div>
74 </div>
75 </div>
76 {% endfor %}
77 </section>
78 {% endif %}
79 {% endblock %}
80
81 <div id="{% block content_id %}box{% endblock %}" class="row">53 <div id="{% block content_id %}box{% endblock %}" class="row">
82 {% block menu %}54 {% block menu %}
83 {% if user.is_authenticated %}55 {% if user.is_authenticated %}
@@ -87,6 +59,32 @@
87 {% endif %}59 {% endif %}
88 {% endblock %}60 {% endblock %}
89 <div class="{% block content_class %}col-8{% endblock %}">61 <div class="{% block content_class %}col-8{% endblock %}">
62 {% block readonly %}
63 {% if readonly %}
64 <div class="p-notification--caution">
65 <p class="p-notification__response">
66 {% 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 %}
67 </p>
68 </div>
69 {% endif %}
70 {% endblock %}
71 {% block messages %}
72 {% if messages %}
73 <section class="p-strip is-shallow">
74 {% for message in messages %}
75 <div class="row">
76 <div class="col-12">
77 <div class="p-notification">
78 <p class="p-notification__response">
79 {{ message }}
80 </p>
81 </div>
82 </div>
83 </div>
84 {% endfor %}
85 </section>
86 {% endif %}
87 {% endblock %}
90 {% block content %}{% endblock %}88 {% block content %}{% endblock %}
91 </div>89 </div>
92 </div>90 </div>
9391
=== modified file 'src/webui/templates/vanilla/widgets/personal-menu.html'
--- src/webui/templates/vanilla/widgets/personal-menu.html 2019-08-19 08:29:07 +0000
+++ src/webui/templates/vanilla/widgets/personal-menu.html 2019-08-19 08:29:07 +0000
@@ -9,7 +9,7 @@
9{% load menu_item %}9{% load menu_item %}
10{% load url_with_token %}10{% load url_with_token %}
11<div class="p-strip">11<div class="p-strip">
12 <ul class="p-list">12 <ul class="p-list u-no-margin--bottom">
13 {% url_with_token 'account-index' as account_url %}13 {% url_with_token 'account-index' as account_url %}
1414
15 {% if current_section == 'account' %}15 {% if current_section == 'account' %}

Subscribers

People subscribed via source and target branches

to all changes: