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

3 years ago · 6404828e7a
parent d147140000 80c8fd92e2
commit 6404828e7a
6 changed files with 284 additions and 107 deletions
--- a/server-api/package-lock.json
+++ b/server-api/package-lock.json
@ -10,9 +10,13 @@
      "license": "ISC",
      "dependencies": {
        "axios": "^1.1.3",
+        "body": "^5.1.0",
+        "body-parser": "^1.20.1",
+        "corps": "^0.1.0",
        "cors": "^2.8.5",
        "express": "^4.18.2",
-        "mysql": "^2.18.1"
+        "mysql": "^2.18.1",
+        "parser": "^0.1.4"
      },
      "devDependencies": {
        "nodemon": "^2.0.20"
@ -92,6 +96,17 @@
        "node": ">=8"
      }
    },
+    "node_modules/body": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/body/-/body-5.1.0.tgz",
+      "integrity": "sha512-chUsBxGRtuElD6fmw1gHLpvnKdVLK302peeFa9ZqAEk8TyzZ3fygLyUEDDPTJvL9+Bor0dIwn6ePOsRM2y0zQQ==",
+      "dependencies": {
+        "continuable-cache": "^0.3.1",
+        "error": "^7.0.0",
+        "raw-body": "~1.1.0",
+        "safe-json-parse": "~1.0.1"
+      }
+    },
    "node_modules/body-parser": {
      "version": "1.20.1",
      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@ -115,6 +130,28 @@
        "npm": "1.2.8000 || >= 1.4.16"
      }
    },
+    "node_modules/body/node_modules/bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz",
+      "integrity": "sha512-/x68VkHLeTl3/Ll8IvxdwzhrT+IyKc52e/oyHhA2RwqPqswSnjVbSddfPRwAsJtbilMAPSRWwAlpxdYsSWOTKQ=="
+    },
+    "node_modules/body/node_modules/raw-body": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.1.7.tgz",
+      "integrity": "sha512-WmJJU2e9Y6M5UzTOkHaM7xJGAPQD8PNzx3bAd2+uhZAim6wDk6dAZxPVYLF67XhbR4hmKGh33Lpmh4XWrCH5Mg==",
+      "dependencies": {
+        "bytes": "1",
+        "string_decoder": "0.10"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/body/node_modules/string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
+    },
    "node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -220,6 +257,11 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/continuable-cache": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/continuable-cache/-/continuable-cache-0.3.1.tgz",
+      "integrity": "sha512-TF30kpKhTH8AGCG3dut0rdd/19B7Z+qCnrMoBLpyQu/2drZdNrrpcjPEoJeSVsQM+8KmWG5O56oPDjSSUsuTyA=="
+    },
    "node_modules/cookie": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@ -238,6 +280,23 @@
      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
    },
+    "node_modules/corps": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/corps/-/corps-0.1.0.tgz",
+      "integrity": "sha512-oPz1CMi+iL/BVDa3anQRgMsY+A3GCosqd8xCXp8T3FNgg/1ov0Erif1S9KBmsnjoSfCrBH/VGyy1BWFnt36Ziw==",
+      "dependencies": {
+        "highland": "^1.26.3",
+        "qs": "^0.6.6"
+      }
+    },
+    "node_modules/corps/node_modules/qs": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-0.6.6.tgz",
+      "integrity": "sha512-kN+yNdAf29Jgp+AYHUmC7X4QdJPR8czuMWLNLc0aRxkQ7tB3vJQEONKKT9ou/rW7EbqVec11srC9q9BiVbcnHA==",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/cors": {
      "version": "2.8.5",
      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
@ -283,6 +342,11 @@
        "npm": "1.2.8000 || >= 1.4.16"
      }
    },
+    "node_modules/disect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/disect/-/disect-1.1.1.tgz",
+      "integrity": "sha512-rr2Ym8FSAoqAJ1KfpUiQ/Io01HP0LZPHBuppbFsHozmSNf+YwrvyD5pm5tMTUApJFNwD7HeWJ5DGldSugScukA=="
+    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@ -296,6 +360,14 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/error": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/error/-/error-7.2.1.tgz",
+      "integrity": "sha512-fo9HBvWnx3NGUKMvMwB/CBCMMrfEJgbDTVDEkPygA3Bdd3lM1OyCd+rbQ8BwnpF6GdVeOLDNmyL4N5Bg80ZvdA==",
+      "dependencies": {
+        "string-template": "~0.2.1"
+      }
+    },
    "node_modules/escape-html": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@ -502,6 +574,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/highland": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/highland/-/highland-1.29.0.tgz",
+      "integrity": "sha512-cg9mPPlGbZ2G8KTNGTsfXFH3GAdPF9PVQ/rnm6nCLlvniXHvsb7SVXB3GE+hMCmMEipWtVqTWUEUEJ6bUwvYFA=="
+    },
    "node_modules/http-errors": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@ -783,6 +860,17 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/parser": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/parser/-/parser-0.1.4.tgz",
+      "integrity": "sha512-f6EM/mBtPzmIh96MpcbePfhkBOYRmLYWuOukJqMysMlvjp4s2MQSSQnFEekd9GV4JGTnDJ2uFt3Ztcqc9wCMJg==",
+      "dependencies": {
+        "tokenizer": "*"
+      },
+      "engines": {
+        "node": "0.4-0.9"
+      }
+    },
    "node_modules/parseurl": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@ -922,6 +1010,11 @@
        }
      ]
    },
+    "node_modules/safe-json-parse": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-1.0.1.tgz",
+      "integrity": "sha512-o0JmTu17WGUaUOHa1l0FPGXKBfijbxK6qoHzlkihsDXxzBHvJcA7zgviKR92Xs841rX9pK16unfphLq0/KqX7A=="
+    },
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@ -1046,6 +1139,11 @@
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
    },
+    "node_modules/string-template": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
+      "integrity": "sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw=="
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -1078,6 +1176,17 @@
        "node": ">=0.6"
      }
    },
+    "node_modules/tokenizer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/tokenizer/-/tokenizer-1.1.2.tgz",
+      "integrity": "sha512-c/EYsBwEW/EX28q44UaSrJ9o5M2aI+N/xdJJ4Zl7dNq76OmWQHhmXH0T8DJQNjVYPc7NclV2CZQfyeUMfnEu/A==",
+      "dependencies": {
+        "disect": "~1.1.0"
+      },
+      "engines": {
+        "node": "0.10.x"
+      }
+    },
    "node_modules/touch": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
@ -1201,6 +1310,38 @@
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
      "dev": true
    },
+    "body": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/body/-/body-5.1.0.tgz",
+      "integrity": "sha512-chUsBxGRtuElD6fmw1gHLpvnKdVLK302peeFa9ZqAEk8TyzZ3fygLyUEDDPTJvL9+Bor0dIwn6ePOsRM2y0zQQ==",
+      "requires": {
+        "continuable-cache": "^0.3.1",
+        "error": "^7.0.0",
+        "raw-body": "~1.1.0",
+        "safe-json-parse": "~1.0.1"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz",
+          "integrity": "sha512-/x68VkHLeTl3/Ll8IvxdwzhrT+IyKc52e/oyHhA2RwqPqswSnjVbSddfPRwAsJtbilMAPSRWwAlpxdYsSWOTKQ=="
+        },
+        "raw-body": {
+          "version": "1.1.7",
+          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.1.7.tgz",
+          "integrity": "sha512-WmJJU2e9Y6M5UzTOkHaM7xJGAPQD8PNzx3bAd2+uhZAim6wDk6dAZxPVYLF67XhbR4hmKGh33Lpmh4XWrCH5Mg==",
+          "requires": {
+            "bytes": "1",
+            "string_decoder": "0.10"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
+        }
+      }
+    },
    "body-parser": {
      "version": "1.20.1",
      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@ -1296,6 +1437,11 @@
      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
    },
+    "continuable-cache": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/continuable-cache/-/continuable-cache-0.3.1.tgz",
+      "integrity": "sha512-TF30kpKhTH8AGCG3dut0rdd/19B7Z+qCnrMoBLpyQu/2drZdNrrpcjPEoJeSVsQM+8KmWG5O56oPDjSSUsuTyA=="
+    },
    "cookie": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@ -1311,6 +1457,22 @@
      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
    },
+    "corps": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/corps/-/corps-0.1.0.tgz",
+      "integrity": "sha512-oPz1CMi+iL/BVDa3anQRgMsY+A3GCosqd8xCXp8T3FNgg/1ov0Erif1S9KBmsnjoSfCrBH/VGyy1BWFnt36Ziw==",
+      "requires": {
+        "highland": "^1.26.3",
+        "qs": "^0.6.6"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "0.6.6",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-0.6.6.tgz",
+          "integrity": "sha512-kN+yNdAf29Jgp+AYHUmC7X4QdJPR8czuMWLNLc0aRxkQ7tB3vJQEONKKT9ou/rW7EbqVec11srC9q9BiVbcnHA=="
+        }
+      }
+    },
    "cors": {
      "version": "2.8.5",
      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
@ -1343,6 +1505,11 @@
      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
    },
+    "disect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/disect/-/disect-1.1.1.tgz",
+      "integrity": "sha512-rr2Ym8FSAoqAJ1KfpUiQ/Io01HP0LZPHBuppbFsHozmSNf+YwrvyD5pm5tMTUApJFNwD7HeWJ5DGldSugScukA=="
+    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@ -1353,6 +1520,14 @@
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
    },
+    "error": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/error/-/error-7.2.1.tgz",
+      "integrity": "sha512-fo9HBvWnx3NGUKMvMwB/CBCMMrfEJgbDTVDEkPygA3Bdd3lM1OyCd+rbQ8BwnpF6GdVeOLDNmyL4N5Bg80ZvdA==",
+      "requires": {
+        "string-template": "~0.2.1"
+      }
+    },
    "escape-html": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@ -1499,6 +1674,11 @@
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
    },
+    "highland": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/highland/-/highland-1.29.0.tgz",
+      "integrity": "sha512-cg9mPPlGbZ2G8KTNGTsfXFH3GAdPF9PVQ/rnm6nCLlvniXHvsb7SVXB3GE+hMCmMEipWtVqTWUEUEJ6bUwvYFA=="
+    },
    "http-errors": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@ -1708,6 +1888,14 @@
        "ee-first": "1.1.1"
      }
    },
+    "parser": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/parser/-/parser-0.1.4.tgz",
+      "integrity": "sha512-f6EM/mBtPzmIh96MpcbePfhkBOYRmLYWuOukJqMysMlvjp4s2MQSSQnFEekd9GV4JGTnDJ2uFt3Ztcqc9wCMJg==",
+      "requires": {
+        "tokenizer": "*"
+      }
+    },
    "parseurl": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@ -1808,6 +1996,11 @@
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
    },
+    "safe-json-parse": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-1.0.1.tgz",
+      "integrity": "sha512-o0JmTu17WGUaUOHa1l0FPGXKBfijbxK6qoHzlkihsDXxzBHvJcA7zgviKR92Xs841rX9pK16unfphLq0/KqX7A=="
+    },
    "safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@ -1914,6 +2107,11 @@
        }
      }
    },
+    "string-template": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
+      "integrity": "sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw=="
+    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -1937,6 +2135,14 @@
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
    },
+    "tokenizer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/tokenizer/-/tokenizer-1.1.2.tgz",
+      "integrity": "sha512-c/EYsBwEW/EX28q44UaSrJ9o5M2aI+N/xdJJ4Zl7dNq76OmWQHhmXH0T8DJQNjVYPc7NclV2CZQfyeUMfnEu/A==",
+      "requires": {
+        "disect": "~1.1.0"
+      }
+    },
    "touch": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
--- a/server-api/package.json
+++ b/server-api/package.json
@ -11,9 +11,13 @@
  "license": "ISC",
  "dependencies": {
    "axios": "^1.1.3",
+    "body": "^5.1.0",
+    "body-parser": "^1.20.1",
+    "corps": "^0.1.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
-    "mysql": "^2.18.1"
+    "mysql": "^2.18.1",
+    "parser": "^0.1.4"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
--- a/src/App.js
+++ b/src/App.js
@ -1,18 +1,18 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-//import Compte from './pages/Compte';
-//import Connexion from './pages/Connexion';
+import Compte from './pages/Compte';
+import Connexion from './pages/Connexion';
 import Admin from './pages/Admin.js';

 const App = () => {
  return (
-    //<BrowserRouter>
-    //  <Routes>
-    //    <Route path="*" element={<Connexion />} />
-    //  </Routes>
-    //</BrowserRouter>
-
-    <Admin/>
+    <BrowserRouter>
+     <Routes>
+       <Route path="/" element={<Connexion />} />
+       <Route path="/Admin" element={<Admin />} />
+       <Route path="/Account" element={<Compte />} />
+     </Routes>
+    </BrowserRouter>
  );
 }

--- a/src/pages/Admin.js
+++ b/src/pages/Admin.js
@ -23,23 +23,23 @@ const Admin = () => {
                    <table className="Formulaire_de_connexion">
                        <tr>
                            <p className="texte">Nom :</p>
-                            <input id="nom" className="texte_zone" type="text"/>
+                            <input id="nom" className="texte_zone" type="text" placeholder="Nom"/>
                        </tr>
                        <tr>
                            <p className="texte">Prénom :</p>
-                            <input id="prénom" className="texte_zone" type="text"/>
+                            <input id="prénom" className="texte_zone" type="text" placeholder="Prénom"/>
                        </tr>
                        <tr>
                            <p className="texte">Rôle dans l'entreprise :</p>
-                            <input id="rôle" className="texte_zone" type="text"/>
+                            <input id="rôle" className="texte_zone" type="text" placeholder="Rôle"/>
                        </tr>
                        <tr>
                            <p className="texte">Identifiant :</p>
-                            <input id="identifiant" className="texte_zone" type="text"/>
+                            <input id="identifiant" className="texte_zone" type="text" placeholder="Identifiant"/>
                        </tr>
                        <tr>
                            <p className="texte">Mot de passe (par défaut) :</p>
-                            <input id="password" className="texte_zone" type="text"/>
+                            <input id="password" className="texte_zone" type="password" placeholder="Mot de passe (par default)"/>
                        </tr>
                        <tr>
                            <div className='bouton_submit'>
--- a/src/pages/Connexion.js
+++ b/src/pages/Connexion.js
@ -63,17 +63,18 @@ function Connexion() {
                        <input id="pseudo" className="text_zone" type="text" value={login} onChange={changeLogin} placeholder="Pseudo"/>
                    </label>
                    <label>
-                        <input id="password" className="text_zone" type="text" value={password} onChange={changePassword} placeholder="Mot de passe"/>
+                        <input id="password" className="text_zone" type="password" value={password} onChange={changePassword} placeholder="Mot de passe"/>
                    </label>
                    <label className="envoyer">
                        <div className="memory_me">
                            <label htmlFor="checkbox">Se souvenir de moi</label>
                            <input type="checkbox" />
                        </div>
+                        <button type="submit">Se connecter</button>
                    </label>
-                    <button type="submit">Se connecter</button>
                    <p>{auth === ""?'':auth === "Failed"?'Authentification Failed':'User Unknown'}</p>
                </form>
+                <a className="forgot_pw" href="http://localhost">Mot de passe oublié ?</a>
            </div>
        );
    }
--- a/src/styles/components/_admin.scss
+++ b/src/styles/components/_admin.scss
@ -9,23 +9,23 @@
        height: 753px;
        border: 5px white inset;

-        .create_user{
+        .create_user {
            padding: 30px;
            align-self: center;
        }

-        .modify_user{
+        .modify_user {
            padding: 30px;
            align-self: center;
        }

-        .delete_user{
+        .delete_user {
            padding: 30px;
            align-self: center;
        }


-        .bouton{
+        .bouton {
            display: flex;
            justify-content: center;
            align-items: center;
@ -38,18 +38,19 @@
            transition: 1s box-shadow;
            cursor: pointer;
            border: none;
-            box-shadow: 0 0 5px rgba(0,0,0,0.5);
+            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);
+        .bouton:hover {
+            box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
            color: white;
            background-color: black;
        }

-        .bouton:hover::before, .bouton:hover::after{
+        .bouton:hover::before,
+        .bouton:hover::after {
            content: '';
            display: block;
            position: absolute;
@ -61,37 +62,10 @@
            animation: 0.5s jiggle infinite;
        }

-        .bouton:hover::after{
+        .bouton:hover::after {
            background: black;
            animation: 1s jiggle infinite;
        }
-
-        @keyframes jiggle {
-            0% {
-                transform: translate(-5px, -5px);
-            }
-            14% {
-                transform: translate(0px, -5px);
-            }
-            28% {
-                transform: translate(5px, -5px);
-            }
-            42% {
-                transform: translate(5px, 0px);
-            }
-            57% {
-                transform: translate(5px, 5px);
-            }
-            71% {
-                transform: translate(0, 5px);
-            }
-            85% {
-                transform: translate(-5px, 5px);
-            }
-            100% {
-                transform: translate(-5px, 0);
-            }
-        }
    }

    /*.form{
@ -100,9 +74,14 @@
    }*/


+    .Formulaire {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+    }

-
-    .formulaire{
+    .Formulaire{
        display: flex;
        flex-direction: column;
        border-radius: 30px;
@ -111,61 +90,48 @@
        align-items: center;
    }

-    .Titre{
-        display: flex;
-        flex-direction: column;
-        flex-basis: 100%;
-        border: 5px white inset;
+    .form{
+        align-self: center;
+        flex-direction: row;
        font-weight: bold;
        font-size: 80px;

-        .Formulaire{
-            display: flex;
-            flex-direction: column;
-            border: 5px white inset;
-            align-items: center;
-            font-size: 30px;
-            width: 100%;
-        }
-
-        .texte{
-            display: flex;
-            flex-direction: row;
-            align-self: center;
-            font-weight: bold;
-            padding: 10px;
-        }
+    .texte {
+        align-self: center;
+        font-weight: bold;
+        padding: 10px;
+    }

-        .texte_zone{
-            width: 600px;
-            height: 50px;
-            font-size: 30px;
-        }
+    .texte_zone {
+        width: 600px;
+        height: 50px;
+        background-color: transparent;
+        border-radius: 5px;
+        border: 0.5px solid;
+        padding-left: 10px;
+        padding-right: 10px;
+    }

-        .bouton_val_ann{
-            width: 150px;
-            height: 40px;
-            border-radius: 10px;
-            border: 0.5px solid;
-            color: $white;
-            border: 0;
-            background-color: black;
-            border: 1px solid rgba(255,255,255,0.1);
-            backdrop-filter: blur(30px);
-            color: rgb(255, 255, 255);
-            cursor: pointer;
-            font-size: 15px;
-            &:hover{
-                background-color: rgba(114, 114, 114, 0.371);   
-            }
-            &:active{
-                background-color:rgba(68, 68, 68, 0.972);   
-            }
+    .bouton_val_ann {
+        width: 150px;
+        height: 40px;
+        border-radius: 10px;
+        border: 0.5px solid;
+        color: $white;
+        border: 0;
+        background-color: black;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(30px);
+        color: rgb(255, 255, 255);
+        cursor: pointer;
+        font-size: 15px;
+
+        &:hover {
+            background-color: rgba(114, 114, 114, 0.371);
        }

-        .texte_barre{
-            display: flex;
-            width: 400px;
+        &:active {
+            background-color: rgba(68, 68, 68, 0.972);
        }

        .bouton_submit{