Browse Source

add custom templating

master
Fr3deric 6 years ago
parent
commit
e3d42d0109
  1. 10
      README.md
  2. 75
      bam/templates/bam/base.html
  3. 5
      bam/templates/bam/logged_out.html
  4. 36
      bam/templates/bam/login.html
  5. 32
      bam/templates/bam/password_change.html
  6. 4
      bam/templates/bam/profile.html
  7. 8
      bam/templates/base.html
  8. 7
      bam/templates/profile.html
  9. 38
      bam/templates/registration/login.html
  10. 42
      bam/urls.py
  11. 2
      bam/views.py

10
README.md

@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
## Installation
Currently, this repository does only contain a plain `Django` app without a
Currently, this repository does only contain a plain _Django_ app without a
project. The app is not (yet) packaged. Therfore, the following steps are
necessary to initialize a development environment:
@ -35,6 +35,14 @@ ln -sr bam PROJECT_DIRECTORY/bam @@ -35,6 +35,14 @@ ln -sr bam PROJECT_DIRECTORY/bam
```
./manage.py createsuperuser
```
8. Download _Pure.css_ and extract it to `bam/static/`.
9. Start the development server:
```
./manage.py runserver
```
## ToDo

75
bam/templates/bam/base.html

@ -0,0 +1,75 @@ @@ -0,0 +1,75 @@
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static "bam/pure-min.css" %}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
padding: 0px;
text-align: center;
background-color: #fcfcfc;
}
#content {
margin-top: 2em;
}
#header {
background-image: url({% static "bam/header.svg" %});
padding: 1rem;
box-shadow: 2px 2px 2px gray;
}
#header h1 {
color: #ffffff;
font-weight: bold;
font-size: 3rem;
text-shadow: 0px 0px 20px black;
font-family: "Lucida Console", Monaco, monospace;
}
#menu {
background-color: black;
box-shadow: 2px 2px 2px gray;
min-height: 2em;
}
#menu a {
color: white;
font-weight: 600;
}
#menu a:hover {
color: black;
}
h1 {
font-weight: lighter;
text-shadow: 0px 0px 1px white;
}
</style>
{% block content-extra-head %}
{% endblock %}
</head>
<body>
<div id="header">
<h1>Blinkenbunt Account Manager</h1>
</div>
<div id="menu" class="pure-menu pure-menu-horizontal">
{% if user.is_authenticated %}
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="{% url "profile" %}" class="pure-menu-link">Profile</a></li>
<li class="pure-menu-item"><a href="{% url "password_change" %}" class="pure-menu-link">Password Change</a></li>
<li class="pure-menu-item"><a href="{% url "logout" %}" class="pure-menu-link">Logout</a></li>
</ul>
{% endif %}
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>

5
bam/templates/bam/logged_out.html

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
{% extends "bam/base.html" %}
{% block content %}
<p><h1>Logged out</h1>You have been logged out.</p>
<p><a href="{% url "login" %}">Log in again</a></p>
{% endblock %}

36
bam/templates/bam/login.html

@ -0,0 +1,36 @@ @@ -0,0 +1,36 @@
{% extends "bam/base.html" %}
{% block content %}
<h1>Login</h1>
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
<p>Your account doesn't have access to this page. To proceed,
please login with an account that has access.</p>
{% else %}
<p>Please login to see this page.</p>
{% endif %}
{% endif %}
<form method="post" action="{% url 'login' %}" class="pure-form pure-form-aligned">
{% csrf_token %}
<fieldset>
<div class="pure-control-group">
{{ form.username.label_tag }}
{{ form.username }}
</div>
<div class="pure-control-group">
{{ form.password.label_tag }}
{{ form.password }}
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary">Login</button>
<a class="pure-button" href="{% url 'password_reset' %}">Lost password?</a>
</div>
<input type="hidden" name="next" value="{{ next }}">
</fieldset>
</form>
{% endblock %}

32
bam/templates/bam/password_change.html

@ -0,0 +1,32 @@ @@ -0,0 +1,32 @@
{% extends "bam/base.html" %}
{% block content-extra-head %}
<style>
.form-error {
color: #e9322d;
}
</style>
{% endblock %}
{% block content %}
<p><h1>Password Change</h1></p>
<p>
<form method="post" action="{% url 'password_change' %}" class="pure-form pure-form-aligned">
{% csrf_token %}
<fieldset>
{% for field in form %}
<div class="pure-control-group">
{{ field.label_tag }}
{{ field }}
{% for error in field.errors %}
<span class="pure-form-message form-error">{{ error }}</span>
{% endfor %}
</div>
{% endfor %}
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary">Change password</button>
</div>
<input type="hidden" name="next" value="{{ next }}">
</fieldset>
</form>
</p>
{% endblock %}

4
bam/templates/bam/profile.html

@ -0,0 +1,4 @@ @@ -0,0 +1,4 @@
{% extends "bam/base.html" %}
{% block content %}
<h1>Welcome, {{ user.username }}!</h1>
{% endblock %}

8
bam/templates/base.html

@ -1,8 +0,0 @@ @@ -1,8 +0,0 @@
<html>
<head>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

7
bam/templates/profile.html

@ -1,7 +0,0 @@ @@ -1,7 +0,0 @@
{% extends "base.html" %}
{% block content %}
<a href="{% url 'password_change' %}">Change password</a>
{% endblock %}

38
bam/templates/registration/login.html

@ -1,38 +0,0 @@ @@ -1,38 +0,0 @@
{% extends "base.html" %}
{% block content %}
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
<p>Your account doesn't have access to this page. To proceed,
please login with an account that has access.</p>
{% else %}
<p>Please login to see this page.</p>
{% endif %}
{% endif %}
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<table>
<tr>
<td>{{ form.username.label_tag }}</td>
<td>{{ form.username }}</td>
</tr>
<tr>
<td>{{ form.password.label_tag }}</td>
<td>{{ form.password }}</td>
</tr>
</table>
<input type="submit" value="login">
<input type="hidden" name="next" value="{{ next }}">
</form>
{# Assumes you setup the password_reset view in your URLconf #}
<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
{% endblock %}

42
bam/urls.py

@ -3,9 +3,47 @@ from django.urls import path @@ -3,9 +3,47 @@ from django.urls import path
from django.urls import include
from django.views.generic.base import RedirectView
from bam.views import ProfileView
import django.contrib.auth.views as auth_views
urlpatterns = [
path('accounts/profile/', ProfileView.as_view(), name='profile'),
path('accounts/', include('django.contrib.auth.urls')),
path('accounts/profile/', RedirectView.as_view(pattern_name='profile')),
path('', RedirectView.as_view(pattern_name='profile')),
path('profile/', ProfileView.as_view(), name='profile'),
path('login/',
auth_views.LoginView.as_view(template_name='bam/login.html'),
name='login'),
path('logout/',
auth_views.LogoutView.as_view(template_name='bam/logged_out.html'),
name='logout'),
path('password_change/',
auth_views.PasswordChangeView.as_view(
template_name='bam/password_change.html'
),
name='password_change'),
path('password_change_done/',
auth_views.PasswordChangeDoneView.as_view(
template_name='bam/password_change_done.html'
),
name='password_change_done'),
path('password_reset/',
auth_views.PasswordResetView.as_view(
template_name='bam/password_reset.html'
),
name='password_reset'),
path('password_reset_done/',
auth_views.PasswordResetDoneView.as_view(
template_name='bam/password_reset_done.html'
),
name='password_reset_done'),
path('password_reset_confirm/',
auth_views.PasswordResetConfirmView.as_view(
template_name='bam/password_reset_confirm.html'
),
name='password_reset_confirm'),
path('password_reset_complete/',
auth_views.PasswordResetCompleteView.as_view(
template_name='bam/password_reset_complete.html'
),
name='password_reset_complete'),
]

2
bam/views.py

@ -2,4 +2,4 @@ from django.views.generic.base import TemplateView @@ -2,4 +2,4 @@ from django.views.generic.base import TemplateView
from django.contrib.auth.mixins import LoginRequiredMixin
class ProfileView(LoginRequiredMixin, TemplateView):
template_name = 'profile.html'
template_name = 'bam/profile.html'

Loading…
Cancel
Save