Créer un écran de connexion Django

La dernière fois, j'ai senti que je ne pouvais pas enregistrer un nouveau personnel parce que je n'avais pas obtenu les informations utilisateur, alors je vais créer un écran de connexion.

En vous connectant en tant que membre du personnel, nous le créerons dans l'application du personnel. Assurez-vous de charger le modèle de connexion dans urls.py.

python:staff.urls.py

from django.urls import path, include
from .views import StaffCreate, loginfunc

urlpatterns = [
    path('login/', loginfunc, name='login'),
    path('create/', StaffCreate.as_view(), name = "staffcreate"),
]

Ajout de loginfunc. Ensuite, créez un funk de connexion dans Views.

python:staff.views.py

def loginfunc(request):
    if request.method == 'POST':
        user_name = request.POST['username']
        user_password = request.POST['password']
        user = authenticate(request, username=user_name, password=user_password)
        if user is not None:
                login(request, user)
                return redirect('staff:staffcreate')
        else:
                return render(request, 'staff/login.html', {'error':'Nom d'employé ou mot de passe incorrect'})
    return render(request, 'staff/login.html')

Est-ce que ça va? À partir de l'écran de connexion html, entrez le nom d'utilisateur et le mot de passe saisis dans la variable nom_utilisateur mot_de_passe_utilisateur et vérifiez s'il existe le même utilisateur. Si ce n'est pas qu'il n'y a pas d'utilisateurs (c'est difficile à comprendre (rires)), connectez-vous et appelez la page nommée staffcreate avec ursl dans l'application du personnel. Devrait aller comme ça

Si l'utilisateur n'est pas trouvé, revenez à l'écran de connexion, puis transmettez le message avec une erreur.

templates/staff/login.html

{% extends 'staff/base.html' %}
{% load static %}

{% block customcss %}
    <link rel='stylesheet' type='text/css' href="{% static 'style.css' %}">
{% endblock customcss %}

{% block header %}
{% endblock header %}

{% block content %}

<form class="form-signin" method="POST" action="">{% csrf_token %}
    <img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">Page de connexion</h1>
    {{ error }}
    <label for="text" class="sr-only">ID d'employé</label>
    <input type="text" name="username" placeholder="username" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" name="password" placeholder="Password" required>
    <button class="btn btn-lg btn-primary btn-block" type="submit">S'identifier</button>
    <p class="mt-5 mb-3 text-muted">&copy;GK</p>
</form>
{% endblock content %}

Je viens de faire quelques modifications du modèle bootstrap. Ajoutez des paramètres à settings.py afin de pouvoir appeler des fichiers statiques

config/settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Créer un dossier statique dans la même hiérarchie que les modèles Pour organiser, créez un dossier du personnel, créez-y loginstyle.css et écrivez css ici. Il s'agit également d'une copie du modèle d'amorçage, je ne peux donc pas l'écrire à partir de zéro.

static/staff/loginstylecss

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Je me demande si cela peut être fait. Enregistrez-le et démarrez le serveur.

Ce n'était pas bon staaff / login.html ??? Qu'est-ce que c'est

Beaucoup de ... vues fixes

python:staff/login.views.py

def loginfunc(request):
    if request.method == 'POST':
        user_name = request.POST['username']
        user_password = request.POST['password']
        user = authenticate(request, username=user_name, password=user_password)
        if user is not None:
                login(request, user)
                return redirect('staff:staffcreate')
        else:
                return render(request, 'staff/login.html', {'error':'Nom d'employé ou mot de passe incorrect'})
    return render(request, 'staff/login.html')

Je vais réessayer avec ça

Que se passe-t-il! !! !! !!

L'affichage est étrange ... N'est-il pas plus sûr de ne pas le toucher depuis bootstarp?

2 heures pour faire diverses corrections et citer des choses créées dans le passé ... Après tout, je ne sais toujours pas ... Le fichier CSS ne semble pas être appelé

L'état actuel ...

python:config.settings.py

STATIC_URL = '/staic/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

De plus, les URL

python:config.urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('staff/',include('staff.urls') ),
    path('admin/', admin.site.urls),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Je l'ai changé en, créé un dossier statique dans la même hiérarchie que les modèles et créé style.css directement en dessous.

static/style.css

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Comme ce n'est pas lu, la largeur ne change pas du tout ...

Laissons tomber un peu et commençons à faire la fonction de création