Lots of refactoring
- Removing test mentions in readme - moving login page as an app - removing vite broken config - removing auto-generated and unused vite configuration (base.css) Overall simplification (sorry @Wal I kinda destroyed your login page a bit but seems fixable 👉👈)
This commit is contained in:
237
frontend/src/Apps/Login.vue
Normal file
237
frontend/src/Apps/Login.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<script setup>
|
||||
import { login , register} from '@/rest/Users.js'
|
||||
import { ref } from 'vue'
|
||||
import i18n from '@/i18n.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 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>
|
||||
<div class="logBoxCenterer">
|
||||
<div class='loginBox'>
|
||||
|
||||
<div v-if="loginPage">
|
||||
<form @submit.prevent="login(emailID, passwordIN)"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="loginPage=!loginPage">{{i18n("login.guest.register")}}</a>
|
||||
</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>
|
||||
</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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loginBox {
|
||||
background-color: rgb(24,24,24);
|
||||
width: 400px;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
box-shadow:0 5px 25px #000000;
|
||||
|
||||
}
|
||||
.form {
|
||||
position:relative;
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items:center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
|
||||
.inputBox input,button,select {
|
||||
|
||||
width:100%;
|
||||
background:rgb(255, 0 255);
|
||||
border: none;
|
||||
margin-right: 50px;
|
||||
padding-left: 10px;
|
||||
padding-top:10px;
|
||||
padding-bottom:10px;
|
||||
outline:none;
|
||||
border-radius: 4px;
|
||||
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: 100%;
|
||||
display:flex;
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
button:active ,.switchpage:active{
|
||||
opacity:0.8;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user