235 lines
6.0 KiB
Vue
235 lines
6.0 KiB
Vue
<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 passwordConfirm=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},{_passwordOUT:passwordOUT},{_passwordConfirm:passwordConfirm},{_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 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 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>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="(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 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="(login=!login) && (page=0)" class="register">
|
|
<a>{{i18n("login.guest.alregister")}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</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 {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loginBox {
|
|
background-color: rgb(24,24,24);
|
|
position : absolute;
|
|
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;
|
|
|
|
}
|
|
|
|
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>
|