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

Proposed by Karl Williams on 2019-07-30
Status: Merged
Approved by: Karl Williams on 2019-08-06
Approved revision: 1696
Merged at revision: 1696
Proposed branch: lp:~deadlight/canonical-identity-provider/password-reset
Merge into: lp:~deadlight/canonical-identity-provider/vanilla
Prerequisite: lp:~deadlight/canonical-identity-provider/faq
Diff against target: 264 lines (+93/-80)
4 files modified
src/webui/templates/bad_token.html (+19/-11)
src/webui/templates/registration/email_sent.html (+31/-34)
src/webui/templates/registration/forgot_password.html (+27/-21)
src/webui/templates/registration/reset_password.html (+16/-14)
To merge this branch: bzr merge lp:~deadlight/canonical-identity-provider/password-reset
Reviewer Review Type Date Requested Status
Anthony Dillon (community) Approve on 2019-08-05
Karl Williams Pending
Review via email: mp+370763@code.launchpad.net

Description of the change

Updated the password reset flow to Vanilla Framework

----

QA:

 - setup your environment as per the README
 - source ./env/bin/activate
 - make mail-debug
 [NEW TERMINAL]
 - source ./env/bin/activate
 - make start-db
 - make run
 - go to [HOST]:8000
 - Create a new user
 - Logout
 - Click "forgot password" under the login form
 - Check the page styling
 - Enter the email address for the created user and submit the form
 - Check the styling of the second step
 - Check the other terminal terminal to see the email that would be sent and copy the link provided
 - Check the styling of the form and submit
 - You can check the styling for the error where the link from the email is invalid buy visiting: [HOST]:8000/+bad-token

To post a comment you must log in.
Barry McGee (barry-mcgee) wrote :

Unfortunately cannot yet QA due to local env setup issues
Have eyeballed the code and raised some issues inline.

1696. By Karl Williams on 2019-08-05

Update spellings, fix malformed markup, hide email field correctly on password reset

Karl Williams (deadlight) wrote :

I've pushed fixes for all comments

Anthony Dillon (ya-bo-ng) wrote :

LGTM

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'src/webui/templates/bad_token.html'
2--- src/webui/templates/bad_token.html 2013-02-27 12:19:30 +0000
3+++ src/webui/templates/bad_token.html 2019-08-05 13:48:06 +0000
4@@ -1,24 +1,32 @@
5-{% extends "base.html" %}
6+{% extends "vanilla/base.html" %}
7 {% load i18n %}
8 {% load static_url %}
9
10 {% comment %}
11-Copyright 2010 Canonical Ltd. This software is licensed under the
12+Copyright 2010-2019 Canonical Ltd. This software is licensed under the
13 GNU Affero General Public License version 3 (see the file LICENSE).
14 {% endcomment %}
15
16-{% block title %}{% trans "Unauthorized confirmation code" %}{% endblock %}
17+{% block title %}{% trans "Unauthorised confirmation code" %}{% endblock %}
18
19 {% block text_title %}
20- <h1 class="main">{% trans "Unauthorized confirmation code" %}</h1>
21+<h1>{% trans "Unauthorised confirmation code" %}</h1>
22 {% endblock %}
23
24 {% block content %}
25-<p>{% blocktrans %}You are not authorized to use this confirmation code.
26-If this URL was sent to you by email, please make sure you open it in the same browser where you requested it.
27-{% endblocktrans %}</p>
28-
29-<p>{% blocktrans %}You can also seek further assistance on:{% endblocktrans %}</p>
30-
31-<a href="{{ 'support_form'|static_url }}">{{ "support_form"|static_url }}</a>
32+<section class="p-strip">
33+ <div class="row">
34+ <div class="col-8">
35+ <div class="p-notification--negative">
36+ <p class="p-notification__response">
37+ <span class="p-notification__status">Error:</span>{% blocktrans %}You are not authorised to use this confirmation code.
38+ If this URL was sent to you by email, please make sure you open it in the same browser where you requested it.
39+ {% endblocktrans %}
40+ </p>
41+ </div>
42+ <p>{% blocktrans %}You can also seek further assistance on:{% endblocktrans %}</p>
43+ <p><a href="{{ 'support_form'|static_url }}">{{ "support_form"|static_url }}</a></p>
44+ </div>
45+ </div>
46+</section>
47 {% endblock %}
48
49=== modified file 'src/webui/templates/registration/email_sent.html'
50--- src/webui/templates/registration/email_sent.html 2017-02-26 13:52:43 +0000
51+++ src/webui/templates/registration/email_sent.html 2019-08-05 13:48:06 +0000
52@@ -1,4 +1,4 @@
53-{% extends "base.html" %}
54+{% extends "vanilla/base.html" %}
55 {% load i18n %}
56 {% load static_url %}
57 {% load url_with_token %}
58@@ -13,36 +13,33 @@
59 {% block title %}{{ email_heading }}{% endblock %}
60
61 {% block text_title %}
62- <h1 class="u1-h-main u1-h-pair">{{ email_heading }}</h1>
63- <h2 class="u1-h-med u1-h-pair">{% trans "Step 2 of 3: Check your email" %}</h2>
64+ <h1>{{ email_heading }}</h1>
65 {% endblock %}
66
67 {% block content %}
68-
69-{% if user.is_authenticated %}<div class="email-sent-auth">{% endif %}
70-
71-<div>
72- <div>
73- <p class="larger">{{ email_reason|safe }}</p>
74- </div>
75-
76-{% if not readonly %}
77- <p>
78+<section class="p-strip">
79+ <div class="row">
80+ <div class="col-8">
81+ <h2 class="p-heading--three">{% trans "Step 2 of 3: Check your email" %}</h2>
82+ {% if user.is_authenticated %}<div class="email-sent-auth">{% endif %}
83+ <p class="larger">{{ email_reason|safe }}</p>
84+ {% if not readonly %}
85+ <p>
86 {% url_with_token 'account-emails' as emails_url %}
87 {% if user.is_authenticated %}<a href="{{ emails_url }}" data-qa-id="return_to_email_addresses_link">{% blocktrans %}Return to email addresses{% endblocktrans %}</a>{% endif %}
88- </p>
89-{% endif %}
90-</div>
91-
92-<div class="password-reset-advice">
93- <h2 class=u1-h-small>{% trans "Haven&rsquo;t received the email within a couple of minutes?" %}</h2>
94- <ul class=u1-list>
95- <li>{% blocktrans %}Make sure you typed the right email address.{% endblocktrans %}</li>
96- <li>{% blocktrans %}Check your spam folder.{% endblocktrans %}</li>
97- <li>{% blocktrans with url='support_form'|static_url %}Still nothing? Contact <a href="{{ url }}">Ubuntu One Support</a>{% endblocktrans %}</li>
98- </ul>
99-</div>
100-
101+ </p>
102+ {% endif %}
103+ <div class="password-reset-advice">
104+ <h2 class="p-heading--three">{% trans "Haven&rsquo;t received the email within a couple of minutes?" %}</h2>
105+ <ul class="p-list">
106+ <li class="p-list__item is-ticked">{% blocktrans %}Make sure you typed the right email address.{% endblocktrans %}</li>
107+ <li class="p-list__item is-ticked">{% blocktrans %}Check your spam folder.{% endblocktrans %}</li>
108+ <li class="p-list__item is-ticked">{% blocktrans with url='support_form'|static_url %}Still nothing? Contact <a href="{{ url }}">Ubuntu One Support</a>{% endblocktrans %}</li>
109+ </ul>
110+ </div>
111+ </div>
112+ </div>
113+</section>
114 {% if user.is_authenticated %}</div>{% endif %}
115
116 {% endblock %}
117@@ -50,14 +47,14 @@
118 {% block extra_js %}
119 <script>
120 YUI().use('node', function (Y) {
121- Y.one('#confirmation_code').on(['keyup', 'focus', 'blur', 'change'], function() {
122- var code = Y.one('#confirmation_code').get('value');
123- if (code.length === 0) {
124- Y.one('#submit').setAttribute('disabled', 'true');
125- } else {
126- Y.one('#submit').removeAttribute('disabled');
127- }
128- });
129+ Y.one('#confirmation_code').on(['keyup', 'focus', 'blur', 'change'], function() {
130+ var code = Y.one('#confirmation_code').get('value');
131+ if (code.length === 0) {
132+ Y.one('#submit').setAttribute('disabled', 'true');
133+ } else {
134+ Y.one('#submit').removeAttribute('disabled');
135+ }
136+ });
137 });
138 </script>
139 {% endblock %}
140
141=== modified file 'src/webui/templates/registration/forgot_password.html'
142--- src/webui/templates/registration/forgot_password.html 2013-10-18 12:59:55 +0000
143+++ src/webui/templates/registration/forgot_password.html 2019-08-05 13:48:06 +0000
144@@ -1,8 +1,8 @@
145-{% extends "base.html" %}
146+{% extends "vanilla/base.html" %}
147 {% load i18n %}
148
149 {% comment %}
150-Copyright 2010 Canonical Ltd. This software is licensed under the
151+Copyright 2010-2019 Canonical Ltd. This software is licensed under the
152 GNU Affero General Public License version 3 (see the file LICENSE).
153 {% endcomment %}
154
155@@ -11,34 +11,40 @@
156 {% block title %}{% trans "Reset password" %}{% endblock %}
157
158 {% block text_title %}
159- <h1 class="u1-h-main u1-h-pair">{% trans "Reset password" %}</h1>
160- <h2 class="u1-h-med u1-h-pair">{% trans "Step 1 of 3: Type your email address" %}</h2>
161+<h1>{% trans "Reset password" %}</h1>
162 {% endblock %}
163
164 {% block content_id %}auth{% endblock %}
165
166 {% block content %}
167- <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to reset your password.{% endblocktrans %}</p>
168- <form action="" method="post">
169+<section class="p-strip">
170+ <div class="row">
171+ <div class="col-8">
172+ <h2 class="p-heading--three">{% trans "Step 1 of 3: Type your email address" %}</h2>
173+ <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to reset your password.{% endblocktrans %}</p>
174+ <form action="" method="post">
175 {% csrf_token %}
176
177 {% if form.non_field_errors %}
178- <div class="input-row haserrors">
179- <span class="error">{{ form.non_field_errors|join:"" }}</span>
180+ <div class="p-notification--negative">
181+ <p class="p-notification__response">
182+ <span class="p-notification__status">Error:</span>{{ form.non_field_errors|join:"" }}
183+ </p>
184 </div>
185 {% endif %}
186
187- <p class="input-row{% if form.email.errors %} haserrors{% endif %}">
188- <label for="id_email">{% trans "Email:" %}</label>
189- {{ form.email }}
190- {% if form.email.errors %}
191- <span class="error">{{ form.email.errors|first }}</span>
192- {% endif %}
193- </p>
194- <p class="actions">
195- <button type="submit" name="continue" class="btn cta" data-qa-id="send_password_reset_token">
196- <span><span>{% trans "Continue" %}</span></span>
197- </button>
198- </p>
199- </form>
200+ <div class="p-form-validation{% if form.email.errors %} is-error{% endif %}">
201+ <label for="id_email">{% trans "Email:" %}</label>
202+ {{ form.email }}
203+ {% if form.email.errors %}
204+ <p class="p-form-validation__message">
205+ <strong>Error:</strong> {{ form.email.errors|first }}
206+ </p>
207+ {% endif %}
208+ </div>
209+ <button type="submit" name="continue" class="p-button--positive" data-qa-id="send_password_reset_token">{% trans "Continue" %}</button>
210+ </form>
211+ </div>
212+ </div>
213+</section>
214 {% endblock %}
215
216=== modified file 'src/webui/templates/registration/reset_password.html'
217--- src/webui/templates/registration/reset_password.html 2015-11-09 16:25:17 +0000
218+++ src/webui/templates/registration/reset_password.html 2019-08-05 13:48:06 +0000
219@@ -1,4 +1,4 @@
220-{% extends "base.html" %}
221+{% extends "vanilla/base.html" %}
222 {% load i18n %}
223
224 {% comment %}
225@@ -11,24 +11,26 @@
226 {% block title %}{% trans "Reset password" %}{% endblock %}
227
228 {% block text_title %}
229- <h1 class="u1-h-main u1-h-pair">{% trans "Reset password" %}</h1>
230- <h2 class="u1-h-med u1-h-pair">{% trans "Step 3 of 3: Choose a new password" %}</h2>
231+<h1>{% trans "Reset password" %}</h1>
232 {% endblock %}
233
234 {% block content_id %}auth{% endblock %}
235
236 {% block content %}
237- <form id="login-form" class="longfields" method="post" action="{{ action }}">
238- {% csrf_token %}
239- <!-- Refer to LP: #1413665 for more information about this email field. -->
240- <input type="email" name="email" value="{{ email }}" style="display: none;" />
241- {% include "widgets/passwords.html" with edit_account_labels=1 fields=form %}
242- <p class="actions">
243- <button type="submit" name="continue" class="btn cta" data-qa-id="reset_password">
244- <span><span>{% trans "Continue" %}</span></span>
245- </button>
246- </p>
247- </form>
248+<section class="p-strip">
249+ <div class="row">
250+ <div class="col-6">
251+ <h2 class="p-heading--three">{% trans "Step 3 of 3: Choose a new password" %}</h2>
252+ <form id="login-form" method="post" action="{{ action }}">
253+ {% csrf_token %}
254+ <!-- Refer to LP: #1413665 for more information about this email field. -->
255+ <input type="hidden" name="email" value="{{ email }}" />
256+ {% include "vanilla/widgets/passwords.html" with edit_account_labels=1 fields=form %}
257+ <button type="submit" name="continue" class="p-button--positive" data-qa-id="reset_password">{% trans "Continue" %}</button>
258+ </form>
259+ </div>
260+ </div>
261+</section>
262 {% endblock %}
263
264 {% block extra_js %}

Subscribers

People subscribed via source and target branches

to all changes: