From 811f6e686e450271397b9925c1fb0de750298034 Mon Sep 17 00:00:00 2001
From: Siwa12100 <jean.marcillac12@gmail.com>
Date: Sun, 14 Jan 2024 19:24:45 +0100
Subject: [PATCH] test pour rendre le mdp invisible...

---
 .../FormulaireConnexion.razor                 | 15 ++++++++++----
 .../FormulaireConnexion.razor.cs              | 19 ++++++++++++++++++
 .../authentification/FormulaireConnexion.css  | 20 ++++++++++++++-----
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/VeraxShield/VeraxShield/composants/authentification/FormulaireConnexion.razor b/VeraxShield/VeraxShield/composants/authentification/FormulaireConnexion.razor
index bc6a6b0..666d672 100644
--- a/VeraxShield/VeraxShield/composants/authentification/FormulaireConnexion.razor
+++ b/VeraxShield/VeraxShield/composants/authentification/FormulaireConnexion.razor
@@ -32,11 +32,18 @@
                 <Field Horizontal>
                     <FieldLabel ColumnSize="ColumnSize.Is2">Mot de passe</FieldLabel>
                     <FieldBody ColumnSize="ColumnSize.Is10">
-                        <TextEdit Placeholder="Entrez votre mot de passe" @bind-Text="@Requete.MotDePasse">
-                            <Feedback>
-                                <ValidationError />
-                            </Feedback>
+                        <TextEdit Role="TextRole.Password" autocomplete="new-password" 
+                                type="@GetPasswordInputType()"
+                                Placeholder="Entrez votre pseudo" 
+                                @bind-Text="@Requete.MotDePasse">
+
+                            <Append>
+                                <Button Class="btn-append" Clicked="@TogglePasswordVisibility">
+                                    <Icon IconName="@GetEyeIcon()" />
+                                </Button>
+                            </Append>
                         </TextEdit>
+
                     </FieldBody>
                 </Field>
             </Validation>
diff --git a/VeraxShield/VeraxShield/composants/authentification/FormulaireConnexion.razor.cs b/VeraxShield/VeraxShield/composants/authentification/FormulaireConnexion.razor.cs
index 9f16970..ae56b29 100644
--- a/VeraxShield/VeraxShield/composants/authentification/FormulaireConnexion.razor.cs
+++ b/VeraxShield/VeraxShield/composants/authentification/FormulaireConnexion.razor.cs
@@ -20,6 +20,10 @@ namespace VeraxShield.composants.authentification
 
         public String Erreur {get; set; }
 
+        private bool showPassword = false;
+        private string eyeIcon = "fas fa-eye";
+        private string eyeSlashIcon = "fas fa-eye-slash";
+
         protected override async Task OnInitializedAsync()
         {
             this.Requete = new RequeteConnexion();
@@ -40,5 +44,20 @@ namespace VeraxShield.composants.authentification
                 }
             }           
         }
+
+        private void TogglePasswordVisibility()
+        {
+            showPassword = !showPassword;
+        }
+
+        private string GetPasswordInputType()
+        {
+            return showPassword ? "text" : "password";
+        }
+
+        private string GetEyeIcon()
+        {
+            return showPassword ? eyeSlashIcon : eyeIcon;
+        }
     }  
 }
\ No newline at end of file
diff --git a/VeraxShield/VeraxShield/wwwroot/css/composants/authentification/FormulaireConnexion.css b/VeraxShield/VeraxShield/wwwroot/css/composants/authentification/FormulaireConnexion.css
index e206d57..8edb2fd 100644
--- a/VeraxShield/VeraxShield/wwwroot/css/composants/authentification/FormulaireConnexion.css
+++ b/VeraxShield/VeraxShield/wwwroot/css/composants/authentification/FormulaireConnexion.css
@@ -2,32 +2,34 @@
     background-color: white;
     padding: 20px;
     border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .field-container {
     margin-bottom: 15px;
+    position: relative; /* Ajoutez cette ligne pour positionner le bouton correctement */
 }
 
 .textedit-container {
     border-radius: 20px;
     border: 1px solid black;
-    width: 80%; /* Ajuste la largeur des champs de saisie */
+    width: 80%;
+    position: relative; /* Ajoutez cette ligne pour positionner le bouton correctement */
 }
 
 .btn-container {
     display: flex;
     justify-content: center;
-    gap: 10px; /* Ajoute de l'espace entre les boutons */
+    gap: 10px;
 }
 
 .btn-se-connecter,
 .btn-s-inscrire {
-    width: 150px; /* Ajuste la largeur des boutons */
+    width: 150px;
 }
 
 .title-spacing {
-    margin-bottom: 20px; /* Ajoute plus d'espace entre le titre et les éléments suivants */
+    margin-bottom: 20px;
 }
 
 .btn-se-connecter {
@@ -39,3 +41,11 @@
     background-color: grey;
     color: white;
 }
+
+/* Ajoutez cette règle pour positionner le bouton à droite */
+.textedit-container .btn-append {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+}