In deze tutorial zullen we gebruik maken van Django's modelformulieren en views om gebruikers hun profiel te laten updaten en verwijderen.
We starten met een project met een custom user model. Ga naar forms.py
van je app (in ons geval userauth
genoemd). Voeg het volgende toe:
from django.forms import ModelForm
class CustomUserUpdateForm(ModelForm):
class Meta:
model = CustomUser
fields = ['first_name', 'last_name', 'display_name', 'date_of_birth', 'address1', 'address2', 'zip_code', 'city', 'country', 'mobile_phone', 'additional_information', 'photo',]
widgets = {'date_of_birth': forms.DateInput(attrs={'type':'date'})}
Als je model anders heet of andere velden heeft, gebruik deze dan. Geef alleen de velden op die je nodig hebt. De widget is een standaard Django-widget. Voeg in views.py
toe:
from django.views.generic.edit import UpdateView, DeleteView
from django.urls import reverse_lazy
from .models import CustomUser
from .forms import CustomUserUpdateForm
class CustomUserUpdateView(UpdateView):
model = CustomUser
form_class = CustomUserUpdateForm
class CustomUserDeleteView(DeleteView):
model = CustomUser
success_url = reverse_lazy('account_signup')
UpdateView
en DeleteView
zijn standaard Django-views die precies doen wat hun naam zegt. De succes_url
van CustomUserDeleteView
is van allauth. Nu moeten we deze weergaven koppelen aan urls en templates. Voeg het volgende toe aan de urlpatterns
van urls.py
van de app:
path('<int:pk>/update/', CustomUserUpdateView.as_view(template_name='account/update.html'), name='account_update'),
path('<int:pk>/delete/', CustomUserDeleteView.as_view(template_name='account/delete.html'), name='account_delete'),
Bij het aanroepen van deze urls zullen we een geheel getal pk
als parameter moeten opgeven, wat uiteraard de primaire sleutel van de betreffende gebruiker zal zijn. Het enige dat we moeten doen, is de templates maken. We gebruiken dezelfde styling als voorheen. Het belangrijkste deel van de delete.html
-template is:
<form method="post">
{% csrf_token %}
<p>{% trans "Are you sure you want to delete the account" %} {{ object.email }}?</p>
<button type="submit" class="btn btn-danger">{% trans "Delete" %}</button>
</form>
Het formulier indienen is voldoende, Django doet de rest. Voor update.html
is het relevante deel van de template (gedeeltelijk weergegeven):
<form method="post" action="{% url 'account_update' request.user.pk %}" enctype="multipart/form-data" class="needs-validation" novalidate>
{% csrf_token %}
<div class="form-group">
{% with field=form.display_name %}{% include "account/form_field.html" %}{% endwith %}
</div>
<div class="form-row">
<div class="form-group col-md-6">
{% with field=form.first_name %}{% include "account/form_field.html" %}{% endwith %}
</div>
<div class="form-group col-md-6">
{% with field=form.last_name %}{% include "account/form_field.html" %}{% endwith %}
</div>
</div>
<!-- add more fields here -->
<div class="form-group">
{% with field=form.photo %}{% include "account/form_field.html" %}{% endwith %}
</div>
<button type="submit" class="btn btn-outline-primary">{% trans "Update" %}</button>
</form>
Voeg ook een link onderaan toe:
<div class="text-center py-2">
<small>
<a href="{% url 'account_delete' request.user.pk %}" class="text-muted">{% trans "Delete your account" %}</a>
</small>
</div>
Het formulier wordt naar de benoemde url account_update
met argument request.user.pk
gestuurd, waarna de view het overneemt. De codering enctype = "multipart / form-data"
is toegevoegd om een foto (ImageField
) te kunnen verzenden.
Een logische plaats waar gebruikers hun profiel kunnen bijwerken, is op een profielpagina. In een vorige tutorial hebben we er een gemaakt, die alleen de voornaam en achternaam bevatte. Nu kunnen we alle andere velden van het model toevoegen door lijnen zoals de volgende aan de template toe te voegen:
<div class="row">
<div class="col border">
<small>{% trans "E-mail" %}:</small><br>
{{ request.user.email }}
</div>
<div class="col border">
<small>{% trans "Display name" %}:</small><br>
{{ request.user.display_name }}
</div>
</div>
Voeg onderaan toe:
{% block card-footer %}
<a href="{% url 'account_update' request.user.pk %}">{% trans "Update your account" %}</a>
{% endblock %}
Als je het blok card-footer
niet hebt gedefinieerd, gebruik dan de link in een relevante template.
Tijd om dit te proberen. Start de server op, log in als gebruiker; je wordt doorgestuurd naar je profielpagina. Klik op de link onderaan en werk enkele velden bij. Je kunt je account verwijderen via de link onderaan, die je terugbrengt naar de aanmeldingspagina.
Als je meer wilt weten over hoe je het account van de gebruiker kunt koppelen aan zijn / haar sociale accounts zoals Google of LinkedIn om gemakkelijker in te loggen, lees dan verder.
Reageer op dit artikel (log eerst in of bevestig hieronder met naam en email)