Ajout fonction pour réinitialisation du mot de passe

clavierPhono/urls.py

@@ -31,6 +31,12 @@ urlpatterns = [
     path('logout/', auth_views.LogoutView.as_view(template_name="users/logout.html"), name='logout'),
     path('profile/', user_views.profile, name='profile'),
     path('profile/delete', user_views.delete_account, name='delete_account'),
+
+    path('reset_password/', auth_views.PasswordResetView.as_view(template_name="registration/password_reset_form.html"), name='password_reset'),
+    path('reset_password/done', auth_views.PasswordResetDoneView.as_view(template_name="registration/password_reset_done.html"), name='password_reset_done'),
+    path('reset/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(template_name="registration/password_reset_confirm.html"), name='password_reset_confirm'),
+    path('reset_password_complete/', auth_views.PasswordResetCompleteView.as_view(template_name="registration/password_reset_complete.html"), name='password_reset_complete'),
+    
     path('player/createSerie/', user_views.createSerie, name='createSerie'),
     path('player/uploadAudio/', user_views.uploadAudio, name='uploadAudio'),
     path('player/uploadImage/', user_views.uploadImage, name='uploadImage'),

static/styles/main.css

@@ -62,16 +62,17 @@ h1 {
     margin-left: 20px;
 }
 
-.registerBlock {
+.whiteBlock {
     background-color: rgb(252, 235, 205); 
     width: 600px;
     padding:10px; 
     margin: auto;
     margin-top: 30px;
     text-align: left;
+    border-radius: 5px;
 }
 @media only screen and (max-width: 700px) {
-    .registerBlock {
+    .whiteBlock {
         width: 90%;
     }
 }

templates/base.html

@@ -59,12 +59,13 @@
                                 {% endif %}
                             {% endfor %}
                             <a class="dropdown-item" href="{% url 'profile' %}">Page personnelle</a>
+                            <a class="dropdown-item" href="{% url 'password_reset' %}">Changer mon mot de passe</a>
                             <div class="dropdown-divider"></div>
-                            <a class="dropdown-item" href="{% url 'logout' %}">Se déconnecter</a>
+                            <a class="dropdown-item" href="{% url 'logout' %}">Déconnexion</a>
                         </ul>
                     </div>
                 {% else %}
-                    <a class="nav-item nav-link nav-login p-2" href="{% url 'login' %}?next={{request.path}}">Se connecter</a>
+                    <a class="nav-item nav-link nav-login p-2" href="{% url 'login' %}?next={{request.path}}">Connexion</a>
                 {% endif %}
                 
             </div>

templates/playerHome.html

@@ -5,6 +5,8 @@
     <link rel="stylesheet" type="text/css" href="{% static 'styles/player.css'%}">
 {% endblock %}
 
+{% block title %}PhonoPlayer{% endblock %}
+
 {% block content %}
     <div class="mainContent">
         <div class="homeMainContent">

templates/playerPhono.html

@@ -6,6 +6,8 @@
     <link rel="stylesheet" type="text/css" href="{% static 'styles/player.css'%}">
 {% endblock %}
 
+{% block title %}PhonoPlayer{% endblock %}
+
 {% block content %}
     <!-- RÉCUPÉRATION DE LA SÉRIE À CHARGER -->
     <script type="text/javascript">

templates/registration/password_reset_complete.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Réinitialisation du mot de passe{% endblock %}
+
+{% block content %}
+<div class="content-section whiteBlock">
+    <h1>Mot de passe modifié !</h1>
+    <p>Votre mot de passe a bien été modifié. Vous pouvez <a href="{% url 'login' %}">vous connecter</a>.</p>
+</div>
+{% endblock %}
+
+{% block javascript %}
+    <script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
+{% endblock javascript %}
\ No newline at end of file

templates/registration/password_reset_confirm.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Réinitialisation du mot de passe{% endblock %}
+
+{% block content %}
+{% if validlink %}
+<div class="content-section whiteBlock">
+    <h1>Tapez un nouveau mot de passe</h1>
+    <form method="POST">
+        {% csrf_token %}
+        {{ form.as_p }}
+        <center><button class="btn btn-outline-info" type="submit">Enregistrer</button></center>
+    </form>
+</div>
+
+{% else %}
+
+<p>Le lien de réinitialisation n'est pas valide, probablement parce qu'il a déjà servi. <a href="{% url 'password_reset' %}">Réinitialiser mon mot de passe</a></p>
+
+{% endif %}
+{% endblock %}
+
+{% block javascript %}
+    <script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
+{% endblock javascript %}
\ No newline at end of file

templates/registration/password_reset_done.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Réinitialisation du mot de passe{% endblock %}
+
+{% block content %}
+    <div class="content-section whiteBlock">
+        <h1>Message envoyé !</h1>
+        <p>Un message vient d'être envoyé à votre adresse.</p>
+        <p>Si vous avez toujours des difficultés à vous connectez, <a href="mailto:sylvain.coulange@univ-grenoble-alpes.fr">contactez le développeur</a>.</p>
+    </div>
+{% endblock %}
+
+{% block javascript %}
+    <script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
+{% endblock javascript %}
\ No newline at end of file

templates/registration/password_reset_email.html

+{% autoescape off %}
+Bonjour {{ user.get_username }},
+
+Vous avez fait une demande de réinitialisation de mot de passe pour votre compte PhonoGraphe.
+Pour le réinitialiser, cliquez sur le lien suivant :
+
+{{ protocol }}://{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
+
+(si ça ne fonctionne pas en cliquant sur le lien, copiez-collez-le directement dans votre navigateur)
+
+Bien à vous,
+L'équipe ALeM
+{% endautoescape %}
\ No newline at end of file

templates/registration/password_reset_form.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Réinitialisation du mot de passe{% endblock %}
+
+{% block content %}
+    <div class="content-section whiteBlock">
+        <h1>Mot de passe oublié ?</h1>
+        <p>Entrez l'adresse email de votre compte et nous vous enverrons un lien pour le réinitialiser.</p>
+
+        <form method="POST">
+            {% csrf_token %}
+            {{ form.as_p }}
+            <center><button class="btn btn-outline-info" type="submit">Envoyer</button></center>
+        </form>
+    </div>
+{% endblock %}
+
+
+{% block javascript %}
+    <script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
+{% endblock javascript %}
\ No newline at end of file

templates/registration/password_reset_subject.txt

+PhonoGraphe - Réinitialisation de mot de passe
\ No newline at end of file

templates/users/login.html

 {% extends "base.html" %}
+{% load static %}
 {% load crispy_forms_tags %}
-{% block content %}
 
-    <div class="content-section registerBlock">
+{% block title %}Connexion{% endblock %}
+
+{% block content %}
+    <div class="content-section whiteBlock">
         <form method="POST">
             {% csrf_token %}
             <fieldset class="form-group">
                 <legend class="border-bottom mb-4">Se connecter</legend>
                 {{ form|crispy }}
             </fieldset>
-            <div class="form-group">
+            <div class="form-group mt-3">
                 <center><button class="btn btn-outline-info" type="submit">Connexion</button></center>
             </div>
 
         </form>
 
         <div class="border-top pt-3">
-            <small class="text-muted">Vous n'avez pas encore de compte ? <a href="{% url 'register' %}" class="ml-2">S'enregistrer</a></small>
+            <p><small class="text-muted">Mot de passe oublié ? <a href="{% url 'password_reset' %}" class="ml-2">Réinitialiser mon mot de passe</a></small></p>
+            <p><small class="text-muted">Vous n'avez pas encore de compte ? <a href="{% url 'register' %}" class="ml-2">S'enregistrer</a></small></p>
         </div>
+
+        <script>
+            window.onload = () => {
+                var divpw = document.getElementById('div_id_password').lastElementChild
+                divpw.classList.add('d-flex')
+                
+                var eyeBtn = document.createElement('div')
+                eyeBtn.id = "eyeBtn"
+                eyeBtn.style = "cursor: pointer; margin: 3px 15px; padding: 0px 5px;"
+                eyeBtn.style.border = "solid 1px transparent"
+                eyeBtn.style.borderRadius = "5px"
+                eyeBtn.title = "Afficher le mot de passe"
+                eyeBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="blue" class="bi bi-eye" viewBox="0 0 16 16"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/></svg>'
+                eyeBtn.onclick = () => {
+                    if (document.getElementById('id_password').type == "password") {
+                        document.getElementById('id_password').type = "text"
+                        document.getElementById('eyeBtn').style.border = "solid 1px blue"
+                        document.getElementById('eyeBtn').title = "Masquer le mot de passe"
+                    } else {
+                        document.getElementById('id_password').type = "password"
+                        document.getElementById('eyeBtn').style.border = "solid 1px transparent"
+                        document.getElementById('eyeBtn').title = "Afficher le mot de passe"
+                    }
+                }
+                divpw.appendChild(eyeBtn)
+            }
+        </script>
+
     </div>
 
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
+
+{% block javascript %}
+    <script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
+{% endblock javascript %}
\ No newline at end of file

templates/users/profile.html

 {% extends "base.html" %}
 {% load crispy_forms_tags %}
 {% load static %}
-{% block content %}
 
+{% block title %}Mon compte{% endblock %}
+
+{% block content %}
     <div class="content-section" style="text-align: left; max-width: 800px; margin:auto">
         <div class="d-flex flex-row-reverse">
             <form method="POST" action="{% url 'delete_account' %}">

templates/users/register.html

 {% extends "base.html" %}
+{% load static %}
 {% load crispy_forms_tags %}
+
+{% block title %}Créer un compte{% endblock %}
+
 {% block content %}
 
     <div class="container content-section registerBlock">
@@ -20,4 +24,8 @@
         </div>
     </div>
 
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
+
+{% block javascript %}
+    <script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
+{% endblock javascript %}
\ No newline at end of file

templates/users/userInfo.html

@@ -7,6 +7,9 @@
     <link rel="stylesheet" type="text/css" href="{% static 'styles/main.css'%}">
 {% endblock %}
 
+{% block title %}Infos {{ data.user.username }}{% endblock %}
+
+
 {% block content %}
 <script type="text/javascript">
     var username = "{{ data.user.username | escapejs }}"

templates/users/usersPage.html

@@ -6,6 +6,8 @@
     <link rel="stylesheet" type="text/css" href="{% static 'styles/main.css'%}">
 {% endblock %}
 
+{% block title %}Utilisateurs{% endblock %}
+
 {% block content %}
     <div class="container text-start">
        <h1>Utilisateurs</h1>