From patchwork Wed Sep  1 16:57:46 2021
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-Patchwork-Submitter: Stephen Finucane <stephen@that.guru>
X-Patchwork-Id: 1523328
Return-Path: 
 <patchwork-bounces+incoming=patchwork.ozlabs.org@lists.ozlabs.org>
X-Original-To: incoming@patchwork.ozlabs.org
Delivered-To: patchwork-incoming@bilbo.ozlabs.org
Authentication-Results: ozlabs.org;
	dkim=fail reason="key not found in DNS" header.d=that.guru
 header.i=@that.guru header.a=rsa-sha256 header.s=x header.b=cqcgcC9B;
	dkim-atps=neutral
Authentication-Results: ozlabs.org;
 spf=pass (sender SPF authorized) smtp.mailfrom=lists.ozlabs.org
 (client-ip=2404:9400:2:0:216:3eff:fee1:b9f1; helo=lists.ozlabs.org;
 envelope-from=patchwork-bounces+incoming=patchwork.ozlabs.org@lists.ozlabs.org;
 receiver=<UNKNOWN>)
Received: from lists.ozlabs.org (lists.ozlabs.org
 [IPv6:2404:9400:2:0:216:3eff:fee1:b9f1])
	(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
	 key-exchange X25519 server-signature RSA-PSS (4096 bits))
	(No client certificate requested)
	by ozlabs.org (Postfix) with ESMTPS id 4H09J33b6tz9sX3
	for <incoming@patchwork.ozlabs.org>; Thu,  2 Sep 2021 02:58:59 +1000 (AEST)
Received: from boromir.ozlabs.org (localhost [IPv6:::1])
	by lists.ozlabs.org (Postfix) with ESMTP id 4H09J32Wp2z2yNS
	for <incoming@patchwork.ozlabs.org>; Thu,  2 Sep 2021 02:58:59 +1000 (AEST)
Authentication-Results: lists.ozlabs.org;
	dkim=fail reason="key not found in DNS" header.d=that.guru
 header.i=@that.guru header.a=rsa-sha256 header.s=x header.b=cqcgcC9B;
	dkim-atps=neutral
X-Original-To: patchwork@lists.ozlabs.org
Delivered-To: patchwork@lists.ozlabs.org
Authentication-Results: lists.ozlabs.org;
 spf=none (no SPF record) smtp.mailfrom=that.guru
 (client-ip=136.175.108.248; helo=mail-108-mta248.mxroute.com;
 envelope-from=stephen@that.guru; receiver=<UNKNOWN>)
Authentication-Results: lists.ozlabs.org;
 dkim=fail reason="key not found in DNS" header.d=that.guru
 header.i=@that.guru
 header.a=rsa-sha256 header.s=x header.b=cqcgcC9B;
 dkim-atps=neutral
Received: from mail-108-mta248.mxroute.com (mail-108-mta248.mxroute.com
 [136.175.108.248])
 (using TLSv1.2 with cipher ECDHE-RSA-AES256-GCM-SHA384 (256/256 bits))
 (No client certificate requested)
 by lists.ozlabs.org (Postfix) with ESMTPS id 4H09Hm4SQRz2yQ4
 for <patchwork@lists.ozlabs.org>; Thu,  2 Sep 2021 02:58:43 +1000 (AEST)
Received: from filter004.mxroute.com ([149.28.56.236] filter004.mxroute.com)
 (Authenticated sender: mN4UYu2MZsgR)
 by mail-108-mta248.mxroute.com (ZoneMTA) with ESMTPSA id
 17ba24c56e200074ba.001 for <patchwork@lists.ozlabs.org>
 (version=TLSv1/SSLv3 cipher=ECDHE-RSA-AES128-GCM-SHA256);
 Wed, 01 Sep 2021 16:58:37 +0000
X-Zone-Loop: 8736991f56dfb420745ca87d53a4acf7da721127db5b
X-Originating-IP: [149.28.56.236]
DKIM-Signature: v=1; a=rsa-sha256; q=dns/txt; c=relaxed/relaxed; d=that.guru;
 s=x;
 h=Content-Transfer-Encoding:Content-Type:MIME-Version:References:
 In-Reply-To:Message-Id:Date:Subject:Cc:To:From:Sender:Reply-To:Content-ID:
 Content-Description:Resent-Date:Resent-From:Resent-Sender:Resent-To:Resent-Cc
 :Resent-Message-ID:List-Id:List-Help:List-Unsubscribe:List-Subscribe:
 List-Post:List-Owner:List-Archive;
 bh=YG9uSVnoxJQlmogx0go8sCKSpQKQW0MBc21uXmoSCYw=; b=cqcgcC9BhgtM7xkLpviEgYrnjw
 fmZnzwc3vq2k3zLwhB+grC8fW3OKlEoAhmDvjf+qqddfnWeFzgPpA1KY7VUnVXPE3/5or6CoC7LXu
 57jLHmuO+PenstdGu6yrHTB1WagLPWN/6p2qUNaCWCl6weOu7pHIUvMRZYIII3stay49rc6A3234p
 jml2Kyzt7e+a9r4xso+4SBCXX+Y7q2GxmQ70t9lmG983Kb34Db4C+GQhlQPosdG6uoZev2pj2PwGe
 ZnNK7X39ch3lZy1zuffKWM//Ww9nu7k7CKN8bvidonmxucrLqpnfnC7Z6KI5Ba+iSrDQUiMdJ2UTd
 DpJ4mDIQ==;
From: Stephen Finucane <stephen@that.guru>
To: patchwork@lists.ozlabs.org
Subject: [RFC PATCH v2 09/19] templates: Convert login, password reset views
Date: Wed,  1 Sep 2021 17:57:46 +0100
Message-Id: <20210901165756.181192-10-stephen@that.guru>
X-Mailer: git-send-email 2.31.1
In-Reply-To: <20210901165756.181192-1-stephen@that.guru>
References: <20210901165756.181192-1-stephen@that.guru>
MIME-Version: 1.0
X-AuthUser: stephen@that.guru
X-BeenThere: patchwork@lists.ozlabs.org
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Patchwork development <patchwork.lists.ozlabs.org>
List-Unsubscribe: <https://lists.ozlabs.org/options/patchwork>,
 <mailto:patchwork-request@lists.ozlabs.org?subject=unsubscribe>
List-Archive: <http://lists.ozlabs.org/pipermail/patchwork/>
List-Post: <mailto:patchwork@lists.ozlabs.org>
List-Help: <mailto:patchwork-request@lists.ozlabs.org?subject=help>
List-Subscribe: <https://lists.ozlabs.org/listinfo/patchwork>,
 <mailto:patchwork-request@lists.ozlabs.org?subject=subscribe>
Errors-To: patchwork-bounces+incoming=patchwork.ozlabs.org@lists.ozlabs.org
Sender: "Patchwork"
 <patchwork-bounces+incoming=patchwork.ozlabs.org@lists.ozlabs.org>

The only things off note here are that we're removing the
'password_reset_complete.html' template in favour of redirecting to the
login page, and that we're opting to generate the forms ourselves rather
than relying on forms generated by Django which are too difficult to
style. This might actually help us in the future if/when we move to a
AJAX-driven UI.

Signed-off-by: Stephen Finucane <stephen@that.guru>
---
 patchwork/templates/patchwork/login.html      |  96 +++++++++++-----
 patchwork/urls.py                             |   4 +-
 templates/base2.html                          |  15 +++
 .../registration/password_reset_complete.html |   8 --
 .../registration/password_reset_confirm.html  | 104 +++++++++++-------
 .../registration/password_reset_done.html     |  35 ++++--
 .../registration/password_reset_form.html     |  75 +++++++------
 7 files changed, 218 insertions(+), 119 deletions(-)
 create mode 100644 templates/base2.html
 delete mode 100644 templates/registration/password_reset_complete.html

diff --git patchwork/templates/patchwork/login.html patchwork/templates/patchwork/login.html
index 86111342..ef609f1f 100644
--- patchwork/templates/patchwork/login.html
+++ patchwork/templates/patchwork/login.html
@@ -1,37 +1,77 @@
-{% extends "base.html" %}
+{% extends "base2.html" %}
 
 {% block title %}Sign in to Patchwork{% endblock %}
-{% block heading %}Sign in to Patchwork{% endblock %}
 
 {% block headers %}
-  <script>
-    $(function() {
-        $('#id_username').focus()
-    });
-  </script>
 {% endblock %}
 
 {% block body %}
-<form method="post">
-{% csrf_token %}
-  <table class="form loginform">
-    <tr>
-      <th colspan="2" class="headerrow">login</th>
-    </tr>
-{% if error %}
-    <tr>
-      <td colspan="2">{{ error }}</td>
-    </tr>
+<section class="hero is-primary is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-5-tablet is-4-desktop is-3-widescreen">
+          <div class="block has-text-centered">
+            <h1 class="title is-3">Sign in to Patchwork</h1>
+          </div>
+{% if form.non_field_errors %}
+          <div class="notification is-danger is-light">
+            <button class="delete"></button>
+            {{ form.non_field_errors }}
+          </div>
 {% endif %}
-{{ form }}
-    <tr>
-      <td class="submitrow">
-        <input type="submit" value="Login"/>
-      </td>
-      <td class="submitrow">
-        <a href="{% url 'password_reset' %}">Forgot password?</a>
-      </td>
-    </tr>
-  </table>
-</form>
+          <form method="post" class="box">
+            {% csrf_token %}
+            <div class="field">
+              <label for="id_username" class="label has-text-weight-normal">Username</label>
+              <div class="control has-icons-left">
+                <input id="id_username" type="text" name="username" placeholder="e.g. bobsmith" class="input" autocomplete="username" autofocus required>
+                <span class="icon is-small is-left">
+                  <i class="fa fa-user"></i>
+                </span>
+              </div>
+{% for error in form.username.errors %}
+              <p class="help is-danger">{{ error }}</p>
+{% endfor %}
+            </div>
+            <div class="field">
+              <label for="id_password" class="label has-text-weight-normal">Password</label>
+              <div class="control has-icons-left">
+                <input id="id_password" type="password" name="password" placeholder="*******" class="input" autocomplete="current-password" required>
+                <span class="icon is-small is-left">
+                  <i class="fa fa-lock"></i>
+                </span>
+              </div>
+{% for error in form.password.errors %}
+              <p class="help is-danger">{{ error }}</p>
+{% endfor %}
+            </div>
+            <div class="field">
+              <button class="button is-success is-fullwidth">
+                Login
+              </button>
+            </div>
+          </form>
+          <div class="box has-text-centered">
+            <a href="{% url 'user-register' %}">Sign Up</a>
+            &nbsp;•&nbsp;
+            <a href="{% url 'password_reset' %}">Forgot Password</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+var btns = document.getElementsByClassName('delete')
+
+for (var i = 0; i < btns.length; i++) {
+  console.log('got button');
+  btns[i].addEventListener('click', function(e) {
+    console.log('hello');
+    this.parentNode.remove(); //this refers to the current target element
+  }, false);
+}
+</script>
 {% endblock %}
diff --git patchwork/urls.py patchwork/urls.py
index 5ddf2dbd..a7dfc3d3 100644
--- patchwork/urls.py
+++ patchwork/urls.py
@@ -153,7 +153,9 @@ urlpatterns = [
     ),
     path(
         'user/password-reset/<uidb64>/<token>/',
-        auth_views.PasswordResetConfirmView.as_view(),
+        auth_views.PasswordResetConfirmView.as_view(
+            success_url=reverse_lazy('auth_login'),
+        ),
         name='password_reset_confirm',
     ),
     path(
diff --git templates/base2.html templates/base2.html
new file mode 100644
index 00000000..ac6b43bc
--- /dev/null
+++ templates/base2.html
@@ -0,0 +1,15 @@
+{% load static %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% block title %}Patchwork{% endblock %} - Patchwork</title>
+    <link rel="stylesheet" href="{% static "css/bulma.min.css" %}"/>
+    <link rel="stylesheet" href="{% static "css/fontawesome.min.css" %}">
+{% block headers %}{% endblock %}
+  </head>
+  <body>
+{% block body %}{% endblock %}
+  </body>
+</html>
diff --git templates/registration/password_reset_complete.html templates/registration/password_reset_complete.html
deleted file mode 100644
index 8678ee89..00000000
--- templates/registration/password_reset_complete.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Password reset completed{% endblock %}
-{% block heading %}Password reset completed{% endblock %}
-
-{% block body %}
-<p>Your password has been set. You may go ahead and log in now.</p>
-{% endblock %}
diff --git templates/registration/password_reset_confirm.html templates/registration/password_reset_confirm.html
index 4ab2357f..1c91eb1b 100644
--- templates/registration/password_reset_confirm.html
+++ templates/registration/password_reset_confirm.html
@@ -1,49 +1,77 @@
-{% extends "base.html" %}
+{% extends "base2.html" %}
 
 {% block title %}Password reset confirmation{% endblock %}
 {% block heading %}Password reset confirmation{% endblock %}
 
 {% block body %}
+<section class="hero is-primary is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-5-tablet is-4-desktop is-3-widescreen">
 {% if validlink %}
-<p>
-  Your username, in case you've forgotten: {{ form.user.get_username }}
-</p>
-<p>
-  Please enter your new password twice so we can verify you typed it in
-  correctly.
-</p>
-
-<form method="post">
-  {% csrf_token %}
-  <table class="form passwordform">
-{% if form.errors %}
-    <tr>
-      <td colspan="2" class="error">Please correct the errors below.</p>
-    </tr>
-{% endif %}
-{% for field in form %}
-    <tr>
-      <td>{{ field.label_tag }}</td>
-      <td>
-        {{ field.errors }}
-        {{ field }}
-{% if field.help_text %}
-        <div class="help_text"/>{{ field.help_text }}</div>
+          <div class="block has-text-centered">
+            <h1 class="title is-3">Change password for @{{ form.user.get_username }}</h1>
+          </div>
+{% if form.non_field_errors %}
+          <div class="notification is-danger is-light">
+            <button class="delete"></button>
+            {{ form.non_field_errors }}
+          </div>
 {% endif %}
-      </td>
-    </tr>
+          <form method="post" class="box">
+            {% csrf_token %}
+            <div class="field">
+              <label for="id_new_password1" class="label has-text-weight-normal">
+                New password
+              </label>
+              <div class="control has-icons-left">
+                <input id="id_new_password1" type="password" name="new_password1" placeholder="*******" class="input" autocomplete="new-password" autofocus required>
+                <span class="icon is-small is-left">
+                  <i class="fa fa-lock"></i>
+                </span>
+              </div>
+{% for error in form.new_password1.errors %}
+              <p class="help is-danger">{{ error }}</p>
+{% endfor %}
+            </div>
+            <div class="field">
+              <label for="id_new_password2" class="label has-text-weight-normal">
+                Confirm password
+              </label>
+              <div class="control has-icons-left">
+                <input id="id_new_password2" type="password" name="new_password2" placeholder="*******" class="input" autocomplete="new-password" required>
+                <span class="icon is-small is-left">
+                  <i class="fa fa-lock"></i>
+                </span>
+              </div>
+{% for error in form.new_password2.errors %}
+              <p class="help is-danger">{{ error }}</p>
 {% endfor %}
-    <tr>
-      <td colspan="2">
-        <input type="submit" value="Set my password" class="default" />
-      </td>
-    </tr>
-  </table>
-</form>
+            </div>
+            <div class="field">
+              <button class="button is-success is-fullwidth">
+                Reset password
+              </button>
+            </div>
+          </form>
 {% else %}
-<p>
-  The password reset link was invalid, possibly because it has already
-  been used. Please request a new password reset.
-</p>
+          <div class="block has-text-centered">
+            <h1 class="title is-3">Reset your password</h1>
+          </div>
+          <div class="box">
+            <p class="block">
+              The password reset link was invalid, possibly because it has already been used.
+              Try again.
+            </p>
+            <a href="{% url 'password_reset' %}" class="button is-light is-fullwidth">
+              Reset password
+            </a>
+          </div>
 {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
 {% endblock %}
diff --git templates/registration/password_reset_done.html templates/registration/password_reset_done.html
index 6070f767..ebd38e68 100644
--- templates/registration/password_reset_done.html
+++ templates/registration/password_reset_done.html
@@ -1,15 +1,28 @@
-{% extends "base.html" %}
+{% extends "base2.html" %}
 
-{% block title %}Password reset{% endblock %}
-{% block heading %}Password reset{% endblock %}
+{% block title %}Password reset email sent!{% endblock %}
 
 {% block body %}
-<p>
-  We have emailed you instructions for setting your password.
-  You should be receiving them shortly.
-</p>
-<p>
-  If you don't receive an email, please make sure you've entered the
-  address you registered with, and check your spam folder.
-</p>
+<section class="hero is-primary is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-5-tablet is-4-desktop is-3-widescreen">
+          <div class="block has-text-centered">
+            <h1 class="title is-3">Reset your password</h1>
+          </div>
+          <div class="box">
+            <p class="block">
+              We have emailed you a link to reset your password.
+              If you don't receive this email shortly, check your spam folder.
+            </p>
+            <a href="{% url 'auth_login' %}" class="button is-light is-fullwidth">
+              Return to sign in
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
 {% endblock %}
diff --git templates/registration/password_reset_form.html templates/registration/password_reset_form.html
index fa6f3f1a..431b4696 100644
--- templates/registration/password_reset_form.html
+++ templates/registration/password_reset_form.html
@@ -1,39 +1,48 @@
-{% extends "base.html" %}
+{% extends "base2.html" %}
 
-{% block title %}Password reset{% endblock %}
-{% block heading %}Password reset{% endblock %}
+{% block title %}Forgot your password?{% endblock %}
 
 {% block body %}
-<p>
-  Forgotten your password? Enter your email address below, and we will
-  email instructions for setting a new one.
-</p>
-
-<form method="post">
-  {% csrf_token %}
-  <table class="form passwordform">
-{% if form.errors %}
-    <tr>
-      <td colspan="2" class="error">Please correct the errors below.</p>
-    </tr>
-{% endif %}
-{% for field in form %}
-    <tr>
-      <td>{{ field.label_tag }}</td>
-      <td>
-        {{ field.errors }}
-        {{ field }}
-{% if field.help_text %}
-        <div class="help_text"/>{{ field.help_text }}</div>
+<section class="hero is-primary is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-5-tablet is-4-desktop is-3-widescreen">
+          <div class="block has-text-centered">
+            <h1 class="title is-3">Reset your password</h1>
+          </div>
+{% if form.non_field_errors %}
+          <div class="notification is-danger is-light">
+            <button class="delete"></button>
+            {{ form.non_field_errors }}
+          </div>
 {% endif %}
-      </td>
-    </tr>
+          <form method="post" class="box">
+            {% csrf_token %}
+            <div class="field">
+              <label for="id_email" class="label has-text-weight-normal">
+                Enter your email address below and we will email instructions
+                for setting a new one.
+              </label>
+              <div class="control has-icons-left">
+                <input id="id_email" type="email" name="email" placeholder="e.g. bobsmith@example.com" class="input" autocomplete="email" autofocus required>
+                <span class="icon is-small is-left">
+                  <i class="fa fa-envelope"></i>
+                </span>
+              </div>
+{% for error in form.email.errors %}
+              <p class="help is-danger">{{ error }}</p>
 {% endfor %}
-    <tr>
-      <td colspan="2">
-        <input type="submit" value="Reset my password" class="default" />
-      </td>
-    </tr>
-  </table>
-</form>
+            </div>
+            <div class="field">
+              <button class="button is-success is-fullwidth">
+                Reset password
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
 {% endblock %}