Improved signin form

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": _("[email protected]"),
+                "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": _("[email protected]"), "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()
 

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>