Permettre aux utilisateurs de mettre à jour et de supprimer leur profil

Dans ce didacticiel, on utilisera les modèles et les vues de Django pour permettre aux utilisateurs de mettre à jour et de supprimer leur profil.

7 Juillet 2020 10:57
Thèmes: Authentification

On commence par un projet avec un modèle utilisateur personnalisé. Accédez à forms.py de votre application (dans notre cas, appelé userauth). Ajoutez ce qui suit:

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'})}

Si votre modèle est appelé différent ou a des champs différents, utilisez-les. Spécifiez uniquement les champs dont vous avez besoin. Le widget est un widget Django standard. Dans views.py, ajoutez:

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 et DeleteView sont des vues Django standard qui font exactement ce que leur nom dit. Le success_url de CustomUserDeleteView est de allauth. On doit maintenant connecter ces vues aux URLs et aux modèles. Ajoutez ce qui suit aux urlpatterns de urls.py de votre application:

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'),

Lors de l'appel de ces URLs, on devra fournir un paramètre entier pk, qui sera évidemment la clé primaire de l'utilisateur concerné. Il ne reste plus qu'à créer les modèles. On utilisera le même style qu'avant. La partie importante du modèle delete.html est:

<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>

Il suffit de soumettre le formulaire, Django s'occupe du reste. Pour update.html, la partie pertinente du modèle est (illustrée en partie):

<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>

Ajoutez également un lien en bas:

<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>

Le formulaire est soumis à l'URL nommée account_update avec l'argument request.user.pk, après quoi la vue prend le relais. Le codage enctype = "multipart / form-data" est ajouté pour permettre l'envoi d'une photo (ImageField).

Un endroit logique pour permettre aux utilisateurs de mettre à jour leur profil se trouve sur une page de profil. Dans un didacticiel précédent, on en a créé un, qui ne contenait que le prénom et le nom. Maintenant, on peut ajouter tous les autres champs du modèle, en ajoutant des lignes telles que les suivantes au modèle:

<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>

En bas, ajoutez:

{% block card-footer %}
    <a href="{% url 'account_update' request.user.pk %}">{% trans "Update your account" %}</a>
{% endblock %}

Si vous n'avez pas défini le bloc card-footer, utilisez simplement le lien dans un modèle approprié.

Il est temps de l'essayer. Démarrez le serveur, connectez-vous en tant qu'utilisateur; vous serez redirigé vers votre page de profil. Cliquez sur le lien en bas et mettez à jour certains champs. Vous pouvez supprimer votre compte en utilisant le lien en bas, ce qui vous ramène à la page d'inscription.

Si vous souhaitez en savoir plus sur la façon de connecter le compte de l'utilisateur à ses comptes sociaux tels que Google ou LinkedIn pour une connexion plus facile, lisez plus.

Commentez cet article (connectez-vous d'abord ou confirmez par nom et email ci-dessous)