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
=== modified file 'src/identityprovider/static_src/scss/styles.scss'
--- src/identityprovider/static_src/scss/styles.scss 2019-07-22 15:01:03 +0000
+++ src/identityprovider/static_src/scss/styles.scss 2019-08-05 13:10:49 +0000
@@ -5,6 +5,7 @@
55
6@import 'vanilla-framework/scss/build';6@import 'vanilla-framework/scss/build';
77
8//Navigation spacing tweaks
8.p-navigation .row {9.p-navigation .row {
9 justify-content: space-between;10 justify-content: space-between;
10}11}
@@ -13,6 +14,20 @@
13 width: auto;14 width: auto;
14}15}
1516
17//Standard gradient hero
16.p-cip-hero {18.p-cip-hero {
17 background-image: linear-gradient(212deg, #E95420 0%, #C44631 6%, #A33940 12%, #8B304A 18%, #7C2B51 24%, #772953 29%, #55163B 51%, #370626 75%, #2C001E 100%);19 background-image: linear-gradient(212deg, #E95420 0%, #C44631 6%, #A33940 12%, #8B304A 18%, #7C2B51 24%, #772953 29%, #55163B 51%, #370626 75%, #2C001E 100%);
18}20}
21
22// Login/register headers hide/show
23.selected-create {
24 .login-form, .login-title {
25 display: none;
26 }
27}
28
29.selected-login {
30 .create-form, .create-title {
31 display: none;
32 }
33}
1934
=== modified file 'src/webui/templates/registration/_create_account_form.html'
--- src/webui/templates/registration/_create_account_form.html 2018-10-16 19:32:57 +0000
+++ src/webui/templates/registration/_create_account_form.html 2019-08-05 13:10:49 +0000
@@ -2,71 +2,58 @@
22
3<form action="{% url_with_token 'new_account' %}" method="post" name="newaccountform" data-qa-id="create_account_form">3<form action="{% url_with_token 'new_account' %}" method="post" name="newaccountform" data-qa-id="create_account_form">
44
5 {% csrf_token %}5{% csrf_token %}
66
7 <div class="input-row{% if create_form.email.errors %} haserrors{% endif %} email-input">7 <div class="p-form-validation{% if create_form.email.errors %} is-error{% endif %} email-input">
8 <label for="id_email">{% trans "Please type your email:" %}</label>8 <label for="id_email">{% trans "Please type your email:" %}</label>
99 {% if create_form.email.errors %}
10 {% if create_form.email.errors %}10 <span class="p-form-validation__message">{{ create_form.email.errors|first }}</span>
11 <span class="error">{{ create_form.email.errors|first }}</span>11 {% endif %}
12 {% endif %}12 {{ create_form.email }}
1313 </div>
14 {{ create_form.email }}14
15 </div>15 {% if selected_form == 'create' %}
1616 {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
17 {% if selected_form == 'create' %}17 {% endif %}
18 {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}18
19 {% endif %}19 {% if create_form.username %}
2020 <label class="label-passwords">{% trans "Please tell us your full name and choose a username and password:" %}</label>
21 {% if create_form.username %}21 {% else %}
22 <label class="label-passwords">{% trans "Please tell us your full name and choose a username and password:" %}</label>22 <label class="label-passwords">{% trans "Please tell us your full name and choose a password:" %}</label>
23 {% else %}23 {% endif %}
24 <label class="label-passwords">{% trans "Please tell us your full name and choose a password:" %}</label>24
25 {% endif %}25 <div class="p-form-validation{% if create_form.displayname.errors %} is-error{% endif %} name-input">
2626 {% if create_form.displayname.errors %}
27 <div class="input-row{% if create_form.displayname.errors %} haserrors{% endif %} name-input">27 <span class="p-form-validation__message">
2828 {{ create_form.displayname.errors|first }}
29 {% if create_form.displayname.errors %}29 </span>
30 <span class="error">30 {% endif %}
31 {{ create_form.displayname.errors|first }}31 {{ create_form.displayname }}
32 </span>32 </div>
33 {% endif %}33
3434 {% if create_form.username %}
35 {{ create_form.displayname }}35 <div class="p-form-validation{% if create_form.username.errors %} is-error{% endif %} username-input">
36 </div>36 {% if create_form.username.errors %}
3737 <span class="p-form-validation__message">
38 {% if create_form.username %}38 {{ create_form.username.errors|first }}
39 <div class="input-row{% if create_form.username.errors %} haserrors{% endif %} username-input">39 </span>
4040 {% endif %}
41 {% if create_form.username.errors %}41 {{ create_form.username }}
42 <span class="error">42 </div>
43 {{ create_form.username.errors|first }}43 {% endif %}
44 </span>44 {% include "widgets/passwords.html" with fields=create_form %}
45 {% endif %}45
4646 <div class="p-form-validation{% if create_form.accept_tos.errors %} is-error{% endif %} accept-tos-input">
47 {{ create_form.username }}47 {% if create_form.accept_tos.errors %}
48 </div>48 <span class="p-form-validation__message">
49 {% endif %}49 {{ create_form.accept_tos.errors|first }}
5050 </span>
51 {% include "widgets/passwords.html" with fields=create_form %}51 {% endif %}
5252 {{ create_form.accept_tos }}
53 <div class="input-row{% if create_form.accept_tos.errors %} haserrors{% endif %} accept-tos-input">53 <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>
5454 </div>
55 {% if create_form.accept_tos.errors %}55
56 <span class="error">56 <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="register_button">
57 {{ create_form.accept_tos.errors|first }}57 <span>{% trans "Create account" %}</span>
58 </span>58 </button>
59 {% endif %}
60
61 {{ create_form.accept_tos }}
62
63 <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>
64
65 </div>
66
67 <div class="actions">
68 <button type="submit" class="btn cta" name="continue" data-qa-id="register_button">
69 <span>{% trans "Create account" %}</span>
70 </button>
71 </div>
72</form>59</form>
7360
=== modified file 'src/webui/templates/registration/_login_form.html'
--- src/webui/templates/registration/_login_form.html 2019-01-09 18:37:18 +0000
+++ src/webui/templates/registration/_login_form.html 2019-08-05 13:10:49 +0000
@@ -1,58 +1,56 @@
1{% load i18n url_with_token %}1{% load i18n url_with_token %}
22
3<form id="login-form" action="{% url_with_token 'login' %}" method="post" name="loginform" data-qa-id="login_form">3<form id="login-form" action="{% url_with_token 'login' %}" method="post" name="loginform" data-qa-id="login_form">
4 {% csrf_token %}4 {% csrf_token %}
5 <div class="input-row{% if form.email.errors or form.non_field_errors %} haserrors{% endif %} email-input">5 <div class="p-form-validation{% if form.email.errors or form.non_field_errors %} is-error{% endif %} email-input">
6 <label for="id_email">{% trans "Please type your email:" %}</label>6 <label for="id_email">{% trans "Please type your email:" %}</label>
7 {{ form.email }}7 {{ form.email }}
8 {% if form.email.errors %}8 {% if form.email.errors %}
9 <span class="error">{{ form.email.errors|join:"" }}</span>9 <span class="p-form-help-text">{{ form.email.errors|join:"" }}</span>
10 {% endif %}10 {% endif %}
11 </div>11 </div>
1212
13 {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}13 {% include "registration/_user_intention_radios.html" with selected_form=selected_form %}
1414
15 <div class="input-row{% if form.password.errors or form.non_field_errors %} haserrors{% endif %} password-input">15 <div class="p-form-validation{% if form.password.errors or form.non_field_errors %} is-error{% endif %} password-input">
16 {% if form.password.errors %}16 {% if form.password.errors %}
17 <span class="error">{{ form.password.errors|join:"" }}</span>17 <span class="p-form-help-text">{{ form.password.errors|join:"" }}</span>
18 {% endif %}18 {% endif %}
19 {% if not form.oath_token and form.non_field_errors %}19 {% if not form.oath_token and form.non_field_errors %}
20 <span class="error">{{ form.non_field_errors|join:"" }}</span>20 <span class="p-form-help-text">{{ form.non_field_errors|join:"" }}</span>
21 {% endif %}21 {% endif %}
22 {{ form.password }}22 {{ form.password }}
23 </div>23 </div>
2424
25 {% if form.oath_token %}25 {% if form.oath_token %}
26 <div class="input-row twofactor-input">26 <div class="p-form-validation twofactor-input">
27 <h4 class="main">{% blocktrans %}Two Factor Authentication{% endblocktrans %}</h4>27 <h4 class="main">{% blocktrans %}Two Factor Authentication{% endblocktrans %}</h4>
28 <p id="oathtoken" class="input-row{% if form.oath_token.errors or form.non_field_errors %} haserrors{% endif %}">28 <p id="oathtoken" class="input-row{% if form.oath_token.errors or form.non_field_errors %} is-error{% endif %}">
29 <label class="formLabel" for="id_oath_token">{% trans "Device Password" %}</label>29 <label class="formLabel" for="id_oath_token">{% trans "Device Password" %}</label>
30 {{ form.oath_token }}30 {{ form.oath_token }}
31 {% if form.oath_token.errors %}31 {% if form.oath_token.errors %}
32 <span class="error">{{ form.oath_token.errors|join:"" }}</span>32 <span class="p-form-help-text">{{ form.oath_token.errors|join:"" }}</span>
33 {% endif %}33 {% endif %}
34 {% if form.non_field_errors %}34 {% if form.non_field_errors %}
35 <span class="error">{{ form.non_field_errors|join:"" }}</span>35 <span class="p-form-help-text">{{ form.non_field_errors|join:"" }}</span>
36 {% endif %}36 {% endif %}
37 </p>37 </p>
38 </div>38 </div>
39 {% endif %}39 {% endif %}
4040
41 <div class="actions">41 <div class="actions">
42 {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}42 {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
43 <button type="submit" class="btn cta" name="continue" data-qa-id="login_button">43 <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="login_button">
44 <span>{% trans "Log in" %}</span>44 <span>{% trans "Log in" %}</span>
45 </button>45 </button>
46 {% if not readonly %}46 {% if not readonly %}
47 <input type="submit" class="forgot-password" name="forgot_password" formnovalidate formaction="{% url_with_token 'forgot_password' %}"47 <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?' %}">
48 style="border:none; outline:none; background:none; cursor:pointer; color:#dd4814;"48 {% endif %}
49 value="{% trans 'Forgot your password?' %}">49
50 {% endif %}50 {% comment %}
5151 {% if token %}{% trans "or" %}
52 {% comment %}52 {% include "common/cancel_link.html" %}{% endif %}
53 {% if token %}{% trans "or" %}53 {% endcomment %}
54 {% include "common/cancel_link.html" %}{% endif %}54 </div>
55 {% endcomment %}
56 </div>
5755
58</form>56</form>
5957
=== modified file 'src/webui/templates/registration/_password_meter.html'
--- src/webui/templates/registration/_password_meter.html 2014-12-10 15:30:54 +0000
+++ src/webui/templates/registration/_password_meter.html 2019-08-05 13:10:49 +0000
@@ -1,59 +1,54 @@
1{% load i18n static %}1{% load i18n static %}
22
3<script type="text/javascript">3<script type="text/javascript">
44 YUI({
5 YUI({5 groups: {
6 groups: {6 u1: {
77 base: '{% static "identityprovider/js/u1/build/" %}',
8 u1: {8 combine: {{ combine|lower }},
9 base: '{% static "identityprovider/js/u1/build/" %}',9 root: 'identityprovider/js/u1/build/',
10 combine: {{ combine|lower }},10 modules: {
11 root: 'identityprovider/js/u1/build/',11 'one-password-meter': {
12 modules: {12 type: 'js',
13 'one-password-meter': {13 path: 'one-password-meter/one-password-meter-min.js',
14 type: 'js',14 skinnable: true
15 path: 'one-password-meter/one-password-meter-min.js',15 }
16 skinnable: true16 }
17 }17 }
18 }18 }
19 }19 }).use('one-password-meter', function(Y) {
20 }20 var passwordMeter = new Y.U1.Widgets.PasswordMeter({
21 }).use('one-password-meter', function(Y) {21 input: '{{ pwd_selector }}',
2222 inputConfirm: '{{ pwd_confirm_selector }}',
23 var passwordMeter = new Y.U1.Widgets.PasswordMeter({23 feedback: {
24 input: '{{ pwd_selector }}',24 strengths: [
25 inputConfirm: '{{ pwd_confirm_selector }}',25 {
26 feedback: {26 className: 'weak',
27 strengths: [27 text: '{% trans "Strength: weak" %}'
28 {28 },
29 className: 'weak',29 {
30 text: '{% trans "Strength: weak" %}'30 className: 'fair',
31 },31 text: '{% trans "Strength: fair" %}'
32 {32 },
33 className: 'fair',33 {
34 text: '{% trans "Strength: fair" %}'34 className: 'good',
35 },35 text: '{% trans "Strength: good" %}'
36 {36 },
37 className: 'good',37 {
38 text: '{% trans "Strength: good" %}'38 className: 'strong',
39 },39 text: '{% trans "Strength: strong" %}'
40 {40 }
41 className: 'strong',41 ],
42 text: '{% trans "Strength: strong" %}'42 'short': {
43 }43 className: 'short',
44 ],44 text: '{% trans "Password too short" %}'
45 'short': {45 },
46 className: 'short',46 'asymmetric': {
47 text: '{% trans "Password too short" %}'47 className: 'asymmetric',
48 },48 text: '{% trans "The passwords do not match" %}'
49 'asymmetric': {49 }
50 className: 'asymmetric',50 }
51 text: '{% trans "The passwords do not match" %}'
52 }
53 }
54 });
55 passwordMeter.render();
56
57 });51 });
5852 passwordMeter.render();
53 });
59</script>54</script>
6055
=== modified file 'src/webui/templates/registration/_title.html'
--- src/webui/templates/registration/_title.html 2014-12-09 21:32:43 +0000
+++ src/webui/templates/registration/_title.html 2019-08-05 13:10:49 +0000
@@ -1,16 +1,26 @@
1{% load i18n %}1{% load i18n %}
2<p class="title login-title" data-qa-id="ubuntu_login_title">2<h2 class="p-heading--four title login-title" data-qa-id="ubuntu_login_title">
3 {% if rpconfig and rpconfig.displayname %}3 {% if rpconfig and rpconfig.displayname %}
4 <{% 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 %}4 {% if token %}
5 <a href="{% url 'cancel' token %}" class="trusted-rp-name" data-qa-id="trusted_rp_login">{{ rpconfig.displayname }}</a>
6 {% else %}
7 <span class="trusted-rp-name" data-qa-id="trusted_rp_login">{{ rpconfig.displayname }}</span>
8 {% endif %}
5 <span class="action-title">{% blocktrans %}log in with Ubuntu One{% endblocktrans %}9 <span class="action-title">{% blocktrans %}log in with Ubuntu One{% endblocktrans %}
6 {% else %}10 {% else %}
7 <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "log in" %}</span>11 <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "log in" %}</span>
12 {% endif %}
13</h2>
14<h2 class="p-heading--four title create-title u-no-margin--top">
15 {% if rpconfig and rpconfig.displayname %}
16 {% if token %}
17 <a href="{% url 'cancel' token %}" class="trusted-rp-name">{{ rpconfig.displayname }}</a>
18 {% else %}
19 <span href="{% url 'cancel' token %}" class="trusted-rp-name">{{ rpconfig.displayname }}</span>
20 <span class="action-title">{% blocktrans %}create Ubuntu One account{% endblocktrans %}</span>
8 {% endif %}21 {% endif %}
9</p>22 {% else %}
10<p class="title create-title">23 <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "create account" %}</span>
11 {% if rpconfig and rpconfig.displayname %}24 {% endif %}
12 <{% if token %}a href="{% url 'cancel' token %}" {% else %}span {% endif %}class="trusted-rp-name">{{ rpconfig.displayname }}{% if token %}</a>{% else %}</span>{% endif %}25</h2>
13 <span class="action-title">{% blocktrans %}create Ubuntu One account{% endblocktrans %}</span>26<hr>
14 {% else %}
15 <span class="trusted-rp-name">Ubuntu One</span> <span class="action-title">{% trans "create account" %}</span>{% endif %}
16</p>
1727
=== modified file 'src/webui/templates/registration/_user_intention_radios.html'
--- src/webui/templates/registration/_user_intention_radios.html 2018-05-14 13:21:33 +0000
+++ src/webui/templates/registration/_user_intention_radios.html 2019-08-05 13:10:49 +0000
@@ -1,17 +1,8 @@
1{% load i18n %}1{% load i18n %}
2<div class="hide-nojs user-intention"2<div class="hide-nojs user-intention" data-qa-id="login_create_account_radio">
3 data-qa-id="login_create_account_radio">3 <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">
44 <label for="id_new_user" class="new-user"><span>{% trans "I don’t have an Ubuntu One account" %}</span></label>
5 <label for="id_new_user" class="new-user">5
6 <input type="radio" id="id_new_user" name="user-intentions" {% if readonly %}disabled="disabled"{%endif%}6 <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">
7 {%if selected_form == "create" %} checked="checked"{%endif%} tabindex="20" value="create"7 <label for="id_returning_user" class="returning-user"><span>{% trans "I have an Ubuntu One account <i>and my password is:</i>" %}</span></label>
8 data-qa-id="user_intention_create">
9 <span>{% trans "I don’t have an Ubuntu One account" %}</span>
10 </label>
11
12 <label for="id_returning_user" class="returning-user">
13 <input type="radio" id="id_returning_user" name="user-intentions"{%if selected_form == "login" %} checked="checked"{%endif%}
14 tabindex="30" value="login" data-qa-id="user_intention_login">
15 <span>{% trans "I have an Ubuntu One account <i>and my password is:</i>" %}</span>
16 </label>
17</div>8</div>
189
=== modified file 'src/webui/templates/registration/confirm_new_account.html'
--- src/webui/templates/registration/confirm_new_account.html 2014-12-09 21:32:43 +0000
+++ src/webui/templates/registration/confirm_new_account.html 2019-08-05 13:10:49 +0000
@@ -2,7 +2,7 @@
2{% load i18n %}2{% load i18n %}
33
4{% comment %}4{% comment %}
5Copyright 2010 Canonical Ltd. This software is licensed under the5Copyright 2010-2019 Canonical Ltd. This software is licensed under the
6GNU Affero General Public License version 3 (see the file LICENSE).6GNU Affero General Public License version 3 (see the file LICENSE).
7{% endcomment %}7{% endcomment %}
88
@@ -17,11 +17,11 @@
17{% block content %}17{% block content %}
18<p>{% blocktrans %}The account for {{ email }} is ready to be created.{% endblocktrans %}</p>18<p>{% blocktrans %}The account for {{ email }} is ready to be created.{% endblocktrans %}</p>
1919
20<form id="login-form" class="longfields" method="post" name="loginform">20<form id="login-form" method="post" name="loginform">
21 {% csrf_token %}21 {% csrf_token %}
22 <p class="actions">22 <p class="actions">
23 <button type="submit" name="continue" class="btn" data-qa-id="complete_account_creation">23 <button type="submit" name="continue" class="p-button--positive" data-qa-id="complete_account_creation">
24 <span><span>{% trans "Complete account creation" %}</span></span>24 <span><span>{% trans "Complete account creation" %}</span></span>
25 </button>25 </button>
26 {% trans "or" %}26 {% trans "or" %}
27 {% include "common/cancel_link.html" %}27 {% include "common/cancel_link.html" %}
2828
=== modified file 'src/webui/templates/registration/login.html'
--- src/webui/templates/registration/login.html 2019-01-09 18:35:07 +0000
+++ src/webui/templates/registration/login.html 2019-08-05 13:10:49 +0000
@@ -1,140 +1,136 @@
1{% extends "base.html" %}1{% extends "vanilla/base.html" %}
2{% load i18n static_url %}2{% load i18n static_url %}
33
4{% comment %}4{% comment %}
5Copyright 2010-2013 Canonical Ltd. This software is licensed under5Copyright 2010-2019 Canonical Ltd. This software is licensed under
6the GNU Affero General Public License version 3 (see the file6the GNU Affero General Public License version 3 (see the file
7LICENSE).7LICENSE).
8{% endcomment %}8{% endcomment %}
99
10{% block extra_meta %}10{% block extra_meta %}
11 <meta http-equiv="Expires" content="0">11 <meta http-equiv="Expires" content="0">
12 <meta http-equiv="Cache-Control" content="no-cache">12 <meta http-equiv="Cache-Control" content="no-cache">
13 <meta http-equiv="Pragma" content="no-cache">13 <meta http-equiv="Pragma" content="no-cache">
14{% endblock %}14{% endblock %}
1515
16{% block messages %}16{% block messages %}
17{{ block.super }}17{{ block.super }}
18{% if form.email.errors or form.password.errors or form.oath_token.errors or form.non_field_errors %}
19<div class="message error notopbar"><p>There were some problems with the information you gave us. Please check below and try again.</div>
20{% endif %}
21{% endblock %}18{% endblock %}
2219
23{% block html_extra %}data-qa-id="login"{% endblock %}20{% block html_extra %}data-qa-id="login"{% endblock %}
2421
25{% block text_title %}22{% block text_title %}
26 <h1 class="u1-h-main">{% trans "One account to log in to everything on Ubuntu" %}</h1>23 <h1>{% trans "One account to log in to everything on Ubuntu" %}</h1>
27{% endblock %}24{% endblock %}
2825
29</div>26</div>
3027
31{% block extra_css %}28{% block extra_css %}
32 {% if rpconfig and rpconfig.logo_url %}29 {% if rpconfig and rpconfig.logo_url %}
33 <style type="text/css" data-qa-id="test_login_rp">30 <style type="text/css" data-qa-id="test_login_rp">
34 .title .trusted-rp-name {31 .title .trusted-rp-name {
35 background-image: url('{{ rpconfig.logo_url }}');32 background-image: url('{{ rpconfig.logo_url }}');
36 background-repeat: no-repeat;33 background-repeat: no-repeat;
37 background-position: 0 100%;34 background-position: 0 100%;
38 padding-left: 24px;35 padding-left: 24px;
39 padding-top: 2px;36 padding-top: 2px;
40 }37 }
41 </style>38 </style>
39 {% endif %}
40{% endblock %}
41
42{% block content %}
43
44<section class="p-strip">
45 <div class="row">
46 {% if form.email.errors or form.password.errors or form.oath_token.errors or form.non_field_errors %}
47 <div class="col-6">
48 <div class="p-notification--negative">
49 <p class="p-notification__response">
50 There were some problems with the information you gave us. Please check below and try again.
51 </p>
52 </div>
53 </div>
42 {% endif %}54 {% endif %}
43{% endblock %}55 </div>
4456 <div class="row">
45{% block content %}57 <div id="auth" class="login col-6">
4658 {% with selected_form="login" %}
4759 <div class="form-box p-card selected-{{selected_form}}">
48<div class="yui3-g-r">60 {% include "registration/_title.html" %}
4961 <div>
50 <div id="auth" class="yui3-u-1-2 login">62 <div class="login-form">
5163 {% include "registration/_login_form.html" with selected_form=selected_form %}
52 {% with selected_form="login" %}64 </div>
53 <div class="form-box selected-{{selected_form}}">65
5466 {% if not readonly %}
55 {% include "registration/_title.html" %}67 <noscript>
5668 <p class="no-js-create-account">{% trans "Or create a new account:" %}</p>
57 <div class="dual-forms">69 </noscript>
5870
59 <div class="login-form">71 <div class="create-form show-no-js">
60 {% include "registration/_login_form.html" with selected_form=selected_form %}72 {% include "registration/_create_account_form.html" with create_form=create_account_form csrf_token=csrf_token %}
61 </div>73 </div>
6274 {% endif %}
63 {% if not readonly %}
64 <noscript>
65 <p class="no-js-create-account">{% trans "Or create a new account:" %}</p>
66 </noscript>
67
68 <div class="create-form show-no-js">
69 {% include "registration/_create_account_form.html" with create_form=create_account_form csrf_token=csrf_token %}
70 </div>
71 {% endif %}
72
73 </div>
74
75 </div>75 </div>
76 {% endwith %}76 </div>
7777 {% endwith %}
78 </div>78 </div>
7979 <aside class="col-6">
80 <div class="yui3-u-1-3">80 <div class="p-table-of-contents">
81
82 {% include "registration/_ubuntuone_information.html" %}81 {% include "registration/_ubuntuone_information.html" %}
8382 </div>
84 </div>83 </aside>
8584 </div>
86</div>85</section>
8786
88{% endblock %}87{% endblock %}
8988
90{% block extra_js %}89{% block extra_js %}
91<script type="text/javascript">90<script type="text/javascript">
9291 'use strict';
93 'use strict';92
9493 YUI().use('node', function(Y) {
95 YUI().use('node', function(Y) {94 var CREATE = 'create',
96 var CREATE = 'create',95 LOGIN = 'login',
97 LOGIN = 'login',96 VALUE = 'value',
98 VALUE = 'value',97 CLICK = 'click',
99 CLICK = 'click',98 PAGESHOW = 'pageshow',
100 PAGESHOW = 'pageshow',99 SELECTED = 'selected',
101 SELECTED = 'selected',100
102101 formBox = Y.one('.form-box'),
103 formBox = Y.one('.form-box'),102 classes = [CREATE, LOGIN],
104 classes = [CREATE, LOGIN],103 change,
105 change,104 win = Y.config.win;
106 win = Y.config.win;105
107106 change = function (target) {
108 change = function (target) {107
109108 var show = target.get(VALUE),
110 var show = target.get(VALUE),109 hide = classes[target.get(VALUE) === classes[0] ? 1 : 0],
111 hide = classes[target.get(VALUE) === classes[0] ? 1 : 0],110 newEmail = formBox.one('.' + hide + '-form input[type=email]').get(VALUE);
112 newEmail = formBox.one('.'+hide+'-form input[type=email]').get(VALUE);111
113112 formBox.removeClass(SELECTED + '-' + hide).addClass(SELECTED + '-' + show);
114 formBox.removeClass(SELECTED + '-' + hide).addClass(SELECTED + '-' + show);113
115114 // transfer email
116 // transfer email115 if(newEmail) {
117 if(newEmail) {116 formBox.one('.' + show + '-form input[type=email]').set(VALUE, newEmail);
118 formBox.one('.'+show+'-form input[type=email]').set(VALUE, newEmail);117 }
119 }118
120119 // move radios
121 // move radios120 Y.one('.' + show + '-form .email-input').insert(Y.one('.user-intention').remove(), 'after');
122 Y.one('.'+show+'-form .email-input').insert(Y.one('.user-intention').remove(), 'after');121 };
123 };122
124123 // bind radios
125 // bind radios124 formBox.all('.user-intention input[type=radio]').on(CLICK, function (e) {
126 formBox.all('.user-intention input[type=radio]').on(CLICK, function (e) {125 change(e.target);
127 change(e.target);
128 });
129 // for back buttons, or when firefox caches the radio value
130 if(win.addEventListener) {
131 win.addEventListener(PAGESHOW, function () {
132 change(Y.one('.user-intention input:checked'));
133 }, false);
134 }
135
136 });126 });
137127 // for back buttons, or when firefox caches the radio value
128 if(win.addEventListener) {
129 win.addEventListener(PAGESHOW, function () {
130 change(Y.one('.user-intention input:checked'));
131 }, false);
132 }
133 });
138</script>134</script>
139135
140{% include "registration/_password_meter.html" with pwd_selector=".create-form #id_password" pwd_confirm_selector=".create-form #id_passwordconfirm" %}136{% include "registration/_password_meter.html" with pwd_selector=".create-form #id_password" pwd_confirm_selector=".create-form #id_passwordconfirm" %}
141137
=== modified file 'src/webui/templates/registration/new_account.html'
--- src/webui/templates/registration/new_account.html 2014-12-10 15:30:54 +0000
+++ src/webui/templates/registration/new_account.html 2019-08-05 13:10:49 +0000
@@ -1,9 +1,9 @@
1{% extends "base.html" %}1{% extends "vanilla/base.html" %}
2{% load i18n %}2{% load i18n %}
3{% load gargoyle_tags %}3{% load gargoyle_tags %}
44
5{% comment %}5{% comment %}
6Copyright 2010-2013 Canonical Ltd. This software is licensed under6Copyright 2010-2019 Canonical Ltd. This software is licensed under
7the GNU Affero General Public License version 3 (see the file7the GNU Affero General Public License version 3 (see the file
8LICENSE).8LICENSE).
9{% endcomment %}9{% endcomment %}
@@ -16,79 +16,70 @@
16{% block menu %}{% endblock %}16{% block menu %}{% endblock %}
1717
18{% block text_title %}18{% block text_title %}
19 <h1 class="u1-h-main">19<h1>
20 {% if rpconfig and rpconfig.logo_url %}20 {% if rpconfig and rpconfig.logo_url %}
21 <img id="rpconfig_logo" src="{{ rpconfig.logo_url }}">21 <img id="rpconfig_logo" src="{{ rpconfig.logo_url }}">
22 {% else %}22 {% else %}
23 {% trans "One account to log in to everything on Ubuntu" %}23 {% trans "One account to log in to everything on Ubuntu" %}
24 {% endif %}24 {% endif %}
25 </h1>25</h1>
26{% endblock %}26{% endblock %}
2727
28{% block content_id %}auth{% endblock %}28{% block content_id %}auth{% endblock %}
2929
30{% block content %}30{% block content %}
3131
32<div class="yui3-g-r">32<section class="p-strip">
3333 <div class="row">
34 <div class="yui3-u-1-2 create-account">34 <div class="col-6 create-account">
3535 {% with selected_form="create" %}
36 {% with selected_form="create" %}36 <div class="form-box selected-{{selected_form}}">
37 <div class="form-box selected-{{selected_form}}">37 {% include "registration/_title.html" %}
3838 <div class="create-form">
39 {% include "registration/_title.html" %}39 {% include "registration/_create_account_form.html" with create_form=form selected_form=selected_form %}
40
41 <div class="create-form">
42 {% include "registration/_create_account_form.html" with create_form=form selected_form=selected_form %}
43 </div>
44
45 </div>40 </div>
46 {% endwith %}41 </div>
42 {% endwith %}
47 </div>43 </div>
4844 <aside class="col-6">
49 <div class="yui3-u-1-3">45 <div class="p-table-of-contents">
50
51 {% include "registration/_ubuntuone_information.html" %}46 {% include "registration/_ubuntuone_information.html" %}
5247 </div>
53 </div>48 </aside>
5449 </div>
5550</section>
56</div>
5751
58{% endblock %}52{% endblock %}
5953
60{% block extra_js %}54{% block extra_js %}
6155
62<script type="text/javascript">56<script type="text/javascript">
6357 YUI().use('node', function(Y) {
64 YUI().use('node', function(Y) {58 var email = Y.one('#id_email'),
65 var email = Y.one('#id_email'),59 win = Y.config.win;
66 win = Y.config.win;60 toLogin = function () {
67 toLogin = function () {61 win.location.href = '{% url 'login' %}';
68 win.location.href = '{% url 'login' %}';62 }
69 }63
7064 // autofocus shiv
71 // autofocus shiv65 if (!("autofocus" in document.createElement("input"))) {
72 if (!("autofocus" in document.createElement("input"))) {66 email.focus();
73 email.focus();67 }
74 }68
7569 // send user back to login on radio click
76 // send user back to login on radio click70 Y.one('.returning-user').on('click', function () {
77 Y.one('.returning-user').on('click', function () {71 toLogin();
78 toLogin();
79 });
80
81 // send user back if the radio should be checked on pageshow
82 if(win.addEventListener) {
83 win.addEventListener('pageshow', function () {
84 if(Y.one('.returning-user input:checked')) {
85 toLogin();
86 }
87 }, false);
88 }
89
90 });72 });
9173
74 // send user back if the radio should be checked on pageshow
75 if(win.addEventListener) {
76 win.addEventListener('pageshow', function () {
77 if(Y.one('.returning-user input:checked')) {
78 toLogin();
79 }
80 }, false);
81 }
82 });
92</script>83</script>
9384
94{% include "registration/_password_meter.html" with pwd_selector="#id_password" pwd_confirm_selector="#id_passwordconfirm" %}85{% include "registration/_password_meter.html" with pwd_selector="#id_password" pwd_confirm_selector="#id_passwordconfirm" %}
9586
=== modified file 'src/webui/templates/vanilla/base.html'
--- src/webui/templates/vanilla/base.html 2019-07-17 13:41:04 +0000
+++ src/webui/templates/vanilla/base.html 2019-08-05 13:10:49 +0000
@@ -50,6 +50,13 @@
50 {% endblock %}50 {% endblock %}
5151
52 <div id="content">52 <div id="content">
53 <section class="p-strip--dark p-cip-hero">
54 <div class="row">
55 <div class="col-7">
56 {% block text_title %}{% endblock %}
57 </div>
58 </div>
59 </section>
5360
54 {% block readonly %}61 {% block readonly %}
55 {% if readonly %}62 {% if readonly %}
@@ -63,23 +70,21 @@
6370
64 {% block messages %}71 {% block messages %}
65 {% if messages %}72 {% if messages %}
66 {% for message in messages %}73 <section class="p-strip is-shallow">
67 <div class="p-notification">74 {% for message in messages %}
68 <p class="p-notification__response">
69 {{ message }}
70 </p>
71 </div>
72 {% endfor %}
73 {% endif %}
74 {% endblock %}
75
76 <section class="p-strip--dark p-cip-hero">
77 <div class="row">75 <div class="row">
78 <div class="col-7">76 <div class="col-12">
79 {% block text_title %}{% endblock %}77 <div class="p-notification">
78 <p class="p-notification__response">
79 {{ message }}
80 </p>
81 </div>
80 </div>82 </div>
81 </div>83 </div>
84 {% endfor %}
82 </section>85 </section>
86 {% endif %}
87 {% endblock %}
8388
84 <div id="{% block content_id %}box{% endblock %}">89 <div id="{% block content_id %}box{% endblock %}">
85 {% block content %}{% endblock %}90 {% block content %}{% endblock %}

Subscribers

People subscribed via source and target branches

to all changes: