Skip to content

Commit

Permalink
Merge pull request #89 from SADiLaR/feature/user-management-styling
Browse files Browse the repository at this point in the history 
user management frontend
  • Loading branch information
@OnaMosimege
OnaMosimege authored Jul 10, 2024
2 parents fd85d90 + e9a0bc2 commit ae4fc6c
Show file tree
Hide file tree
Showing 10 changed files with 254 additions and 96 deletions.
38 changes: 29 additions & 9 deletions app/accounts/forms.py
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,42 @@
from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.forms import AuthenticationForm, UserCreationForm
from django.utils.translation import gettext_lazy as _

from users.models import CustomUser


class CustomUserCreationForm(UserCreationForm):
email = forms.EmailField(required=True, help_text="Required. Add a valid email address.")
username = forms.CharField(required=True, help_text="Required. Add a valid username.")
first_name = forms.CharField(required=True, help_text="Required. Add a valid first name.")
last_name = forms.CharField(required=True, help_text="Required. Add a valid last name.")
email = forms.EmailField(
required=True,
help_text=_("Required. Add a valid email address."),
)
username = forms.CharField(
required=True,
help_text=_("Required. Add a valid username."),
)
first_name = forms.CharField(
required=True,
help_text=_("Required. Add a valid first name."),
)
last_name = forms.CharField(
required=True,
)

class Meta:
model = CustomUser
fields = ("username", "email", "first_name", "last_name")

def __init__(self, *args, **kwargs):
super(CustomUserCreationForm, self).__init__(*args, **kwargs)
self.fields["email"].required = True
self.fields["username"].required = True
self.fields["first_name"].required = True
self.fields["last_name"].required = True
for field_name, field in self.fields.items():
field.widget.attrs["class"] = "form-control"


class CustomAuthenticationForm(AuthenticationForm):
username = forms.CharField(label=_("Username"), help_text=_("Required. Enter your username."))
password = forms.CharField(label=_("Password"), help_text=_("Required. Enter your password."))

def __init__(self, *args, **kwargs):
super(CustomAuthenticationForm, self).__init__(*args, **kwargs)
for field in self.fields.values():
field.widget.attrs.update({"class": "form-control"})
20 changes: 17 additions & 3 deletions app/accounts/views.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
from django.contrib.auth import login
from django.contrib.auth import authenticate
from django.contrib.auth import login as auth_login
from django.shortcuts import redirect, render

from .forms import CustomUserCreationForm
from .forms import CustomAuthenticationForm, CustomUserCreationForm


def register(request):
Expand All @@ -11,8 +12,21 @@ def register(request):
user = form.save(commit=False)
user.is_staff = True
user.save()
login(request, user)
auth_login(request, user)
return redirect("home")
else:
form = CustomUserCreationForm()
return render(request, "accounts/register.html", {"form": form})


def user_login(request):
if request.method == "POST":
form = CustomAuthenticationForm(request, data=request.POST)
if form.is_valid():
user = form.get_user()
auth_login(request, user)
return redirect("home")
else:
form = CustomAuthenticationForm()

return render(request, "accounts/login.html", {"form": form})
12 changes: 10 additions & 2 deletions app/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,12 +344,20 @@ html {
font-size: 0.875rem;
}

/*Accounts*/
.user-account-body {
margin: 30px;
}

.login-form-group .form-control {
width: 100%;
max-width: 500px;
}

/*Error pages*/
.error-card {
.body-card {
border-color: var(--primary-red);
margin: 0 10px 0 10px;
margin: 10px;
width: 100%;
}

Expand Down
86 changes: 70 additions & 16 deletions app/templates/accounts/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,76 @@
{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block title %}Log In{% endblock %}
{% block title %}{% trans "Log In" %}{% endblock %}

{% block content %}
<div class="container">
<h2>Log In</h2>
<form method="post">
{% csrf_token %}
{{ form }}
<button type="submit">Log In</button>
</form>

<br>
<hr>
<form method="post" action="{% url 'logout' %}">
{% csrf_token %}
<button type="submit">logout</button>
</form>
</div>
<div class="container">
<div class="section mt-3 mb-3">
<div class="card body-card">
<div class="user-account-body">
<h2>{% trans "Log In" %}</h2>
<br/>
<form method="post" class="text-left">
{% csrf_token %}

<!-- Username Field -->
<div class="form-group login-form-group mb-4">
<label for="id_username">{% trans "Username:" %}</label>
<input type="text" name="username" id="id_username" class="form-control" placeholder="{% trans 'Username' %}" value="{{ form.username.value|default:'' }}">
{% if form.username.help_text %}
<small class="form-text text-muted">{{ form.username.help_text }}</small>
{% endif %}
{% if form.username.errors %}
<div class="invalid-feedback d-block">
{% for error in form.username.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>

<!-- Password Field -->
<div class="form-group login-form-group mb-1">
<label for="id_password">{% trans "Password:" %}</label>
<input type="password" name="password" id="id_password" class="form-control" placeholder="{% trans 'Password' %}" value="{{ form.password.value|default:'' }}">
{% if form.password.help_text %}
<small class="form-text text-muted">{{ form.password.help_text }}</small>
{% endif %}
{% if form.password.errors %}
<div class="invalid-feedback d-block">
{% for error in form.password.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>

<!-- Log In Button and Forgot Password -->
<div class="form-group">
<a href="{% url 'password_reset' %}" class="d-block mb-2">{% trans "Forgot Password?" %}</a>

{% if form.non_field_errors %}
<div class="invalid-feedback d-block">
{% for error in form.non_field_errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}

<button type="submit" class="btn btn-primary">{% trans "Log In" %}</button>
</div>
</form>

<br>
<hr>
<div class="form-group row">
<div class="col-sm-10">
<p>{% trans "Don't have an account?" %} <a href="{% url 'accounts_register' %}">{% trans "Create one" %}</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
20 changes: 15 additions & 5 deletions app/templates/accounts/password_reset_complete.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block title %}Password reset complete{% endblock %}
{% block title %}{% trans "Password reset complete" %}{% endblock %}

{% block content %}
<div class="container">
<p>Your password has been set. You may go ahead and log in now.</p>
<br>
<p><a href="{{ login_url }}">Log in</a></p>
<div class="section mt-3 mb-3">
<div class="card text-center body-card">
<div class="user-account-body">
<p>{% trans "Your password has been set. You may go ahead and log in now." %}</p>
<br>
<p>
<a href="{{ login_url }}" class="btn btn-primary">
{% trans "Log in" %}
</a>
</p>
</div>
</div>
</div>
{% endblock %}
63 changes: 35 additions & 28 deletions app/templates/accounts/password_reset_confirm.html
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,50 @@
{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block title %}Enter new password{% endblock %}
{% block title %}{% trans "Enter new password" %}{% endblock %}

{% block content %}

{% if validlink %}

<div class="container">
<p>Please enter your new password twice so we can verify you typed it in correctly.</p>

<form method="post">{% csrf_token %}
<fieldset class="module aligned">
<div class="form-row field-password1">
{{ form.new_password1.errors }}
<div class="flex-container">
<label for="id_new_password1">New password:</label>
{{ form.new_password1 }}
<div class="section mt-3 mb-3">
<div class="card text-center body-card">
<div class="user-account-body">
<p>{% trans "Please enter your new password twice so we can verify you typed it in correctly." %}</p>

<form method="post">{% csrf_token %}
<fieldset class="module aligned">
<div class="form-row field-password1">
{{ form.new_password1.errors }}
<div class="flex-container">
<label for="id_new_password1">{% trans "New password:" %}</label>
{{ form.new_password1 }}
</div>
</div>
</div>
<div class="form-row field-password2">
{{ form.new_password2.errors }}
<div class="flex-container">
<label for="id_new_password2">Confirm password:</label>
{{ form.new_password2 }}
<div class="form-row field-password2">
{{ form.new_password2.errors }}
<div class="flex-container">
<label for="id_new_password2">{% trans "Confirm password:" %}</label>
{{ form.new_password2 }}
</div>
</div>
</fieldset>
<br>
<br>
<div class="submit-row">
<input type="submit" class="btn btn-primary" value="{% trans 'Change my password' %}">
</div>
</fieldset>
<br>
<br>
<div class="submit-row">
<input type="submit" value="Change my password">
</div>
</form>
</form>

{% else %}
{% else %}

<p>"The password reset link was invalid, possibly because it has already been used. Please request a new
password reset.</p>
<p>{% blocktrans %}The password reset link was invalid, possibly because it has already been used. Please request a new
password reset.{% endblocktrans %}</p>

{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
16 changes: 11 additions & 5 deletions app/templates/accounts/password_reset_done.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block title %}Email Sent{% endblock %}

{% block content %}
<div class="container">
<p>We’ve emailed you instructions for setting your password, if an account exists with the email you entered.
You should receive them shortly.</p>
<div class="section mt-3 mb-3">
<div class="card text-center body-card">
<div class="user-account-body">
<p>{% blocktrans %}We’ve emailed you instructions for setting your password, if an account exists with the email you entered.
You should receive them shortly.{% endblocktrans %}</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>
<p>{% blocktrans %}If you don’t receive an email, please make sure you’ve entered the address you registered with, and check
your spam folder.{% endblocktrans %}</p>
</div>
</div>
</div>
{% endblock %}
44 changes: 25 additions & 19 deletions app/templates/accounts/password_reset_form.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block title %}Forgot Your Password?{% endblock %}
{% block title %}{% trans "Forgot Your Password?" %}{% endblock %}

{% block content %}
<div class="container">
<p>Forgotten your password? Enter your email address below, and we’ll email instructions for setting a new
one.</p>
<div class="section mt-3 mb-3">
<div class="card body-card">
<div class="user-account-body">
<p>{% blocktrans %}Forgotten your password? Enter your email address below, and we’ll email instructions for setting a new
one.{% endblocktrans %}</p>

<form method="post">
{% csrf_token %}
<fieldset class="module aligned">
<div class="form-row field-email">
{{ form.email.errors }}
<div class="flex-container">
<label for="id_email">Email address:</label>
{{ form.email }}
<form method="post">
{% csrf_token %}
<fieldset class="module aligned">
<div class="form-row field-email">
{{ form.email.errors }}
<div class="flex-container">
<label for="id_email">{% trans "Email address:" %}</label>
{{ form.email }}
</div>
</div>
</fieldset>
<div class="submit-row">
<br>
<br>
<input type="submit" class="btn btn-primary" value="{% trans 'Reset my password' %}">
</div>
</fieldset>
<div class="submit-row">
<br>
<br>
<input type="submit" value="Reset my password">
</div>
</form>
</form>
</div>
</div>
</div>
{% endblock %}
Loading

0 comments on commit ae4fc6c

Please sign in to comment.