Intégration du front au projet

* Il manque un page pour l'ajout des utilisateurs * Régler les problèmes d'affichage sur mobile * Travailler sur la réception du fichier coté Java

Intégration du front au projet
* Il manque un page pour l'ajout des utilisateurs * Régler les problèmes d'affichage sur mobile * Travailler sur la réception du fichier coté Java
Antoine Duquenoy
1 parent 16791f79
Showing 11 changed files with 490 additions and 52 deletions Show diff stats
PFE06/src/main/java/com/PFE/ServerManager/MainController.java
PFE06/src/main/java/com/PFE/ServerManager/Role.java
PFE06/src/main/java/com/PFE/ServerManager/SecurityConfig.java
PFE06/src/main/resources/application.properties
PFE06/src/main/resources/data.sql
PFE06/src/main/resources/static/css/home.css
PFE06/src/main/resources/static/css/login.css
PFE06/src/main/resources/static/js/home.js
PFE06/src/main/resources/templates/home.html
PFE06/src/main/resources/templates/login.html
PFE06/src/main/resources/templates/registration.html
 package com.PFE.ServerManager;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.servlet.ModelAndView;
@@ -10,10 +11,15 @@ import java.util.HashSet;
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.security.core.context.SecurityContextHolder;
 import org.springframework.security.core.Authentication;
+import org.springframework.web.multipart.MultipartFile;
+import org.springframework.http.ResponseEntity;
+import javax.jws.WebParam;
 import javax.persistence.SequenceGenerator;
+import javax.servlet.annotation.MultipartConfig;
 @Controller
+@MultipartConfig(fileSizeThreshold = 20971520)
 public class MainController {
     @Autowired
@@ -42,8 +48,13 @@ public class MainController {
     }
     @GetMapping(path="/registration")
-    public String registration() {
-        return "registration";//fait le lien automatiquement avec le page html du même nom  //return "redirect:/....";
+    public ModelAndView registration() {
+        ModelAndView modelAndView = new ModelAndView();
+        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
+        Customer customer = customerRepository.findByPseudo(auth.getName());
+        modelAndView.addObject("customerName", customer.getPseudo());
+        modelAndView.setViewName("registration");
+        return modelAndView;
     }
     @GetMapping(path="/denied")
@@ -75,6 +86,11 @@ public class MainController {
         return modelAndView;
     }
+    @PostMapping(path="/file")
+    public ResponseEntity<?> addFile(@RequestParam("file") MultipartFile uploadedFile, @RequestParam String filename, @RequestParam String nodes) {
+        return new ResponseEntity<>(HttpStatus.OK);
+    }
+
     @GetMapping(path="/login")
     public ModelAndView login() {
         ModelAndView modelAndView = new ModelAndView();
@@ -6,7 +6,7 @@ import javax.persistence.*;
 @Table(name = "role")
 public class Role {
     @Id
-    @Column(name = "role_id",columnDefinition = "serial")
+    @Column(name = "role_id", columnDefinition = "serial")
     @GeneratedValue(strategy = GenerationType.AUTO)
     // inutile d'utiliser les lignes ci-dessous à moins que l'utilisateur n'ajoute des roles par une page Web
     //@GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "role_seq_gen")
@@ -38,6 +38,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter {
                     .antMatchers("/registration").hasAuthority("ADMIN")
                     .antMatchers("/login").permitAll()
                     .antMatchers("/denied").permitAll()
+                    .antMatchers("/css/**", "/js/**").permitAll()
                     .anyRequest().authenticated()
                     .and()
                 .formLogin()
@@ -48,9 +49,10 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter {
                     .and()
                 .logout()
                     .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
-                    .logoutSuccessUrl("/")
+                    .logoutSuccessUrl("/login")
                     .and()
                 .exceptionHandling()
                     .accessDeniedPage("/denied");
     }
+
 }
 \ No newline at end of file
@@ -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:5432/sql_only
+spring.datasource.url=jdbc:postgresql://localhost:3306/sql_only
 spring.datasource.username=postgres
-spring.datasource.password=idalurf123
+spring.datasource.password=admin
 # montre les communications JPA avec la BDD
@@ -3,5 +3,5 @@ INSERT INTO &quot;role&quot; VALUES (1,&#39;ADMIN&#39;);
 INSERT INTO "role" VALUES (2,'USER');
 INSERT INTO "customer" VALUES (1,1,'$2a$10$GflhaD2IYuErynuOlxS2W.Gp1kXksVdiSviYN/lDYCsuH.lVm6Ph2','admin'); /*pseudo : admin // password : admin // role : ADMIN*/
 INSERT INTO "customer_role" VALUES (1,1);
-INSERT INTO "customer" VALUES (2,1,'$2a$10$0Fnls/gTQS1zA6rj1ZlxfuyyKNpCBDA1tcCqQMroPDIj1fRyhgv/O','user'); /*pseudo : user // password : password // role : USER*/
+INSERT INTO "customer" VALUES (2,1,'$2a$10$0Fnls/gTQS1zA6rj1ZlxfuyyKNpCBDA1tcCqQMroPDIj1fRyhgv/O','user'); /*pseudo : user // password : user // role : USER*/
 INSERT INTO "customer_role" VALUES (2,2);
 \ No newline at end of file
@@ -0,0 +1,12 @@
+body { background-color: #FFF; }
+
+.upload-drop-zone {
+  height: 200px;
+  border-width: 2px;
+  margin-bottom: 20px;
+  color: #ccc;
+  border-style: dashed;
+  border-color: #ccc;
+  line-height: 200px;
+  text-align: center
+}
@@ -0,0 +1,54 @@
+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;}
@@ -0,0 +1,127 @@
+$(document).ready(function() {
+
+/********** Tableau **********/
+
+  var tableNodes = $('#nodes-table').DataTable( {
+      select: {
+          style: 'multi'
+      }
+  } );
+
+  var nodeSet = new Set();
+
+  tableNodes.on('select', function (e, dt, type, indexes) {
+    var rowData = tableNodes.rows(indexes).data().toArray()[0];
+    nodeSet.add(rowData[0]);
+  } );
+
+  tableNodes.on('deselect', function (e, dt, type, indexes) {
+    var rowData = tableNodes.rows(indexes).data().toArray()[0];
+    nodeSet.delete(rowData[0]);
+  } );
+
+/********** Drop Zone **********/
+
+  var formData = new FormData();
+  var dropZone = document.querySelector("#drop-zone");
+  dropZone.style.cursor = "pointer";
+  var file = document.getElementById("filesExplorer");
+  var fileProgress = document.getElementById("file-progress");
+  var readyToSend = false;
+
+  dropZone.addEventListener('click', function() {
+    delete formData;
+    formData = new FormData();
+    file.click();
+  })
+
+  file.addEventListener('change', function() {
+    dropZone.innerHTML = this.files[0].name;
+    formData.append("file", this.files[0]);
+    formData.append("filename", this.files[0].name);
+    readyToSend = true;
+  }, false)
+
+  dropZone.addEventListener('drop', function(e) {
+    e.preventDefault();
+    delete formData;
+    formData = new FormData();
+    dropZone.style.borderWidth = '2px';
+    var files = e.dataTransfer.files;
+
+    if(files.length > 1) {
+      $("#warningFilesNumber").modal()
+      return;
+    }
+    dropZone.innerHTML = files[0].name;
+    formData.append("file", files[0]);
+    formData.append("filename", files[0].name);
+    readyToSend = true;
+  }, false)
+
+  dropZone.addEventListener('dragenter', function(e) {
+      console.log("Enter");
+      dropZone.style.borderWidth = '5px';
+  }, false);
+
+  dropZone.addEventListener('dragleave', function(e) {
+    console.log("Leave");
+    dropZone.style.borderWidth = '2px';
+  }, false);
+
+  dropZone.addEventListener('dragover', function(e) {
+      e.preventDefault();
+  }, false);
+
+  document.getElementById("sendButton").addEventListener('click', function() {
+    var modalContent = document.getElementById("modal-content");
+    var modalTitle = document.getElementById("modal-title");
+    if(readyToSend && nodeSet.size > 0) {
+      formData.append("nodes", Array.from(nodeSet).join(';'));
+      var request = new XMLHttpRequest();
+      request.open("POST", "/file");
+
+      request.upload.onloadstart = function(e) {
+        fileProgress.style.display = 'block';
+        fileProgress.style.width = 0 + "px"
+        fileProgress.innerHTML = "0%";
+      }
+
+      request.upload.onprogress = function(e) {
+        var p = 100 - ((e.total - e.loaded) / e.total * 100);
+        fileProgress.style.width = Math.ceil(p) + "%"
+        fileProgress.innerHTML = Math.ceil(p) + "%";
+      }
+
+      request.upload.onloadend = function(e) {
+        fileProgress.style.width = 100 + "%"
+        fileProgress.innerHTML = "100%";
+        var modalButton = document.getElementById("modal-button");
+
+        modalButton.addEventListener('click', function(e) {
+          location.reload();
+        })
+
+        modalContent.innerHTML = "Upload terminé !";
+        modalTitle.innerHTML = "Félicitations";
+        $("#warningFilesNumber").modal()
+      }
+
+      request.send(formData);
+
+      delete formData;
+      formData = new FormData();
+    }
+    else {
+      if(readyToSend) {
+        modalContent.innerHTML = "Veuillez choisir un ou plusieurs noeuds !";
+      }
+      else {
+        modalContent.innerHTML = "Veuillez choisir un fichier !";
+      }
+      modalTitle.innerHTML = "Attention";
+      $("#warningFilesNumber").modal()
+    }
+  })
+
+} );
-<!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>
 \ No newline at end of file
+<!--
+
+<!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://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>
+
+    <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>
+
+      <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>
+                        <th>Nom</th>
+                        <th>IP</th>
+                        <th>Architecture</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Nixon</td>
+                        <td>System Architect</td>
+                        <td>Edinburgh</td>
+                    </tr>
+                    <tr>
+                        <td>Winters</td>
+                        <td>Accountant</td>
+                        <td>Tokyo</td>
+                    </tr>
+                    <tr>
+                        <td>Cox</td>
+                        <td>Junior Technical Author</td>
+                        <td>San Francisco</td>
+                    </tr>
+                    <tr>
+                        <td>Kelly</td>
+                        <td>Senior Javascript Developer</td>
+                        <td>Edinburgh</td>
+                    </tr>
+                    <tr>
+                        <td>Satou</td>
+                        <td>Accountant</td>
+                        <td>Tokyo</td>
+                    </tr>
+                    <tr>
+                        <td>Williamson</td>
+                        <td>Integration Specialist</td>
+                        <td>New York</td>
+                    </tr>
+                    <tr>
+                        <td>Chandler</td>
+                        <td>Sales Assistant</td>
+                        <td>San Francisco</td>
+                    </tr>
+                    <tr>
+                        <td>Davidson</td>
+                        <td>Integration Specialist</td>
+                        <td>Tokyo</td>
+                    </tr>
+                    <tr>
+                        <td>Hurst</td>
+                        <td>Javascript Developer</td>
+                        <td>San Francisco</td>
+                    </tr>
+                    <tr>
+                        <td>Frost</td>
+                        <td>Software Engineer</td>
+                        <td>Edinburgh</td>
+                    </tr>
+                    <tr>
+                        <td>Gaines</td>
+                        <td>Office Manager</td>
+                        <td>London</td>
+                    </tr>
+                    <tr>
+                        <td>Flynn</td>
+                        <td>Support Lead</td>
+                        <td>Edinburgh</td>
+                    </tr>
+                    <tr>
+                        <td>Marshall</td>
+                        <td>Regional Director</td>
+                        <td>San Francisco</td>
+                    </tr>
+                    <tr>
+                        <td>Kennedy</td>
+                        <td>Senior Marketing Designer</td>
+                        <td>London</td>
+                    </tr>
+                    <tr>
+                        <td>Fitzpatrick</td>
+                        <td>Regional Director</td>
+                        <td>London</td>
+                    </tr>
+                    <tr>
+                        <td>Silva</td>
+                        <td>Marketing Designer</td>
+                        <td>London</td>
+                    </tr>
+                    <tr>
+                        <td>Byrd</td>
+                        <td>Chief Financial Officer (CFO)</td>
+                        <td>New York</td>
+                    </tr>
+                    <tr>
+                        <td>Little</td>
+                        <td>Systems Administrator</td>
+                        <td>New York</td>
+                    </tr>
+                    <tr>
+                        <td>Greer</td>
+                        <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">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="modal-title">Attention</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div id="modal-content" class="modal-body">
+              Un seul fichier peut être envoyé !
+            </div>
+            <div class="modal-footer">
+              <button id="modal-button" type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
+            </div>
+          </div>
+        </div>
+      </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>
+    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" charset="utf-8"></script>
+    <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" charset="utf-8"></script>
+    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" charset="utf-8"></script>
+    <script th:src="@{/js/home.js}"></script>
+  </body>
+</html>
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
-<head>
-    <title>Page de connexion</title>
-    <meta charset="utf-8"/>
-</head>
-    <body>
-        <div>
-            <h5>Se connecter :</h5>
-            <form th:action="@{/login}" method="POST">
-                <div class="form1">
-                    <label for="username">User Name: </label>
-                    <input type="text" id="username" placeholder="Enter UserName" name="pseudo"/>
+  <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/login.css}">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+    <title>Connexion</title>
+  </head>
+  <body>
+
+    <div id="app">
+        <div class="login-form">
+            <div class="main-div">
+                <div class="panel">
+                    <h2>Formulaire de connexion</h2>
+                    <p>Merci d'entrer votre login et mot de passe</p>
                 </div>
-                <div class="form2">
-                    <label for="password">Password: </label>
-                    <input type="password" id="password" placeholder="Enter Password" name="password"/>
+
+                <div th:if="${param.error}">
+                    <div v-if="wrong" class="alert alert-danger" role="alert">
+                        Login ou mot de passe incorrect
+                    </div>
                 </div>
-                <button type="submit">Se connecter</button>
-            </form>
-            <span th:utext="${error}"></span>
-            <!--<div th:if="${param.ok}">
-                <span>L'utilisateur a été ajouté !</span>
+
+
+                <form id="Login" th:action="@{/login}" method="POST">
+
+                    <div class="form-group">
+                        <input type="text" v-model="user.login" class="form-control" id="inputEmail" placeholder="Login" name="pseudo">
+                    </div>
+
+                    <div class="form-group">
+                        <input type="password" v-model="user.password" class="form-control" id="inputPassword" placeholder="Password" name="password">
+                    </div>
+
+                    <button @click.prevent="login" type="submit" class="btn btn-primary">Se connecter</button>
+
+                </form>
             </div>
-            <div th:if="${param.fail}">
-                <span>Le pseudo existe déjà !</span>
-            </div>-->
         </div>
-    </body>
-</html>
 \ No newline at end of file
+    </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>
@@ -6,6 +6,7 @@
 </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">