Base oauth et spring sessions

Documents/JournalDeBord/authentification.md

@@ -0,0 +1,30 @@
+# Authentification
+
+## Contexte
+
+Le projet demande de pouvoir authentifier les utilisateurs présents. Le but étant de leurs associer un "contexte"
+(cours, informations personnelles, ...). Pour que ceux-ci puissent accomplir différentes actions nécéssitants une
+identification (permission, personelles, ...).
+
+## Méthode
+
+Lorsque q'un utilisateur se connecte au serveur, nous lui envoyons un token qui sera stocké dans le
+navigateur. Ce token est unique à l'utilisateur et pourra être ré-envoyé dans les futures requetes
+pour identifier l'utilisateur.
+
+## Autres méthodes envisagée
+
+### Oauth2
+
+C'est un protocol d'identification vastement utilisé permettant, en plus d'identifier les requettes,
+de gérer leurs permissions. Un utilisateur créen un token peut lui attribuer des permissions
+spécifique qui restrainderaients les permissions d'utilisation de ce token. C'est très utile pour
+déployer des api de site pouvant notament être accédé par des ordinateurs / bots. Ca n'est en
+revanche pas l'objectif du projet et l'option n'a donc pas été retenue
+
+### Spring Sessions / Tomcat sessions
+
+Il aurait été possible de laisser une librairie automatiser les sessions. Malheuresement, celà
+implique de devoir se plier au format de la dite librairie. L'implémentation d'un système de gestion
+de token maison semblai à la fois, non-imposible et interessant à notre apprentisage. C'est pourquoi
+nous n'avons pas utilisé cette option.

frontend/public/i18n/EN.txt

@@ -1,8 +1,17 @@
 # English translations (some examples to remove)
 
-login.guest.login=log in
-login.guest.register=register
-login.guest.welcome=Please Register here
-login.success=You are now registered as $name 
+login.guest.signin=Sign in
+login.guest.register=Register
+login.guest.alregister=Already Registered
+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
 
 #=====================================================

frontend/public/i18n/FR.txt

@@ -1,8 +1,17 @@
 # Traductions françaises (Quelques examples a enlever)
 
-login.guest.login=s'identifier
-login.guest.register=s'enregistrer
-login.guest.welcome=Veuillez vous enregistrer ici
-login.success=Vous êtes maintenant identifié comme $name 
+login.guest.signin=SE CONNECTER
+login.guest.register=S'enregistrer
+login.guest.alregister=Déjà Enregistré
+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
 
 #=====================================================

frontend/src/App.vue

@@ -34,9 +34,9 @@
                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title="Options">
-            <a href="#Options">
+          <div class="item">
                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
-            </a></li>
+            </div></li>
       </ul>
     </div>
 
@@ -112,7 +112,7 @@
 		transition-duration: .3s;
 	}
 
-	li a{
+	.item,li a{
 		display: flex;
 		padding: 8px 16px;
 		color:rgb(255, 255, 255);
@@ -159,7 +159,8 @@
 	}
 
 
-	ul.horizontal li a:hover:not(.active){
+	ul.horizontal .item:hover, li a:hover:not(.active){
+
 		background-color: black;
 		border-radius:6px;
 		color:white;

frontend/src/Login.vue

@@ -1,22 +1,112 @@
+<script setup>
+  import { ref } from 'vue'
+  import i18n from './i18n.js'
+  const login= ref(true)
+  const page = ref(0)
+
+  const emailID=ref("")
+  const passwordIN=ref("")
+
+  const surname=ref("")
+  const firstname=ref("")
+  const passwordOUT=ref("")
+  const emailOUT=ref("")
+  const address=ref("")
+  const country=ref("")
+  const cursus=ref("")
+  const inputs = [{_emailID:emailID},{_passwordIN:passwordIN}]
+  const outputs= [{_surname:surname},{_firstname:firstname},{_passwordOUT:passwordOUT},{_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'>
-        <div class="form">
-          <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
-          <div class="inputBox">
-            <p>USERNAME</p>
-            <input type="text" required>
+      
+        <div v-if="login">
+          <div class="form">
+            <h1 style="color:rgb(239,60,168); font-family: sans-serif;">{{i18n("login.guest.signin")}}</h1>
+              <div class="inputBox">
+                <p>ID / {{i18n("login.guest.email")}}</p> 
+                <input type="text" v-model="emailID">
+              </div>
+              <div class="inputBox">
+                <p>{{i18n("login.guest.password")}}</p>
+                <input type="password" v-model="passwordIN">
+              </div>
+              <div class="register">
+                <a @click="login=!login">{{i18n("login.guest.register")}}</a>
+              </div>
+              <div class="inputBox">
+                <button @click="console.log(inputs)">{{i18n("login.guest.submit")}}</button>
+
+              </div>
+            </div>
           </div>
-          <div class="inputBox">
-            <p>PASSWORD</p>
-            <input type="password" required>
-          </div>
-          <div class="register">
-            <a>Register</a>
-          </div>
-          <div class="inputBox">
-            <input type="submit" value="Login">
+
+          <div v-else>
+            <div 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.password")}}</p>
+                 <input type="password" v-model="passwordOUT">
+              </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 class="switchpage">
+                <button @click="page++">{{i18n("login.guest.nextpage")}}</button>
+
+              </div>
+              <div @click="(login=!login) && (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 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="(login=!login) && (page=0)" class="register">
+                <a>{{i18n("login.guest.alregister")}}</a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -25,6 +115,20 @@
 </template>
 
 <style scoped>
+.Home{
+ 	display: flex;
+	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;
@@ -58,7 +162,8 @@
 }
 
 
-.inputBox input {
+.inputBox input,button,select {
+  
   width:100%;
   background:rgb(255, 0 255);
   border: none;
@@ -83,20 +188,36 @@
 .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;
+
+}
+
+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;
 
 }

frontend/src/i18n.js

@@ -61,7 +61,7 @@ export async function loadLangs(lang){
 	lang = lang != null ? lang : getCookie("lang");
 	lang = lang != "" ? lang : default_lang;
 
-	const filename = "./i18n/" + lang.toUpperCase() + ".txt";
+	const filename = "/i18n/" + lang.toUpperCase() + ".txt";
 	const content = await (await fetch(filename)).text();
 	const lines = content.split("\n");