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

[Karl Williams]

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

[Barry McGee (barry-mcgee)]

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

[lp:~deadlight/canonical-identity-provider/password-reset]

1696. By Karl Williams on 2019-08-05

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

[Karl Williams (deadlight)]

I've pushed fixes for all comments

[Anthony Dillon (ya-bo-ng)]

LGTM

review: Approve

=== modified file 'src/webui/templates/bad_token.html'
--- src/webui/templates/bad_token.html	2013-02-27 12:19:30 +0000
+++ src/webui/templates/bad_token.html	2019-08-05 13:48:06 +0000
@@ -1,24 +1,32 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 
 {% comment %}
-Copyright 2010 Canonical Ltd.  This software is licensed under the
+Copyright 2010-2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
-{% block title %}{% trans "Unauthorized confirmation code" %}{% endblock %}
+{% block title %}{% trans "Unauthorised confirmation code" %}{% endblock %}
 
 {% block text_title %}
-  <h1 class="main">{% trans "Unauthorized confirmation code" %}</h1>
+<h1>{% trans "Unauthorised confirmation code" %}</h1>
 {% endblock %}
 
 {% block content %}
-<p>{% blocktrans %}You are not authorized to use this confirmation code.
-If this URL was sent to you by email, please make sure you open it in the same browser where you requested it.
-{% endblocktrans %}</p>
-
-<p>{% blocktrans %}You can also seek further assistance on:{% endblocktrans %}</p>
-
-<a href="{{ 'support_form'|static_url }}">{{ "support_form"|static_url }}</a>
+<section class="p-strip">
+  <div class="row">
+    <div class="col-8">
+      <div class="p-notification--negative">
+        <p class="p-notification__response">
+          <span class="p-notification__status">Error:</span>{% blocktrans %}You are not authorised to use this confirmation code.
+          If this URL was sent to you by email, please make sure you open it in the same browser where you requested it.
+          {% endblocktrans %}
+        </p>
+      </div>
+      <p>{% blocktrans %}You can also seek further assistance on:{% endblocktrans %}</p>
+      <p><a href="{{ 'support_form'|static_url }}">{{ "support_form"|static_url }}</a></p>
+    </div>
+  </div>
+</section>
 {% endblock %}
 
=== modified file 'src/webui/templates/registration/email_sent.html'
--- src/webui/templates/registration/email_sent.html	2017-02-26 13:52:43 +0000
+++ src/webui/templates/registration/email_sent.html	2019-08-05 13:48:06 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 {% load url_with_token %}
@@ -13,36 +13,33 @@
 {% block title %}{{ email_heading }}{% endblock %}
 
 {% block text_title %}
-  <h1 class="u1-h-main u1-h-pair">{{ email_heading }}</h1>
-  <h2 class="u1-h-med u1-h-pair">{% trans "Step 2 of 3: Check your email" %}</h2>
+  <h1>{{ email_heading }}</h1>
 {% endblock %}
 
 {% block content %}
-
-{% if user.is_authenticated %}<div class="email-sent-auth">{% endif %}
-
-<div>
-    <div>
-        <p class="larger">{{ email_reason|safe }}</p>
-    </div>
-
-{% if not readonly %}
-    <p>
+<section class="p-strip">
+  <div class="row">
+    <div class="col-8">
+      <h2 class="p-heading--three">{% trans "Step 2 of 3: Check your email" %}</h2>
+      {% if user.is_authenticated %}<div class="email-sent-auth">{% endif %}
+      <p class="larger">{{ email_reason|safe }}</p>
+      {% if not readonly %}
+      <p>
         {% url_with_token 'account-emails' as emails_url %}
         {% if user.is_authenticated %}<a href="{{ emails_url }}" data-qa-id="return_to_email_addresses_link">{% blocktrans %}Return to email addresses{% endblocktrans %}</a>{% endif %}
-    </p>
-{% endif %}
-</div>
-
-<div class="password-reset-advice">
-    <h2 class=u1-h-small>{% trans "Haven&rsquo;t received the email within a couple of minutes?" %}</h2>
-    <ul class=u1-list>
-        <li>{% blocktrans %}Make sure you typed the right email address.{% endblocktrans %}</li>
-        <li>{% blocktrans %}Check your spam folder.{% endblocktrans %}</li>
-        <li>{% blocktrans with url='support_form'|static_url %}Still nothing? Contact <a href="{{ url }}">Ubuntu One Support</a>{% endblocktrans %}</li>
-    </ul>
-</div>
-
+      </p>
+      {% endif %}
+      <div class="password-reset-advice">
+        <h2 class="p-heading--three">{% trans "Haven&rsquo;t received the email within a couple of minutes?" %}</h2>
+        <ul class="p-list">
+          <li class="p-list__item is-ticked">{% blocktrans %}Make sure you typed the right email address.{% endblocktrans %}</li>
+          <li class="p-list__item is-ticked">{% blocktrans %}Check your spam folder.{% endblocktrans %}</li>
+          <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>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
 {% if user.is_authenticated %}</div>{% endif %}
 
 {% endblock %}
@@ -50,14 +47,14 @@
 {% block extra_js %}
 <script>
 YUI().use('node', function (Y) {
-    Y.one('#confirmation_code').on(['keyup', 'focus', 'blur', 'change'], function() {
-        var code = Y.one('#confirmation_code').get('value');
-        if (code.length === 0) {
-            Y.one('#submit').setAttribute('disabled', 'true');
-        } else {
-            Y.one('#submit').removeAttribute('disabled');
-        }
-    });
+  Y.one('#confirmation_code').on(['keyup', 'focus', 'blur', 'change'], function() {
+    var code = Y.one('#confirmation_code').get('value');
+    if (code.length === 0) {
+      Y.one('#submit').setAttribute('disabled', 'true');
+    } else {
+      Y.one('#submit').removeAttribute('disabled');
+    }
+  });
 });
 </script>
 {% endblock %}
 
=== modified file 'src/webui/templates/registration/forgot_password.html'
--- src/webui/templates/registration/forgot_password.html	2013-10-18 12:59:55 +0000
+++ src/webui/templates/registration/forgot_password.html	2019-08-05 13:48:06 +0000
@@ -1,8 +1,8 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2010 Canonical Ltd.  This software is licensed under the
+Copyright 2010-2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
@@ -11,34 +11,40 @@
 {% block title %}{% trans "Reset password" %}{% endblock %}
 
 {% block text_title %}
-  <h1 class="u1-h-main u1-h-pair">{% trans "Reset password" %}</h1>
-  <h2 class="u1-h-med u1-h-pair">{% trans "Step 1 of 3: Type your email address" %}</h2>
+<h1>{% trans "Reset password" %}</h1>
 {% endblock %}
 
 {% block content_id %}auth{% endblock %}
 
 {% block content %}
-    <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to reset your password.{% endblocktrans %}</p>
-    <form action="" method="post">
+<section class="p-strip">
+  <div class="row">
+    <div class="col-8">
+      <h2 class="p-heading--three">{% trans "Step 1 of 3: Type your email address" %}</h2>
+      <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to reset your password.{% endblocktrans %}</p>
+      <form action="" method="post">
         {% csrf_token %}
 
         {% if form.non_field_errors %}
-        <div class="input-row haserrors">
-            <span class="error">{{ form.non_field_errors|join:"" }}</span>
+        <div class="p-notification--negative">
+          <p class="p-notification__response">
+            <span class="p-notification__status">Error:</span>{{ form.non_field_errors|join:"" }}
+          </p>
         </div>
         {% endif %}
 
-        <p class="input-row{% if form.email.errors %} haserrors{% endif %}">
-            <label for="id_email">{% trans "Email:" %}</label>
-            {{ form.email }}
-            {% if form.email.errors %}
-                <span class="error">{{ form.email.errors|first }}</span>
-            {% endif %}
-        </p>
-        <p class="actions">
-            <button type="submit" name="continue" class="btn cta" data-qa-id="send_password_reset_token">
-                <span><span>{% trans "Continue" %}</span></span>
-            </button>
-        </p>
-    </form>
+        <div class="p-form-validation{% if form.email.errors %} is-error{% endif %}">
+          <label for="id_email">{% trans "Email:" %}</label>
+          {{ form.email }}
+          {% if form.email.errors %}
+          <p class="p-form-validation__message">
+            <strong>Error:</strong> {{ form.email.errors|first }}
+          </p>
+          {% endif %}
+        </div>
+        <button type="submit" name="continue" class="p-button--positive" data-qa-id="send_password_reset_token">{% trans "Continue" %}</button>
+      </form>
+    </div>
+  </div>
+</section>
 {% endblock %}
 
=== modified file 'src/webui/templates/registration/reset_password.html'
--- src/webui/templates/registration/reset_password.html	2015-11-09 16:25:17 +0000
+++ src/webui/templates/registration/reset_password.html	2019-08-05 13:48:06 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
@@ -11,24 +11,26 @@
 {% block title %}{% trans "Reset password" %}{% endblock %}
 
 {% block text_title %}
-    <h1 class="u1-h-main u1-h-pair">{% trans "Reset password" %}</h1>
-    <h2 class="u1-h-med u1-h-pair">{% trans "Step 3 of 3: Choose a new password" %}</h2>
+<h1>{% trans "Reset password" %}</h1>
 {% endblock %}
 
 {% block content_id %}auth{% endblock %}
 
 {% block content %}
-    <form id="login-form" class="longfields" method="post" action="{{ action }}">
-    {% csrf_token %}
-    <!-- Refer to LP: #1413665 for more information about this email field. -->
-    <input type="email" name="email" value="{{ email }}" style="display: none;" />
-    {% include "widgets/passwords.html" with edit_account_labels=1 fields=form %}
-        <p class="actions">
-          <button type="submit" name="continue" class="btn cta" data-qa-id="reset_password">
-            <span><span>{% trans "Continue" %}</span></span>
-          </button>
-        </p>
-    </form>
+<section class="p-strip">
+  <div class="row">
+    <div class="col-6">
+      <h2 class="p-heading--three">{% trans "Step 3 of 3: Choose a new password" %}</h2>
+      <form id="login-form" method="post" action="{{ action }}">
+        {% csrf_token %}
+        <!-- Refer to LP: #1413665 for more information about this email field. -->
+        <input type="hidden" name="email" value="{{ email }}" />
+        {% include "vanilla/widgets/passwords.html" with edit_account_labels=1 fields=form %}
+        <button type="submit" name="continue" class="p-button--positive" data-qa-id="reset_password">{% trans "Continue" %}</button>
+      </form>
+    </div>
+  </div>
+</section>
 {% endblock %}
 
 {% block extra_js %}