amélioration du frontend

Ajout d'une page afin qu'un utilisateur avec le role ADMIN puisse voir la liste des utilisateurs existants dans la BDD

amélioration du frontend
Ajout d'une page afin qu'un utilisateur avec le role ADMIN puisse voir la liste des utilisateurs existants dans la BDD
sfeutrie
1 parent 303fdc72
Showing 12 changed files with 312 additions and 95 deletions Show diff stats
Front/test.css
Front/test.html
PFE06/src/main/java/com/PFE/ServerManager/CustomerRepository.java
PFE06/src/main/java/com/PFE/ServerManager/MainController.java
PFE06/src/main/java/com/PFE/ServerManager/SecurityConfig.java
PFE06/src/main/resources/application.properties
PFE06/src/main/resources/static/css/all.css
PFE06/src/main/resources/static/css/home.css
PFE06/src/main/resources/static/css/registration.css
PFE06/src/main/resources/templates/all.html
PFE06/src/main/resources/templates/home.html
PFE06/src/main/resources/templates/registration.html
@@ -0,0 +1,4 @@
+        .inline-form input {
+            display: inline-block;
+            width: 100px;
+        }
 \ No newline at end of file
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <title>Bootstrap template</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <a class="navbar-brand" href="#">Accueil</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+        <div class="navbar-nav">
+          <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
+          <a class="nav-item nav-link" href="#">Features</a>
+          <a class="nav-item nav-link" href="#">Pricing</a>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Options</a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+              <a class="dropdown-item" href="#">Ajouter des utilisateurs</a>
+              <a class="dropdown-item" href="#">A ajouter...</a>
+            </div>
+          </li>
+          <a class="nav-item nav-link disabled" href="#">Documentations</a>
+        </div>
+      </div>
+    </nav>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+  </body>
+</html>
 \ No newline at end of file
@@ -10,7 +10,7 @@ import org.springframework.stereotype.Repository;
 //This class allows the JPA to know that the Customer class is a table
 //Need to check if "extends JpaRepository is more useful"
 @Repository
-public interface CustomerRepository extends CrudRepository<Customer, Integer> {
+public interface CustomerRepository extends JpaRepository<Customer, Integer> {
     Customer findByPseudo(String pseudo);
@@ -3,19 +3,17 @@ package com.PFE.ServerManager;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Controller;
-import org.springframework.ui.ModelMap;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 import org.springframework.web.servlet.ModelAndView;
 import java.io.*;
 import java.sql.Timestamp;
-import java.util.Arrays;
-import java.util.HashSet;
+import java.util.*;
+
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.security.core.context.SecurityContextHolder;
 import org.springframework.security.core.Authentication;
-import org.springframework.web.context.request.RequestContextHolder;
 import javax.servlet.annotation.MultipartConfig;
@@ -54,6 +52,7 @@ public class MainController {
         Authentication auth = SecurityContextHolder.getContext().getAuthentication();
         Customer customer = customerRepository.findByPseudo(auth.getName());
         modelAndView.addObject("customerName", customer.getPseudo());
+        modelAndView.addObject("customerRole", customer.getRole());
         modelAndView.setViewName("registration");
         return modelAndView;
     }
@@ -75,7 +74,13 @@ public class MainController {
         Customer temp = customerRepository.findByPseudo(pseudo);
         Role userRole = roleRepository.findByRole(role);
         n.setRoles(new HashSet<Role>(Arrays.asList(userRole)));
-
+        //utilisé uniquement pour continuer à afficher l'utilisateur connecté//
+        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
+        Customer customer = customerRepository.findByPseudo(auth.getName());
+        modelAndView.addObject("customerName", customer.getPseudo());
+        modelAndView.addObject("customerRole", customer.getRole());
+        modelAndView.setViewName("registration");
+        ///////
         if(temp != null) {
             modelAndView.addObject("ok", "l'utilisateur existe déjà");
         }
@@ -140,11 +145,31 @@ public class MainController {
         return modelAndView;
     }
-    @GetMapping(path="/all")
+    /*@GetMapping(path="/all")
     public @ResponseBody Iterable<Customer> getAllUsers() {
         return customerRepository.findAll();
+    }*/
+    @GetMapping(path="/all")
+    public ModelAndView getAllUsers() {
+        ModelAndView modelAndView = new ModelAndView();
+        modelAndView.setViewName("all");
+
+        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
+        Customer customer = customerRepository.findByPseudo(auth.getName());
+        modelAndView.addObject("customerName", customer.getPseudo());
+        modelAndView.addObject("customerRole", customer.getRole());
+
+        /*List<Customer> list = new ArrayList<Customer>();
+        Iterator<Customer> listIterator = customerRepository.findAll().iterator();
+        while (listIterator.hasNext()) {
+            list.add(listIterator.next());
+        }*/
+        List<Customer> list = customerRepository.findAll(); // attention : la méthode findAll() de JpaRepository retourne une liste alors que celle de CrudRepository retourne un itérable
+        modelAndView.addObject("list",list);
+        return modelAndView;
     }
+
     @GetMapping(value="/success")
     public String success(){
         return "success";
@@ -36,6 +36,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter {
                 .authorizeRequests()
                     .antMatchers("/home").hasAnyAuthority("USER","ADMIN")
                     .antMatchers("/registration").hasAuthority("ADMIN")
+                    .antMatchers("/all").hasAuthority("ADMIN")
                     .antMatchers("/login").permitAll()
                     .antMatchers("/denied").permitAll()
                     .antMatchers("/css/**", "/js/**").permitAll()
@@ -8,9 +8,9 @@ spring.jpa.hibernate.ddl-auto=create
 #"update" met à jour la base données
 #Postgres config :
-spring.datasource.url=jdbc:postgresql://localhost:3306/sql_only
+spring.datasource.url=jdbc:postgresql://localhost:5432/sql_only
 spring.datasource.username=postgres
-spring.datasource.password=admin
+spring.datasource.password=idalurf123
 # montre les communications JPA avec la BDD
@@ -0,0 +1,5 @@
+.dropdown-item.active{
+    background-color: #ffffff !important;
+    color:#212529 !important;
+    font-weight: bold !important;
+}
 \ No newline at end of file
 body { background-color: #FFF; }
-
+/*
 .upload-drop-zone {
   height: 200px;
   border-width: 2px;
@@ -9,4 +9,23 @@ body { background-color: #FFF; }
   border-color: #ccc;
   line-height: 200px;
   text-align: center
+}*/
+/*
+body {
+  padding-top: 70px;
+  padding-bottom: 30px;
+}*/
+
+.theme-dropdown .dropdown-menu {
+  position: static;
+  display: block;
+  margin-bottom: 20px;
+}
+
+.theme-showcase > p > .btn {
+  margin: 5px 0;
+}
+
+.theme-showcase .navbar .container {
+  width: auto;
 }
@@ -0,0 +1,61 @@
+body { background-color: #E9EEF2; }
+
+.form-heading { color:#fff; font-size:23px; }
+
+.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0; }
+
+.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px; }
+
+.login-form .form-control {
+    background: #f7f7f7 none repeat scroll 0 0;
+    border: 1px solid #d4d4d4;
+    border-radius: 4px;
+    font-size: 14px;
+    height: 50px;
+    line-height: 50px;
+}
+
+.main-div {
+    background: #ffffff none repeat scroll 0 0;
+    border-radius: 5px;
+    margin: 50px auto;
+    max-width: 38%;
+    padding: 50px 70px 70px 71px;
+}
+
+.login-form .form-group {
+    margin-bottom:10px;
+}
+
+.login-form { text-align:center;}
+
+.forgot a {
+    color: #777777;
+    font-size: 14px;
+    text-decoration: underline;
+}
+.login-form .btn.btn-primary {
+    background: #f0ad4e none repeat scroll 0 0;
+    border-color: #f0ad4e;
+    color: #ffffff;
+    font-size: 14px;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    padding: 0;
+}
+
+.login-form .btn.btn-primary.reset {
+    background: #ff9900 none repeat scroll 0 0;
+}
+
+
+.back { text-align: left; margin-top:10px; }
+
+.back a {color: #444444; font-size: 13px;text-decoration: none;}
+
+.dropdown-item.active{
+    background-color: #ffffff !important;
+    color:#212529 !important;
+    font-weight: bold !important;
+}
 \ No newline at end of file
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="stylesheet" th:href="@{/css/all.css}">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+    <title>Listes des utilisateurs dans la base de donnée</title>
+</head>
+<body>
+
+<div id="app">
+    <!-- NAV BAR -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <span class="navbar-brand"> votre identifiant : <span th:text="${customerName}" th:remove="tag">Documentations</span></span>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+            <div class="navbar-nav">
+                <a class="nav-item nav-link" th:href="@{/home}">Gestion des noeuds</a>
+                <a class="nav-item nav-link" th:href="@{/logout}">Déconnexion</a>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Options</a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                        <div th:switch="${customerRole}">
+                            <div th:case="'ADMIN'">
+                                <a class="dropdown-item" th:href="@{/registration}">Enregistrer des utilisateurs</a>
+                                <a class="dropdown-item active" th:href="@{/all}">Listes des utilisateurs</a></div>
+                            <div th:case="'USER'"></div>
+                        </div>
+                        <a class="dropdown-item" href="#">A ajouter...</a>
+                    </div>
+                </li>
+                <a class="nav-item nav-link disabled" href="#">Documentations</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- TABLE PART -->
+    <table class="table">
+        <tr>
+            <th scope="col">Pseudo</th>
+            <th scope="col">Role</th>
+            <th scope="col">Id</th>
+        </tr>
+        <tr th:each="prod : ${list}">
+            <td th:text="${prod.pseudo}">pseudo</td>
+            <td th:text="${prod.getRole()}">role</td>
+            <td th:text="${prod.customer_id}">id</td>
+        </tr>
+    </table>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+</body>
+</html>
-<!--
-
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Page d'accueil</title>
-</head>
-<body>
-
-<div th:switch="${customerRole}">
-    <div th:case="'ADMIN'"><a th:href="@{/registration}">Enregistrer des utilisateurs</a></div>
-    <div th:case="'USER'"></div>
-</div>
-<form th:action="@{/logout}" method="GET">
-    <button type="Submit">Logout </button>
-</form>
-
-<h1><span th:text="${customerName}" th:remove="tag"></span> est connecté(e) !</h1>
-
-</body>
-</html>
-
--->
-
-<html xmlns:th="http://www.thymeleaf.org">
-<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+
     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
     <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">
     <link rel="stylesheet" th:href="@{/css/home.css}">
-
     <title>Accueil</title>
   </head>
-  <body>
+  <body>
     <div id="app">
-
-      <nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end" style="padding:15px; margin-bottom:50px;">
-          <a class="navbar-brand" href="#"><i class="fa fa-home" style="margin-right:10px;"></i>Gestion des noeuds</a>
-          <a class="btn btn-danger ml-auto mr-2" th:href="@{/logout}"><i class="fa fa-sign-out-alt" style="margin-right:7px;"></i>Déconnexion</a>
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
-              <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
-              <ul class="navbar-nav text-right">
-                  <li class="nav-item active">
-                      <a class="nav-link" th:href="@{/registration}"><i class="fa fa-cog" style="margin-right:7px;"></i>Paramètres</a>
-                  </li>
-              </ul>
-          </div>
-      </nav>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+            <span class="navbar-brand"> votre identifiant : <span th:text="${customerName}" th:remove="tag">Documentations</span></span>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+                <div class="navbar-nav">
+                    <a class="nav-item nav-link active" th:href="@{/home}">Gestion des noeuds <span class="sr-only">(current)</span></a>
+                    <a class="nav-item nav-link" th:href="@{/logout}">Déconnexion</a>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Options</a>
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                            <div th:switch="${customerRole}">
+                                <div th:case="'ADMIN'">
+                                    <a class="dropdown-item" th:href="@{/registration}">Enregistrer des utilisateurs</a>
+                                    <a class="dropdown-item" th:href="@{/all}">Listes des utilisateurs</a>
+                                </div>
+                                <div th:case="'USER'"></div>
+                            </div>
+                            <a class="dropdown-item" href="#">A ajouter...</a>
+                        </div>
+                    </li>
+                    <a class="nav-item nav-link disabled" href="#">Documentations</a>
+                </div>
+            </div>
+        </nav>
       <div class="container" style="padding-bottom: 50px;">
-
         <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Choix des noeuds</h1>
-
         <table id="nodes-table" class="table table-striped table-bordered dt-responsive nowrap">
                 <thead>
                     <tr>
@@ -166,31 +149,21 @@
                         <td>Software Engineer</td>
                         <td>London</td>
                     </tr>
-
                 </tbody>
             </table>
-
             <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Uploader un fichier</h1>
-
             <div class="panel panel-default">
-
                 <h4>Choix du fichier</h4>
-
                 <input id="filesExplorer" type="file" style="display:none"></input>
                 <div class="upload-drop-zone" id="drop-zone">
                   Clic ou dépose un fichier ici
                 </div>
-
                 <div class="progress">
                   <div id="file-progress" class="progress-bar" role="progressbar" style="width: 75%; display:none">25%</div>
                 </div>
-
               </div>
-
               <button id="sendButton" type="button" class="btn btn-secondary btn-lg btn-block"style="margin-top:50px;">Envoyer</button>
-
             </div>
-
       </div>
       <div class="modal fade" id="warningFilesNumber" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
@@ -213,7 +186,6 @@
       </div>
     </div>
-
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
+<html lang="fr">
 <head>
-    <title>Ajout d'utilisateurs</title>
-    <meta charset="utf-8"/>
+    <title>Enregistrement de nouveaux utilisateurs</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" th:href="@{/css/registration.css}">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 </head>
 <body>
-<div>
-    <h1><span th:text="${customerName}" th:remove="tag"></span> est connecté(e) !</h1>
-    <h5>Ajout d'utilisateurs :</h5>
-    <form th:action="@{/registration}" method="POST">
-        <div class="form1">
-            <label for="username">User Name: </label>
-            <input type="text" id="username" placeholder="Enter UserName" name="pseudo"/>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <span class="navbar-brand"> votre identifiant : <span th:text="${customerName}" th:remove="tag">Documentations</span></span>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+            <div class="navbar-nav">
+                <!--<a class="nav-item nav-link active" th:href="@{/registration}">Enregistrer des utilisateurs <span class="sr-only">(current)</span></a>-->
+                <a class="nav-item nav-link" th:href="@{/home}">Gestion des noeuds</a>
+                <a class="nav-item nav-link" th:href="@{/logout}">Déconnexion</a>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Options</a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                        <div th:switch="${customerRole}">
+                            <div th:case="'ADMIN'">
+                                <a class="dropdown-item active" th:href="@{/registration}">Enregistrer des utilisateurs</a>
+                                <a class="dropdown-item" th:href="@{/all}">Listes des utilisateurs</a></div>
+                            <div th:case="'USER'"></div>
+                        </div>
+                        <a class="dropdown-item" href="#">A ajouter...</a>
+                    </div>
+                </li>
+                <a class="nav-item nav-link disabled" href="#">Documentations</a>
+            </div>
         </div>
-        <div class="form2">
-            <label for="password">Password: </label>
-            <input type="password" id="password" placeholder="Enter Password" name="password"/>
-        </div>
-        <div class="form3">
-                <input type="radio" id="role1" name="role" value="ADMIN">
-                <label for="role1">Admin</label>
+    </nav>
+    <div class="login-form">
+        <div class="main-div">
+            <div class="panel">
+                <h2>Formulaire d'ajout</h2>
+                <p>Merci d'entrer le login et le mot de passe du nouvel utilisateur</p>
+            </div>
+            <form id="Login" th:action="@{/registration}" method="POST">
+                <div class="form-group">
+                    <input type="text" v-model="user.login" class="form-control" id="username" placeholder="Enter UserName" name="pseudo">
+                </div>
+                <div class="form-group">
+                    <input type="password" v-model="user.password" class="form-control" id="password" placeholder="Enter Password" name="password">
+                </div>
+                <div class="form3">
+                    <input type="radio" id="role1" name="role" value="ADMIN">
+                    <label for="role1">Admin</label>
-                <input type="radio" id="role2" name="role" value="USER" checked="checked"> <!-- "checked" empeche l'utilisateur de ne rien séléctionner -->
-                <label for="role2">User</label>
+                    <input type="radio" id="role2" name="role" value="USER" checked="checked"> <!--//"checked" empeche l'utilisateur de ne rien séléctionner-->
+                    <label for="role2">User</label>
+                </div>
+                <button @click.prevent="registration" type="submit" class="btn btn-primary">Ajouter</button>
+            </form>
+            <span th:utext="${ok}"></span>
         </div>
-        <button type="submit">Ajouter</button>
-    </form>
-    <span th:utext="${ok}"></span>
-    <a th:href="@{/home}">Accueil</a>
-    <!--<div th:if="${param.ok}">
-        <span>L'utilisateur a été ajouté !</span>
     </div>
-    <div th:if="${param.fail}">
-        <span>Le pseudo existe déjà !</span>
-    </div>-->
-</div>
+
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 </body>
 </html>
 \ No newline at end of file