Merge lp:~deadlight/canonical-identity-provider/emails into lp:canonical-identity-provider/release

Proposed by Karl Williams on 2019-08-13
Status: Merged
Merge reported by: Karl Williams
Merged at revision: not available
Proposed branch: lp:~deadlight/canonical-identity-provider/emails
Merge into: lp:canonical-identity-provider/release
Prerequisite: lp:~deadlight/canonical-identity-provider/account-activity
Diff against target: 217 lines (+89/-97)
2 files modified
package.json (+1/-1)
src/webui/templates/account/emails.html (+88/-96)
To merge this branch: bzr merge lp:~deadlight/canonical-identity-provider/emails
Reviewer Review Type Date Requested Status
Anthony Dillon (community) 2019-08-13 Approve on 2019-08-13
Ubuntu One hackers 2019-08-13 Pending
Review via email: mp+371249@code.launchpad.net

This proposal has been superseded by a proposal from 2019-08-19.

Description of the change

Updated the vanilla version and styled the email settings page

QA:
- npm i
- ./node_modules/gulp/bin/gulp.js sass
- source env/bin/activate
- make start-db
- make run
- Visit http://[CONTAINER IP]:8000/ in your browser
- Create an account using the form
- Go to http://[CONTAINER IP]:8000/+emails and try adding new addresses, etc.

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

LGTM, few comments inline.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'package.json'
2--- package.json 2019-08-13 10:21:29 +0000
3+++ package.json 2019-08-13 10:21:29 +0000
4@@ -8,6 +8,6 @@
5 "gulp-csslint": "~0.1.5",
6 "gulp-csso": "~0.2.9",
7 "gulp-sass": "4.0.2",
8- "vanilla-framework": "2.0.1"
9+ "vanilla-framework": "2.2.0"
10 }
11 }
12
13=== modified file 'src/webui/templates/account/emails.html'
14--- src/webui/templates/account/emails.html 2017-02-26 01:28:59 +0000
15+++ src/webui/templates/account/emails.html 2019-08-13 10:21:29 +0000
16@@ -1,113 +1,105 @@
17-{% extends "base.html" %}
18+{% extends "vanilla/base.html" %}
19 {% load i18n url_with_token %}
20
21 {% comment %}
22-Copyright 2010 Canonical Ltd. This software is licensed under the
23+Copyright 2010-2019 Canonical Ltd. This software is licensed under the
24 GNU Affero General Public License version 3 (see the file LICENSE).
25 {% endcomment %}
26
27 {% block html_extra %}data-qa-id="account_emails"{% endblock %}
28
29 {% block title %}
30- {% blocktrans %}{{ account_displayname }}'s email addresses{% endblocktrans %}
31+ {% blocktrans %}Your email addresses{% endblocktrans %}
32 {% endblock %}
33
34-{% block text_title %}<h1 class="u1-h-main">{% trans "Your email addresses" %}</h1>{% endblock %}
35+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
36
37 {% block content %}
38-
39-<p>
40-
41-{% if not verified_emails and not unverified_emails %}
42- <p>{% blocktrans %}You have no email addresses associated with your account.{% endblocktrans %}</p>
43-{% endif %}
44-
45-{% if verified_emails %}
46-
47- <section class="verified-emails">
48-
49- <h3>{% trans "Verified" %}</h3>
50-
51- <table class="listing hover">
52- {% for email in verified_emails %}
53- <tr>
54- <td class="email{% if email.is_preferred %} preferred-email{% endif %}">
55- <span class="email">{{ email }}</span>
56- {% if email.is_preferred %}
57- <span class="preferred-label">{% trans "(preferred)" %}</span>
58- {% endif %}
59- </td>
60- {% if not readonly %}
61- <td class="actions">
62+ <section class="p-strip">
63+ <h2>{% trans "Your email addresses" %}</h2>
64+ {% if not verified_emails and not unverified_emails %}
65+ <p>{% blocktrans %}You have no email addresses associated with your account.{% endblocktrans %}</p>
66+ {% endif %}
67+ {% if verified_emails %}
68+ <section class="p-strip is-shallow u-no-padding--bottom">
69+ <table class="p-table">
70+ <thead>
71+ <tr>
72+ <th>{% trans "Verified" %}</th>
73+ </tr>
74+ </thead>
75+ <tbody>
76+ {% for email in verified_emails %}
77+ <tr>
78+ <td class="email{% if email.is_preferred %} preferred-email{% endif %}">
79+ <span class="email">{{ email }}</span>
80+ {% if email.is_preferred %}
81+ <span class="preferred-label">{% trans "(preferred)" %}</span>
82+ {% endif %}
83+ </td>
84+ {% if not readonly %}
85+ <td class="u-align-text--right">
86 {% if not email.is_preferred and num_emails > 1 %}
87- <a href="{% url_with_token 'delete_email' email_address=email.email %}" class="btn-sm" data-qa-id="delete_verified_{{ email }}">
88- <span>{% trans "Delete" %}</span>
89- </a>
90- {% endif %}
91- </td>
92- {% endif %}
93- </tr>
94- {% endfor %}
95- </table>
96-
97- </section>
98-
99-{% endif %}
100-
101-{% if unverified_emails %}
102-
103- <section class="unverified-emails">
104-
105- <h3>{% trans "Unverified" %}</h3>
106-
107- <table class="listing hover">
108- {% for email in unverified_emails %}
109- <tr class="unverified-emails">
110- <td class="email">{{ email }}</td>
111- {% if not readonly %}
112- <td class="actions">
113- <a href="{% url_with_token 'verify_email' email_address=email.email %}" data-qa-id="verify_unverified_{{ email }}" class="verify-email btn-sm"><span>{% trans "Verify" %}</span></a>
114- {% if num_emails > 1 %}
115- <a href="{% url_with_token 'delete_email' email_address=email.email %}" data-qa-id="delete_unverified_{{ email }}" class="btn-sm">
116- <span>{% trans "Delete" %}</span>
117- </a>
118- {% endif %}
119- </td>
120- {% endif %}
121- </tr>
122- {% endfor %}
123- </table>
124-
125- </section>
126-
127-{% endif %}
128-
129-{% if not readonly %}
130-
131- <section class="add-emails">
132-
133- <h3>{% trans "Add email address" %}</h3>
134-
135- <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to verify it.{% endblocktrans %}</p>
136-
137- <form action="{% url_with_token 'new_email' %}" method="post">
138- {% csrf_token %}
139- <div class="input-row">
140- {{ form.newemail }}
141- {% if form.newemail.errors %}
142- <span class="error">{{ form.newemail.errors|first }}</span>
143- {% endif %}
144+ <a href="{% url_with_token 'delete_email' email_address=email.email %}" class="btn-sm" data-qa-id="delete_verified_{{ email }}">{% trans "Delete" %}</a>
145+ {% endif %}
146+ </td>
147+ {% endif %}
148+ </tr>
149+ {% endfor %}
150+ </tbody>
151+ </table>
152+ </section>
153+ {% endif %}
154+
155+ {% if unverified_emails %}
156+ <section class="p-strip is-shallow">
157+ <table class="listing hover">
158+ <thead>
159+ <tr>
160+ <th>{% trans "unverified" %}</th>
161+ </tr>
162+ </thead>
163+ <tbody>
164+ {% for email in unverified_emails %}
165+ <tr class="unverified-emails">
166+ <td class="email">{{ email }}</td>
167+ {% if not readonly %}
168+ <td class="u-align-text--right">
169+ <a href="{% url_with_token 'verify_email' email_address=email.email %}" data-qa-id="verify_unverified_{{ email }}"{% trans "Verify" %}</a>
170+ {% if num_emails > 1 %}
171+ <a href="{% url_with_token 'delete_email' email_address=email.email %}" data-qa-id="delete_unverified_{{ email }}">{% trans "Delete" %}</a>
172+ {% endif %}
173+ </td>
174+ {% endif %}
175+ </tr>
176+ {% endfor %}
177+ </table>
178+ </section>
179+ {% endif %}
180+
181+ {% if not readonly %}
182+ <h3>{% trans "Add email address" %}</h3>
183+ <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to verify it.{% endblocktrans %}</p>
184+ <div class="row">
185+ <div class="col-6">
186+ <form action="{% url_with_token 'new_email' %}" method="post">
187+ {% csrf_token %}
188+ <div class="p-form-validation{% if form.newemail.errors %} is-error{% endif %}">
189+ <label for="id_newemail">Email address</label>
190+ {{ form.newemail }}
191+ {% if form.newemail.errors %}
192+ <p class="p-form-validation__message">
193+ <strong>Error:</strong> {{ form.newemail.errors|first }}
194+ </p>
195+ {% endif %}
196+ </div>
197+ <p class="actions">
198+ <button type="submit" class="p-button--positive" name="continue" data-qa-id="add_new_email">{% trans "Add address" %}</button>
199+ <a class="p-button--neutral" href="/">{% trans "Cancel" %}</a>
200+ </p>
201+ </form>
202+ </div>
203 </div>
204- <p class="actions">
205- <button type="submit" class="btn cta" name="continue" data-qa-id="add_new_email">
206- <span>{% trans "Add address" %}</span>
207- </button>
208- <a class="cta secondary" href="/">{% trans "Cancel" %}</a>
209- </p>
210- </form>
211-
212+ {% endif %}
213 </section>
214-
215-{% endif %}
216-
217 {% endblock %}