From f92855e1260c7763eabbdbce4a60131eafa37e49 Mon Sep 17 00:00:00 2001
From: ycharbi <git@ycharbi.fr>
Date: Sun, 2 Apr 2023 14:31:03 +0200
Subject: [PATCH] Travail de l'apparence de la page de gestion des utilisateurs

---
 fichiers/css/confirmation.css     | 26 ++-------
 fichiers/css/personalisation.css  | 28 ++++++++++
 fichiers/svg/chevrons-up.svg      |  1 +
 fichiers/svg/help-circle.svg      |  1 +
 fichiers/svg/menu.svg             |  1 +
 services/gestion/utilisateurs.php | 93 +++++++++++++++++++------------
 6 files changed, 92 insertions(+), 58 deletions(-)
 create mode 100644 fichiers/svg/chevrons-up.svg
 create mode 100644 fichiers/svg/help-circle.svg
 create mode 100644 fichiers/svg/menu.svg

diff --git a/fichiers/css/confirmation.css b/fichiers/css/confirmation.css
index 92f27ef..17e53e1 100644
--- a/fichiers/css/confirmation.css
+++ b/fichiers/css/confirmation.css
@@ -1,4 +1,4 @@
-/* Style concernant la confirmation de suppression d'un alias virtuel */
+/* Style concernant la confirmation de suppression d'une pastille */
 .confirmation-suppression {
 	display: none;
 	color: #fff;
@@ -14,39 +14,23 @@
 }
 
 .input-checkbox-supprimer-valeur:checked ~ .confirmation-suppression {
-    display: inline;
+	display: inline;
 }
 
-/*.input-label-supprimer-valeur {
-	color: #ffffff;
-    background: #e23026;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-}*/
-
 .visuellement-cache {
-    position: absolute;
-    left: -100vw;
+	position: absolute;
+	left: -100vw;
 }
 
-
-
 .detail-utilisateur {
 	display: none;
 	color: #fff;
 	text-align: center;
 	text-decoration: none;
-	background-color: #dc3545;
-}
-
-.detail-utilisateur:hover {
-	color: #fff;
-	background-color: #bb2d3b;
-	border-color: #b02a37;
 }
 
 .input-checkbox-detail-utilisateur:checked ~ .detail-utilisateur {
-    display: block;
+	display: block;
 }
 
 /* Sources :
diff --git a/fichiers/css/personalisation.css b/fichiers/css/personalisation.css
index 0ded1a5..16208e1 100644
--- a/fichiers/css/personalisation.css
+++ b/fichiers/css/personalisation.css
@@ -113,3 +113,31 @@ body {
 .max-hauteur-pastille{
   height: calc(100% - 1.5em);
 }
+
+.survol{
+  display: inline-block;
+}
+.survol:hover .message-survol {
+  overflow: hidden;
+  padding: 12px 12px;
+  height: auto;
+  width: auto;
+  opacity: 1;
+  border: 1px solid #eeeeee;
+}
+
+.message-survol {
+  opacity: 0;
+  position: absolute;
+  z-index: 7;
+  background: #343a40;
+  color: #FFFFFF;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  height: 0px;
+  width: 0px;
+  padding: 0 12px;
+  overflow: hidden;
+/*-webkit-transition: all 500ms;
+  transition: all 500ms;*/
+}
diff --git a/fichiers/svg/chevrons-up.svg b/fichiers/svg/chevrons-up.svg
new file mode 100644
index 0000000..e94a2be
--- /dev/null
+++ b/fichiers/svg/chevrons-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up"><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
\ No newline at end of file
diff --git a/fichiers/svg/help-circle.svg b/fichiers/svg/help-circle.svg
new file mode 100644
index 0000000..bd5c335
--- /dev/null
+++ b/fichiers/svg/help-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
\ No newline at end of file
diff --git a/fichiers/svg/menu.svg b/fichiers/svg/menu.svg
new file mode 100644
index 0000000..b4a970c
--- /dev/null
+++ b/fichiers/svg/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
\ No newline at end of file
diff --git a/services/gestion/utilisateurs.php b/services/gestion/utilisateurs.php
index 04b36a2..574fbc1 100644
--- a/services/gestion/utilisateurs.php
+++ b/services/gestion/utilisateurs.php
@@ -21,39 +21,53 @@ $liste_domaines = listeDomainesBdd($pdo);
 if (testPrivileges()==="administrateur") {
 	echo <<<_HEREDOC_
 
-		<div class="card mt-4">
-			<div class="card-body">
-				<h5 class="card-title">Ajout d'un utilisateur</h5>
-				<form id="form_choix_utilisateur" action="/services/traitements/utilisateurs/ajoutUtilisateur.php" method="post">
-     <div class="input-group">
-      <input class="form-control" type="text" name="prefixe_utilisateur" placeholder="prefixe" title="Texte s'ajoutant devant les alias de l'utilisateurs afin de les discriminer de ceux des autres">
-      <input type="text" class="form-control" id="nom_pour_filtre" name="nom_utilisateur" placeholder="nom utilisateur *" onkeyup="filtreValeurs();" required>
-      <span class="input-group-text">@</span>
-      <select class="form-select" name="choix_domaine_utilisateur">
+  <div class="card mt-4">
+   <div class="card-body">
+    <h5 class="card-title">Ajout d'un utilisateur</h5>
+    <form id="form_choix_utilisateur" action="/services/traitements/utilisateurs/ajoutUtilisateur.php" method="post">
+     <div class="row">
+      <div class="col-xl-5 col-12 pt-2">
+       <div class="input-group">
+        <input class="form-control" type="text" name="prefixe_utilisateur" placeholder="prefixe" title="Texte s'ajoutant devant les alias de l'utilisateurs afin de les discriminer de ceux des autres">
+        <input type="text" class="form-control" id="nom_pour_filtre" name="nom_utilisateur" placeholder="nom utilisateur *" onkeyup="filtreValeurs();" title="Identifiant de l'utilisateur" required>
+        <span class="input-group-text">@</span>
+        <select class="form-select" name="choix_domaine_utilisateur" title="Choix d'un nom de domaine existant">
 _HEREDOC_;
-       try {
-        foreach ($liste_domaines as $domaine_bdd => $domaine) {
-         echo "<option value=\"".$domaine['domaine']."\">".$domaine['domaine']."</option>\n";
+        try {
+         foreach ($liste_domaines as $domaine_bdd => $domaine) {
+          echo "<option value=\"".$domaine['domaine']."\">".$domaine['domaine']."</option>\n";
+         }
         }
-       }
-       catch (\Exception $e) {
-        die ("Erreur de requête de selection du domaine pour \"$base\" : ".$e->getMessage());
-       }
- 
-  echo <<<_HEREDOC_
-       </select>
-      <input type="password" class="form-control" name="mot_de_passe_utilisateur" placeholder="mot de passe *" required>
-      <input class="form-control" type="text" name="nom_complet_utilisateur" placeholder="nom complet">
-      <select class="form-select" name="choix_privilege_utilisateur" required>
-       <optgroup label="privilège">
-       <option value="utilisateur" title="Accès limité aux fonctionnalités">utilisateur</option>
-       <option value="administrateur" title="Accès complet et gestions des autres utilisateurs">administrateur</option>
-       </optgroup>
-      </select>
-      <button class="btn btn-primary bouton-ajout" type="submit">Appliquer</button>
+        catch (\Exception $e) {
+         die ("Erreur de requête de selection du domaine pour \"$base\" : ".$e->getMessage());
+        }
+        
+        echo <<<_HEREDOC_
+        </select>
+       </div>
+      </div>
+      <div class="col-xl-2 col-4 pt-2">
+       <input type="password" class="form-control" name="mot_de_passe_utilisateur" placeholder="mot de passe *" title="Changement du mot de passe de l'utilisateur" required>
+      </div>
+      <div class="col-xl-2 col-4 pt-2 ps-0 pe-0">
+       <input class="form-control" type="text" name="nom_complet_utilisateur" placeholder="nom complet" title="Nom complet de l'utilisateur">
+      </div>
+      <div class="col-xl-2 col-4 pt-2">
+       <div class="input-group">
+        <select class="form-select" name="choix_privilege_utilisateur" title="Privilège de l'utilisateur" required>
+         <optgroup label="privilège">
+          <option value="utilisateur" title="Accès limité aux fonctionnalités">utilisateur</option>
+          <option value="administrateur" title="Accès complet et gestions des autres utilisateurs">administrateur</option>
+         </optgroup>
+        </select>
+       </div>
+      </div>
+      <div class="col-xl-1 col-12 pt-2">
+       <button class="btn btn-primary bouton-ajout" style="width: 100%;" type="submit">Appliquer</button>
+      </div>
      </div>
-				</form>
-			</div>
+    </form>
+   </div>
   </div>
 
 _HEREDOC_;
@@ -82,7 +96,7 @@ _HEREDOC_;
 						$etat_interrupteur_eteint="checked";
 						$etat_interrupteur_allumer="";
 					}
-     
+
 					echo <<<_HEREDOC_
      <input type="hidden" name="utilisateur[{$numero_entree}][id_utilisateur]" value="{$utilisateurs_valeurs['id']}">
 						<div class="col-md-6 col-xl-4">
@@ -96,9 +110,14 @@ _HEREDOC_;
 									</div>
 									<div class="titre-pastille">
 										<span>{$utilisateurs_valeurs['utilisateur']}</span>
+_HEREDOC_;
+     if ($utilisateurs_valeurs['privilege'] === "administrateur") {
+          echo '<div class="survol"><span style="padding: 0; margin-left: 5px" class="badge fond-arc-noire"><img style="width: 80%" src="/fichiers/svg/chevrons-up.svg"></img></span><div class="message-survol">Cet utilisateur est un administrateur</div></div>';
+     }
+					echo <<<_HEREDOC_
 									</div>
          <div>
-										<label class="input-label-detail-utilisateur btn btn-danger btn-sm" for="detail-utilisateur-{$utilisateurs_valeurs['id']}"><img src="/fichiers/svg/trash-2.svg"></label>
+										<label class="input-label-detail-utilisateur btn btn-primary btn-sm me-1" for="detail-utilisateur-{$utilisateurs_valeurs['id']}"><img src="/fichiers/svg/menu.svg"></label>
 									</div>
 									<div>
 										<label class="input-label-supprimer-valeur btn btn-danger btn-sm" for="supprimer-valeur-{$utilisateurs_valeurs['id']}"><img src="/fichiers/svg/trash-2.svg"></label>
@@ -107,12 +126,12 @@ _HEREDOC_;
 								
         <input type="checkbox" class="input-checkbox-detail-utilisateur visuellement-cache" id="detail-utilisateur-{$utilisateurs_valeurs['id']}">
         <div class="detail-utilisateur card-footer">
-         <input class="form-control" type="text" name="utilisateur[{$numero_entree}][nom_complet_utilisateur]" value="{$utilisateurs_valeurs['nom_complet']}" placeholder="nom complet">
-         <input class="form-control" type="text" name="utilisateur[{$numero_entree}][prefixe_utilisateur]" value="{$utilisateurs_valeurs['prefixe']}" placeholder="prefixe" title="Texte s'ajoutant devant les alias de l'utilisateur afin de les discriminer de ceux des autres">
-         <input type="password" class="form-control" name="utilisateur[{$numero_entree}][mot_de_passe_utilisateur]" placeholder="nouveau mot de passe">
-         <input type="password" class="form-control" name="utilisateur[{$numero_entree}][confirmation_mot_de_passe_utilisateur]" placeholder="confirmation mot de passe">
+         <input class="form-control mt-2" type="text" name="utilisateur[{$numero_entree}][nom_complet_utilisateur]" value="{$utilisateurs_valeurs['nom_complet']}" placeholder="nom complet" title="Nom complet de l'utilisateur">
+         <input class="form-control mt-2" type="text" name="utilisateur[{$numero_entree}][prefixe_utilisateur]" value="{$utilisateurs_valeurs['prefixe']}" placeholder="prefixe" title="Texte s'ajoutant devant les alias de l'utilisateur afin de les discriminer de ceux des autres">
+         <input type="password" class="form-control mt-2" name="utilisateur[{$numero_entree}][mot_de_passe_utilisateur]" placeholder="nouveau mot de passe" title="Changement du mot de passe de l'utilisateur">
+         <input type="password" class="form-control mt-2" name="utilisateur[{$numero_entree}][confirmation_mot_de_passe_utilisateur]" placeholder="confirmation mot de passe" title="Confirmation du nouveau mot de passe">
          
-         <select class="form-select" name="utilisateur[{$numero_entree}][choix_privilege_utilisateur]">
+         <select class="form-select mt-2 mb-2" name="utilisateur[{$numero_entree}][choix_privilege_utilisateur]" title="Privilège de l'utilisateur">
           <optgroup label="privilège">
 _HEREDOC_;
          echo "<option value=\"utilisateur\" title=\"Accès limité aux fonctionnalités\"";