Merge pull request 'Ajout register + quelques options' (#63) from wal/frontend/Register into master

Reviewed-on: PGL/Clyde#63
Reviewed-by: Maxime <231026@umons.ac.be>
Reviewed-by: Debucquoy Anthony <d.tonitch@gmail.com>

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "clyde",
       "version": "0.0.0",
       "dependencies": {
+        "vite-plugin-top-level-await": "^1.4.1",
         "vue": "^3.4.15",
         "vue3-toastify": "^0.2.1"
       },
@@ -35,7 +36,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -51,7 +51,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -67,7 +66,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -83,7 +81,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -99,7 +96,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -115,7 +111,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -131,7 +126,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -147,7 +141,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -163,7 +156,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -179,7 +171,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -195,7 +186,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -211,7 +201,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -227,7 +216,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -243,7 +231,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -259,7 +246,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -275,7 +261,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -291,7 +276,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -307,7 +291,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -323,7 +306,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -339,7 +321,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -355,7 +336,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -371,7 +351,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -387,7 +366,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -401,6 +379,22 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@rollup/plugin-virtual": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz",
+      "integrity": "sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==",
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz",
@@ -408,7 +402,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -421,7 +414,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -434,7 +426,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -447,7 +438,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -460,7 +450,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -473,7 +462,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -486,7 +474,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -499,7 +486,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -512,7 +498,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -525,7 +510,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -538,7 +522,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -551,7 +534,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -564,17 +546,212 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
       ]
     },
+    "node_modules/@swc/core": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.5.tgz",
+      "integrity": "sha512-4/JGkG4b1Z/QwCGgx+Ub46MlzrsZvBk5JSkxm9PcZ4bSX81c+4Y94Xm3iLp5Ka8NxzS5rD4mJSpcYuN3Tw0ceg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@swc/counter": "^0.1.2",
+        "@swc/types": "^0.1.5"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.4.5",
+        "@swc/core-darwin-x64": "1.4.5",
+        "@swc/core-linux-arm-gnueabihf": "1.4.5",
+        "@swc/core-linux-arm64-gnu": "1.4.5",
+        "@swc/core-linux-arm64-musl": "1.4.5",
+        "@swc/core-linux-x64-gnu": "1.4.5",
+        "@swc/core-linux-x64-musl": "1.4.5",
+        "@swc/core-win32-arm64-msvc": "1.4.5",
+        "@swc/core-win32-ia32-msvc": "1.4.5",
+        "@swc/core-win32-x64-msvc": "1.4.5"
+      },
+      "peerDependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.5.tgz",
+      "integrity": "sha512-toMSkbByHNfGXESyY1aiq5L3KutgijrNWB/THgdHIA1aIbwtrgMdFQfxpSE+INuuvWYi/Fxarv86EnU7ewbI0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.5.tgz",
+      "integrity": "sha512-LN8cbnmb4Gav8UcbBc+L/DEthmzCWZz22rQr6fIEHMN+f0d71fuKnV0ca0hoKbpZn33dlzUmXQE53HRjlRUQbw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.5.tgz",
+      "integrity": "sha512-suRFkhBWmOQxlM4frpos1uqjmHfaEI8FuJ0LL5+yRE7IunNDeQJBKujGZt6taeuxo1KqC0N0Ajr8IluN2wrKpA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.5.tgz",
+      "integrity": "sha512-mLKxasQArDGmR6k9c0tkPVUdoo8VfUecocMG1Mx9NYvpidJNaZ3xq9nYM77v7uq1fQqrs/59DM1fJTNRWvv/UQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.5.tgz",
+      "integrity": "sha512-pgKuyRP7S29U/HMDTx+x8dFcklWxwB9cHFNCNWSE6bS4vHR93jc4quwPX9OEQX5CVHxm+c8+xof043I4OGkAXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.5.tgz",
+      "integrity": "sha512-srR+YN86Oerzoghd0DPCzTbTp08feeJPSr9kkNdmtQWENOa4l/9cJV3+XY6vviw0sEjezPmYnc3SwRxJRaxvEw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.5.tgz",
+      "integrity": "sha512-aSf41LZtDeG5VXI4RCnzcu0UInPyNm3ip8Kw+sCK+sSqW9o7DgBkyqqbip3RZq84fNUHBQQQQdKXetltsyRRqw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.5.tgz",
+      "integrity": "sha512-vU3k8JwRUlTkJMfJQY9E4VvLrsIFOpfhnvbuXB84Amo1cJsz+bYQcC6RSvY7qpaDzDKFdUGbJco4uZTRoRf7Mg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.5.tgz",
+      "integrity": "sha512-856YRh3frRK2XbrSjDOFBgoAqWJLNRkaEtfGzXfeEoyJlOz0BFsSJHxKlHAFkxRfHe2li9DJRUQFTEhXn4OUWw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.5.tgz",
+      "integrity": "sha512-j1+kV7jmWY1+NbXAvxAEW165781yLXVZKLcoXIZKmw18EatqMF6w8acg1gDG8C+Iw5aWLkRZVS4pijSh7+DtCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+    },
+    "node_modules/@swc/types": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz",
+      "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
-      "dev": true
     },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
@@ -796,7 +973,6 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
       "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -848,7 +1024,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -1090,7 +1265,6 @@
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.0.tgz",
       "integrity": "sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -1202,11 +1376,22 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.3.tgz",
       "integrity": "sha512-UfmUD36DKkqhi/F75RrxvPpry+9+tTkrXfMNZD+SboZqBCMsxKtO52XeGzzuh7ioz+Eo/SYDBbdb0Z7vgcDJew==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.19.3",
         "postcss": "^8.4.35",
@@ -1257,6 +1442,19 @@
         }
       }
     },
+    "node_modules/vite-plugin-top-level-await": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.4.1.tgz",
+      "integrity": "sha512-hogbZ6yT7+AqBaV6lK9JRNvJDn4/IJvHLu6ET06arNfo0t2IsyCaon7el9Xa8OumH+ESuq//SDf8xscZFE0rWw==",
+      "dependencies": {
+        "@rollup/plugin-virtual": "^3.0.2",
+        "@swc/core": "^1.3.100",
+        "uuid": "^9.0.1"
+      },
+      "peerDependencies": {
+        "vite": ">=2.8"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.19.tgz",

frontend/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "vite-plugin-top-level-await": "^1.4.1",
     "vue": "^3.4.15",
     "vue3-toastify": "^0.2.1"
   },

frontend/public/i18n/EN.txt

@@ -1,8 +1,30 @@
 # English translations (some examples to remove)
 
-login.guest.login=log in
+login.guest.signin=Sign in
-login.guest.register=register
+login.guest.register=Register
-login.guest.welcome=Please Register here
+login.guest.alregister=Already Registered
-login.success=You are now registered as $name 
+login.guest.welcome=WELCOME TO THE UNIVERSITY
-
+login.guest.email=E-MAIL 
+login.guest.firstname= FIRSTNAME
+login.guest.surname=SURNAME
+login.guest.country=COUNTRY
+login.guest.address=ADDRESS
+login.guest.password=PASSWORD
+login.guest.nextpage=Next Page
+login.guest.lastpage=Last Page
+login.guest.submit=Submit
+login.guest.birthday=BIRTHDAY
+login.guest.confirm=CONFIRM
+app.home=Home
+app.login=Login
+app.notifications=Notifications
+app.settings=Settings
+app.messages=Messages
+app.forum=Forum
+app.schedules=Schedules
+app.inscription.requests=Inscription Requests
+request.moreInfos=More Infos
+request.accept=Accept
+request.refuse=Refuse
 #=====================================================
+

frontend/public/i18n/FR.txt

@@ -1,8 +1,29 @@
 # Traductions françaises (Quelques examples a enlever)
 
-login.guest.login=s'identifier
+login.guest.signin=SE CONNECTER
-login.guest.register=s'enregistrer
+login.guest.register=S'enregistrer
-login.guest.welcome=Veuillez vous enregistrer ici
+login.guest.alregister=Déjà Enregistré
-login.success=Vous êtes maintenant identifié comme $name 
+login.guest.welcome=BIENVENUE A L'UNIVERSITE
-
+login.guest.email=E-MAIL 
+login.guest.firstname= PRENOM
+login.guest.surname= NOM
+login.guest.country= PAYS
+login.guest.address=ADRESSE
+login.guest.password= MOT DE PASSE
+login.guest.nextpage=Prochaine Page
+login.guest.lastpage=Derniere Page
+login.guest.submit=Envoyer
+login.guest.birthday=DATE DE NAISSANCE
+login.guest.confirm=CONFIRMER
+app.home=Home
+app.login=Se connecter
+app.notifications=Notifications
+app.settings=Options
+app.messages=Messages
+app.forum=Forum
+app.schedules=Horaires
+app.inscription.requests=Demandes d'Inscription
+request.moreInfos=Plus d'Infos
+request.accept=Accepter
+request.refuse=Refuser
 #=====================================================

frontend/src/App.vue

@@ -2,14 +2,25 @@
 	import 'https://kit.fontawesome.com/fb3bbd0a95.js'
 	import { toast } from 'vue3-toastify';
 	import { ref } from 'vue'
+  import i18n from './i18n.js'
+  import Inscription from "./Inscription.vue"
 
-	const test = ref();
+
+  const test = ref();
 
 	async function draw(e) {
 		test.value = (await fetch("http://localhost:8080/ping"));
 		test.value = await test.value.json();
 		toast(test.value['txt']);
 	}
+
+  const home=ref(i18n("app.home"))
+  const notifications=ref(i18n("app.notifications"))
+  const settings=ref(i18n("app.settings"))
+  const login=ref(i18n("app.login"))
+  
+
+
 </script>
 
 <template>
@@ -17,26 +28,30 @@
 
     <div class="topBar">
       <ul class="horizontal">
-        <li title="Home">
+        <li title=home>
             <a href="#home">
                 <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
             </a></li>
-        <li title="Home">
+        <li title=home>
             <a href="#home">
                 <div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li style="float: right;" title="Account">
+        <li style="float: right;" title=login>
             <a href="/login">
                 <div class="fa-solid fa-user"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li style="float: right;" title="Notifications">
+        <li style="float: right;" title=notifications>
             <a href="#Notifications">
                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li style="float: right;" title="Options">
+        <li style="float: right;" title=settings>
             <a href="#Options">
                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
+
+        <li style="float:right; margin-top:7.5px;" title="Language">
+            <input type="checkbox" v-model="toggle" true-value="FR" false-value="EN" class="theme-checkbox">
+        </li>
       </ul>
     </div>
 
@@ -45,26 +60,31 @@
         <li style="margin-top: 25px;" >
           <a href="#Messages">
             <div class="fa-solid fa-comment" style="font-size: 40px;"></div>
-            <div class="text">Messages</div>
+            <div class="text">{{i18n("app.messages")}}</div>
           </a></li>
         <li >
           <a href="#Notifications">
             <div class="fa-solid fa-bell" style="font-size: 40px;" ></div>
-            <div class="text">Notifications</div>
+            <div class="text">{{i18n("app.notifications")}}</div>
           </a></li>
         <li >
           <a href="#Schedule">
             <div class="fa-solid fa-calendar-days" style="font-size: 40px;"></div>
-            <div class="text">Schedules</div>
+            <div class="text">{{i18n("app.schedules")}}</div>
           </a></li>
         <li ><a href="#Forum">
             <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
-            <div class="text">Forum</div></a></li>
+            <div class="text">{{i18n("app.forum")}}</div></a></li>
+        <li><a href="#Inscription">
+            <div class="fa-solid fa-users" style="font-size: 40px;"></div>
+            <div class="text">{{i18n("app.inscription.requests")}}</div></a></li>
     </ul>
 
     </div>
     <div class="page">
-      <div style="background-color: rgb(239,50,168); margin:50px;">Il FAUDRA INSERER LA PAGE ICI</div>
+      <div style=" margin:50px;">
+        <Inscription></Inscription>
+      </div>
     </div>
   </div>
 </template>
@@ -193,4 +213,51 @@
 		transition-duration: .3s;
 		padding-left: 5px;
 	  }
+    .theme-checkbox {
+    --toggle-size: 16px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 80px;
+    height: 40px;
+    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat;
+    background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
+    background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
+    background-size: 205%;
+    background-position: 0;
+    -webkit-transition: 0.4s;
+    -o-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 99em;
+    position: relative;
+    cursor: pointer;
+    font-size: var(--toggle-size);
+    }
+
+    .theme-checkbox::before {
+    content: "";
+    width: 35px;
+    height: 35px;
+    position: absolute;
+    top: 2px;
+    left: 3px;
+    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2rgb(239, 60, 168))) no-repeat;
+    background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
+    background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
+    background-size: 205%;
+    background-position: 100%;
+    border-radius: 50%;
+    -webkit-transition: 0.4s;
+    -o-transition: 0.4s;
+    transition: 0.4s;
+    }
+
+    .theme-checkbox:checked::before {
+    left: calc(100% - 35px - 3px);
+    background-position: 0;
+    }
+
+    .theme-checkbox:checked {
+    background-position: 100%;
+    }
 </style>

frontend/src/Inscription.vue

@@ -0,0 +1,32 @@
+<script setup>
+  import Req from "./Request.vue"
+  const requests_example = [ {
+  id:0,
+  type:"Inscription",
+  lastName:"DoefenschmirtzLEMAGNIFIQUE",
+  firstName:"Jhon",
+  address: "Radiator Springs",
+  country: "USA",
+  birthdate:"2004-02-02",
+  email:"JohnDoe@gmail.com",
+  cursus:"IT",
+  degree:"BAC1",
+  },
+  {
+  id:1,
+  type:"ReInscription",
+  lastName:"Doe",
+  firstName:"Jane",
+  address: "Radiator Springs",
+  country: "USA",
+  birthdate:"2004-03-03",
+  email:"JaneDoe@gmail.com",
+  cursus:"Psychology",
+  degree:"BAC1",
+}]
+</script>
+
+<template>
+  <Req v-for="item of requests_example" v-bind="item">
+      </Req>
+</template>

frontend/src/Login.vue

@@ -1,39 +1,153 @@
 <script setup>
-	import { ref } from 'vue'
+  import { login , register} from './rest/Users.js'
-	import { login } from './rest/Users.js'
+  import { ref } from 'vue'
+  import i18n from './i18n.js'
+  const loginPage= ref(true)
+  const page = ref(0)
 
-	const username = ref("");	
+  const emailID=ref("")
-	const password = ref("");
+  const passwordIN=ref("")
+
+
+  const submitValue= ref(i18n("login.guest.submit"))
+  const surname=ref("")
+  const firstname=ref("")
+  const passwordOUT=ref("")
+  const passwordConfirm=ref("")
+  const birthday=ref("")
+  const emailOUT=ref("")
+  const address=ref("")
+  const country=ref("")
+  const cursus=ref("")
+  const loginInfos = [{_emailID:emailID},{_passwordIN:passwordIN}]
+  const registerInfos= [{_surname:surname},{_firstname:firstname},{_birthday:birthday},{_passwordOUT:passwordOUT},
+  {_passwordConfirm:passwordConfirm},{_emailOUT:emailOUT},{_address:address},{_country:country},{_cursus:cursus}]
  
 </script>
 
+
 <template>
   <body>
+    <div class="Home">
+    <a href="/">
+       <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
+    </a>
+    </div>
     <div class="logBoxCenterer">
       <div class='loginBox'>
-		 <form @submit.prevent="login(username, password)" class="form">
+
-          <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
+        <div v-if="loginPage">
-          <div class="inputBox">
+          <form @submit.prevent="login(emailID, passwordIN)"class="form">
-            <p>USERNAME</p>
+            <h1 style="color:rgb(239,60,168); font-family: sans-serif;">
-            <input v-model="username" type="text" required>
+              {{i18n("login.guest.signin")}}
-          </div>
+            </h1>
-          <div class="inputBox">
+            <div class="inputBox">
-            <p>PASSWORD</p>
+              <p>ID / {{i18n("login.guest.email")}}</p> 
-            <input v-model=password type="password" required>
+              <input type="text" v-model="emailID">
-          </div>
+            </div>
-          <div class="register">
+            <div class="inputBox">
-            <a>Register</a>
+              <p>{{i18n("login.guest.password")}}</p>
-          </div>
+              <input type="password" v-model="passwordIN">
-          <div class="inputBox">
+            </div>
-            <input type="submit" value="Login">
+            <div class="register">
-          </div>
+              <a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a>
-        </form>
+            </div>
+            <div class="inputBox">
+              <input type="submit" v-model="submitValue">
+            </div>
+          </form>
+        </div>
+
+        <div v-else>
+          <form @submit.prevent="register(surname,firstname,emailOUT)" class="form">
+            <h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">
+              {{i18n("login.guest.welcome")}}
+            </h1>
+            <div v-if="page === 0">
+              <div class="inputBox">
+                <p>{{i18n("login.guest.surname")}}</p>
+                <input type="text" v-model="surname">
+              </div>
+              <div class="inputBox">
+                <p>{{i18n("login.guest.firstname")}}</p>
+                <input type="text" v-model="firstname">
+              </div>
+              <div class="inputBox">
+                <p>{{i18n("login.guest.birthday")}}</p>
+                <input type="date" v-model="birthday">
+              </div>
+              <div class="inputBox">
+                 <p>{{i18n("login.guest.password")}}</p>
+                 <input type="password" v-model="passwordOUT">
+              </div>
+              <div class="inputBox">
+                <p>{{i18n("login.guest.confirm")}} {{i18n("login.guest.password")}}</p>
+                 <input type="password" v-model="passwordConfirm">
+              </div>
+              
+              <div class="switchpage">
+                <button @click="page++">{{i18n("login.guest.nextpage")}}</button>
+
+              </div>
+              <div @click="(loginPage=!loginPage) && (page=0)" class="register">
+                <a>{{i18n("login.guest.alregister")}}</a>
+              </div>
+            </div>
+            <div v-else>
+              <div class="inputBox">
+                <p>{{i18n("login.guest.email")}}</p>
+                <input type="mail" v-model="emailOUT">
+              </div>
+              <div class="inputBox">
+                <p>{{i18n("login.guest.address")}}</p>
+                <input type="text" v-model="address">
+              </div>
+              <div class="inputBox">
+                <p>{{i18n("login.guest.country")}}</p>
+                <input type="text" v-model="country">
+              </div>
+              <div class="inputBox">
+                <p>CURSUS</p> 
+                  <select v-model="cursus">
+                    <option value="Chemistry">Chemistry</option>
+                    <option value="Psycho">Psychology</option>
+                    <option value="IT">IT</option>
+                  </select>
+              </div>
+              <div style="align-self:center;" class="inputBox">
+                <button style="margin-top:25px;" @click="console.log(outputs)">{{i18n("login.guest.submit")}}</button>
+              </div>
+              <div  class="switchpage">
+                <button @click="page--">{{i18n("login.guest.lastpage")}}</button>
+              </div>
+              <div  @click="(loginPage=!loginPage) && (page=0)" class="register">
+                <a>{{i18n("login.guest.alregister")}}</a>
+              </div>
+            </div>
+          </form>
+         </div>
+        </div>
       </div>
-    </div>
   </body>
 </template>
 
 <style scoped>
+.Home{
+  position:absolute;
+ 	display: flex;
+  z-index: 100;
+	padding: 8px 16px;
+	color:rgb(255, 255, 255);
+	text-decoration: none;
+}
+
+.Home:hover{
+  width:40px;
+  background-color: black;
+	border-radius:6px;
+	color:white;
+  transform: translate(0px ,1px);
+}
 
 .logBoxCenterer {
   position: absolute;
@@ -67,7 +181,8 @@
 }
 
 
-.inputBox input {
+.inputBox input,button,select {
+  
   width:100%;
   background:rgb(255, 0 255);
   border: none;
@@ -92,23 +207,40 @@
 .register{
   color:rgb(239,60,168);
   width: 100%;
-  align-items:center;
   display:flex;
-  justify-content: center;
   cursor: pointer;
 }
 
-input[type = "submit"] {
+.switchpage{
+  width:100px;
+  background:rgb(255, 0 255);
+  border: none;
+  padding-right:0;
+  padding-top:10px;
+  padding-bottom:10px;
+  outline:none;
+  border-radius: 4px;
+  font-size:0.8em;
+  align-self:right;
+
+}
+
+input[type=submit],button,select{
+  margin-bottom:20px;
   background-color: rgb(239,60,168);
   cursor: pointer;
   padding:10px;
   font-size:1.35em;
+  border:none;
+  border-radius:20px;
+
 }
 
-input[type = "submit"]:active{
+button:active ,.switchpage:active{
   opacity:0.8;
 
 }
 
 
+
 </style>

frontend/src/Request.vue

@@ -0,0 +1,109 @@
+<script setup>
+  import i18n from "./i18n.js"
+  const props = defineProps({
+  id: Number,
+  type: String,
+  lastName: String,
+  firstName: String,
+  address: String,
+  country: String,
+  birthDate: String,
+  cursus:String,
+  degree:String,});
+</script>
+
+
+<template>
+  <div class="bodu">
+  <div class="container">
+ 
+    <div class="id"><a>{{id}}</a></div>
+    <div class="type"><a>{{type}}</a></div>
+    <div class="surname"><a>{{lastName}}</a></div>
+    <div class="firstname"><a>{{firstName}}</a></div>
+    <div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}}   </button></div>
+    <div class="accept"><button style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
+    <div class="refuse"><button style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
+  </div>
+  </div>
+</template>
+
+<style scoped>
+  .container{
+    color:white;
+    height:100px;
+    font-size:20px;
+    display:grid;
+    grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol];
+    grid-template-areas:
+    "id type surname firstname infos accept refuse"; 
+    column-gap:10px;
+    
+  }
+  
+  .infos {
+    grid-area:infos;
+    align-self:center;
+  }
+
+  .accept{
+    grid-area:accept;
+    align-self:center;
+  }
+
+  .refuse{
+    grid-area:refuse;
+    align-self:center;
+  }
+
+  .titles {
+    grid-area:titles;
+    background-color:rgb(215,215,215);
+  }
+  .id{
+    grid-area:id;
+    margin-left:40px;
+    align-self:center;
+  }
+
+  .type{
+    grid-area:type;
+    align-self:center;
+  }
+
+  .surname{
+    grid-area:surname;
+    align-self:center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+  }
+
+  .firstname{
+    grid-area:firstname;
+    align-self:center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+  }
+
+  button{
+    font-size:15px;
+     height:50px;
+     width:100px;
+    border:none;
+    border-radius:20px;
+
+  }
+
+  .bodu {
+    width:100%;
+    margin-bottom:10px;
+    border:2px solid black;
+    border-radius:9px;
+    background-color:rgb(50,50,50);
+  }
+
+
+</style>
+

frontend/vite.config.js

@@ -2,11 +2,13 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import topLevelAwait from 'vite-plugin-top-level-await'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    topLevelAwait(),
   ],
   build: {
  	rollupOptions:{