Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme toggle + pretty forms. #145

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Theme toggle + pretty forms. #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d8a46c9
Add theme toggle.
xa2099 Oct 26, 2024
6669f3f
Prettied up the forms.
xa2099 Oct 26, 2024
bdff5be
Removed URL.
xa2099 Oct 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions static/js/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// From https://albertoroura.com/building-a-theme-switcher-for-bootstrap/

function setTheme (mode = 'auto') {
const userMode = localStorage.getItem('bs-theme');
const sysMode = window.matchMedia('(prefers-color-scheme: light)').matches;
const useSystem = mode === 'system' || (!userMode && mode === 'auto');
const modeChosen = useSystem ? 'system' : mode === 'dark' || mode === 'light' ? mode : userMode;

if (useSystem) {
localStorage.removeItem('bs-theme');
} else {
localStorage.setItem('bs-theme', modeChosen);
}

document.documentElement.setAttribute('data-bs-theme', useSystem ? (sysMode ? 'light' : 'dark') : modeChosen);
document.querySelectorAll('.mode-switch .btn').forEach(e => e.classList.remove('text-body'));
document.getElementById(modeChosen).classList.add('text-body');
}

setTheme();
document.querySelectorAll('.mode-switch .btn').forEach(e => e.addEventListener('click', () => setTheme(e.id)));
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => setTheme());
60 changes: 33 additions & 27 deletions templates/_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-bs-theme="auto">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>{% block title %}DjangoX{% endblock title %}</title>
<title>DjangoX | {% block title %}{% endblock title %}</title>
<meta name="description" content="A framework for launching new Django projects quickly.">
<meta name="author" content="">
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">
Expand All @@ -15,6 +15,7 @@
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet">

<link rel="stylesheet" href="{% static 'css/base.css' %}">
{% endblock %}
Expand All @@ -23,7 +24,7 @@
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">DjangoX</a>
<a class="navbar-brand" href="{% url 'home' %}">Django<strong>X</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand All @@ -38,32 +39,37 @@
</li>
</ul>
{% if user.is_authenticated %}
<div class="mr-auto">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Settings
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">{{ user.email }}</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="{% url 'account_change_password' %}">Change password</a></li>
<li><a class="dropdown-item" href="{% url 'account_logout' %}">Sign out</a></li>
</ul>
</li>
</ul>
</div>
<div class="mr-auto">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">{{ user.email }}</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="{% url 'account_change_password' %}">Change password</a></li>
<li><a class="dropdown-item" href="{% url 'account_logout' %}">Sign out</a></li>
</ul>
</li>
</ul>
</div>
{% else %}
<div class="mr-auto">
<form class="form d-flex">
<a href="{% url 'account_login' %}" class="btn btn-outline-secondary">Log in</a>
<a href="{% url 'account_signup' %}" class="btn btn-primary ms-2">Sign up</a>
</form>
</div>
<div class="mr-auto">
<form class="form d-flex">
<a href="{% url 'account_login' %}" class="btn btn-sm btn-secondary opacity-75">LOGIN</a>
<a href="{% url 'account_signup' %}" class="btn btn-sm btn-success opacity-75 ms-2 me-3">SIGN UP</a>
</form>
</div>
{% endif %}
<div class="mode-switch me-3">
<button id="dark" class="btn p-0 m-1" title="Dark mode."><i class="bi bi-lightbulb-fill"></i></button>
<button id="light" class="btn p-0 m-1" title="Light mode."><i class="bi bi-lightbulb"></i></button>
<button id="system" class="btn p-0 m-1" title="System preferred mode."><i class="bi bi-sliders"></i></button>
</div>
</div>
</div>
</nav>
Expand Down
21 changes: 15 additions & 6 deletions templates/account/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,19 @@
{% block title %}Log in{% endblock %}

{% block content %}
<h2>Log in</h2>
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-success" type="submit">Log in</button>
</form>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-6">
<div class="card p-5 shadow-lg">
<h3 class="mb-5 text-center"><i class="bi bi-person-circle me-2 text"></i>Login</h3>
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-sm btn-primary mt-4 mb-2 w-100" type="submit" value="Login">
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
25 changes: 15 additions & 10 deletions templates/account/logout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,19 @@


{% block content %}
<h1>Sign Out</h1>

<p>Are you sure you want to sign out?</p>

<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-danger" type="submit">Sign Out</button>
</form>

<div class="container my-5"></div>
<div class="row justify-content-center">
<div class="col-6">
<div class="card p-5 shadow-lg text-center">
<h3 class="mb-5"><i class="bi bi-door-open-fill me-2"></i>Sign Out</h3>
<div>Are you sure you want to sign out?</div>
<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-sm btn-primary mt-5 w-100" type="submit" value="Sign Out">
</form>
</div>
</div>
</div>
</div>
{% endblock content %}
20 changes: 14 additions & 6 deletions templates/account/password_change.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,18 @@
{% block title %}Change Password{% endblock %}

{% block content %}
<h2>Change Password</h2>
<form method="post" action="{% url 'account_change_password' %}">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-success" type="submit">Change Password</button>
</form>
<div class="container my-5"></div>
<div class="row justify-content-center">
<div class="col-6">
<div class="card p-5 shadow-lg">
<h3 class="mb-5 text-center"><i class="bi bi-shield-lock-fill me-2"></i>Change Password</h3>
<form method="post" action="{% url 'account_change_password' %}">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-sm btn-primary mt-4 w-100" type="submit" value="Change Password">
</form>
</div>
</div>
</div>
</div>
{% endblock content %}
20 changes: 14 additions & 6 deletions templates/account/password_reset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,18 @@
{% block title %}Password Reset{% endblock %}

{% block content %}
<h2>Forgot your password? </h2>
<form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">
{% csrf_token %}
{{ form | crispy }}
<button class="btn btn-primary" type="submit">Reset Password</button>
</form>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-6">
<div class="card p-5 shadow-lg">
<h3 class="mb-5 text-center"><i class="bi bi-unlock-fill me-2"></i>Password Reset</h3>
<form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">
{% csrf_token %}
{{ form | crispy }}
<input class="btn btn-sm btn-primary mt-4 w-100" type="submit" value="Reset Password">
</form>
</div>
</div>
</div>
</div>
{% endblock content %}
13 changes: 11 additions & 2 deletions templates/account/password_reset_done.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@
{% block title %}Password Reset Done{% endblock %}

{% block content %}
<h1>Password Reset</h1>
<p>We have sent you an e-mail. Please contact us if you do not receive it in a few minutes.</p>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-6">
<div class="card p-5 shadow-lg">
<h3 class="mb-5 text-center"><i class="bi bi-unlock-fill me-2"></i>Password Reset</h3>
<div>We have sent you an e-mail. Please contact us if you do not receive it in a few minutes.</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
41 changes: 26 additions & 15 deletions templates/account/password_reset_from_key.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,30 @@
{% block title %}Change Password{% endblock title %}

{% block content %}
<h1>{% if token_fail %}Bad Token{% else %}Change Password{% endif %}</h1>

{% if token_fail %}
<p>The password reset link was invalid. Perhaps it has already been used? Please request a <a href="{% url 'account_reset_password' %}">new password reset</a>.</p>
{% else %}
{% if form %}
<form method="POST" action=".">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-primary" type="submit">Change Password</button>
</form>
{% else %}
<p>Your password is now changed.</p>
{% endif %}
{% endif %}
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-6">
<div class="card p-5 shadow-lg">
<h3 class="mb-5 text-center"><i class="bi bi-unlock-fill me-2"></i>Password Reset</h3>
{% if token_fail %}
<div>
The password reset link was invalid. Perhaps it has already been used?
Please request a <a href="{% url 'account_reset_password' %}">new password reset</a>.
</div>
{% else %}
{% if form %}
<form method="post" action=".">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-sm btn-primary mt-4 w-100" type="submit" value="Change Password">
</form>
{% else %}
<p>Your password is now changed.</p>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock content%}
12 changes: 10 additions & 2 deletions templates/account/password_reset_from_key_done.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@
{% block title %}Change Password Done{% endblock title %}

{% block content %}
<h1>Password Change Done</h1>
<p>Your password has been changed.</p>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-6">
<div class="card p-5 shadow-lg text-center">
<h3 class="mb-5"><i class="bi bi-unlock-fill me-2 text-success"></i>Password Reset</h3>
<div><i class="bi bi-check2-circle text-success"></i> Your password has been changed.</div>
</div>
</div>
</div>
</div>
{% endblock content %}
20 changes: 13 additions & 7 deletions templates/account/password_set.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,18 @@
{% block title %}Set Password{% endblock title %}

{% block content %}
<form method="POST" action="" class="password_set">
{% csrf_token %}
{{ form | crispy }}
<div class="form-actions">
<button class="btn btn-primary" type="submit" name="action" value="Set Password">Change
Password</button>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-6">
<div class="card p-5 shadow-lg">
<h3 class="mb-5 text-center"><i class="bi bi-shield-lock-fill me-2"></i>Set Password</h3>
<form method="post" action="" class="password_set">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-sm btn-primary mt-4 w-100" type="submit" value="Set Password">
</form>
</div>
</div>
</div>
</form>
</div>
{% endblock content %}
20 changes: 14 additions & 6 deletions templates/account/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,18 @@
{% block title %}Sign up{% endblock %}

{% block content %}
<h2>Sign up</h2>
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-success" type="submit">Sign up</button>
</form>
<div class="container my-5"></div>
<div class="row justify-content-center">
<div class="col-6">
<div class="card p-5 shadow-lg">
<h3 class="mb-5 text-center"><i class="bi bi-person-fill-add me-2"></i>Sign Up</h3>
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-sm btn-primary w-100" type="submit" value="Sign Up">
</form>
</div>
</div>
</div>
</div>
{% endblock content %}
2 changes: 1 addition & 1 deletion templates/pages/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

{% block content %}
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<img src="{% static 'images/logo.png' %}" class="img-fluid" alt="DjangoX logo"/>
<img src="{% static 'images/logo.png' %}" class="img-fluid mt-5 mb-3" alt="DjangoX logo"/>
<p class="lead">A Django starter project with batteries.</p>
</div>
{% endblock content %}