@@ -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 %}
@@ -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(
new file mode 100644
@@ -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>
deleted file mode 100644
@@ -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 %}
@@ -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 %}
@@ -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 %}
@@ -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 %}
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