Merge lp:~deadlight/canonical-identity-provider/login into lp:~deadlight/canonical-identity-provider/vanilla
- login
- Merge into vanilla
Proposed by
Karl Williams
Status: | Merged |
---|---|
Approved by: | Karl Williams |
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 |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Anthony Dillon (community) | Approve | ||
Review via email: mp+370664@code.launchpad.net |
Commit message
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.
Revision history for this message
Karl Williams (deadlight) wrote : | # |
Revision history for this message
Barry McGee (barry-mcgee) wrote : | # |
Eyeballed code - some comments inline.
Revision history for this message
Karl Williams (deadlight) wrote : | # |
Addressed in-code comments
- 1694. By Karl Williams
-
Optimise sass
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 %} |
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.