[RFC PATCH v2 09/19] templates: Convert login, password reset views
Stephen Finucane
stephen at that.guru
Thu Sep 2 02:57:46 AEST 2021
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 at 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>
+ •
+ <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 at 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 %}
--
2.31.1
More information about the Patchwork
mailing list