1
0
forked from PGL/Clyde
Clyde/frontend/src/Apps/Login.vue
2024-03-23 13:57:46 +01:00

271 lines
7.3 KiB
Vue

<script setup>
import {reactive, ref } from 'vue'
import i18n from '@/i18n.js'
import { login , register , disconnect, isLogged} from '@/rest/Users.js'
import { getAllCurriculums } from '@/rest/curriculum.js'
import { uploadProfilePicture } from '@/rest/uploads.js'
import {toast} from 'vue3-toastify'
import 'vue3-toastify/dist/index.css';
const loginPage= ref(true)
const page = ref(0)
const outputs = reactive({
surname:null,
firstname:null,
password:null,
birthday:null,
email:null,
address:null,
country:null,
curriculum:null,
})
const submitValue= ref(i18n("login.guest.submit"))
const passwordConfirm=ref("")
const imageSaved = ref(false)
const ppData = ref(false)
const curricula= await getAllCurriculums();
function goBackHome(){
setTimeout(() => {
window.location.href="#/home";
}, "500");
}
function verifyInputs(pass){
if(pass==passwordConfirm.value){
page.value++;
return toast('Password and Confirm Password are correct.', {
type: "success",});
}
else{
return toast('Password and Confirm Password are different',{type: "error",});
}
}
if (isLogged()){
disconnect();
window.location.reload();}
</script>
<template>
<div class="setup">
<div v-if="loginPage">
<div class='loginBox' style="margin-top:30%;">
<form @submit.prevent="login(outputs.email,outputs.password);goBackHome();"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="outputs.email">
</div>
<div class="inputBox">
<p>{{i18n("login.guest.password")}}</p>
<input type="password" v-model="outputs.password">
</div>
<div class="register">
<a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a>
</div>
<div class="inputBox" style="margin-bottom:35px;">
<input type="submit" v-model="submitValue">
</div>
</form>
</div>
</div>
<div v-else>
<div class='loginBox' style="margin-top:30%; margin-bottom:50%;">
<form 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="outputs.surname">
</div>
<div class="inputBox">
<p>{{i18n("login.guest.firstname")}}</p>
<input type="text" v-model="outputs.firstname">
</div>
<div class="inputBox">
<p>{{i18n("login.guest.birthday")}}</p>
<input type="date" v-model="outputs.birthday">
</div>
<div class="inputBox">
<p>{{i18n("login.guest.password")}}</p>
<input type="password" v-model="outputs.password">
</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="verifyInputs(outputs.password);">{{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="outputs.email">
</div>
<div class="inputBox">
<p>{{i18n("login.guest.address")}}</p>
<input type="text" v-model="outputs.address">
</div>
<div class="inputBox">
<p>{{i18n("login.guest.country")}}</p>
<input type="text" v-model="outputs.country">
</div>
<form class="inputBox"novalidate enctype="multipart/form-data">
<p>{{i18n("profile.picture").toUpperCase()}}</p>
<label class="browser">
Parcourir . . .
<input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
</label>
</form>
<div class="inputBox">
<p>{{i18n("Curriculum").toUpperCase()}}</p>
<select v-model="outputs.curriculum">
<option v-for="item in curricula">{{item.curriculumId}}</option>
</select>
</div>
<div style="align-self:center;" class="inputBox">
<button style="margin-top:25px;" @click="register(outputs.firstname, outputs.surname, outputs.birthday, outputs.password, outputs.email, outputs.address, outputs.country, outputs.curriculum, ppData);">
{{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>
</template>
<style scoped>
.setup {
margin-left: auto;
margin-right:auto;
min-width:400px;
width:25%;
height:60%;
}
.loginBox {
background-color: rgb(24,24,24);
display:flex;
justify-content: center;
border-radius: 5%;
box-shadow:0 5px 25px #000000;
}
.form {
position:relative;
width:100%;
display: flex;
flex-direction: column;
align-items:center;
gap: 3%;
}
.inputBox input,button,select {
width:100%;
border: none;
margin-right: 12.5%;
padding-left: 2.5%;
padding-top:2.5%;
padding-bottom:2.5%;
outline:none;
border-radius: 10px;
font-size:1.35em;
}
.inputBox p{
position:relative;
z-index: 100;
font-family:sans-serif ;
color:rgb(239,60,168);
transition:0.5;
}
.register{
color:rgb(239,60,168);
width:70%;
margin-bottom:20px;
margin-top:20px;
cursor: pointer;
}
.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=file]{
display:none;
}
.browser{
display:inline-block;
cursor:pointer;
border-radius:20px;
background-color:rgb(239,60,168);
padding:5%;
font-size:1.35em;
font-family:sans-serif;
background:#FFFFFF;
}
button:active ,.switchpage:active{
opacity:0.8;
}
</style>