Skip to content

Commit

Permalink
Replace Django's account templates with our own style templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@RoBizMan
RoBizMan committed Nov 11, 2024
1 parent 146f10d commit ce34bc8
Show file tree
Hide file tree
Showing 8 changed files with 379 additions and 153 deletions.
Binary file modified db.sqlite3
View file
Binary file not shown.
20 changes: 20 additions & 0 deletions static/css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,26 @@ main {
margin: 1.5rem 0;
}

/* Override Django's default button */
button.btn-custom-color {
background-color: #3C0008;
color: #F9F6EE;
border: 1px solid #3C0008;
padding: 0.8rem;
font-size: 1rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
transition: background-color 0.3s ease;
}

button.btn-custom-color:hover {
background-color: #F9F6EE;
color: #3C0008;
border: 1px solid #3C0008;
}


/* Media query for higher-res smartphone and larger screens (576px and up) */
@media screen and (min-width: 576px) {

Expand Down
138 changes: 90 additions & 48 deletions templates/account/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,103 @@
{% extends "account/base_entrance.html" %}
{% load i18n %}
{% load allauth account %}

{% block head_title %}
{% trans "Sign In" %}
{% trans "Sign In" %}
{% endblock head_title %}

{% block content %}
{% element h1 %}
{% trans "Sign In" %}
{% endelement %}
{% if not SOCIALACCOUNT_ONLY %}
{% setvar link %}
<a href="{{ signup_url }}">
{% endsetvar %}
{% setvar end_link %}
</a>
{% endsetvar %}
{% element p %}
{% blocktranslate %}If you have not created an account yet, then please {{ link }}sign up{{ end_link }} first.{% endblocktranslate %}
{% endelement %}
{% url 'account_login' as login_url %}
{% element form form=form method="post" action=login_url tags="entrance,login" %}
{% slot body %}
<div class="container d-flex justify-content-center align-items-center min-vh-100 mt-3 mb-3">
<div class="card p-4 shadow-lg min-vw-20 max-vw-40">
<div class="card-body">
<!-- Heading -->
<h2 class="card-title text-center mb-4">
{% trans "Sign In" %}
</h2>

<!-- Sign-up prompt -->
{% if not SOCIALACCOUNT_ONLY %}
<p class="text-center">
{% blocktrans with signup_url=signup_url %}
If you have not created an account yet, please <a href="{{ signup_url }}"
class="text-decoration-underline">sign up</a> first.
{% endblocktrans %}
</p>
{% endif %}

<!-- Login Form -->
<form method="post" action="{% url 'account_login' %}" class="mt-3">
{% csrf_token %}
{% element fields form=form unlabeled=True %}
{% endelement %}
{{ redirect_field }}
{% endslot %}
{% slot actions %}
{% element button type="submit" tags="prominent,login" %}
{% trans "Sign In" %}
{% endelement %}
{% endslot %}
{% endelement %}
{% endif %}
{% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
{% element hr %}
{% endelement %}
{% element button_group vertical=True %}

<!-- Username Field -->
<div class="mb-3">
<label for="id_login" class="form-label">{% trans "Login:" %}</label>
<input type="text" name="login" id="id_login" class="form-control"
placeholder="{% trans 'Enter your username or login' %}" required>
</div>

<!-- Password Field -->
<div class="mb-3">
<label for="id_password" class="form-label">{% trans "Password:" %}</label>
<input type="password" name="password" id="id_password" class="form-control"
placeholder="{% trans 'Enter your password' %}" required>
</div>

<!-- Forgot Password -->
<div class="text-start mb-1">
<a href="{% url 'account_reset_password' %}" class="text-decoration-underline text-primary">
{% trans "Forgot your password?" %}
</a>
</div>

<!-- Remember Me -->
<div class="form-check mt-4 mb-3">
<label for="id_remember" class="form-check-label">
{% trans "Remember Me" %}
</label>
<input type="checkbox" name="remember" id="id_remember" class="form-check-input">
</div>

<!-- Submit Button -->
<div class="d-grid gap-2"></div>
<button type="submit" class="btn btn-custom-color w-100">
{% trans 'Sign In' %}
</button>
</div>
</form>

<!-- Alternative Sign-in Methods -->
{% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
<hr class="my-4">
<div class="d-grid gap-2">
{% if PASSKEY_LOGIN_ENABLED %}
{% element button type="submit" form="mfa_login" id="passkey_login" tags="prominent,login,outline,primary" %}
{% trans "Sign in with a passkey" %}
{% endelement %}
<button type="button" form="mfa_login" id="passkey_login" class="btn btn-outline-primary">
<i class="fa-solid fa-key me-2"></i>{% trans "Sign in with a passkey" %}
</button>
{% endif %}
{% if LOGIN_BY_CODE_ENABLED %}
{% element button href=request_login_code_url tags="prominent,login,outline,primary" %}
{% trans "Mail me a sign-in code" %}
{% endelement %}
<a href="{{ request_login_code_url }}" class="btn btn-outline-primary">
<i class="fa-solid fa-envelope me-2"></i>{% trans "Mail me a sign-in code" %}
</a>
{% endif %}
{% endelement %}
{% endif %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
</div>
{% endif %}

<!-- Social Login Section -->
{% if SOCIALACCOUNT_ENABLED %}
<hr class="my-4">
<div class="d-grid gap-2">
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
</div>
{% endif %}
</div>
</div>
</div>
{% endblock content %}

{% block extra_body %}
{{ block.super }}
{% if PASSKEY_LOGIN_ENABLED %}
{% include "mfa/webauthn/snippets/login_script.html" with button_id="passkey_login" %}
{% endif %}
{% endblock %}
{{ block.super }}
{% if PASSKEY_LOGIN_ENABLED %}
{% include "mfa/webauthn/snippets/login_script.html" with button_id="passkey_login" %}
{% endif %}
{% endblock %}
54 changes: 33 additions & 21 deletions templates/account/logout.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,37 @@
{% extends "account/base_manage.html" %}
{% extends "account/base_entrance.html" %}
{% load allauth i18n %}
{% block head_title %}
{% trans "Sign Out" %}
{% trans "Sign Out" %}
{% endblock head_title %}

{% block content %}
{% element h1 %}
{% trans "Sign Out" %}
{% endelement %}
{% element p %}
{% trans 'Are you sure you want to sign out?' %}
{% endelement %}
{% url 'account_logout' as action_url %}
{% element form method="post" action=action_url no_visible_fields=True %}
{% slot body %}
{% csrf_token %}
{{ redirect_field }}
{% endslot %}
{% slot actions %}
{% element button type="submit" %}
{% trans 'Sign Out' %}
{% endelement %}
{% endslot %}
{% endelement %}
{% endblock content %}
<div class="container d-flex justify-content-center align-items-center min-vh-100 mt-3 mb-3">
<div class="card p-4 shadow-lg min-vw-20 max-vw-40">
<div class="card-body">
<!-- Heading -->
<h2 class="card-title text-center mb-4">
{% trans "Sign Out" %}
</h2>

<!-- Confirmation Message -->
<p class="text-center">
{% trans 'Are you sure you want to sign out?' %}
</p>

<!-- Logout Form -->
{% url 'account_logout' as action_url %}
<form method="post" action="{{ action_url }}" class="mt-3">
{% csrf_token %}
{{ redirect_field }}

<!-- Submit Button -->
<div class="d-grid gap-2">
<button type="submit" class="btn btn-custom-color w-100">
{% trans 'Sign Out' %}
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}
84 changes: 57 additions & 27 deletions templates/account/password_reset.html
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,62 @@
{% extends "account/base_entrance.html" %}
{% load i18n allauth account %}

{% block head_title %}
{% trans "Password Reset" %}
{% trans "Password Reset" %}
{% endblock head_title %}

{% block content %}
{% element h1 %}
{% trans "Password Reset" %}
{% endelement %}
{% if user.is_authenticated %}
{% include "account/snippets/already_logged_in.html" %}
{% endif %}
{% element p %}
{% trans "Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it." %}
{% endelement %}
{% url 'account_reset_password' as reset_url %}
{% element form form=form method="post" action=reset_url %}
{% slot body %}
{% csrf_token %}
{% element fields form=form %}
{% endelement %}
{% endslot %}
{% slot actions %}
{% element button type="submit" %}
{% trans 'Reset My Password' %}
{% endelement %}
{% endslot %}
{% endelement %}
{% element p %}
{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}
{% endelement %}
{% endblock content %}
<div class="container d-flex justify-content-center align-items-center min-vh-100 mt-3 mb-3">
<div class="card p-4 shadow-lg min-vw-20 max-vw-40">
<div class="card-body">
<!-- Heading -->
<h2 class="card-title text-center mb-4">
{% trans "Password Reset" %}
</h2>

<!-- If the user is already logged in -->
{% if user.is_authenticated %}
{% include "account/snippets/already_logged_in.html" %}
{% endif %}

<!-- Information Message -->
<p class="text-center">
{% trans "Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it." %}
</p>

<!-- Password Reset Form -->
{% url 'account_reset_password' as reset_url %}
<form method="post" action="{{ reset_url }}" class="mt-3">
{% csrf_token %}

<!-- Email Field -->
<div class="mb-3">
<label for="id_email" class="form-label">{% trans "Email Address" %}</label>
<input type="email" name="email" id="id_email" class="form-control"
placeholder="{% trans 'Enter your email address' %}" required>
{% if form.email.errors %}
<div class="text-danger">
{% for error in form.email.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>

<!-- Submit Button -->
<div class="d-grid gap-2">
<button type="submit" class="btn btn-custom-color w-100">
{% trans 'Reset My Password' %}
</button>
</div>
</form>

<!-- Additional Information -->
<p class="text-center mt-4">
{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}
</p>

</div>
</div>
</div>
{% endblock content %}
39 changes: 28 additions & 11 deletions templates/account/password_reset_done.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,34 @@
{% load i18n %}
{% load allauth %}
{% load account %}

{% block head_title %}
{% trans "Password Reset" %}
{% trans "Password Reset" %}
{% endblock head_title %}

{% block content %}
{% element h1 %}
{% trans "Password Reset" %}
{% endelement %}
{% if user.is_authenticated %}
{% include "account/snippets/already_logged_in.html" %}
{% endif %}
{% element p %}
{% blocktrans %}We have sent you an email. If you have not received it please check your spam folder. Otherwise contact us if you do not receive it in a few minutes.{% endblocktrans %}
{% endelement %}
{% endblock content %}
<div class="container d-flex justify-content-center align-items-center min-vh-100 mt-3 mb-3">
<div class="card p-4 shadow-lg min-vw-20 max-vw-40">
<div class="card-body">
<!-- Heading -->
<h2 class="card-title text-center mb-4">
{% trans "Password Reset" %}
</h2>

<!-- If the user is already logged in -->
{% if user.is_authenticated %}
{% include "account/snippets/already_logged_in.html" %}
{% endif %}

<!-- Information Message -->
<p class="text-center">
{% blocktrans %}
We have sent you an email. If you have not received it please check your spam folder. Otherwise contact
us if you do not receive it in a few minutes.
{% endblocktrans %}
</p>

</div>
</div>
</div>
{% endblock content %}
Loading

0 comments on commit ce34bc8

Please sign in to comment.