Merge branch 'master' of https://codefirst.iut.uca.fr/git/maxence.lanone/JTT_CrM

.drone.yml

@@ -0,0 +1,13 @@
+kind: pipeline
+name: JTT_CRM_Pipeline
+
+trigger:
+  event:
+    - push
+
+steps:
+- name: start
+  image: node
+  commands:
+  - npm install
+  - npm start

src/pages/Admin.js

@@ -8,16 +8,16 @@ const Admin = () => {
             <div className="nav_bar_verticale">
                 <img className="logo" srcSet="./LogoApp.svg"></img>
                 <div className="create_user">
-                    <button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick={Create_user}>Créer un nouvel utilisateur</button>
+                    <button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick={Create_user}>Créer utilisateur</button>
                 </div>
                 <div className="modify_user">
-                    <button id="user" className="bouton" type="button" value="Modifier un utilisateur" onClick={Modify_user}>Modifier un utilisateur</button>
+                    <button id="user" className="bouton" type="button" value="Modifier un utilisateur" onClick={Modify_user}>Modifier utilisateur</button>
                 </div>
                 <div className="delete_user">
-                    <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" onClick={Delete_user}>Supprimer un utilisateur</button>
+                    <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" onClick={Delete_user}>Supprimer utilisateur</button>
                 </div>
             </div>
-            <p className="Titre">Admin</p>
+            <p className="Titre">Admin
             <div className="Formulaire">
                 <form className="form">
                     <table className="Formulaire_de_connexion">
@@ -42,12 +42,15 @@ const Admin = () => {
                             <input id="password" className="texte_zone" type="password" placeholder="Mot de passe (par default)"/>
                         </tr>
                         <tr>
-                            <button className="bouton_val_ann" type="submit">Valider</button>
-                            <button className="bouton_val_ann" type="submit">Annuler</button>
+                            <div className='bouton_submit'>
+                                <button className="bouton_val_ann" type="submit">Valider</button>
+                                <button className="bouton_val_ann" type="submit">Annuler</button>
+                            </div>
                         </tr>
                     </table>
                 </form>
             </div>
+            </p>
         </div>
     );
 };

src/pages/Connexion.js

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import React, { useState } from 'react';
+import CryptoJS from 'crypto-js';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
@@ -33,9 +34,12 @@ function Connexion() {
             setAuth("Failed");
             return;
         }
-        const apiString = '/User/Auth/' + login + "/" + password;
+        
+        const apiString = '/User/Auth/' + login + "/" + CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex);
         api.get(apiString).then((response) => {
             const users = response.data;
+            console.log(response.data.length);
+            console.log(users.length);
             if (users.length > 0)
                 if (users[0].result === 1)
                     setAuth("Succeed");
@@ -72,9 +76,9 @@ function Connexion() {
                         </div>
                         <button type="submit">Se connecter</button>
                     </label>
-                    <p>{auth === ""?'':auth === "Failed"?'Authentification Failed':'User Unknown'}</p>
+                    <a className="forgot_pw" href="http://localhost">Mot de passe oublié ?</a>
+                    <p>{auth === ""?'':auth === "Failed"?'Authentification Echoué':'Utilisateur inconnu'}</p>
                 </form>
-                <a className="forgot_pw" href="http://localhost">Mot de passe oublié ?</a>
             </div>
         );
     }

src/styles/components/_admin.scss

@@ -1,26 +1,36 @@
 .page_admin {
     display: flex;
     flex-direction: row;
+    flex-basis: 100%;
+    height: 100vh;
+    position:fixed;
 
     .nav_bar_verticale {
         display: flex;
         flex-direction: column;
         width: 200px;
-        height: 753px;
-        border: 5px white inset;
+        height: 735px;
+        background: rgba(255, 255, 255, 0.143);
+        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        backdrop-filter: blur(3px);
+        -webkit-backdrop-filter: blur(1.5px);
+        border-radius: 15px;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        margin: 10px;
+
 
         .create_user {
-            padding: 30px;
+            padding: 5px;
             align-self: center;
         }
 
         .modify_user {
-            padding: 30px;
+            padding: 5px;
             align-self: center;
         }
 
         .delete_user {
-            padding: 30px;
+            padding: 5px;
             align-self: center;
         }
 
@@ -32,39 +42,29 @@
             position: relative;
             width: 180px;
             height: 100px;
-            border-radius: 30px;
+            border-radius: 10px;
             font-size: 13.5px;
             font-weight: bold;
             transition: 1s box-shadow;
             cursor: pointer;
             border: none;
             box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-            background-color: white;
-        }
-
-
-        .bouton:hover {
-            box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
-            color: white;
-            background-color: black;
-        }
+            background-color: rgba(163, 163, 163, 0.371);
+            border: 1px solid rgba(255,255,255,0.1);
+            backdrop-filter: blur(30px);
+            color: rgb(255, 255, 255);
+            cursor: pointer;
+            font-size: 17px;
 
-        .bouton:hover::before,
-        .bouton:hover::after {
-            content: '';
-            display: block;
-            position: absolute;
-            z-index: -1;
-            width: 100%;
-            height: 100%;
-            background: black;
-            border-radius: 30px;
-            animation: 0.5s jiggle infinite;
-        }
+            &:hover{
+                box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
+                color: white;
+                background-color: rgba(114, 114, 114, 0.371); 
+            }
 
-        .bouton:hover::after {
-            background: black;
-            animation: 1s jiggle infinite;
+            &:active{
+                background-color:rgba(68, 68, 68, 0.972);
+            }
         }
     }
 
@@ -84,19 +84,12 @@
     .Formulaire{
         display: flex;
         flex-direction: column;
+        border-radius: 30px;
         margin: 100px;
         padding: 30px;
         align-items: center;
     }
 
-    .form{
-        align-self: center;
-        flex-direction: row;
-        font-weight: bold;
-        font-size: 80px;
-        margin: 20px;
-    }
-
     .texte {
         align-self: center;
         font-weight: bold;
@@ -134,12 +127,12 @@
         &:active {
             background-color: rgba(68, 68, 68, 0.972);
         }
-    }
 
-    .texte_barre{
-        display: flex;
-        width: 400px;
-    }
+        .bouton_submit{
+            display: flex;
+            flex-direction: row;
+        }
+    }  
 }
 
     

src/styles/components/_compte.scss

@@ -91,7 +91,7 @@ body {
             flex-direction: row;
             justify-content: space-between;
             width: auto;
-            height: 86%;
+            height: 82%;
     
             .nav_bar_verticale {
                 display: flex;
@@ -109,7 +109,7 @@ body {
             .Compte {
                 display: flex;
                 flex-direction: column;
-                width: 94.3%;
+                width: 94%;
                 height: auto;
 
                 background: rgba(255, 255, 255, 0.3);