PGL/Clyde
PGL/Clyde
3
2
Fork 3
Code Issues 13 Pull Requests Actions Projects 3 Releases 2 Wiki Activity

Compare commits

base: PGL:204e6a9505ec85e44401fba4f04c53a83efb7999
Branches Tags
PGL:master
PGL:tonitch/fix/scrollIsue
PGL:tonitch/max/front/fix/vue
PGL:Schedule/master
PGL:wal/front/temp
PGL:JalonB
PGL:jalonA
..
compare: PGL:e5b1a9e46f82560c834c372a712370de73e717bc
Branches Tags
PGL:master
PGL:tonitch/fix/scrollIsue
PGL:tonitch/max/front/fix/vue
PGL:Schedule/master
PGL:wal/front/temp
PGL:JalonB
PGL:jalonA

6 Commits
204e6a9505 ... e5b1a9e46f

Author SHA1 Message Date
Anthony Debucquoy
e5b1a9e46f
Base oauth et spring sessions 2024-03-07 14:00:50 +01:00
Wawilski
886077349c Adding menu button + Cursus
Some checks failed
Build and test backend / Build-backend (pull_request) Successful in 1m56s
Details
Build and test backend / Test-backend (pull_request) Successful in 2m0s
Details
Build and test FrontEnd / Build-frontend (pull_request) Failing after 20s
Details
2024-03-06 21:00:35 +01:00
Wawilski
d9ec085d2c Inputs setup 2024-03-06 17:41:18 +01:00
Wawilski
34a36f8b1e i18n try 2024-03-06 14:35:58 +01:00
Wawilski
2a558e40cb Merge branch 'master' into wal/frontend/Register 2024-03-06 14:23:24 +01:00
Wawilski
3350533e74 Register proto 2024-03-06 14:20:32 +01:00
9 changed files with 184 additions and 130 deletions
Show Stats Expand all files Collapse all files

17
frontend/public/i18n/EN.txt
View File

@ -1,8 +1,17 @@
# English translations (some examples to remove) # 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
#===================================================== #=====================================================

17
frontend/public/i18n/FR.txt
View File

@ -1,8 +1,17 @@
# Traductions françaises (Quelques examples a enlever) # 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
#===================================================== #=====================================================

9
frontend/src/App.vue
View File

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

162
frontend/src/Login.vue
View File

@ -1,39 +1,134 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { login } from './rest/Users.js' import i18n from './i18n.js'
const login= ref(true)
const username = ref(""); const page = ref(0)
const password = ref("");
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> </script>
<template> <template>
<body> <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="logBoxCenterer">
<div class='loginBox'> <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="login">
<div class="inputBox"> <div class="form">
<p>USERNAME</p> <h1 style="color:rgb(239,60,168); font-family: sans-serif;">{{i18n("login.guest.signin")}}</h1>
<input v-model="username" type="text" required> <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>
<div class="inputBox">
<p>PASSWORD</p> <div v-else>
<input v-model=password type="password" required> <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 class="register"> </div>
<a>Register</a>
</div>
<div class="inputBox">
<input type="submit" value="Login">
</div>
</form>
</div> </div>
</div> </div>
</body> </body>
</template> </template>
<style scoped> <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 { .logBoxCenterer {
position: absolute; position: absolute;
@ -67,7 +162,8 @@
} }
.inputBox input { .inputBox input,button,select {
width:100%; width:100%;
background:rgb(255, 0 255); background:rgb(255, 0 255);
border: none; border: none;
@ -92,20 +188,36 @@
.register{ .register{
color:rgb(239,60,168); color:rgb(239,60,168);
width: 100%; width: 100%;
align-items:center;
display:flex; display:flex;
justify-content: center;
cursor: pointer; 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); background-color: rgb(239,60,168);
cursor: pointer; cursor: pointer;
padding:10px; padding:10px;
font-size:1.35em; font-size:1.35em;
border:none;
border-radius:20px;
} }
input[type = "submit"]:active{ button:active ,.switchpage:active{
opacity:0.8; opacity:0.8;
} }

18
frontend/src/i18n.js
View File

@ -9,8 +9,6 @@
* *
*/ */
import { getCookie } from './utils.js';
const default_lang = "EN"; const default_lang = "EN";
let langs; let langs;
@ -38,6 +36,22 @@ export default function i18n(key, options) {
// Those functions are utility functions use by previous exported functions. // Those functions are utility functions use by previous exported functions.
// //
/**
* Return the content of a cookie with specified key
* @param key cookie name
*/
function getCookie(key){
key = key + "="
let cookies = decodeURIComponent(document.cookie).split(";");
for (let el of cookies) {
el = el.trimStart();
if(el.indexOf(key) == 0){
return el.substr(key.length, el.length);
}
}
return "";
}
/** /**
* Function that load the file with translation from the specified lang and return a dictionnary * Function that load the file with translation from the specified lang and return a dictionnary
* @param select the language to load. could be null to fetch the cookies for an answer * @param select the language to load. could be null to fetch the cookies for an answer

1
frontend/src/login.js
View File

@ -1,5 +1,4 @@
import './assets/main.css' import './assets/main.css'
import 'vue3-toastify/dist/index.css';
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './Login.vue' import App from './Login.vue'

28
frontend/src/rest/Users.js
View File

@ -1,28 +0,0 @@
import { restGet, restPost } from './restConsumer.js'
export async function login(user, pass, exp){
return restPost("/login", {login: user, password: pass, expiration: exp});
}
export async function register(user, pass, mail){
return restPost("/user", {name: user, password: pass, mail: mail});
restPost("/login", {login: user, password: pass, expiration: exp})
}
/**
* get informations on a specific user.
* Leaving the id empty will return the user's value based on his token
* if the user is not authenticated. then an empty array should be returned
*/
export async function getUser(id){
const endpoint = "/user" + id != null ? "/" + id : "";
return restGet(endpoint);
}
/**
* Reserved for secretary roles. Allow to list all user on the plateform
*/
export async function getAllUsers(){
return restGet("/users");
}

45
frontend/src/rest/restConsumer.js
View File

@ -1,45 +0,0 @@
import { getCookie } from '../utils.js'
import { toast } from 'vue3-toastify'
const restURL = import.meta.env.PROD ? "https://clyde.herisson.ovh/api" : "http://localhost:8080"
export async function restGet(endPoint) {
return await _rest(endPoint, {method: "GET"});
}
export async function restPost(endPoint, data) {
return await _rest(endPoint, {method: "POST", body: data});
}
export async function restDelete(endPoint, data) {
return await _rest(endPoint, {method: "DELETE", body: data});
}
export async function restPatch(endPoint, data) {
return await _rest(endPoint, {method: "PATCH", body: data});
}
/**
* backbone for the request made by the frontend
*
* specification
* - If the user has "session_token" cookie set, it will use it in the authorization field of the http request
* - The result will be returned as a json to access fields easily ( the backend should send json response )
*
* @Example _rest("/ping", {user: data}) -> {id:0, txt:"pong"}
*/
async function _rest(endPoint, config){
endPoint.at(0) != "/" ? console.error("Carefull, you certainly should put a / at the begenning of your endPoint ") : true;
let session_token = getCookie("session_token");
let headers = new Headers({'Authorization': session_token});
config['headers'] = headers;
return toast.promise(fetch(restURL + endPoint, config),
{
pending: config['pending'] != null ? config['pending'] : 'pending',
error: config['error'] != null ? config['error'] : 'Network Failure...',
success: config['success'] != null ? config['success'] : {render(res){
return res.ok ? "Success" : "error";
}},
})
.then( e => e.json()).catch( e => e );
}

17
frontend/src/utils.js
View File

@ -1,17 +0,0 @@
/**
* Return the content of a cookie with specified key
* @param key cookie name
*/
function getCookie(key){
key = key + "="
let cookies = decodeURIComponent(document.cookie).split(";");
for (let el of cookies) {
el = el.trimStart();
if(el.indexOf(key) == 0){
return el.substr(key.length, el.length);
}
}
return "";
}
export {getCookie};