Merge branch 'master' into tonitch/front/pagesAPI
This commit is contained in:
@ -7,17 +7,21 @@
|
||||
// Liste des apps
|
||||
import LoginPage from './Apps/Login.vue'
|
||||
import Inscription from "./Apps/Inscription.vue"
|
||||
import Profil from "./Apps/Profil.vue"
|
||||
import Courses from "./Apps/ManageCourses.vue"
|
||||
|
||||
const apps = {
|
||||
'/login': LoginPage,
|
||||
'/inscription': Inscription
|
||||
'/inscription': Inscription,
|
||||
'/profil': Profil,
|
||||
'/manage-courses' : Courses,
|
||||
}
|
||||
const currentPath = ref(window.location.hash)
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
currentPath.value = window.location.hash
|
||||
})
|
||||
|
||||
|
||||
const currentView = computed(() => {
|
||||
return apps[currentPath.value.slice(1) || '/']
|
||||
})
|
||||
@ -26,9 +30,8 @@
|
||||
const notifications=ref(i18n("app.notifications"))
|
||||
const settings=ref(i18n("app.settings"))
|
||||
const login=ref(i18n("app.login"))
|
||||
const active=ref(false)
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -37,29 +40,41 @@
|
||||
<div class="topBar">
|
||||
<ul class="horizontal">
|
||||
<li title=home>
|
||||
<a href="#home">
|
||||
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
|
||||
<a class="icon" href="#home">
|
||||
<img class="clyde" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
|
||||
</a></li>
|
||||
<li title=home>
|
||||
<a href="#home">
|
||||
<a class="icon" href="#home">
|
||||
<div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||
</a></li>
|
||||
<li style="float: right;" title=login>
|
||||
<a href="#/login">
|
||||
<a class="icon" href="#/login">
|
||||
<div class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||
</a></li>
|
||||
<li style="float: right;" title=notifications>
|
||||
<a href="#Notifications">
|
||||
<a class="icon" href="#Notifications">
|
||||
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||
</a></li>
|
||||
<li style="float: right;" title=settings>
|
||||
<a href="#Options">
|
||||
<li @click="active=!active" class="option"style="float: right;" title=settings>
|
||||
<a class="icon" >
|
||||
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||
</a></li>
|
||||
<div v-if="active" class="dropdown">
|
||||
<div class="dropdown-content">{{i18n("app.language")}}</div>
|
||||
<ul style="list-style-type:none;">
|
||||
<li style=" margin-bottom:10px;margin-right:20px;float:left; font-size:10px; color:black;">
|
||||
<button @:click="setLang('en');" href="#home">EN</button>
|
||||
|
||||
<li style="float:right; margin-top:7.5px;" title="Language">
|
||||
<input type="checkbox" @:click="setLang( toggle? 'fr' : 'en' )" v-model="toggle" class="theme-checkbox">
|
||||
</li>
|
||||
</li>
|
||||
<li style="float:left;font-size:10px; color:black;"><button @:click="setLang('fr');" href="#home">FR</button></li>
|
||||
</ul>
|
||||
<div style='align-items:center;'>
|
||||
<a style="cursor:pointer;font-size:20px;" href="#/profil" class="dropdown-content">
|
||||
{{i18n("app.manage.profile")}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -84,8 +99,12 @@
|
||||
<div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
|
||||
<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>
|
||||
<div class="fa-solid fa-users" style="align-self:center;font-size: 40px;"></div>
|
||||
<div class="text" style="top:0;">{{i18n("app.inscription.requests")}}</div></a></li>
|
||||
|
||||
<li><a href="#/manage-courses">
|
||||
<div class="fa-solid fa-book" style="align-self:center;font-size: 40px;overflow:none;"></div>
|
||||
<div class="text">{{i18n("app.manage.courses")}}</div></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
@ -122,8 +141,37 @@
|
||||
.leftBar{
|
||||
grid-area:leftBar;
|
||||
}
|
||||
.option {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.dropdown {
|
||||
margin-top:55px;
|
||||
width:160px;
|
||||
display: inline-block;
|
||||
height:110px;
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
min-width: 160px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
right:0;
|
||||
color:rgb(50,50,50);
|
||||
text-decoration: none;
|
||||
font-size:24px
|
||||
}
|
||||
|
||||
.dropdown-content div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
ul.vertical{
|
||||
list-style-type: none;
|
||||
margin-top: 61px;
|
||||
@ -176,7 +224,6 @@
|
||||
position: fixed;
|
||||
height:61px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgb(24, 24, 24);
|
||||
}
|
||||
|
||||
@ -187,7 +234,7 @@
|
||||
}
|
||||
|
||||
|
||||
ul.horizontal li a:hover:not(.active){
|
||||
ul.horizontal li a.icon:hover:not(.active){
|
||||
background-color: black;
|
||||
border-radius:6px;
|
||||
color:white;
|
||||
@ -205,7 +252,6 @@
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 0%;
|
||||
opacity: 0;
|
||||
@ -217,55 +263,13 @@
|
||||
|
||||
ul.vertical:hover .text {
|
||||
opacity: 1;
|
||||
width: 70%;
|
||||
width: 60%;
|
||||
transition-duration: .3s;
|
||||
padding-left: 5px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.clyde:hover{
|
||||
content: url("./assets/angry_clyde.png")
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,32 +1,10 @@
|
||||
<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",
|
||||
}]
|
||||
import { getRegisters } from '@/rest/ServiceInscription.js'
|
||||
|
||||
const requests_example = getRegisters();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Req v-for="item of requests_example" v-bind="item">
|
||||
</Req>
|
||||
<Req v-for="item of requests_example"/>
|
||||
</template>
|
||||
|
||||
@ -1,47 +1,43 @@
|
||||
<script setup>
|
||||
import { login , register} from '@/rest/Users.js'
|
||||
import { ref } from 'vue'
|
||||
import i18n from '@/i18n.js'
|
||||
import { login , register } from '@/rest/Users.js'
|
||||
import { uploadProfilePicture } from '@/rest/uploads.js'
|
||||
|
||||
const loginPage= ref(true)
|
||||
const page = ref(0)
|
||||
|
||||
const emailID=ref("")
|
||||
const passwordIN=ref("")
|
||||
|
||||
|
||||
const submitValue= ref(i18n("login.guest.submit"))
|
||||
const surname=ref("")
|
||||
const firstname=ref("")
|
||||
const passwordOUT=ref("")
|
||||
const password=ref("")
|
||||
const passwordConfirm=ref("")
|
||||
const birthday=ref("")
|
||||
const emailOUT=ref("")
|
||||
const email=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}]
|
||||
|
||||
const imageSaved = ref(false)
|
||||
const ppData = ref(false)
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="logBoxCenterer">
|
||||
<div class='loginBox'>
|
||||
|
||||
<div v-if="loginPage">
|
||||
<form @submit.prevent="login(emailID, passwordIN)"class="form">
|
||||
<form @submit.prevent="login(email, password)"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">
|
||||
<input type="text" v-model="email">
|
||||
</div>
|
||||
<div class="inputBox">
|
||||
<p>{{i18n("login.guest.password")}}</p>
|
||||
<input type="password" v-model="passwordIN">
|
||||
<input type="password" v-model="password">
|
||||
</div>
|
||||
<div class="register">
|
||||
<a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a>
|
||||
@ -53,7 +49,7 @@
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<form @submit.prevent="register(surname,firstname,emailOUT)" class="form">
|
||||
<form @submit.prevent="register(firstname, surname, birthday, password, mail, address, country, cursus)" class="form">
|
||||
<h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">
|
||||
{{i18n("login.guest.welcome")}}
|
||||
</h1>
|
||||
@ -72,11 +68,12 @@
|
||||
</div>
|
||||
<div class="inputBox">
|
||||
<p>{{i18n("login.guest.password")}}</p>
|
||||
<input type="password" v-model="passwordOUT">
|
||||
<input type="password" v-model="password">
|
||||
</div>
|
||||
<div class="inputBox">
|
||||
<p>{{i18n("login.guest.confirm")}} {{i18n("login.guest.password")}}</p>
|
||||
<input type="password" v-model="passwordConfirm">
|
||||
<!-- TODO: Verify password is same as passwordConfirm -->
|
||||
</div>
|
||||
|
||||
<div class="switchpage">
|
||||
@ -90,7 +87,7 @@
|
||||
<div v-else>
|
||||
<div class="inputBox">
|
||||
<p>{{i18n("login.guest.email")}}</p>
|
||||
<input type="mail" v-model="emailOUT">
|
||||
<input type="mail" v-model="email">
|
||||
</div>
|
||||
<div class="inputBox">
|
||||
<p>{{i18n("login.guest.address")}}</p>
|
||||
@ -100,8 +97,12 @@
|
||||
<p>{{i18n("login.guest.country")}}</p>
|
||||
<input type="text" v-model="country">
|
||||
</div>
|
||||
<form novalidate enctype="multipart/form-data" class="inputBox">
|
||||
<p>ProfilePicture</p>
|
||||
<input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
|
||||
</form>
|
||||
<div class="inputBox">
|
||||
<p>CURSUS</p>
|
||||
<p>{{i18n("curriculum").toUpperCase()}}</p>
|
||||
<select v-model="cursus">
|
||||
<option value="Chemistry">Chemistry</option>
|
||||
<option value="Psycho">Psychology</option>
|
||||
@ -121,7 +122,6 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@ -142,14 +142,6 @@
|
||||
transform: translate(0px ,1px);
|
||||
}
|
||||
|
||||
.logBoxCenterer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loginBox {
|
||||
background-color: rgb(24,24,24);
|
||||
@ -175,7 +167,6 @@
|
||||
.inputBox input,button,select {
|
||||
|
||||
width:100%;
|
||||
background:rgb(255, 0 255);
|
||||
border: none;
|
||||
margin-right: 50px;
|
||||
padding-left: 10px;
|
||||
|
||||
279
frontend/src/Apps/ManageCourses.vue
Normal file
279
frontend/src/Apps/ManageCourses.vue
Normal file
@ -0,0 +1,279 @@
|
||||
<script setup>
|
||||
import i18n from "@/i18n.js"
|
||||
import {ref} from 'vue'
|
||||
const cursus=[
|
||||
{
|
||||
"id": 12,
|
||||
"name": "Math pour l'info",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"teacher": 42,
|
||||
"Assistants": []},
|
||||
{
|
||||
"id": 42,
|
||||
"name": "Operating Systems",
|
||||
"credits": 8,
|
||||
"faculty": "science",
|
||||
"teacher": 62,
|
||||
"Assistants": []},
|
||||
{
|
||||
"id": 52,
|
||||
"name": "Fonctionnement des ordinateurs",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"teacher": 59,
|
||||
"Assistants": []},
|
||||
|
||||
]
|
||||
|
||||
const profList=[42,45,62,84,59]
|
||||
|
||||
const createMod = ref(false)
|
||||
const deleteMod = ref(false)
|
||||
|
||||
const editElementID = ref("");
|
||||
|
||||
function editItem(id){
|
||||
editElementID = id;
|
||||
}
|
||||
|
||||
//Juste pour montrer le Create Mode
|
||||
const pattern = {
|
||||
|
||||
"id": 0,
|
||||
"name": null,
|
||||
"credits": null,
|
||||
"faculty": null,
|
||||
"teacher": null,
|
||||
"Assistants": []}
|
||||
|
||||
|
||||
let toAdd = Object.assign({}, pattern);
|
||||
|
||||
function addToCourse (){
|
||||
if (cursus.length>0){
|
||||
toAdd.id=(cursus[cursus.length-1].id)-1;}
|
||||
else{
|
||||
toAdd.id=0;
|
||||
}
|
||||
let isnull= false;
|
||||
for(const [key, value] of Object.entries(toAdd)){
|
||||
if(value === null){
|
||||
isnull=true;
|
||||
}
|
||||
}
|
||||
if (!isnull){
|
||||
cursus.push(toAdd);
|
||||
}
|
||||
toAdd= Object.assign({},pattern);
|
||||
}
|
||||
|
||||
|
||||
//Juste pour montrer le Delete Mode
|
||||
let toRemove;
|
||||
|
||||
function removeCourse() {
|
||||
console.log("ok");
|
||||
console.log(toRemove);
|
||||
let rem=-1;
|
||||
for(const [key, value] of Object.entries(cursus)){
|
||||
console.log(key);
|
||||
console.log(value)
|
||||
if(value.name === toRemove){
|
||||
rem = key;
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log(rem)
|
||||
if (rem > -1){
|
||||
cursus.splice(rem, 1);}
|
||||
console.log(cursus);
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="body">
|
||||
<div v-if="!deleteMod && !createMod" class="listTitle buttonGrid">
|
||||
<button class="create" @click="createMod = true">
|
||||
{{i18n("courses.createCourse")}}
|
||||
</button>
|
||||
<button class="delete" @click="deleteMod=true" >
|
||||
{{i18n("courses.deleteCourse")}}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="createMod">
|
||||
<form class="listElement">
|
||||
<div style="margin-bottom:20px;">
|
||||
{{i18n("name")}} :
|
||||
<input v-model="toAdd.name">
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
{{i18n("teacher")}} :
|
||||
<select style="max-width:200px;" class="teacher" v-model="toAdd.teacher">
|
||||
<option v-for="item in profList">{{item}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
{{i18n("credits")}} :
|
||||
<input v-model="toAdd.credits">
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
{{i18n("faculty")}} :
|
||||
<input v-model="toAdd.faculty">
|
||||
</div>
|
||||
<button class="create" @click="createMod=!createMod; addToCourse();"> {{i18n("courses.confirm")}} </button>
|
||||
<button style="float:right;" @click="createMod=!createMod">{{i18n("courses.back")}}</button>
|
||||
</form>
|
||||
</div>
|
||||
<div v-if="deleteMod">
|
||||
<form class="listElement">
|
||||
<div style="margin-bottom:20px;">
|
||||
{{i18n("courses.toDelete")}} :
|
||||
<select style="max-width:200px;" class="teacher" v-model="toRemove">
|
||||
<option v-for="item in cursus">{{item.name}}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
{{i18n("login.password")}}:
|
||||
<input >
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
{{i18n("login.cPassword")}} :
|
||||
<input>
|
||||
</div>
|
||||
<button class="delete" @click="deleteMod=!deleteMod;removeCourse();"> {{i18n("courses.deleteCourse")}} </button>
|
||||
<button style="float:right;" @click="deleteMod=!deleteMod"> {{i18n("courses.back")}}</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="!createMod && !deleteMod" v-for="item in cursus" :key="item.name">
|
||||
<div style ="padding:15px 15px 15px 15px;">
|
||||
<button v-if="editElementID !== item.name" @click="editElementID = item.name">
|
||||
{{i18n("courses.modify")}}
|
||||
</button>
|
||||
<button v-else @click="editElementID= ''"> {{i18n("courses.confirm")}} </button>
|
||||
</div>
|
||||
<div class="listElement" >
|
||||
<div class="containerElement" v-if="editElementID !== item.name" >
|
||||
|
||||
<div class="name"> {{item.name}} </div>
|
||||
<div class="teacher">{{item.teacher}}</div>
|
||||
<div class="credits">{{i18n("credits")}}:{{item.credits}}</div>
|
||||
</div>
|
||||
<div class="containerElement"v-else>
|
||||
<input style="max-width:200px;" class="name" v-model="item.name">
|
||||
<select style="max-width:200px;" class="teacher" v-model="item.teacher">
|
||||
<option v-for="item in profList">{{item}}</option>
|
||||
</select>
|
||||
<input style="max-width:100px;"class="credits" v-model="item.credits">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.body {
|
||||
width:100%;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.containerElement{
|
||||
justify-content:center;
|
||||
display:grid;
|
||||
grid-template-columns:350px 350px 200px;
|
||||
grid-template-areas:
|
||||
"name teacher credits";
|
||||
column-gap:10px;
|
||||
|
||||
}
|
||||
|
||||
.name {
|
||||
grid-area:name;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.teacher{
|
||||
grid-area:teacher;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.credits{
|
||||
grid-area:credits;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.listElement{
|
||||
border:2px solid black;
|
||||
font-size:25px;
|
||||
color:white;
|
||||
padding:20px;
|
||||
background-color:rgb(50,50,50);
|
||||
border-radius:20px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.modify{
|
||||
font-size:25px;
|
||||
padding:10px 10px 10px 10px;
|
||||
background-color: rgb(239,60,168);
|
||||
cursor: pointer;
|
||||
border:none;
|
||||
border-radius:15px;
|
||||
}
|
||||
|
||||
input, select{
|
||||
padding:10px 10px 10px 10px;
|
||||
font-size:25px;
|
||||
cursor: pointer;
|
||||
border:none;
|
||||
border-radius:15px;
|
||||
}
|
||||
button{
|
||||
font-size:15px;
|
||||
height:50px;
|
||||
width:100px;
|
||||
border:none;
|
||||
border-radius:20px;
|
||||
|
||||
}
|
||||
|
||||
.buttonGrid{
|
||||
display:grid;
|
||||
grid-template-columns: auto auto;
|
||||
column-gap:50px;
|
||||
grid-template-areas:
|
||||
"create delete";
|
||||
}
|
||||
|
||||
.create{
|
||||
grid-area:create;
|
||||
|
||||
background-color:rgb(0,200,0);
|
||||
|
||||
}
|
||||
|
||||
.delete{
|
||||
grid-area:delete;
|
||||
background-color:rgb(200,0,0);
|
||||
}
|
||||
|
||||
.listTitle{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width:400px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
border:2px solid black;
|
||||
font-size:25px;
|
||||
color:white;
|
||||
padding:20px;
|
||||
background-color:rgb(50,50,50);
|
||||
border-radius:20px;margin-bottom:10px;
|
||||
|
||||
button:hover{
|
||||
opacity:0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
274
frontend/src/Apps/Profil.vue
Normal file
274
frontend/src/Apps/Profil.vue
Normal file
@ -0,0 +1,274 @@
|
||||
<script setup>
|
||||
import {reactive, ref} from 'vue'
|
||||
import {getUser} from '../rest/Users.js'
|
||||
import i18n from "@/i18n.js"
|
||||
/*
|
||||
const user = getUser();
|
||||
*/
|
||||
const user =reactive({
|
||||
profilPicture:"../assets/clyde.png",
|
||||
lastName:"Ghost",
|
||||
firstName:"Clyde",
|
||||
role:"student",
|
||||
address: "Radiator Springs",
|
||||
email:"ClydeGhost@gmail.com",
|
||||
cursus:[
|
||||
{
|
||||
"id": 12,
|
||||
"name": "Math pour l'info",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"teacher": 42,
|
||||
"Assistants": []},
|
||||
{
|
||||
"id": 42,
|
||||
"name": "Fonctionnement des ordinateurs",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"teacher": 42,
|
||||
"Assistants": []},
|
||||
|
||||
],
|
||||
option:"IT",
|
||||
degree:"BAC1",
|
||||
password:"CeciEstUnMotDePasse123",
|
||||
})
|
||||
|
||||
/*
|
||||
Teacher user
|
||||
const user =reactive({
|
||||
profilPicture:"../assets/clyde.png",
|
||||
lastName:"Ghost",
|
||||
firstName:"Clyde",
|
||||
role:"teacher",
|
||||
address: "Radiator Springs",
|
||||
email:"ClydeGhost@gmail.com",
|
||||
coursesOwned:[
|
||||
{
|
||||
"id": 12,
|
||||
"name": "Math pour l'info",
|
||||
"faculty": "science",
|
||||
"teacher": 42,
|
||||
"Assistants": []},
|
||||
{
|
||||
"id": 42,
|
||||
"name": "Fonctionnement des ordinateurs",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"teacher": 42,
|
||||
"Assistants": []},
|
||||
|
||||
],
|
||||
faculty:"Science",
|
||||
})*/
|
||||
|
||||
const modif = ref(false);
|
||||
|
||||
const toModify = Object.assign({}, user);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<div class="body">
|
||||
<div class="container">
|
||||
<div class="profilPic">
|
||||
<img class="subContainter" src="../assets/Clyde.png">
|
||||
</div>
|
||||
<div class="globalInfos">
|
||||
<div v-if="modif==false" class="infosContainer" >
|
||||
<div>
|
||||
{{user.firstName}} {{user.lastName.toUpperCase()}}
|
||||
</div>
|
||||
<div>
|
||||
E-mail: {{user.email}}
|
||||
</div>
|
||||
<div v-if="user.role==='student'">
|
||||
{{user.option}} {{i18n(user.role).toUpperCase()}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{i18n("faculty")}}: {{user.faculty}}
|
||||
Role: {{i18n(user.role).toUpperCase()}}
|
||||
</div>
|
||||
<div>
|
||||
<button @click="modif=!modif"> {{i18n("profile.modify.data")}} </button>
|
||||
</div>
|
||||
<div v-if="(user.role==='student')">
|
||||
<button>{{i18n("profile.reRegister")}}</button>
|
||||
<button style="float:right;background-color:rgb(150,0,0);">{{i18n("profile.unRegister")}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="infosContainer">
|
||||
<div>
|
||||
{{i18n("profile.picture")}}:
|
||||
<input type="file">
|
||||
</div>
|
||||
<div>
|
||||
E-mail:
|
||||
<input type="mail" v-model="toModify.email" />
|
||||
</div>
|
||||
<div>
|
||||
{{i18n("profile.address")}}:
|
||||
<input type="text" v-model="toModify.address">
|
||||
</div>
|
||||
<div>
|
||||
{{i18n("login.password")}}:
|
||||
<input type="password" v-model="toModify.password">
|
||||
</div>
|
||||
<div>
|
||||
{{i18n("login.cPassword")}}:
|
||||
<input type="password" id="confirm">
|
||||
</div>
|
||||
<div>
|
||||
<button @click=" modif=!modif">{{i18n("courses.confirm")}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="modif==false"class="moreInfos">
|
||||
|
||||
<div v-if="(user.role==='student')">
|
||||
<div class="listTitle">
|
||||
{{i18n("profile.course.list")}}
|
||||
</div>
|
||||
<div class="listElement "
|
||||
v-for="item in user.cursus">
|
||||
<div class=" containerElement">
|
||||
<div class="name"> {{item.name}} </div>
|
||||
<div class="teacher">{{item.teacher}}</div>
|
||||
<div class="credits">Credits:{{item.credits}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<div v-if="(user.role==='teacher')">
|
||||
<div class="listTitle">
|
||||
{{i18n("profile.course.list")}}
|
||||
</div>
|
||||
<div class="listElement " v-for="item in user.coursesOwned">
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.container{
|
||||
|
||||
display:grid;
|
||||
grid-template-columns:200px 900px;
|
||||
grid-template-rows:200px auto;
|
||||
column-gap:30px;
|
||||
row-gap:25px;
|
||||
grid-template-areas:
|
||||
"profilPic globalInfos"
|
||||
"minfos minfos";
|
||||
}
|
||||
|
||||
.profilPic{
|
||||
grid-area:profilPic;
|
||||
}
|
||||
|
||||
.globalInfos {
|
||||
grid-area:globalInfos;
|
||||
align-self :center;
|
||||
|
||||
}
|
||||
|
||||
.subContainter{
|
||||
width:100%;
|
||||
background-color:rgb(50,50,50);
|
||||
border-radius:20px;
|
||||
border:4px solid black;
|
||||
}
|
||||
|
||||
.moreInfos {
|
||||
grid-area:minfos;
|
||||
}
|
||||
.body {
|
||||
width:100%;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.containerElement{
|
||||
justify-content:center;
|
||||
display:grid;
|
||||
grid-template-columns:350px 350px 200px;
|
||||
grid-template-areas:
|
||||
"name teacher credits";
|
||||
column-gap:10px;
|
||||
|
||||
}
|
||||
|
||||
.name {
|
||||
grid-area:name;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.teacher{
|
||||
grid-area:teacher;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.credits{
|
||||
grid-area:credits;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.listTitle{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width:200px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
border:2px solid black;
|
||||
font-size:25px;
|
||||
color:white;
|
||||
padding:20px;
|
||||
background-color:rgb(50,50,50);
|
||||
border-radius:20px;margin-bottom:10px;
|
||||
}
|
||||
|
||||
.listElement{
|
||||
border:2px solid black;
|
||||
font-size:25px;
|
||||
color:white;
|
||||
padding:20px;
|
||||
background-color:rgb(50,50,50);
|
||||
border-radius:20px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.infosContainer {
|
||||
padding-bottom:50px;
|
||||
border:2px solid black;
|
||||
font-size:25px;
|
||||
color:white;
|
||||
padding:20px;
|
||||
background-color:rgb(50,50,50);
|
||||
border-radius:20px;
|
||||
}
|
||||
|
||||
|
||||
button{
|
||||
border:none;
|
||||
background-color:rgb(239, 60, 168);
|
||||
border-radius:10px;
|
||||
height:35px;
|
||||
margin-top:10px;
|
||||
|
||||
}
|
||||
|
||||
button:hover{
|
||||
opacity:0.8;
|
||||
}
|
||||
</style>
|
||||
BIN
frontend/src/assets/angry_clyde.png
Normal file
BIN
frontend/src/assets/angry_clyde.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -10,9 +10,10 @@
|
||||
*/
|
||||
|
||||
import { getCookie, setCookie } from './utils.js';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const default_lang = "EN";
|
||||
let langs;
|
||||
const langs = reactive({});
|
||||
|
||||
|
||||
/**
|
||||
@ -27,8 +28,8 @@ let langs;
|
||||
export default function i18n(key, options) {
|
||||
let ret = langs[key];
|
||||
if(options != null){
|
||||
for (let key in options) {
|
||||
ret = ret.replaceAll("$" + key, options[key]);
|
||||
for (let option in options) {
|
||||
ret = ret.replaceAll("$" + option, options[option]);
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
@ -47,14 +48,12 @@ export async function loadLangs(lang){
|
||||
const content = await (await fetch(filename)).text();
|
||||
const lines = content.split("\n");
|
||||
|
||||
let filteredLines = {};
|
||||
for (let line of lines) {
|
||||
if(!line.trim().startsWith("#") && line.trim() != ""){
|
||||
let split = line.indexOf("=")
|
||||
filteredLines[line.substr(0, split)] = line.substr(split+1, line.length);
|
||||
langs[line.substr(0, split)] = line.substr(split+1, line.length);
|
||||
};
|
||||
}
|
||||
langs = filteredLines;
|
||||
}
|
||||
await loadLangs();
|
||||
|
||||
|
||||
@ -3,28 +3,34 @@
|
||||
*
|
||||
* TODO: On time of writing, the backend doesn't support these endpoints so it could be modified in the future.
|
||||
*/
|
||||
import { restGet } from './restConsumer.js'
|
||||
import { restGet, restPost } from './restConsumer.js'
|
||||
|
||||
/**
|
||||
* create a new register requests that can be recovered by the registering service
|
||||
* TODO: add info in the Object (I don't know what will be needed)
|
||||
*/
|
||||
export async function createRegister(){
|
||||
return restPost("/requests/register"});
|
||||
return restPost("/requests/register");
|
||||
}
|
||||
|
||||
/**
|
||||
* list all register request in a list of Objects
|
||||
*/
|
||||
export async function getRegisters(){
|
||||
return restGet("/requests/register")
|
||||
}
|
||||
|
||||
/**
|
||||
* Get info on a particular registering request
|
||||
* Shall return a list of
|
||||
* - id
|
||||
* - type
|
||||
* - lastName
|
||||
* - firstName
|
||||
* - address
|
||||
* - country
|
||||
* - birthdate
|
||||
* - email
|
||||
* - cursus
|
||||
* - degree
|
||||
*/
|
||||
export async function getRegisters(id){
|
||||
return restGet("/requests/register/" + id);
|
||||
if(id != null)
|
||||
return restGet("/requests/register/" + id);
|
||||
return restGet("/requests/register")
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,11 +1,60 @@
|
||||
import { restGet, restPost } from './restConsumer.js'
|
||||
|
||||
export async function login(user, pass, exp){
|
||||
return restPost("/login", {login: user, password: pass, expiration: exp});
|
||||
return restPost("/login", {identifier: user, password: pass, expirationDate: exp});
|
||||
}
|
||||
|
||||
export async function register(user, pass, mail){
|
||||
return restPost("/user", {name: user, password: pass, mail: mail});
|
||||
/**
|
||||
* Register a user (tokenless)
|
||||
*
|
||||
* @param firstname
|
||||
* @param lastname
|
||||
* @param birthdate
|
||||
* @param password
|
||||
* @param mail
|
||||
* @param address
|
||||
* @param country
|
||||
* @param cursus
|
||||
* @param imageId id of the image in database returned when uploaded
|
||||
*/
|
||||
export async function register(firstname, lastname, birthDate, password, email, address, country, cursus, imageId){
|
||||
return restPost("/register", {
|
||||
firstname: firstname,
|
||||
lastname: lastname,
|
||||
birthDate: birthDate,
|
||||
password: password,
|
||||
email: email,
|
||||
address: address,
|
||||
country: country,
|
||||
cursus: cursus
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a user (by secretary)
|
||||
*
|
||||
* @param firstname
|
||||
* @param lastname
|
||||
* @param birthdate
|
||||
* @param password
|
||||
* @param mail
|
||||
* @param address
|
||||
* @param country
|
||||
* @param imageId id of the image in database returned when uploaded
|
||||
*
|
||||
* PS: the password is not is not required as it is generated by the backend and sent to the user
|
||||
* by mail. it's up to the user to change it if he cares about security
|
||||
*/
|
||||
export async function createUser(firstname, lastname, birthDate, email, address, country, role, imageId){
|
||||
return restPost("/user", {
|
||||
firstname: firstname,
|
||||
lastname: lastname,
|
||||
birthDate: birthDate,
|
||||
password: password,
|
||||
email: email,
|
||||
address: address,
|
||||
country: country,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -18,6 +67,25 @@ export async function getUser(id){
|
||||
return restGet(endpoint);
|
||||
}
|
||||
|
||||
/**
|
||||
* Alterable datas of user.
|
||||
* usage by secretary
|
||||
*
|
||||
* @param id regno of the user
|
||||
* @param data data to change
|
||||
*
|
||||
* - lastName
|
||||
* - firstName
|
||||
* - birthDate
|
||||
* - role
|
||||
* - email
|
||||
* - photo
|
||||
* - Adress
|
||||
*/
|
||||
export async function alterUser(id, data){
|
||||
return restPatch("/user/" + id, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reserved for secretary roles. Allow to list all user on the plateform
|
||||
*/
|
||||
@ -25,3 +93,27 @@ export async function getAllUsers(){
|
||||
return restGet("/users");
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get informations about yourself
|
||||
* - RegNo
|
||||
* - FirstName / LastName
|
||||
* - email
|
||||
* - adressId (?)
|
||||
* - birthDate
|
||||
* - role
|
||||
*/
|
||||
export async function getSelf(){
|
||||
return restGet("/user");
|
||||
}
|
||||
|
||||
/**
|
||||
* Alterable datas are
|
||||
* - email
|
||||
* - photo
|
||||
* - Adress
|
||||
* - Password
|
||||
*/
|
||||
export async function alterSelf(data){
|
||||
return restPatch("/user", data);
|
||||
}
|
||||
|
||||
@ -8,15 +8,20 @@ export async function restGet(endPoint) {
|
||||
}
|
||||
|
||||
export async function restPost(endPoint, data) {
|
||||
return await _rest(endPoint, {method: "POST", body: data});
|
||||
return await _rest(endPoint, {method: "POST", credentials: 'include', body: JSON.stringify(data)});
|
||||
}
|
||||
|
||||
export async function restPostFile(endPoint, file){
|
||||
let headers = new Headers();
|
||||
return await _rest(endPoint, {method: "POST", credentials: 'include', body: file, headers: headers });
|
||||
}
|
||||
|
||||
export async function restDelete(endPoint, data) {
|
||||
return await _rest(endPoint, {method: "DELETE", body: data});
|
||||
return await _rest(endPoint, {method: "DELETE", credentials: 'include', body: JSON.stringify(data)});
|
||||
}
|
||||
|
||||
export async function restPatch(endPoint, data) {
|
||||
return await _rest(endPoint, {method: "PATCH", body: data});
|
||||
return await _rest(endPoint, {method: "PATCH", credentials: 'include', body: JSON.stringify(data)});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -31,14 +36,18 @@ export async function restPatch(endPoint, data) {
|
||||
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;
|
||||
let headers = new Headers({
|
||||
'Authorization': session_token,
|
||||
'Content-Type': 'application/json',
|
||||
});
|
||||
config['headers'] = config['headers'] == null ? headers : config['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";
|
||||
console.log(res);
|
||||
return res.data.ok ? "Success" : "error";
|
||||
}},
|
||||
})
|
||||
.then( e => e.json()).catch( e => e );
|
||||
|
||||
11
frontend/src/rest/uploads.js
Normal file
11
frontend/src/rest/uploads.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { restPostFile } from '@/rest/restConsumer.js'
|
||||
|
||||
|
||||
/**
|
||||
* Upload a file to the server and return the url of this image
|
||||
*/
|
||||
export async function uploadProfilePicture(file){
|
||||
const formData = new FormData();
|
||||
formData.append("file", file[0]);
|
||||
return restPostFile("/upload/ProfilePicture", formData)
|
||||
}
|
||||
Reference in New Issue
Block a user