Antoine Duquenoy / PFE_IMA5_2018_2019_P06

Commit 66a8b43cf6538f7711ea1d1c359b851be206c0e5

Authored by Antoine Duquenoy
1 parent 16791f79

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
Showing 11 changed files with 490 additions and 52 deletions   Show diff stats
Inline Side-by-side
PFE06/src/main/java/com/PFE/ServerManager/MainController.java
  Show/Hide comments   View file @66a8b43
1 1 package com.PFE.ServerManager;
2 2  
3 3 import org.springframework.beans.factory.annotation.Autowired;
  4 +import org.springframework.http.HttpStatus;
4 5 import org.springframework.stereotype.Controller;
5 6 import org.springframework.web.bind.annotation.*;
6 7 import org.springframework.web.servlet.ModelAndView;
... ... @@ -10,10 +11,15 @@ import java.util.HashSet;
10 11 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
11 12 import org.springframework.security.core.context.SecurityContextHolder;
12 13 import org.springframework.security.core.Authentication;
  14 +import org.springframework.web.multipart.MultipartFile;
  15 +import org.springframework.http.ResponseEntity;
13 16  
  17 +import javax.jws.WebParam;
14 18 import javax.persistence.SequenceGenerator;
  19 +import javax.servlet.annotation.MultipartConfig;
15 20  
16 21 @Controller
  22 +@MultipartConfig(fileSizeThreshold = 20971520)
17 23 public class MainController {
18 24  
19 25 @Autowired
... ... @@ -42,8 +48,13 @@ public class MainController {
42 48 }
43 49  
44 50 @GetMapping(path="/registration")
45   - public String registration() {
46   - return "registration";//fait le lien automatiquement avec le page html du même nom //return "redirect:/....";
  51 + public ModelAndView registration() {
  52 + ModelAndView modelAndView = new ModelAndView();
  53 + Authentication auth = SecurityContextHolder.getContext().getAuthentication();
  54 + Customer customer = customerRepository.findByPseudo(auth.getName());
  55 + modelAndView.addObject("customerName", customer.getPseudo());
  56 + modelAndView.setViewName("registration");
  57 + return modelAndView;
47 58 }
48 59  
49 60 @GetMapping(path="/denied")
... ... @@ -75,6 +86,11 @@ public class MainController {
75 86 return modelAndView;
76 87 }
77 88  
  89 + @PostMapping(path="/file")
  90 + public ResponseEntity<?> addFile(@RequestParam("file") MultipartFile uploadedFile, @RequestParam String filename, @RequestParam String nodes) {
  91 + return new ResponseEntity<>(HttpStatus.OK);
  92 + }
  93 +
78 94 @GetMapping(path="/login")
79 95 public ModelAndView login() {
80 96 ModelAndView modelAndView = new ModelAndView();
... ...
PFE06/src/main/java/com/PFE/ServerManager/Role.java
  Show/Hide comments   View file @66a8b43
... ... @@ -6,7 +6,7 @@ import javax.persistence.*;
6 6 @Table(name = "role")
7 7 public class Role {
8 8 @Id
9   - @Column(name = "role_id",columnDefinition = "serial")
  9 + @Column(name = "role_id", columnDefinition = "serial")
10 10 @GeneratedValue(strategy = GenerationType.AUTO)
11 11 // inutile d'utiliser les lignes ci-dessous à moins que l'utilisateur n'ajoute des roles par une page Web
12 12 //@GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "role_seq_gen")
... ...
PFE06/src/main/java/com/PFE/ServerManager/SecurityConfig.java
  Show/Hide comments   View file @66a8b43
... ... @@ -38,6 +38,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter {
38 38 .antMatchers("/registration").hasAuthority("ADMIN")
39 39 .antMatchers("/login").permitAll()
40 40 .antMatchers("/denied").permitAll()
  41 + .antMatchers("/css/**", "/js/**").permitAll()
41 42 .anyRequest().authenticated()
42 43 .and()
43 44 .formLogin()
... ... @@ -48,9 +49,10 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter {
48 49 .and()
49 50 .logout()
50 51 .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
51   - .logoutSuccessUrl("/")
  52 + .logoutSuccessUrl("/login")
52 53 .and()
53 54 .exceptionHandling()
54 55 .accessDeniedPage("/denied");
55 56 }
  57 +
56 58 }
57 59 \ No newline at end of file
... ...
PFE06/src/main/resources/application.properties
  Show/Hide comments   View file @66a8b43
... ... @@ -8,9 +8,9 @@ spring.jpa.hibernate.ddl-auto=create
8 8 #"update" met à jour la base données
9 9  
10 10 #Postgres config :
11   -spring.datasource.url=jdbc:postgresql://localhost:5432/sql_only
  11 +spring.datasource.url=jdbc:postgresql://localhost:3306/sql_only
12 12 spring.datasource.username=postgres
13   -spring.datasource.password=idalurf123
  13 +spring.datasource.password=admin
14 14  
15 15  
16 16 # montre les communications JPA avec la BDD
... ...
PFE06/src/main/resources/data.sql
  Show/Hide comments   View file @66a8b43
... ... @@ -3,5 +3,5 @@ INSERT INTO &quot;role&quot; VALUES (1,&#39;ADMIN&#39;);
3 3 INSERT INTO "role" VALUES (2,'USER');
4 4 INSERT INTO "customer" VALUES (1,1,'$2a$10$GflhaD2IYuErynuOlxS2W.Gp1kXksVdiSviYN/lDYCsuH.lVm6Ph2','admin'); /*pseudo : admin // password : admin // role : ADMIN*/
5 5 INSERT INTO "customer_role" VALUES (1,1);
6   -INSERT INTO "customer" VALUES (2,1,'$2a$10$0Fnls/gTQS1zA6rj1ZlxfuyyKNpCBDA1tcCqQMroPDIj1fRyhgv/O','user'); /*pseudo : user // password : password // role : USER*/
  6 +INSERT INTO "customer" VALUES (2,1,'$2a$10$0Fnls/gTQS1zA6rj1ZlxfuyyKNpCBDA1tcCqQMroPDIj1fRyhgv/O','user'); /*pseudo : user // password : user // role : USER*/
7 7 INSERT INTO "customer_role" VALUES (2,2);
8 8 \ No newline at end of file
... ...
PFE06/src/main/resources/static/css/home.css 0 → 100644
  Show/Hide comments   View file @66a8b43
... ... @@ -0,0 +1,12 @@
  1 +body { background-color: #FFF; }
  2 +
  3 +.upload-drop-zone {
  4 + height: 200px;
  5 + border-width: 2px;
  6 + margin-bottom: 20px;
  7 + color: #ccc;
  8 + border-style: dashed;
  9 + border-color: #ccc;
  10 + line-height: 200px;
  11 + text-align: center
  12 +}
... ...
PFE06/src/main/resources/static/css/login.css 0 → 100644
  Show/Hide comments   View file @66a8b43
... ... @@ -0,0 +1,54 @@
  1 +body { background-color: #E9EEF2; }
  2 +
  3 +.form-heading { color:#fff; font-size:23px; }
  4 +
  5 +.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0; }
  6 +
  7 +.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px; }
  8 +
  9 +.login-form .form-control {
  10 + background: #f7f7f7 none repeat scroll 0 0;
  11 + border: 1px solid #d4d4d4;
  12 + border-radius: 4px;
  13 + font-size: 14px;
  14 + height: 50px;
  15 + line-height: 50px;
  16 +}
  17 +
  18 +.main-div {
  19 + background: #ffffff none repeat scroll 0 0;
  20 + border-radius: 5px;
  21 + margin: 50px auto;
  22 + max-width: 38%;
  23 + padding: 50px 70px 70px 71px;
  24 +}
  25 +
  26 +.login-form .form-group {
  27 + margin-bottom:10px;
  28 +}
  29 +
  30 +.login-form { text-align:center;}
  31 +
  32 +.forgot a {
  33 + color: #777777;
  34 + font-size: 14px;
  35 + text-decoration: underline;
  36 +}
  37 +.login-form .btn.btn-primary {
  38 + background: #f0ad4e none repeat scroll 0 0;
  39 + border-color: #f0ad4e;
  40 + color: #ffffff;
  41 + font-size: 14px;
  42 + width: 100%;
  43 + height: 50px;
  44 + line-height: 50px;
  45 + padding: 0;
  46 +}
  47 +
  48 +.login-form .btn.btn-primary.reset {
  49 + background: #ff9900 none repeat scroll 0 0;
  50 +}
  51 +
  52 +.back { text-align: left; margin-top:10px; }
  53 +
  54 +.back a {color: #444444; font-size: 13px;text-decoration: none;}
... ...
PFE06/src/main/resources/static/js/home.js 0 → 100644
  Show/Hide comments   View file @66a8b43
... ... @@ -0,0 +1,127 @@
  1 +$(document).ready(function() {
  2 +
  3 +/********** Tableau **********/
  4 +
  5 + var tableNodes = $('#nodes-table').DataTable( {
  6 + select: {
  7 + style: 'multi'
  8 + }
  9 + } );
  10 +
  11 + var nodeSet = new Set();
  12 +
  13 + tableNodes.on('select', function (e, dt, type, indexes) {
  14 + var rowData = tableNodes.rows(indexes).data().toArray()[0];
  15 + nodeSet.add(rowData[0]);
  16 + } );
  17 +
  18 + tableNodes.on('deselect', function (e, dt, type, indexes) {
  19 + var rowData = tableNodes.rows(indexes).data().toArray()[0];
  20 + nodeSet.delete(rowData[0]);
  21 + } );
  22 +
  23 +/********** Drop Zone **********/
  24 +
  25 + var formData = new FormData();
  26 + var dropZone = document.querySelector("#drop-zone");
  27 + dropZone.style.cursor = "pointer";
  28 + var file = document.getElementById("filesExplorer");
  29 + var fileProgress = document.getElementById("file-progress");
  30 + var readyToSend = false;
  31 +
  32 + dropZone.addEventListener('click', function() {
  33 + delete formData;
  34 + formData = new FormData();
  35 + file.click();
  36 + })
  37 +
  38 + file.addEventListener('change', function() {
  39 + dropZone.innerHTML = this.files[0].name;
  40 + formData.append("file", this.files[0]);
  41 + formData.append("filename", this.files[0].name);
  42 + readyToSend = true;
  43 + }, false)
  44 +
  45 + dropZone.addEventListener('drop', function(e) {
  46 + e.preventDefault();
  47 + delete formData;
  48 + formData = new FormData();
  49 + dropZone.style.borderWidth = '2px';
  50 + var files = e.dataTransfer.files;
  51 +
  52 + if(files.length > 1) {
  53 + $("#warningFilesNumber").modal()
  54 + return;
  55 + }
  56 + dropZone.innerHTML = files[0].name;
  57 + formData.append("file", files[0]);
  58 + formData.append("filename", files[0].name);
  59 + readyToSend = true;
  60 + }, false)
  61 +
  62 + dropZone.addEventListener('dragenter', function(e) {
  63 + console.log("Enter");
  64 + dropZone.style.borderWidth = '5px';
  65 + }, false);
  66 +
  67 + dropZone.addEventListener('dragleave', function(e) {
  68 + console.log("Leave");
  69 + dropZone.style.borderWidth = '2px';
  70 + }, false);
  71 +
  72 + dropZone.addEventListener('dragover', function(e) {
  73 + e.preventDefault();
  74 + }, false);
  75 +
  76 + document.getElementById("sendButton").addEventListener('click', function() {
  77 + var modalContent = document.getElementById("modal-content");
  78 + var modalTitle = document.getElementById("modal-title");
  79 + if(readyToSend && nodeSet.size > 0) {
  80 + formData.append("nodes", Array.from(nodeSet).join(';'));
  81 + var request = new XMLHttpRequest();
  82 + request.open("POST", "/file");
  83 +
  84 + request.upload.onloadstart = function(e) {
  85 + fileProgress.style.display = 'block';
  86 + fileProgress.style.width = 0 + "px"
  87 + fileProgress.innerHTML = "0%";
  88 + }
  89 +
  90 + request.upload.onprogress = function(e) {
  91 + var p = 100 - ((e.total - e.loaded) / e.total * 100);
  92 + fileProgress.style.width = Math.ceil(p) + "%"
  93 + fileProgress.innerHTML = Math.ceil(p) + "%";
  94 + }
  95 +
  96 + request.upload.onloadend = function(e) {
  97 + fileProgress.style.width = 100 + "%"
  98 + fileProgress.innerHTML = "100%";
  99 + var modalButton = document.getElementById("modal-button");
  100 +
  101 + modalButton.addEventListener('click', function(e) {
  102 + location.reload();
  103 + })
  104 +
  105 + modalContent.innerHTML = "Upload terminé !";
  106 + modalTitle.innerHTML = "Félicitations";
  107 + $("#warningFilesNumber").modal()
  108 + }
  109 +
  110 + request.send(formData);
  111 +
  112 + delete formData;
  113 + formData = new FormData();
  114 + }
  115 + else {
  116 + if(readyToSend) {
  117 + modalContent.innerHTML = "Veuillez choisir un ou plusieurs noeuds !";
  118 + }
  119 + else {
  120 + modalContent.innerHTML = "Veuillez choisir un fichier !";
  121 + }
  122 + modalTitle.innerHTML = "Attention";
  123 + $("#warningFilesNumber").modal()
  124 + }
  125 + })
  126 +
  127 +} );
... ...
PFE06/src/main/resources/templates/home.html
  Show/Hide comments   View file @66a8b43
1   -<!DOCTYPE html>
2   -<html xmlns:th="http://www.thymeleaf.org">
3   -<html lang="en">
4   -<head>
5   - <meta charset="UTF-8">
6   - <title>Page d'accueil</title>
7   -</head>
8   -<body>
9   -
10   - <div th:switch="${customerRole}">
11   - <div th:case="'ADMIN'"><a th:href="@{/registration}">Enregistrer des utilisateurs</a></div>
12   - <div th:case="'USER'"></div>
13   - </div>
14   - <form th:action="@{/logout}" method="GET">
15   - <button type="Submit">Logout </button>
16   - </form>
17   -
18   - <h1><span th:text="${customerName}" th:remove="tag"></span> est connecté(e) !</h1>
19   -
20   -</body>
21   -</html>
22 1 \ No newline at end of file
  2 +<!--
  3 +
  4 +<!DOCTYPE html>
  5 +<html xmlns:th="http://www.thymeleaf.org">
  6 +<html lang="en">
  7 +<head>
  8 + <meta charset="UTF-8">
  9 + <title>Page d'accueil</title>
  10 +</head>
  11 +<body>
  12 +
  13 +<div th:switch="${customerRole}">
  14 + <div th:case="'ADMIN'"><a th:href="@{/registration}">Enregistrer des utilisateurs</a></div>
  15 + <div th:case="'USER'"></div>
  16 +</div>
  17 +<form th:action="@{/logout}" method="GET">
  18 + <button type="Submit">Logout </button>
  19 +</form>
  20 +
  21 +<h1><span th:text="${customerName}" th:remove="tag"></span> est connecté(e) !</h1>
  22 +
  23 +</body>
  24 +</html>
  25 +
  26 +-->
  27 +
  28 +<html xmlns:th="http://www.thymeleaf.org">
  29 +<html lang="en">
  30 + <head>
  31 +
  32 + <meta charset="utf-8">
  33 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  34 +
  35 + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  36 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  37 + <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
  38 + <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">
  39 + <link rel="stylesheet" th:href="@{/css/home.css}">
  40 +
  41 + <title>Accueil</title>
  42 + </head>
  43 + <body>
  44 +
  45 + <div id="app">
  46 +
  47 + <nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end" style="padding:15px; margin-bottom:50px;">
  48 + <a class="navbar-brand" href="#"><i class="fa fa-home" style="margin-right:10px;"></i>Gestion des noeuds</a>
  49 + <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>
  50 + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
  51 + <span class="navbar-toggler-icon"></span>
  52 + </button>
  53 + <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
  54 + <ul class="navbar-nav text-right">
  55 + <li class="nav-item active">
  56 + <a class="nav-link" th:href="@{/registration}"><i class="fa fa-cog" style="margin-right:7px;"></i>Paramètres</a>
  57 + </li>
  58 + </ul>
  59 + </div>
  60 + </nav>
  61 +
  62 + <div class="container" style="padding-bottom: 50px;">
  63 +
  64 + <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Choix des noeuds</h1>
  65 +
  66 + <table id="nodes-table" class="table table-striped table-bordered dt-responsive nowrap">
  67 + <thead>
  68 + <tr>
  69 + <th>Nom</th>
  70 + <th>IP</th>
  71 + <th>Architecture</th>
  72 + </tr>
  73 + </thead>
  74 + <tbody>
  75 + <tr>
  76 + <td>Nixon</td>
  77 + <td>System Architect</td>
  78 + <td>Edinburgh</td>
  79 + </tr>
  80 + <tr>
  81 + <td>Winters</td>
  82 + <td>Accountant</td>
  83 + <td>Tokyo</td>
  84 + </tr>
  85 + <tr>
  86 + <td>Cox</td>
  87 + <td>Junior Technical Author</td>
  88 + <td>San Francisco</td>
  89 + </tr>
  90 + <tr>
  91 + <td>Kelly</td>
  92 + <td>Senior Javascript Developer</td>
  93 + <td>Edinburgh</td>
  94 + </tr>
  95 + <tr>
  96 + <td>Satou</td>
  97 + <td>Accountant</td>
  98 + <td>Tokyo</td>
  99 + </tr>
  100 + <tr>
  101 + <td>Williamson</td>
  102 + <td>Integration Specialist</td>
  103 + <td>New York</td>
  104 + </tr>
  105 + <tr>
  106 + <td>Chandler</td>
  107 + <td>Sales Assistant</td>
  108 + <td>San Francisco</td>
  109 + </tr>
  110 + <tr>
  111 + <td>Davidson</td>
  112 + <td>Integration Specialist</td>
  113 + <td>Tokyo</td>
  114 + </tr>
  115 + <tr>
  116 + <td>Hurst</td>
  117 + <td>Javascript Developer</td>
  118 + <td>San Francisco</td>
  119 + </tr>
  120 + <tr>
  121 + <td>Frost</td>
  122 + <td>Software Engineer</td>
  123 + <td>Edinburgh</td>
  124 + </tr>
  125 + <tr>
  126 + <td>Gaines</td>
  127 + <td>Office Manager</td>
  128 + <td>London</td>
  129 + </tr>
  130 + <tr>
  131 + <td>Flynn</td>
  132 + <td>Support Lead</td>
  133 + <td>Edinburgh</td>
  134 + </tr>
  135 + <tr>
  136 + <td>Marshall</td>
  137 + <td>Regional Director</td>
  138 + <td>San Francisco</td>
  139 + </tr>
  140 + <tr>
  141 + <td>Kennedy</td>
  142 + <td>Senior Marketing Designer</td>
  143 + <td>London</td>
  144 + </tr>
  145 + <tr>
  146 + <td>Fitzpatrick</td>
  147 + <td>Regional Director</td>
  148 + <td>London</td>
  149 + </tr>
  150 + <tr>
  151 + <td>Silva</td>
  152 + <td>Marketing Designer</td>
  153 + <td>London</td>
  154 + </tr>
  155 + <tr>
  156 + <td>Byrd</td>
  157 + <td>Chief Financial Officer (CFO)</td>
  158 + <td>New York</td>
  159 + </tr>
  160 + <tr>
  161 + <td>Little</td>
  162 + <td>Systems Administrator</td>
  163 + <td>New York</td>
  164 + </tr>
  165 + <tr>
  166 + <td>Greer</td>
  167 + <td>Software Engineer</td>
  168 + <td>London</td>
  169 + </tr>
  170 +
  171 + </tbody>
  172 + </table>
  173 +
  174 + <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Uploader un fichier</h1>
  175 +
  176 + <div class="panel panel-default">
  177 +
  178 + <h4>Choix du fichier</h4>
  179 +
  180 + <input id="filesExplorer" type="file" style="display:none"></input>
  181 + <div class="upload-drop-zone" id="drop-zone">
  182 + Clic ou dépose un fichier ici
  183 + </div>
  184 +
  185 + <div class="progress">
  186 + <div id="file-progress" class="progress-bar" role="progressbar" style="width: 75%; display:none">25%</div>
  187 + </div>
  188 +
  189 + </div>
  190 +
  191 + <button id="sendButton" type="button" class="btn btn-secondary btn-lg btn-block"style="margin-top:50px;">Envoyer</button>
  192 +
  193 + </div>
  194 +
  195 + </div>
  196 +
  197 + <div class="modal fade" id="warningFilesNumber" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  198 + <div class="modal-dialog modal-dialog-centered" role="document">
  199 + <div class="modal-content">
  200 + <div class="modal-header">
  201 + <h5 class="modal-title" id="modal-title">Attention</h5>
  202 + <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  203 + <span aria-hidden="true">&times;</span>
  204 + </button>
  205 + </div>
  206 + <div id="modal-content" class="modal-body">
  207 + Un seul fichier peut être envoyé !
  208 + </div>
  209 + <div class="modal-footer">
  210 + <button id="modal-button" type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  211 + </div>
  212 + </div>
  213 + </div>
  214 + </div>
  215 +
  216 + </div>
  217 +
  218 + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  219 + <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  220 + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  221 + <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" charset="utf-8"></script>
  222 + <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" charset="utf-8"></script>
  223 + <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" charset="utf-8"></script>
  224 + <script th:src="@{/js/home.js}"></script>
  225 + </body>
  226 +</html>
... ...
PFE06/src/main/resources/templates/login.html
  Show/Hide comments   View file @66a8b43
1 1 <!DOCTYPE html>
2 2 <html xmlns:th="http://www.thymeleaf.org">
3   -<head>
4   - <title>Page de connexion</title>
5   - <meta charset="utf-8"/>
6   -</head>
7   - <body>
8   - <div>
9   - <h5>Se connecter :</h5>
10   - <form th:action="@{/login}" method="POST">
11   - <div class="form1">
12   - <label for="username">User Name: </label>
13   - <input type="text" id="username" placeholder="Enter UserName" name="pseudo"/>
  3 + <head>
  4 +
  5 + <meta charset="utf-8">
  6 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7 +
  8 + <link rel="stylesheet" th:href="@{/css/login.css}">
  9 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  10 +
  11 + <title>Connexion</title>
  12 + </head>
  13 + <body>
  14 +
  15 + <div id="app">
  16 + <div class="login-form">
  17 + <div class="main-div">
  18 + <div class="panel">
  19 + <h2>Formulaire de connexion</h2>
  20 + <p>Merci d'entrer votre login et mot de passe</p>
14 21 </div>
15   - <div class="form2">
16   - <label for="password">Password: </label>
17   - <input type="password" id="password" placeholder="Enter Password" name="password"/>
  22 +
  23 + <div th:if="${param.error}">
  24 + <div v-if="wrong" class="alert alert-danger" role="alert">
  25 + Login ou mot de passe incorrect
  26 + </div>
18 27 </div>
19   - <button type="submit">Se connecter</button>
20   - </form>
21   - <span th:utext="${error}"></span>
22   - <!--<div th:if="${param.ok}">
23   - <span>L'utilisateur a été ajouté !</span>
  28 +
  29 +
  30 + <form id="Login" th:action="@{/login}" method="POST">
  31 +
  32 + <div class="form-group">
  33 + <input type="text" v-model="user.login" class="form-control" id="inputEmail" placeholder="Login" name="pseudo">
  34 + </div>
  35 +
  36 + <div class="form-group">
  37 + <input type="password" v-model="user.password" class="form-control" id="inputPassword" placeholder="Password" name="password">
  38 + </div>
  39 +
  40 + <button @click.prevent="login" type="submit" class="btn btn-primary">Se connecter</button>
  41 +
  42 + </form>
24 43 </div>
25   - <div th:if="${param.fail}">
26   - <span>Le pseudo existe déjà !</span>
27   - </div>-->
28 44 </div>
29   - </body>
30   -</html>
31 45 \ No newline at end of file
  46 + </div>
  47 +
  48 + <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  49 + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  50 + <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>
  51 + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  52 + </body>
  53 +</html>
... ...
PFE06/src/main/resources/templates/registration.html
  Show/Hide comments   View file @66a8b43
... ... @@ -6,6 +6,7 @@
6 6 </head>
7 7 <body>
8 8 <div>
  9 + <h1><span th:text="${customerName}" th:remove="tag"></span> est connecté(e) !</h1>
9 10 <h5>Ajout d'utilisateurs :</h5>
10 11 <form th:action="@{/registration}" method="POST">
11 12 <div class="form1">
... ...