UI : modifications mineures

* Changement de quelques textes * Mieux adapté aux mobiles * Ajout des alertes pour la page d'ajout des utilisateurs

UI : modifications mineures
* Changement de quelques textes * Mieux adapté aux mobiles * Ajout des alertes pour la page d'ajout des utilisateurs
Antoine Duquenoy
1 parent 115e3f68
Showing 11 changed files with 45 additions and 31 deletions Show diff stats
PFE06/src/main/java/com/PFE/ServerManager/MainController.java
PFE06/src/main/resources/application.properties
PFE06/src/main/resources/static/css/home.css
PFE06/src/main/resources/static/css/login.css
PFE06/src/main/resources/static/css/registration.css
PFE06/src/main/resources/static/js/home.js
PFE06/src/main/resources/templates/all.html
PFE06/src/main/resources/templates/denied.html
PFE06/src/main/resources/templates/home.html
PFE06/src/main/resources/templates/login.html
PFE06/src/main/resources/templates/registration.html
@@ -82,10 +82,12 @@ public class MainController {
         modelAndView.setViewName("registration");
         ///////
         if(temp != null) {
-            modelAndView.addObject("ok", "l'utilisateur existe déjà");
+            modelAndView.addObject("message", "L'utilisateur existe déjà !");
+            modelAndView.addObject("fail", true);
         }
         else {
-            modelAndView.addObject("ok", "l'utilisateur a bien été ajouté");
+            modelAndView.addObject("message", "L'utilisateur a bien été ajouté !");
+            modelAndView.addObject("ok", true);
             customerRepository.save(n);
         }
         modelAndView.setViewName("registration");
@@ -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
 body { background-color: #FFF; }
-/*
+
 .upload-drop-zone {
   height: 200px;
   border-width: 2px;
@@ -9,12 +9,7 @@ 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;
@@ -20,6 +20,7 @@ body { background-color: #E9EEF2; }
   border-radius: 5px;
   margin: 50px auto;
   max-width: 38%;
+  min-width: 400px;
   padding: 50px 70px 70px 71px;
 }
@@ -27,7 +28,7 @@ body { background-color: #E9EEF2; }
   margin-bottom:10px;
 }
-.login-form { text-align:center;}
+.login-form { text-align:center; }
 .forgot a {
   color: #777777;
@@ -20,6 +20,7 @@ body { background-color: #E9EEF2; }
     border-radius: 5px;
     margin: 50px auto;
     max-width: 38%;
+    min-width: 400px;
     padding: 50px 70px 70px 71px;
 }
@@ -27,14 +28,14 @@ body { background-color: #E9EEF2; }
     margin-bottom:10px;
 }
-.login-form { text-align:center;}
+.login-form { text-align:center; }
 .forgot a {
     color: #777777;
     font-size: 14px;
     text-decoration: underline;
 }
-.login-form .btn.btn-primary {
+.login-form  .btn.btn-primary {
     background: #f0ad4e none repeat scroll 0 0;
     border-color: #f0ad4e;
     color: #ffffff;
@@ -49,7 +50,6 @@ body { background-color: #E9EEF2; }
     background: #ff9900 none repeat scroll 0 0;
 }
-
 .back { text-align: left; margin-top:10px; }
 .back a {color: #444444; font-size: 13px;text-decoration: none;}
@@ -3,6 +3,7 @@ $(document).ready(function() {
 /********** Tableau **********/
   var tableNodes = $('#nodes-table').DataTable( {
+      responsive: true,
       select: {
           style: 'multi'
       }
@@ -15,7 +15,7 @@
 <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>
+        <span class="navbar-brand"> ID : <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>
@@ -8,8 +8,8 @@
 <body>
     <h1>Access Denied !</h1>
-    <form th:action="@{/login}" method="GET">
-        <button type="Submit">Se connecter</button>
+    <form th:action="@{/}" method="GET">
+        <button type="Submit">Accueil</button>
     </form>
 </body>
@@ -10,6 +10,7 @@
     <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 rem="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
     <link rel="stylesheet" th:href="@{/css/home.css}">
     <title>Accueil</title>
   </head>
@@ -17,7 +18,7 @@
   <body>
     <div id="app">
         <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>
+            <span class="navbar-brand"> ID : <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>
@@ -192,6 +193,7 @@
     <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 src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js" charset="utf-8"></script>
     <script th:src="@{/js/home.js}"></script>
   </body>
 </html>
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=0.8, 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">
@@ -21,20 +21,19 @@
                 </div>
                 <div th:if="${param.error}">
-                    <div v-if="wrong" class="alert alert-danger" role="alert">
-                        Login ou mot de passe incorrect
+                    <div class="alert alert-danger" role="alert">
+                        Pseudo ou mot de passe incorrect
                     </div>
                 </div>
-
                 <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">
+                        <input type="text" v-model="user.login" class="form-control" id="inputEmail" placeholder="Pseudo" name="pseudo">
                     </div>
                     <div class="form-group">
-                        <input type="password" v-model="user.password" class="form-control" id="inputPassword" placeholder="Password" name="password">
+                        <input type="password" v-model="user.password" class="form-control" id="inputPassword" placeholder="Mot de passe" name="password">
                     </div>
                     <button @click.prevent="login" type="submit" class="btn btn-primary">Se connecter</button>
@@ -4,14 +4,14 @@
 <head>
     <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">
+    <meta name="viewport" content="width=device-width, initial-scale=0.8, shrink-to-fit=no">
     <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>
+
     <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>
+        <span class="navbar-brand"> ID : <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>
@@ -36,18 +36,32 @@
             </div>
         </div>
     </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>
+
+            <div th:if="${ok}">
+                <div class="alert alert-success" role="alert">
+                    <span th:utext="${message}"></span>
+                </div>
+            </div>
+
+            <div th:if="${fail}">
+                <div class="alert alert-danger" role="alert">
+                    <span th:utext="${message}"></span>
+                </div>
+            </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">
+                    <input type="text" v-model="user.login" class="form-control" id="username" placeholder="Enter le pseudo" name="pseudo">
                 </div>
                 <div class="form-group">
-                    <input type="password" v-model="user.password" class="form-control" id="password" placeholder="Enter Password" name="password">
+                    <input type="password" v-model="user.password" class="form-control" id="password" placeholder="Entre le mot de passe" name="password">
                 </div>
                 <div class="form3">
                     <input type="radio" id="role1" name="role" value="ADMIN">
@@ -58,7 +72,7 @@
                 </div>
                 <button @click.prevent="registration" type="submit" class="btn btn-primary">Ajouter</button>
             </form>
-            <span th:utext="${ok}"></span>
+
         </div>
     </div>