1
0
forked from PGL/Clyde
Clyde/frontend/src/Login.vue

235 lines
6.0 KiB
Vue
Raw Normal View History

2024-03-06 14:20:32 +01:00
<script setup>
import { ref } from 'vue'
import i18n from './i18n.js'
const login= ref(true)
const page = ref(0)
2024-03-06 21:00:35 +01:00
const emailID=ref("")
2024-03-06 17:41:18 +01:00
const passwordIN=ref("")
2024-03-06 21:00:35 +01:00
2024-03-06 17:41:18 +01:00
const surname=ref("")
const firstname=ref("")
const passwordOUT=ref("")
2024-03-08 11:54:10 +01:00
const passwordConfirm=ref("")
2024-03-06 17:41:18 +01:00
const emailOUT=ref("")
const address=ref("")
const country=ref("")
2024-03-06 21:00:35 +01:00
const cursus=ref("")
2024-03-08 11:54:10 +01:00
const loginInfos = [{_emailID:emailID},{_passwordIN:passwordIN}]
const registerInfos= [{_surname:surname},{_firstname:firstname},{_passwordOUT:passwordOUT},{_passwordConfirm:passwordConfirm},{_emailOUT:emailOUT},{_address:address},{_country:country},{_cursus:cursus}]
2024-03-06 17:41:18 +01:00
2024-03-06 14:20:32 +01:00
</script>
2024-03-03 18:37:55 +01:00
<template>
<body>
2024-03-06 21:00:35 +01:00
<div class="Home">
<a href="/">
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
</a>
</div>
2024-03-03 18:37:55 +01:00
<div class="logBoxCenterer">
<div class='loginBox'>
2024-03-06 14:20:32 +01:00
<div v-if="login">
<div class="form">
2024-03-06 17:41:18 +01:00
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">{{i18n("login.guest.signin")}}</h1>
2024-03-06 14:20:32 +01:00
<div class="inputBox">
2024-03-06 17:41:18 +01:00
<p>ID / {{i18n("login.guest.email")}}</p>
2024-03-06 21:00:35 +01:00
<input type="text" v-model="emailID">
2024-03-06 14:20:32 +01:00
</div>
<div class="inputBox">
2024-03-06 17:41:18 +01:00
<p>{{i18n("login.guest.password")}}</p>
<input type="password" v-model="passwordIN">
2024-03-06 14:20:32 +01:00
</div>
<div class="register">
2024-03-06 17:41:18 +01:00
<a @click="login=!login">{{i18n("login.guest.register")}}</a>
2024-03-06 14:20:32 +01:00
</div>
<div class="inputBox">
2024-03-06 17:41:18 +01:00
<button @click="console.log(inputs)">{{i18n("login.guest.submit")}}</button>
2024-03-06 14:20:32 +01:00
</div>
</div>
2024-03-03 18:37:55 +01:00
</div>
2024-03-06 14:20:32 +01:00
<div v-else>
<div class="form">
2024-03-06 17:41:18 +01:00
<h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">{{i18n("login.guest.welcome")}}</h1>
2024-03-06 14:20:32 +01:00
2024-03-06 14:35:58 +01:00
<div v-if="page === 0">
2024-03-06 14:20:32 +01:00
<div class="inputBox">
2024-03-06 17:41:18 +01:00
<p>{{i18n("login.guest.surname")}}</p>
<input type="text" v-model="surname">
2024-03-06 14:20:32 +01:00
</div>
<div class="inputBox">
2024-03-06 17:41:18 +01:00
<p>{{i18n("login.guest.firstname")}}</p>
<input type="text" v-model="firstname">
2024-03-06 14:20:32 +01:00
</div>
<div class="inputBox">
2024-03-06 17:41:18 +01:00
<p>{{i18n("login.guest.password")}}</p>
<input type="password" v-model="passwordOUT">
2024-03-06 14:20:32 +01:00
</div>
2024-03-06 21:00:35 +01:00
<div class="inputBox">
2024-03-08 11:54:10 +01:00
<p>CONFIRM {{i18n("login.guest.password")}}</p>
<input type="password" v-model="passwordConfirm">
2024-03-06 21:00:35 +01:00
</div>
2024-03-08 11:54:10 +01:00
2024-03-06 17:41:18 +01:00
<div class="switchpage">
<button @click="page++">{{i18n("login.guest.nextpage")}}</button>
2024-03-06 14:20:32 +01:00
</div>
<div @click="(login=!login) && (page=0)" class="register">
2024-03-06 17:41:18 +01:00
<a>{{i18n("login.guest.alregister")}}</a>
2024-03-06 14:20:32 +01:00
</div>
</div>
<div v-else>
<div class="inputBox">
2024-03-06 17:41:18 +01:00
<p>{{i18n("login.guest.email")}}</p>
<input type="mail" v-model="emailOUT">
2024-03-06 14:20:32 +01:00
</div>
<div class="inputBox">
2024-03-06 17:41:18 +01:00
<p>{{i18n("login.guest.address")}}</p>
<input type="text" v-model="address">
2024-03-06 14:20:32 +01:00
</div>
<div class="inputBox">
2024-03-06 17:41:18 +01:00
<p>{{i18n("login.guest.country")}}</p>
<input type="text" v-model="country">
2024-03-06 14:20:32 +01:00
</div>
2024-03-08 11:54:10 +01:00
<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>
2024-03-06 17:41:18 +01:00
<div style="align-self:center;" class="inputBox">
<button style="margin-top:25px;" @click="console.log(outputs)">{{i18n("login.guest.submit")}}</button>
2024-03-06 14:20:32 +01:00
</div>
2024-03-06 17:41:18 +01:00
<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>
2024-03-06 14:20:32 +01:00
</div>
</div>
2024-03-03 18:37:55 +01:00
</div>
</div>
</div>
</div>
</body>
</template>
<style scoped>
2024-03-06 21:00:35 +01:00
.Home{
position:absolute;
2024-03-06 21:00:35 +01:00
display: flex;
2024-03-08 11:54:10 +01:00
z-index: 100;
2024-03-06 21:00:35 +01:00
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);
}
2024-03-02 15:52:35 +01:00
.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;
}
2024-03-06 21:00:35 +01:00
.inputBox input,button,select {
2024-03-06 17:41:18 +01:00
2024-03-02 15:52:35 +01:00
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;
}
2024-03-06 17:41:18 +01:00
.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;
}
2024-03-06 14:20:32 +01:00
2024-03-06 21:00:35 +01:00
button,select{
2024-03-06 14:20:32 +01:00
margin-bottom:20px;
2024-03-02 15:52:35 +01:00
background-color: rgb(239,60,168);
cursor: pointer;
padding:10px;
font-size:1.35em;
2024-03-06 14:20:32 +01:00
border:none;
border-radius:20px;
2024-03-02 15:52:35 +01:00
}
2024-03-06 17:41:18 +01:00
button:active ,.switchpage:active{
2024-03-02 15:52:35 +01:00
opacity:0.8;
}
2024-03-03 18:37:55 +01:00
</style>