From 877a364913b9d9337754e18b5c356ecba10b5cad Mon Sep 17 00:00:00 2001
From: Chris Mann <chris@lesgtrandsvoisins.com>
Date: Sun, 17 Nov 2024 18:30:46 +0100
Subject: [PATCH] Improved signin form

---
 lesgrandsvoisins/forms.py                     | 49 +++++++++++++------
 lesgrandsvoisins/models.py                    |  0
 .../templates/registration_form.html          | 25 +++++++---
 3 files changed, 52 insertions(+), 22 deletions(-)
 delete mode 100644 lesgrandsvoisins/models.py

diff --git a/lesgrandsvoisins/forms.py b/lesgrandsvoisins/forms.py
index 38cf0909..5daef179 100644
--- a/lesgrandsvoisins/forms.py
+++ b/lesgrandsvoisins/forms.py
@@ -9,45 +9,62 @@
 # declare a new model with a name "GeeksModel"
 class signup(forms.Form):
     # fields of the model
-    username = forms.CharField(
-        widget=forms.TextInput(attrs={"placeholder": _("nomdutilisateur"), "class": "required"}),
-        validators=[validators.validate_slug],
-        label=_("Pseudo d'utilisateur"),
+    email = forms.EmailField(
+        widget=forms.EmailInput(
+            attrs={
+                "placeholder": _("nomdutilisateur@example.com"),
+                "class": "required",
+                "onChange": "javascript:id_username.value=this.value.replace(/@.*/,'')",
+            }
+        ),
+        label=_("Email"),
         required=True,
-        label_suffix=" * ",
     )
     firstName = forms.CharField(
-        widget=forms.TextInput(attrs={"placeholder": _("Prénom")}),
+        widget=forms.TextInput(
+            attrs={
+                "placeholder": _("Prénom"),
+                "onChange": "javascript:id_displayName.value=id_firstName.value + ' ' + id_lastName.value",
+            }
+        ),
         max_length=200,
         label=_("Prénom"),
         required=False,
-        label_suffix=" ",
     )
     lastName = forms.CharField(
-        widget=forms.TextInput(attrs={"placeholder": _("Nom de Famille"), "class": "required"}),
+        widget=forms.TextInput(
+            attrs={
+                "placeholder": _("Nom de Famille"),
+                "class": "required",
+                "onChange": "javascript:id_displayName.value=id_firstName.value + ' ' + id_lastName.value",
+            }
+        ),
         max_length=200,
         label=_("Nom de famille"),
         required=True,
-        label_suffix="* ",
     )
-    email = forms.EmailField(
-        widget=forms.EmailInput(attrs={"placeholder": _("nomdutilisateur@example.com"), "class": "required"}),
-        label=_("Email"),
+    username = forms.CharField(
+        widget=forms.TextInput(attrs={"placeholder": _("nomdutilisateur"), "class": "required"}),
+        validators=[validators.validate_slug],
+        label=_("identifiant"),
         required=True,
-        label_suffix=" * ",
     )
     telephoneNumber = forms.CharField(
         widget=forms.TextInput(attrs={"placeholder": _("+33 6 12 34 56 78")}),
         max_length=32,
         required=False,
         label=_("Numéro de téléphone"),
-        label_suffix="   ",
+    )
+    displayName = forms.CharField(
+        widget=forms.TextInput(attrs={"placeholder": _("Oumar Xhi")}),
+        max_length=200,
+        label=_("Nom usuel affiché"),
+        required=False,
     )
     password = forms.CharField(
-        widget=forms.PasswordInput(attrs={"class": "required"}),
+        widget=forms.PasswordInput(attrs={"class": "required", "onClick": "javascript:peekAtPass(this)"}),
         label=_("Mot de passe"),
         required=True,
-        label_suffix=" * ",
     )
     captcha = CaptchaField()
 
diff --git a/lesgrandsvoisins/models.py b/lesgrandsvoisins/models.py
deleted file mode 100644
index e69de29b..00000000
diff --git a/lesgrandsvoisins/templates/registration_form.html b/lesgrandsvoisins/templates/registration_form.html
index 90c7bc96..1c930342 100644
--- a/lesgrandsvoisins/templates/registration_form.html
+++ b/lesgrandsvoisins/templates/registration_form.html
@@ -5,11 +5,25 @@
 
 {% block inner_content %}
 <div style="max-width:30rem;margin:4rem auto;width:fit-content;text-align: center;">
-  {% block form_content %}
+  {% block form_content %}  
+  <style>
+    label::after {
+      content: '   ';
+    }
+    label[for=id_email]::after,
+    label[for=id_password]::after,
+    label[for=id_lastName]::after,
+    label[for=id_username]::after,
+    label[for=id_captcha_1]::after
+     {
+      content: ' * ';
+      color: red;
+    }
+  </style>
 <form action="" method="post" class="registration_form">
   <script>
-    function peekAtPass() {
-      var x = document.getElementById("id_password");
+    function peekAtPass(input) {
+      var x = input;
       if (x.type === "password") {
         x.type = "text";
       } else {
@@ -22,11 +36,10 @@
   {{ form.as_table }} 
     </table>
     <p><input type="submit" style="width: 100%;font-weight: bold;padding: 0.3rem;"/></p>
+    {% comment %}
     <p>[ <a href="#" onclick="peekAtPass();">voir le mot de passe</a> ]</p>
-
-    
+    {% endcomment %}
 </form> 
-
 {% endblock %}
 <hr/>
 <p style="margin: 1rem auto 0">Si vous avez déjà un compte, vous pouvez <a href="https://key.lesgrandsvoisins.com/realms/master/account/applications">vous authentifier ici</a>.</p>