test pour rendre le mdp invisible...

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">
+                        <TextEdit Role="TextRole.Password" autocomplete="new-password" 
-                            <Feedback>
+                                type="@GetPasswordInputType()"
-                                <ValidationError />
+                                Placeholder="Entrez votre pseudo" 
-                            </Feedback>
+                                @bind-Text="@Requete.MotDePasse">
+
+                            <Append>
+                                <Button Class="btn-append" Clicked="@TogglePasswordVisibility">
+                                    <Icon IconName="@GetEyeIcon()" />
+                                </Button>
+                            </Append>
                         </TextEdit>
+
                     </FieldBody>
                 </Field>
             </Validation>

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;
+        }
     }  
 }

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%);
+}