Login using built-in views

Article Content


Making simple login page using buil-in django views is the best and quickest approach exist.


Step 1 - Add urls



from django.contrib.auth import views as auth_views

urlpatterns = [
    ...
    path('login/', auth_views.LoginView.as_view(template_name='login.html'), name='login'),
    path('logout/', auth_views.LogoutView),
    ...
]
    

Step 2 - Set redirects in settings


LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/login/'
    

Step 3 - Make Template

Template name should be called login.html under one of templates catalog, you can change the path in urls file.
This is example template: (Used in example - base templating, bootstrap4 and django-widget-tweaks)



{% extends "base.html" %}
{% load staticfiles %}
{% load widget_tweaks %}

{% block content %}
        <div class="container">
            {% if form.errors %}
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-danger alert-dismissible fade show mt-3 mb-3 text-center" style="max-width: 500px; margin:auto;" role="alert">
                          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                          Your username and password didn't match. Please try again.
                        </div>
                    </div>
                </div>
            {% endif %}
            <div class="row">
                <div class="col-md-12 text-center">
                    <form class="justify-content-center" role="form" method="POST" action="{% url 'login' %}">
                    {% csrf_token %}
                        <h2>Please Login</h2>
                        <hr>
                        <div class="form-group" style="max-width: 500px; margin:auto;">
                            <label class="sr-only" for="email">{{ form.username.label_tag }}</label>
                            <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                                <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div>
                                {{ form.username | add_class:"form-control mb-3"}}
                            </div>
                        </div>
                        <div class="form-group" style="max-width: 500px; margin:auto;">
                            <label class="sr-only" for="password">{{ form.password.label_tag }}</label>
                            <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                                <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-key"></i></div>
                                {{ form.password | add_class:"form-control mb-3"}}
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success"><i class="fa fa-sign-in"></i> Login</button>
                        <input type="hidden" name="next" value="{{ next }}" />
                    </form>
                </div>
            </div>
    </div>

{% endblock %}
    

SubArticles


About

Added by dominik

Date: Aug. 7, 2018, 8:27 p.m.

Comments