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

Proposed by Karl Williams on 2019-07-26
Status: Merged
Approved by: Karl Williams on 2019-08-06
Approved revision: 1694
Merged at revision: 1694
Proposed branch: lp:~deadlight/canonical-identity-provider/login
Merge into: lp:~deadlight/canonical-identity-provider/vanilla
Diff against target: 930 lines (+369/-381)
10 files modified
src/identityprovider/static_src/scss/styles.scss (+15/-0)
src/webui/templates/registration/_create_account_form.html (+54/-67)
src/webui/templates/registration/_login_form.html (+51/-53)
src/webui/templates/registration/_password_meter.html (+49/-54)
src/webui/templates/registration/_title.html (+22/-12)
src/webui/templates/registration/_user_intention_radios.html (+6/-15)
src/webui/templates/registration/confirm_new_account.html (+4/-4)
src/webui/templates/registration/login.html (+101/-105)
src/webui/templates/registration/new_account.html (+49/-58)
src/webui/templates/vanilla/base.html (+18/-13)
To merge this branch: bzr merge lp:~deadlight/canonical-identity-provider/login
Reviewer Review Type Date Requested Status
Anthony Dillon (community) 2019-07-26 Approve on 2019-08-05
Review via email: mp+370664@code.launchpad.net

Description of the change

Upgraded the login and create user forms to the Vanilla template.

QA
---

- source the env
- make start-db
- make run
- visit [node]:8000
- try both the login and create user flows

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

NOTE: To create a new user, you might want to see the email the systems sends. You can run "make mail-debug" in another terminal where you've sourced the env and you'll see all email content that's sent.

Barry McGee (barry-mcgee) wrote :

Eyeballed code - some comments inline.

Karl Williams (deadlight) wrote :

Addressed in-code comments

1694. By Karl Williams on 2019-08-05

Optimise sass

Anthony Dillon (ya-bo-ng) wrote :

LGTM +1

review: Approve

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-07-22 15:01:03 +0000
3+++ src/identityprovider/static_src/scss/styles.scss 2019-08-05 13:10:49 +0000
4@@ -5,6 +5,7 @@
5
6 @import 'vanilla-framework/scss/build';
7
8+//Navigation spacing tweaks
9 .p-navigation .row {
10 justify-content: space-between;
11 }
12@@ -13,6 +14,20 @@
13 width: auto;
14 }
15
16+//Standard gradient hero
17 .p-cip-hero {
18 background-image: linear-gradient(212deg, #E95420 0%, #C44631 6%, #A33940 12%, #8B304A 18%, #7C2B51 24%, #772953 29%, #55163B 51%, #370626 75%, #2C001E 100%);
19 }
20+
21+// Login/register headers hide/show
22+.selected-create {
23+ .login-form, .login-title {
24+ display: none;
25+ }
26+}
27+
28+.selected-login {
29+ .create-form, .create-title {
30+ display: none;
31+ }
32+}
33
34=== modified file 'src/webui/templates/registration/_create_account_form.html'
35--- src/webui/templates/registration/_create_account_form.html 2018-10-16 19:32:57 +0000
36+++ src/webui/templates/registration/_create_account_form.html 2019-08-05 13:10:49 +0000
37@@ -2,71 +2,58 @@
38
39 <form action="{% url_with_token 'new_account' %}" method="post" name="newaccountform" data-qa-id="create_account_form">
40
41- {% csrf_token %}
42-
43- <div class="input-row{% if create_form.email.errors %} haserrors{% endif %} email-input">
44- <label for="id_email">{% trans "Please type your email:" %}</label>
45-
46- {% if create_form.email.errors %}
47- <span class="error">{{ create_form.email.errors|first }}</span>
48- {% endif %}
49-
50- {{ create_form.email }}
51- </div>
52-
53- {% if selected_form == 'create' %}
54- {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
55- {% endif %}
56-
57- {% if create_form.username %}
58- <label class="label-passwords">{% trans "Please tell us your full name and choose a username and password:" %}</label>
59- {% else %}
60- <label class="label-passwords">{% trans "Please tell us your full name and choose a password:" %}</label>
61- {% endif %}
62-
63- <div class="input-row{% if create_form.displayname.errors %} haserrors{% endif %} name-input">
64-
65- {% if create_form.displayname.errors %}
66- <span class="error">
67- {{ create_form.displayname.errors|first }}
68- </span>
69- {% endif %}
70-
71- {{ create_form.displayname }}
72- </div>
73-
74- {% if create_form.username %}
75- <div class="input-row{% if create_form.username.errors %} haserrors{% endif %} username-input">
76-
77- {% if create_form.username.errors %}
78- <span class="error">
79- {{ create_form.username.errors|first }}
80- </span>
81- {% endif %}
82-
83- {{ create_form.username }}
84- </div>
85- {% endif %}
86-
87- {% include "widgets/passwords.html" with fields=create_form %}
88-
89- <div class="input-row{% if create_form.accept_tos.errors %} haserrors{% endif %} accept-tos-input">
90-
91- {% if create_form.accept_tos.errors %}
92- <span class="error">
93- {{ create_form.accept_tos.errors|first }}
94- </span>
95- {% endif %}
96-
97- {{ create_form.accept_tos }}
98-
99- <label for="id_accept_tos">{% blocktrans with tos_url="terms_of_service"|static_url privacy_url="privacy_policy"|static_url privacy_notice_url="privacy_notice"|static_url %}I have read and accept the <a href="{{ tos_url }}" class="external" target="_blank">Ubuntu One terms of service</a>, <a href="{{ privacy_url }}" class="external" target="_blank">data privacy policy</a> and <a href="{{ privacy_notice_url }}" class="external" target="_blank">Canonical's SSO privacy notice</a>.{% endblocktrans %}</label>
100-
101- </div>
102-
103- <div class="actions">
104- <button type="submit" class="btn cta" name="continue" data-qa-id="register_button">
105- <span>{% trans "Create account" %}</span>
106- </button>
107- </div>
108+{% csrf_token %}
109+
110+ <div class="p-form-validation{% if create_form.email.errors %} is-error{% endif %} email-input">
111+ <label for="id_email">{% trans "Please type your email:" %}</label>
112+ {% if create_form.email.errors %}
113+ <span class="p-form-validation__message">{{ create_form.email.errors|first }}</span>
114+ {% endif %}
115+ {{ create_form.email }}
116+ </div>
117+
118+ {% if selected_form == 'create' %}
119+ {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
120+ {% endif %}
121+
122+ {% if create_form.username %}
123+ <label class="label-passwords">{% trans "Please tell us your full name and choose a username and password:" %}</label>
124+ {% else %}
125+ <label class="label-passwords">{% trans "Please tell us your full name and choose a password:" %}</label>
126+ {% endif %}
127+
128+ <div class="p-form-validation{% if create_form.displayname.errors %} is-error{% endif %} name-input">
129+ {% if create_form.displayname.errors %}
130+ <span class="p-form-validation__message">
131+ {{ create_form.displayname.errors|first }}
132+ </span>
133+ {% endif %}
134+ {{ create_form.displayname }}
135+ </div>
136+
137+ {% if create_form.username %}
138+ <div class="p-form-validation{% if create_form.username.errors %} is-error{% endif %} username-input">
139+ {% if create_form.username.errors %}
140+ <span class="p-form-validation__message">
141+ {{ create_form.username.errors|first }}
142+ </span>
143+ {% endif %}
144+ {{ create_form.username }}
145+ </div>
146+ {% endif %}
147+ {% include "widgets/passwords.html" with fields=create_form %}
148+
149+ <div class="p-form-validation{% if create_form.accept_tos.errors %} is-error{% endif %} accept-tos-input">
150+ {% if create_form.accept_tos.errors %}
151+ <span class="p-form-validation__message">
152+ {{ create_form.accept_tos.errors|first }}
153+ </span>
154+ {% endif %}
155+ {{ create_form.accept_tos }}
156+ <label for="id_accept_tos">{% blocktrans with tos_url="terms_of_service"|static_url privacy_url="privacy_policy"|static_url privacy_notice_url="privacy_notice"|static_url %}I have read and accept the <a href="{{ tos_url }}" class="external" target="_blank">Ubuntu One terms of service</a>, <a href="{{ privacy_url }}" class="external" target="_blank">data privacy policy</a> and <a href="{{ privacy_notice_url }}" class="external" target="_blank">Canonical's SSO privacy notice</a>.{% endblocktrans %}</label>
157+ </div>
158+
159+ <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="register_button">
160+ <span>{% trans "Create account" %}</span>
161+ </button>
162 </form>
163
164=== modified file 'src/webui/templates/registration/_login_form.html'
165--- src/webui/templates/registration/_login_form.html 2019-01-09 18:37:18 +0000
166+++ src/webui/templates/registration/_login_form.html 2019-08-05 13:10:49 +0000
167@@ -1,58 +1,56 @@
168 {% load i18n url_with_token %}
169
170 <form id="login-form" action="{% url_with_token 'login' %}" method="post" name="loginform" data-qa-id="login_form">
171- {% csrf_token %}
172- <div class="input-row{% if form.email.errors or form.non_field_errors %} haserrors{% endif %} email-input">
173- <label for="id_email">{% trans "Please type your email:" %}</label>
174- {{ form.email }}
175- {% if form.email.errors %}
176- <span class="error">{{ form.email.errors|join:"" }}</span>
177- {% endif %}
178- </div>
179-
180- {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
181-
182- <div class="input-row{% if form.password.errors or form.non_field_errors %} haserrors{% endif %} password-input">
183- {% if form.password.errors %}
184- <span class="error">{{ form.password.errors|join:"" }}</span>
185- {% endif %}
186- {% if not form.oath_token and form.non_field_errors %}
187- <span class="error">{{ form.non_field_errors|join:"" }}</span>
188- {% endif %}
189- {{ form.password }}
190- </div>
191-
192- {% if form.oath_token %}
193- <div class="input-row twofactor-input">
194- <h4 class="main">{% blocktrans %}Two Factor Authentication{% endblocktrans %}</h4>
195- <p id="oathtoken" class="input-row{% if form.oath_token.errors or form.non_field_errors %} haserrors{% endif %}">
196- <label class="formLabel" for="id_oath_token">{% trans "Device Password" %}</label>
197- {{ form.oath_token }}
198- {% if form.oath_token.errors %}
199- <span class="error">{{ form.oath_token.errors|join:"" }}</span>
200- {% endif %}
201- {% if form.non_field_errors %}
202- <span class="error">{{ form.non_field_errors|join:"" }}</span>
203- {% endif %}
204- </p>
205- </div>
206- {% endif %}
207-
208- <div class="actions">
209- {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
210- <button type="submit" class="btn cta" name="continue" data-qa-id="login_button">
211- <span>{% trans "Log in" %}</span>
212- </button>
213- {% if not readonly %}
214- <input type="submit" class="forgot-password" name="forgot_password" formnovalidate formaction="{% url_with_token 'forgot_password' %}"
215- style="border:none; outline:none; background:none; cursor:pointer; color:#dd4814;"
216- value="{% trans 'Forgot your password?' %}">
217- {% endif %}
218-
219- {% comment %}
220- {% if token %}{% trans "or" %}
221- {% include "common/cancel_link.html" %}{% endif %}
222- {% endcomment %}
223- </div>
224+ {% csrf_token %}
225+ <div class="p-form-validation{% if form.email.errors or form.non_field_errors %} is-error{% endif %} email-input">
226+ <label for="id_email">{% trans "Please type your email:" %}</label>
227+ {{ form.email }}
228+ {% if form.email.errors %}
229+ <span class="p-form-help-text">{{ form.email.errors|join:"" }}</span>
230+ {% endif %}
231+ </div>
232+
233+ {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
234+
235+ <div class="p-form-validation{% if form.password.errors or form.non_field_errors %} is-error{% endif %} password-input">
236+ {% if form.password.errors %}
237+ <span class="p-form-help-text">{{ form.password.errors|join:"" }}</span>
238+ {% endif %}
239+ {% if not form.oath_token and form.non_field_errors %}
240+ <span class="p-form-help-text">{{ form.non_field_errors|join:"" }}</span>
241+ {% endif %}
242+ {{ form.password }}
243+ </div>
244+
245+ {% if form.oath_token %}
246+ <div class="p-form-validation twofactor-input">
247+ <h4 class="main">{% blocktrans %}Two Factor Authentication{% endblocktrans %}</h4>
248+ <p id="oathtoken" class="input-row{% if form.oath_token.errors or form.non_field_errors %} is-error{% endif %}">
249+ <label class="formLabel" for="id_oath_token">{% trans "Device Password" %}</label>
250+ {{ form.oath_token }}
251+ {% if form.oath_token.errors %}
252+ <span class="p-form-help-text">{{ form.oath_token.errors|join:"" }}</span>
253+ {% endif %}
254+ {% if form.non_field_errors %}
255+ <span class="p-form-help-text">{{ form.non_field_errors|join:"" }}</span>
256+ {% endif %}
257+ </p>
258+ </div>
259+ {% endif %}
260+
261+ <div class="actions">
262+ {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
263+ <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="login_button">
264+ <span>{% trans "Log in" %}</span>
265+ </button>
266+ {% if not readonly %}
267+ <input type="submit" class="p-button--base u-no-margin--bottom" name="forgot_password" formnovalidate formaction="{% url_with_token 'forgot_password' %}" value="{% trans 'Forgot your password?' %}">
268+ {% endif %}
269+
270+ {% comment %}
271+ {% if token %}{% trans "or" %}
272+ {% include "common/cancel_link.html" %}{% endif %}
273+ {% endcomment %}
274+ </div>
275
276 </form>
277
278=== modified file 'src/webui/templates/registration/_password_meter.html'
279--- src/webui/templates/registration/_password_meter.html 2014-12-10 15:30:54 +0000
280+++ src/webui/templates/registration/_password_meter.html 2019-08-05 13:10:49 +0000
281@@ -1,59 +1,54 @@
282 {% load i18n static %}
283
284 <script type="text/javascript">
285-
286- YUI({
287- groups: {
288-
289- u1: {
290- base: '{% static "identityprovider/js/u1/build/" %}',
291- combine: {{ combine|lower }},
292- root: 'identityprovider/js/u1/build/',
293- modules: {
294- 'one-password-meter': {
295- type: 'js',
296- path: 'one-password-meter/one-password-meter-min.js',
297- skinnable: true
298- }
299- }
300- }
301- }
302- }).use('one-password-meter', function(Y) {
303-
304- var passwordMeter = new Y.U1.Widgets.PasswordMeter({
305- input: '{{ pwd_selector }}',
306- inputConfirm: '{{ pwd_confirm_selector }}',
307- feedback: {
308- strengths: [
309- {
310- className: 'weak',
311- text: '{% trans "Strength: weak" %}'
312- },
313- {
314- className: 'fair',
315- text: '{% trans "Strength: fair" %}'
316- },
317- {
318- className: 'good',
319- text: '{% trans "Strength: good" %}'
320- },
321- {
322- className: 'strong',
323- text: '{% trans "Strength: strong" %}'
324- }
325- ],
326- 'short': {
327- className: 'short',
328- text: '{% trans "Password too short" %}'
329- },
330- 'asymmetric': {
331- className: 'asymmetric',
332- text: '{% trans "The passwords do not match" %}'
333- }
334- }
335- });
336- passwordMeter.render();
337-
338+ YUI({
339+ groups: {
340+ u1: {
341+ base: '{% static "identityprovider/js/u1/build/" %}',
342+ combine: {{ combine|lower }},
343+ root: 'identityprovider/js/u1/build/',
344+ modules: {
345+ 'one-password-meter': {
346+ type: 'js',
347+ path: 'one-password-meter/one-password-meter-min.js',
348+ skinnable: true
349+ }
350+ }
351+ }
352+ }
353+ }).use('one-password-meter', function(Y) {
354+ var passwordMeter = new Y.U1.Widgets.PasswordMeter({
355+ input: '{{ pwd_selector }}',
356+ inputConfirm: '{{ pwd_confirm_selector }}',
357+ feedback: {
358+ strengths: [
359+ {
360+ className: 'weak',
361+ text: '{% trans "Strength: weak" %}'
362+ },
363+ {
364+ className: 'fair',
365+ text: '{% trans "Strength: fair" %}'
366+ },
367+ {
368+ className: 'good',
369+ text: '{% trans "Strength: good" %}'
370+ },
371+ {
372+ className: 'strong',
373+ text: '{% trans "Strength: strong" %}'
374+ }
375+ ],
376+ 'short': {
377+ className: 'short',
378+ text: '{% trans "Password too short" %}'
379+ },
380+ 'asymmetric': {
381+ className: 'asymmetric',
382+ text: '{% trans "The passwords do not match" %}'
383+ }
384+ }
385 });
386-
387+ passwordMeter.render();
388+ });
389 </script>
390
391=== modified file 'src/webui/templates/registration/_title.html'
392--- src/webui/templates/registration/_title.html 2014-12-09 21:32:43 +0000
393+++ src/webui/templates/registration/_title.html 2019-08-05 13:10:49 +0000
394@@ -1,16 +1,26 @@
395 {% load i18n %}
396-<p class="title login-title" data-qa-id="ubuntu_login_title">
397- {% if rpconfig and rpconfig.displayname %}
398- <{% if token %}a href="{% url 'cancel' token %}" {% else %}span {% endif %}class="trusted-rp-name" data-qa-id="trusted_rp_login">{{ rpconfig.displayname }}{% if token %}</a>{% else %}</span>{% endif %}
399+<h2 class="p-heading--four title login-title" data-qa-id="ubuntu_login_title">
400+ {% if rpconfig and rpconfig.displayname %}
401+ {% if token %}
402+ <a href="{% url 'cancel' token %}" class="trusted-rp-name" data-qa-id="trusted_rp_login">{{ rpconfig.displayname }}</a>
403+ {% else %}
404+ <span class="trusted-rp-name" data-qa-id="trusted_rp_login">{{ rpconfig.displayname }}</span>
405+ {% endif %}
406 <span class="action-title">{% blocktrans %}log in with Ubuntu One{% endblocktrans %}
407- {% else %}
408+ {% else %}
409 <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "log in" %}</span>
410+ {% endif %}
411+</h2>
412+<h2 class="p-heading--four title create-title u-no-margin--top">
413+ {% if rpconfig and rpconfig.displayname %}
414+ {% if token %}
415+ <a href="{% url 'cancel' token %}" class="trusted-rp-name">{{ rpconfig.displayname }}</a>
416+ {% else %}
417+ <span href="{% url 'cancel' token %}" class="trusted-rp-name">{{ rpconfig.displayname }}</span>
418+ <span class="action-title">{% blocktrans %}create Ubuntu One account{% endblocktrans %}</span>
419 {% endif %}
420-</p>
421-<p class="title create-title">
422- {% if rpconfig and rpconfig.displayname %}
423- <{% if token %}a href="{% url 'cancel' token %}" {% else %}span {% endif %}class="trusted-rp-name">{{ rpconfig.displayname }}{% if token %}</a>{% else %}</span>{% endif %}
424- <span class="action-title">{% blocktrans %}create Ubuntu One account{% endblocktrans %}</span>
425- {% else %}
426- <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "create account" %}</span>{% endif %}
427-</p>
428+ {% else %}
429+ <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "create account" %}</span>
430+ {% endif %}
431+</h2>
432+<hr>
433
434=== modified file 'src/webui/templates/registration/_user_intention_radios.html'
435--- src/webui/templates/registration/_user_intention_radios.html 2018-05-14 13:21:33 +0000
436+++ src/webui/templates/registration/_user_intention_radios.html 2019-08-05 13:10:49 +0000
437@@ -1,17 +1,8 @@
438 {% load i18n %}
439-<div class="hide-nojs user-intention"
440- data-qa-id="login_create_account_radio">
441-
442- <label for="id_new_user" class="new-user">
443- <input type="radio" id="id_new_user" name="user-intentions" {% if readonly %}disabled="disabled"{%endif%}
444- {%if selected_form == "create" %} checked="checked"{%endif%} tabindex="20" value="create"
445- data-qa-id="user_intention_create">
446- <span>{% trans "I don’t have an Ubuntu One account" %}</span>
447- </label>
448-
449- <label for="id_returning_user" class="returning-user">
450- <input type="radio" id="id_returning_user" name="user-intentions"{%if selected_form == "login" %} checked="checked"{%endif%}
451- tabindex="30" value="login" data-qa-id="user_intention_login">
452- <span>{% trans "I have an Ubuntu One account <i>and my password is:</i>" %}</span>
453- </label>
454+<div class="hide-nojs user-intention" data-qa-id="login_create_account_radio">
455+ <input type="radio" id="id_new_user" name="user-intentions" {% if readonly %}disabled="disabled"{%endif%} {%if selected_form == "create" %} checked="checked"{%endif%} tabindex="20" value="create" data-qa-id="user_intention_create">
456+ <label for="id_new_user" class="new-user"><span>{% trans "I don’t have an Ubuntu One account" %}</span></label>
457+
458+ <input type="radio" id="id_returning_user" name="user-intentions"{%if selected_form == "login" %} checked="checked"{%endif%} tabindex="30" value="login" data-qa-id="user_intention_login">
459+ <label for="id_returning_user" class="returning-user"><span>{% trans "I have an Ubuntu One account <i>and my password is:</i>" %}</span></label>
460 </div>
461
462=== modified file 'src/webui/templates/registration/confirm_new_account.html'
463--- src/webui/templates/registration/confirm_new_account.html 2014-12-09 21:32:43 +0000
464+++ src/webui/templates/registration/confirm_new_account.html 2019-08-05 13:10:49 +0000
465@@ -2,7 +2,7 @@
466 {% load i18n %}
467
468 {% comment %}
469-Copyright 2010 Canonical Ltd. This software is licensed under the
470+Copyright 2010-2019 Canonical Ltd. This software is licensed under the
471 GNU Affero General Public License version 3 (see the file LICENSE).
472 {% endcomment %}
473
474@@ -17,11 +17,11 @@
475 {% block content %}
476 <p>{% blocktrans %}The account for {{ email }} is ready to be created.{% endblocktrans %}</p>
477
478-<form id="login-form" class="longfields" method="post" name="loginform">
479+<form id="login-form" method="post" name="loginform">
480 {% csrf_token %}
481 <p class="actions">
482- <button type="submit" name="continue" class="btn" data-qa-id="complete_account_creation">
483- <span><span>{% trans "Complete account creation" %}</span></span>
484+ <button type="submit" name="continue" class="p-button--positive" data-qa-id="complete_account_creation">
485+ <span><span>{% trans "Complete account creation" %}</span></span>
486 </button>
487 {% trans "or" %}
488 {% include "common/cancel_link.html" %}
489
490=== modified file 'src/webui/templates/registration/login.html'
491--- src/webui/templates/registration/login.html 2019-01-09 18:35:07 +0000
492+++ src/webui/templates/registration/login.html 2019-08-05 13:10:49 +0000
493@@ -1,140 +1,136 @@
494-{% extends "base.html" %}
495+{% extends "vanilla/base.html" %}
496 {% load i18n static_url %}
497
498 {% comment %}
499-Copyright 2010-2013 Canonical Ltd. This software is licensed under
500+Copyright 2010-2019 Canonical Ltd. This software is licensed under
501 the GNU Affero General Public License version 3 (see the file
502 LICENSE).
503 {% endcomment %}
504
505 {% block extra_meta %}
506- <meta http-equiv="Expires" content="0">
507- <meta http-equiv="Cache-Control" content="no-cache">
508- <meta http-equiv="Pragma" content="no-cache">
509+ <meta http-equiv="Expires" content="0">
510+ <meta http-equiv="Cache-Control" content="no-cache">
511+ <meta http-equiv="Pragma" content="no-cache">
512 {% endblock %}
513
514 {% block messages %}
515 {{ block.super }}
516-{% if form.email.errors or form.password.errors or form.oath_token.errors or form.non_field_errors %}
517-<div class="message error notopbar"><p>There were some problems with the information you gave us. Please check below and try again.</div>
518-{% endif %}
519 {% endblock %}
520
521 {% block html_extra %}data-qa-id="login"{% endblock %}
522
523 {% block text_title %}
524- <h1 class="u1-h-main">{% trans "One account to log in to everything on Ubuntu" %}</h1>
525+ <h1>{% trans "One account to log in to everything on Ubuntu" %}</h1>
526 {% endblock %}
527
528 </div>
529
530 {% block extra_css %}
531- {% if rpconfig and rpconfig.logo_url %}
532- <style type="text/css" data-qa-id="test_login_rp">
533- .title .trusted-rp-name {
534- background-image: url('{{ rpconfig.logo_url }}');
535- background-repeat: no-repeat;
536- background-position: 0 100%;
537- padding-left: 24px;
538- padding-top: 2px;
539- }
540- </style>
541+ {% if rpconfig and rpconfig.logo_url %}
542+ <style type="text/css" data-qa-id="test_login_rp">
543+ .title .trusted-rp-name {
544+ background-image: url('{{ rpconfig.logo_url }}');
545+ background-repeat: no-repeat;
546+ background-position: 0 100%;
547+ padding-left: 24px;
548+ padding-top: 2px;
549+ }
550+ </style>
551+ {% endif %}
552+{% endblock %}
553+
554+{% block content %}
555+
556+<section class="p-strip">
557+ <div class="row">
558+ {% if form.email.errors or form.password.errors or form.oath_token.errors or form.non_field_errors %}
559+ <div class="col-6">
560+ <div class="p-notification--negative">
561+ <p class="p-notification__response">
562+ There were some problems with the information you gave us. Please check below and try again.
563+ </p>
564+ </div>
565+ </div>
566 {% endif %}
567-{% endblock %}
568-
569-{% block content %}
570-
571-
572-<div class="yui3-g-r">
573-
574- <div id="auth" class="yui3-u-1-2 login">
575-
576- {% with selected_form="login" %}
577- <div class="form-box selected-{{selected_form}}">
578-
579- {% include "registration/_title.html" %}
580-
581- <div class="dual-forms">
582-
583- <div class="login-form">
584- {% include "registration/_login_form.html" with selected_form=selected_form %}
585- </div>
586-
587- {% if not readonly %}
588- <noscript>
589- <p class="no-js-create-account">{% trans "Or create a new account:" %}</p>
590- </noscript>
591-
592- <div class="create-form show-no-js">
593- {% include "registration/_create_account_form.html" with create_form=create_account_form csrf_token=csrf_token %}
594- </div>
595- {% endif %}
596-
597- </div>
598-
599+ </div>
600+ <div class="row">
601+ <div id="auth" class="login col-6">
602+ {% with selected_form="login" %}
603+ <div class="form-box p-card selected-{{selected_form}}">
604+ {% include "registration/_title.html" %}
605+ <div>
606+ <div class="login-form">
607+ {% include "registration/_login_form.html" with selected_form=selected_form %}
608+ </div>
609+
610+ {% if not readonly %}
611+ <noscript>
612+ <p class="no-js-create-account">{% trans "Or create a new account:" %}</p>
613+ </noscript>
614+
615+ <div class="create-form show-no-js">
616+ {% include "registration/_create_account_form.html" with create_form=create_account_form csrf_token=csrf_token %}
617+ </div>
618+ {% endif %}
619 </div>
620- {% endwith %}
621-
622+ </div>
623+ {% endwith %}
624 </div>
625-
626- <div class="yui3-u-1-3">
627-
628+ <aside class="col-6">
629+ <div class="p-table-of-contents">
630 {% include "registration/_ubuntuone_information.html" %}
631-
632- </div>
633-
634-</div>
635+ </div>
636+ </aside>
637+ </div>
638+</section>
639
640 {% endblock %}
641
642 {% block extra_js %}
643 <script type="text/javascript">
644-
645- 'use strict';
646-
647- YUI().use('node', function(Y) {
648- var CREATE = 'create',
649- LOGIN = 'login',
650- VALUE = 'value',
651- CLICK = 'click',
652- PAGESHOW = 'pageshow',
653- SELECTED = 'selected',
654-
655- formBox = Y.one('.form-box'),
656- classes = [CREATE, LOGIN],
657- change,
658- win = Y.config.win;
659-
660- change = function (target) {
661-
662- var show = target.get(VALUE),
663- hide = classes[target.get(VALUE) === classes[0] ? 1 : 0],
664- newEmail = formBox.one('.'+hide+'-form input[type=email]').get(VALUE);
665-
666- formBox.removeClass(SELECTED + '-' + hide).addClass(SELECTED + '-' + show);
667-
668- // transfer email
669- if(newEmail) {
670- formBox.one('.'+show+'-form input[type=email]').set(VALUE, newEmail);
671- }
672-
673- // move radios
674- Y.one('.'+show+'-form .email-input').insert(Y.one('.user-intention').remove(), 'after');
675- };
676-
677- // bind radios
678- formBox.all('.user-intention input[type=radio]').on(CLICK, function (e) {
679- change(e.target);
680- });
681- // for back buttons, or when firefox caches the radio value
682- if(win.addEventListener) {
683- win.addEventListener(PAGESHOW, function () {
684- change(Y.one('.user-intention input:checked'));
685- }, false);
686- }
687-
688+ 'use strict';
689+
690+ YUI().use('node', function(Y) {
691+ var CREATE = 'create',
692+ LOGIN = 'login',
693+ VALUE = 'value',
694+ CLICK = 'click',
695+ PAGESHOW = 'pageshow',
696+ SELECTED = 'selected',
697+
698+ formBox = Y.one('.form-box'),
699+ classes = [CREATE, LOGIN],
700+ change,
701+ win = Y.config.win;
702+
703+ change = function (target) {
704+
705+ var show = target.get(VALUE),
706+ hide = classes[target.get(VALUE) === classes[0] ? 1 : 0],
707+ newEmail = formBox.one('.' + hide + '-form input[type=email]').get(VALUE);
708+
709+ formBox.removeClass(SELECTED + '-' + hide).addClass(SELECTED + '-' + show);
710+
711+ // transfer email
712+ if(newEmail) {
713+ formBox.one('.' + show + '-form input[type=email]').set(VALUE, newEmail);
714+ }
715+
716+ // move radios
717+ Y.one('.' + show + '-form .email-input').insert(Y.one('.user-intention').remove(), 'after');
718+ };
719+
720+ // bind radios
721+ formBox.all('.user-intention input[type=radio]').on(CLICK, function (e) {
722+ change(e.target);
723 });
724-
725+ // for back buttons, or when firefox caches the radio value
726+ if(win.addEventListener) {
727+ win.addEventListener(PAGESHOW, function () {
728+ change(Y.one('.user-intention input:checked'));
729+ }, false);
730+ }
731+ });
732 </script>
733
734 {% include "registration/_password_meter.html" with pwd_selector=".create-form #id_password" pwd_confirm_selector=".create-form #id_passwordconfirm" %}
735
736=== modified file 'src/webui/templates/registration/new_account.html'
737--- src/webui/templates/registration/new_account.html 2014-12-10 15:30:54 +0000
738+++ src/webui/templates/registration/new_account.html 2019-08-05 13:10:49 +0000
739@@ -1,9 +1,9 @@
740-{% extends "base.html" %}
741+{% extends "vanilla/base.html" %}
742 {% load i18n %}
743 {% load gargoyle_tags %}
744
745 {% comment %}
746-Copyright 2010-2013 Canonical Ltd. This software is licensed under
747+Copyright 2010-2019 Canonical Ltd. This software is licensed under
748 the GNU Affero General Public License version 3 (see the file
749 LICENSE).
750 {% endcomment %}
751@@ -16,79 +16,70 @@
752 {% block menu %}{% endblock %}
753
754 {% block text_title %}
755- <h1 class="u1-h-main">
756- {% if rpconfig and rpconfig.logo_url %}
757- <img id="rpconfig_logo" src="{{ rpconfig.logo_url }}">
758- {% else %}
759- {% trans "One account to log in to everything on Ubuntu" %}
760- {% endif %}
761- </h1>
762+<h1>
763+ {% if rpconfig and rpconfig.logo_url %}
764+ <img id="rpconfig_logo" src="{{ rpconfig.logo_url }}">
765+ {% else %}
766+ {% trans "One account to log in to everything on Ubuntu" %}
767+ {% endif %}
768+</h1>
769 {% endblock %}
770
771 {% block content_id %}auth{% endblock %}
772
773 {% block content %}
774
775-<div class="yui3-g-r">
776-
777- <div class="yui3-u-1-2 create-account">
778-
779- {% with selected_form="create" %}
780- <div class="form-box selected-{{selected_form}}">
781-
782- {% include "registration/_title.html" %}
783-
784- <div class="create-form">
785- {% include "registration/_create_account_form.html" with create_form=form selected_form=selected_form %}
786- </div>
787-
788+<section class="p-strip">
789+ <div class="row">
790+ <div class="col-6 create-account">
791+ {% with selected_form="create" %}
792+ <div class="form-box selected-{{selected_form}}">
793+ {% include "registration/_title.html" %}
794+ <div class="create-form">
795+ {% include "registration/_create_account_form.html" with create_form=form selected_form=selected_form %}
796 </div>
797- {% endwith %}
798+ </div>
799+ {% endwith %}
800 </div>
801-
802- <div class="yui3-u-1-3">
803-
804+ <aside class="col-6">
805+ <div class="p-table-of-contents">
806 {% include "registration/_ubuntuone_information.html" %}
807-
808- </div>
809-
810-
811-</div>
812+ </div>
813+ </aside>
814+ </div>
815+</section>
816
817 {% endblock %}
818
819 {% block extra_js %}
820
821 <script type="text/javascript">
822-
823- YUI().use('node', function(Y) {
824- var email = Y.one('#id_email'),
825- win = Y.config.win;
826- toLogin = function () {
827- win.location.href = '{% url 'login' %}';
828- }
829-
830- // autofocus shiv
831- if (!("autofocus" in document.createElement("input"))) {
832- email.focus();
833- }
834-
835- // send user back to login on radio click
836- Y.one('.returning-user').on('click', function () {
837- toLogin();
838- });
839-
840- // send user back if the radio should be checked on pageshow
841- if(win.addEventListener) {
842- win.addEventListener('pageshow', function () {
843- if(Y.one('.returning-user input:checked')) {
844- toLogin();
845- }
846- }, false);
847- }
848-
849+ YUI().use('node', function(Y) {
850+ var email = Y.one('#id_email'),
851+ win = Y.config.win;
852+ toLogin = function () {
853+ win.location.href = '{% url 'login' %}';
854+ }
855+
856+ // autofocus shiv
857+ if (!("autofocus" in document.createElement("input"))) {
858+ email.focus();
859+ }
860+
861+ // send user back to login on radio click
862+ Y.one('.returning-user').on('click', function () {
863+ toLogin();
864 });
865
866+ // send user back if the radio should be checked on pageshow
867+ if(win.addEventListener) {
868+ win.addEventListener('pageshow', function () {
869+ if(Y.one('.returning-user input:checked')) {
870+ toLogin();
871+ }
872+ }, false);
873+ }
874+ });
875 </script>
876
877 {% include "registration/_password_meter.html" with pwd_selector="#id_password" pwd_confirm_selector="#id_passwordconfirm" %}
878
879=== modified file 'src/webui/templates/vanilla/base.html'
880--- src/webui/templates/vanilla/base.html 2019-07-17 13:41:04 +0000
881+++ src/webui/templates/vanilla/base.html 2019-08-05 13:10:49 +0000
882@@ -50,6 +50,13 @@
883 {% endblock %}
884
885 <div id="content">
886+ <section class="p-strip--dark p-cip-hero">
887+ <div class="row">
888+ <div class="col-7">
889+ {% block text_title %}{% endblock %}
890+ </div>
891+ </div>
892+ </section>
893
894 {% block readonly %}
895 {% if readonly %}
896@@ -63,23 +70,21 @@
897
898 {% block messages %}
899 {% if messages %}
900- {% for message in messages %}
901- <div class="p-notification">
902- <p class="p-notification__response">
903- {{ message }}
904- </p>
905- </div>
906- {% endfor %}
907- {% endif %}
908- {% endblock %}
909-
910- <section class="p-strip--dark p-cip-hero">
911+ <section class="p-strip is-shallow">
912+ {% for message in messages %}
913 <div class="row">
914- <div class="col-7">
915- {% block text_title %}{% endblock %}
916+ <div class="col-12">
917+ <div class="p-notification">
918+ <p class="p-notification__response">
919+ {{ message }}
920+ </p>
921+ </div>
922 </div>
923 </div>
924+ {% endfor %}
925 </section>
926+ {% endif %}
927+ {% endblock %}
928
929 <div id="{% block content_id %}box{% endblock %}">
930 {% block content %}{% endblock %}

Subscribers

People subscribed via source and target branches

to all changes: