Nutzung von Standardfunktionen des auth packages für Anmeldung und Registrierung

Anpassung der Pfade in xplanung_light/urls.py

from django.contrib.auth import views as auth_views
#...
path("accounts/login/", auth_views.LoginView.as_view(next_page="home"), name="login"),
path("accounts/logout/", auth_views.LogoutView.as_view(next_page="home"), name='logout'),
# https://dev.to/donesrom/how-to-set-up-django-built-in-registration-in-2023-41hg
path("register/", views.register, name = "register"),
#...

HTML-Templates

Erstellen eines Verzeichnisses für Registrierungstemplates

Erstellung des Verzeichnisses für registration - pwd: komserv2/xplanung_light/templates/

mkdir xplanung_light/templates/registration

Templates

xplanung_light/templates/registration/login.html

{% extends "../xplanung_light/layout.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="Einloggen">
<input type="hidden" name="next" value="{{ next }}">
</form>
<p>Noch keinen Zugang? <a href="{% url 'register' %}" class="navbar-item">Hier Registrieren</a></p>
{# Assumes you set up the password_reset view in your URLconf #}
{# <p><a href="{% url 'password_reset' %}">Lost password?</a></p> #}
{% endblock %}

xplanung_light/templates/registration/register.html

{% extends "../xplanung_light/layout.html" %}
{% block content %}
<h2>Registrieren</h2>
    <form method="post">
        {% csrf_token %}
        {{form.as_p}}
        <button type="submit">Registrieren</button>
    </form>
{% endblock %}

Formular für Registrierung

xplanung_light/forms.py

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

class RegistrationForm(UserCreationForm):

    email = forms.EmailField(required=True)

    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

Anpassung der views

xplanung_light/views.py

#...
from xplanung_light.forms import RegistrationForm
from django.shortcuts import redirect
from django.contrib.auth import login
#...
# https://dev.to/balt1794/registration-page-using-usercreationform-django-part-1-21j7
def register(request):
    if request.method != 'POST':
        form = RegistrationForm()
    else:
        form = RegistrationForm(request.POST)
        if form.is_valid():
            form.save()
            user = form.save()
            login(request, user)
            return redirect('home')
        else:
            print('form is invalid')
    context = {'form': form}
    return render(request, 'registration/register.html', context)

Stylesheets optimieren

xplanung_light/static/xplanung_light/site.css

/* ... */
.navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Was wir bisher haben

  1. Nutzung von Templates

  2. Einfache function based views

  3. Anwendnung von css

  4. Formulare

  5. Registrierung

  6. Authentifizierung

Dokumentation auf xplanung_light/templates/xplanung_light/home.html

<!-- ... -->
<h4>Funktionen</h4>
<ul>
    <li>Homepage</li>
    <li>Authentifizierung gegen Datenbank</li>
    <li>Registrierung</li>
    <li>Admin-Backend</li>
    <li>...</li>
</ul>
<!-- ... -->

Aussehen nach Anmeldung des admin im Frontend

http://127.0.0.1:8000/

Standardfunktionen