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

Proposed by Karl Williams on 2019-08-30
Status: Merged
Approved by: Karl Williams on 2019-09-04
Approved revision: 1718
Merged at revision: 1719
Proposed branch: lp:~deadlight/canonical-identity-provider/registration-templates
Merge into: lp:~deadlight/canonical-identity-provider/vanilla
Prerequisite: lp:~deadlight/canonical-identity-provider/notifications-and-errors
Diff against target: 241 lines (+74/-104)
4 files modified
src/identityprovider/static_src/scss/styles.scss (+5/-0)
src/webui/templates/registration/logout_to_confirm.html (+6/-4)
src/webui/templates/registration/two_factor_information.html (+7/-7)
src/webui/templates/registration/twofactor.html (+56/-93)
To merge this branch: bzr merge lp:~deadlight/canonical-identity-provider/registration-templates
Reviewer Review Type Date Requested Status
Anthony Dillon (community) 2019-08-30 Approve on 2019-09-03
Review via email: mp+372078@code.launchpad.net

Description of the change

Converted the remaining registration templates to Vanilla

QA:
In terminal 1:
- npm i
- ./node_modules/gulp/bin/gulp.js sass
- source env/bin/activate
- make start-db
- make run
- Visit http://[CONTAINER IP]:8000/
- Create an account and login
- Add an SSO source
- Go to and test http://[CONTAINER IP]:8000/two_factor_auth?next=/
- Go to http://[CONTAINER IP]:8000/+logout-to-confirm and check the page renders properly

To post a comment you must log in.
Anthony Dillon (ya-bo-ng) wrote :

LGTM one small comment

review: Approve
1719. By Karl Williams on 2019-09-04

Make two factor form error use Vanilla form validation styles

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:22 +0000
3+++ src/identityprovider/static_src/scss/styles.scss 2019-09-04 08:33:12 +0000
4@@ -78,3 +78,8 @@
5 border-top: 1px solid $color-mid-light;
6 border-bottom: 1px solid $color-mid-light;
7 }
8+
9+// Custom table-of-contents override
10+.p-table-of-contents {
11+ font-size: 1rem;
12+}
13
14=== modified file 'src/webui/templates/registration/logout_to_confirm.html'
15--- src/webui/templates/registration/logout_to_confirm.html 2013-06-18 07:43:33 +0000
16+++ src/webui/templates/registration/logout_to_confirm.html 2019-09-04 08:33:12 +0000
17@@ -1,20 +1,22 @@
18-{% extends "base.html" %}
19+{% extends "vanilla/base.html" %}
20 {% load i18n %}
21
22 {% comment %}
23-Copyright 2010 Canonical Ltd. This software is licensed under the
24+Copyright 2019 Canonical Ltd. This software is licensed under the
25 GNU Affero General Public License version 3 (see the file LICENSE).
26 {% endcomment %}
27
28 {% block title %}{% trans "Can not use confirmation code while logged in" %}{% endblock %}
29
30 {% block text_title %}
31- <h1 class="u1-h-main">{% trans "Can not use confirmation code while logged in" %}</h1>
32+ <h1>{% trans "Can not use confirmation code while logged in" %}</h1>
33 {% endblock %}
34
35 {% block content %}
36+ <div class="row">
37 <p>{% blocktrans %}
38 You have attempted to confirm an account while logged in as someone else.
39- We've cancelled your request. Please log out and create your new account again.
40+ We've cancelled your request. Please <a href="/+logout">log out</a> and create your new account again.
41 {% endblocktrans %}</p>
42+ </div>
43 {% endblock %}
44
45=== modified file 'src/webui/templates/registration/two_factor_information.html'
46--- src/webui/templates/registration/two_factor_information.html 2016-12-09 10:16:50 +0000
47+++ src/webui/templates/registration/two_factor_information.html 2019-09-04 08:33:12 +0000
48@@ -1,11 +1,11 @@
49 {% load i18n %}
50 {% load static_url %}
51-<div class="twofactor-information related-information">
52- <p>{% trans "Having trouble?" %}</p>
53- <p><a href="{% url 'device-addition' %}">{% trans "Add 2-factor authentication device" %}</a></p>
54- <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}<a href="{{ 2FFAQ }}">2-factor authentication FAQ</a>{% endblocktrans %}</p>
55- <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
56+ <h3 class="p-heading--four">{% trans "Having trouble?" %}</h3>
57+ <ul class="p-list--divided">
58+ <li class="p-list__item"><a href="{% url 'device-addition' %}">{% trans "Add 2-factor authentication device" %}</a></li>
59+ <li class="p-list__item">{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}<a href="{{ 2FFAQ }}">2-factor authentication FAQ</a>{% endblocktrans %}</li>
60+ <li class="p-list__item"><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></li>
61 {% if form.sync_2fa_available %}
62- <p><a href="{% url 'sync_2fa' %}">{% trans "Re-synchronize your device" %}</a></p>
63+ <li class="p-list__item"><a href="{% url 'sync_2fa' %}">{% trans "Re-synchronize your device" %}</a></li>
64 {% endif %}
65-</div>
66+ </ul>
67
68=== modified file 'src/webui/templates/registration/twofactor.html'
69--- src/webui/templates/registration/twofactor.html 2016-12-09 10:16:50 +0000
70+++ src/webui/templates/registration/twofactor.html 2019-09-04 08:33:12 +0000
71@@ -1,114 +1,77 @@
72-{% extends "base.html" %}
73+{% extends "vanilla/base.html" %}
74
75 {% load i18n %}
76 {% load static_url %}
77
78 {% block html_extra %}data-qa-id="two_factor_verify"{% endblock %}
79
80-{% block extra_css %}
81- {% if rpconfig and rpconfig.logo_url %}
82- <style type="text/css" data-qa-id="test_2f_rp">
83- .title .trusted-rp-name {
84- background-image: url('{{ rpconfig.logo_url }}');
85- background-repeat: no-repeat;
86- background-position: 0 100%;
87- padding-left: 24px;
88- padding-top: 2px;
89- }
90- </style>
91- {% endif %}
92-{% endblock %}
93-
94 {% block text_title %}
95- <h1 class="u1-h-main">{% trans "One account to log in to everything on Ubuntu" %}</h1>
96+<h1>{% trans "One account to log in to everything on Ubuntu" %}</h1>
97 {% endblock %}
98
99 {% block bodyclass %}{% endblock %}
100 {% block menu %}{% endblock %}
101
102+{% block content_class %}{% endblock %}
103+
104 {% block content %}
105-<div class="yui3-g-r">
106-
107- <div id="auth" class="yui3-u-1-2">
108-
109- {% if form %}
110- <div class="form-box">
111-
112- <p class="title twofactor-title" data-qa-id="ubuntu_2fauth_title">
113- {% if token %}{% url 'cancel' token as cancel_url %}
114- {% else %}{% url 'account-index' as cancel_url %}{% endif %}
115-
116- <a href="{{cancel_url}}" class="trusted-rp-name" data-qa-id="trusted_rp_2fauth">
117- {% if rpconfig and rpconfig.displayname %}
118- {{ rpconfig.displayname }}
119- {% else %}
120- Ubuntu One
121- {% endif %}
122- </a><span class="action-title">{% trans "2-factor authentication" %}</span>
123- </p>
124-
125- <form id="login-form" action="" method="post" name="loginform">
126- {% csrf_token %}
127- <p id="oathtoken" class="input-row{% if form.oath_token.errors or form.non_field_errors %} haserrors{% endif %}">
128-
129- <label for="id_oath_token">{% trans "Type your verification code:" %}</label>
130-
131- {{ form.oath_token }}
132-
133- {% if form.oath_token.errors %}
134- <span class="error">{{ form.oath_token.errors|join:"" }}</span>
135- {% endif %}
136-
137- {% if form.non_field_errors %}
138- <span class="error">{{ form.non_field_errors|join:"" }}</span>
139- {% endif %}
140- </p>
141- {% if form.non_field_errors and form.sync_2fa_available %}
142- <p class="formHelp">
143- <a href="{% url 'sync_2fa' %}{% if next %}?next={{ next }}{% endif %}" data-qa-id="sync-2fa-link">
144- {% trans "Device out of sync? Click here to re-synchronize" %}
145- </a>
146- </p>
147- {% endif %}
148-
149- <div class="actions">
150- {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
151- <button type="submit" class="cta" name="continue" data-qa-id="auth_button">
152- <span>{% trans "Authenticate" %}</span>
153- </button>
154- </div>
155-
156- </form>
157-
158- </div>
159- {% else %}
160- <div class="message info">
161- {% url 'device-addition' as device_add_url %}
162- <p>{% blocktrans %}Please <a href="{{ device_add_url }}">add a new 2-factor authentication device</a>.{% endblocktrans %}</p>
163- </div>
164+<div class="row">
165+ <div id="auth" class="col-6">
166+ {% if form %}
167+ <div class="p-card">
168+ <h2 class="p-heading--four" data-qa-id="ubuntu_2fauth_title">
169+ {% trans "Ubuntu One 2-factor authentication" %}
170+ </h2>
171+ <hr>
172+ <form id="login-form" action="" method="post" name="loginform">
173+ <div id="oathtoken" class="p-form-validation{% if form.oath_token.errors or form.non_field_errors %} is-error{% endif %}">
174+ <label for="id_oath_token">{% trans "Type your verification code:" %}</label>
175+ {{ form.oath_token }}
176+
177+ {% if form.oath_token.errors %}
178+ <p class="p-form-validation__message">
179+ <strong>Error:</strong> {{ form.oath_token.errors|join:"" }}
180+ </p>
181+ {% endif %}
182+
183+ {% if form.non_field_errors %}
184+ <p class="p-form-validation__message">
185+ <strong>Error:</strong> {{ form.non_field_errors|join:"" }}
186+ </p>
187+ {% endif %}
188+ </div>
189+ {% if form.non_field_errors and form.sync_2fa_available %}
190+ <p>
191+ <a href="{% url 'sync_2fa' %}{% if next %}?next={{ next }}{% endif %}" data-qa-id="sync-2fa-link">
192+ {% trans "Device out of sync? Click here to re-synchronize" %}
193+ </a>
194+ </p>
195 {% endif %}
196-
197- </div>
198-
199- <div class="yui3-u-1-3">
200-
201- {% include "registration/two_factor_information.html" %}
202-
203- </div>
204-
205+ {% csrf_token %}
206+ {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
207+ <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="auth_button">{% trans "Authenticate" %}</button>
208+ </form>
209+ </div>
210+ {% else %}
211+ {% url 'device-addition' as device_add_url %}
212+ <p>{% blocktrans %}Please <a href="{{ device_add_url }}">add a new 2-factor authentication device</a>.{% endblocktrans %}</p>
213+ {% endif %}
214+ </div>
215+ <div class="col-5 col-start-large-8">
216+ <aside class="p-table-of-contents">
217+ {% include "registration/two_factor_information.html" %}
218+ </aside>
219+ </div>
220 </div>
221 {% endblock %}
222
223 {% block extra_js %}
224 <script type="text/javascript">
225-
226- YUI().use('node', function(Y) {
227- // autofocus shiv
228- if (!("autofocus" in document.createElement("input"))) {
229- Y.one('#oathtoken').focus();
230- }
231-
232- });
233-
234+ YUI().use('node', function(Y) {
235+ // autofocus shiv
236+ if (!("autofocus" in document.createElement("input"))) {
237+ Y.one('#oathtoken').focus();
238+ }
239+ });
240 </script>
241 {% endblock %}

Subscribers

People subscribed via source and target branches

to all changes: