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

171 lines
3.8 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 14:35:58 +01:00
const message = ref(i18n("login.guest.login") )
2024-03-06 14:20:32 +01:00
</script>
2024-03-03 18:37:55 +01:00
<template>
<body>
<div class="logBoxCenterer">
<div class='loginBox'>
2024-03-06 14:20:32 +01:00
<div v-if="login">
<div class="form">
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
<div class="inputBox">
2024-03-06 14:35:58 +01:00
<p>USERNAME</p>
2024-03-06 14:20:32 +01:00
<input type="text" required>
</div>
<div class="inputBox">
<p>PASSWORD</p>
<input type="password" required>
</div>
<div class="register">
<a @click="login=!login">Register</a>
</div>
<div class="inputBox">
<input type="submit" value="Login">
</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">
<h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">WELCOME TO THE UNIVERSITY</h1>
2024-03-06 14:35:58 +01:00
<div v-if="page === 0">
2024-03-06 14:20:32 +01:00
<div class="inputBox">
<p>LASTNAME</p>
<input type="text" required>
</div>
<div class="inputBox">
2024-03-06 14:35:58 +01:00
<p>{{ message }}</p>
2024-03-06 14:20:32 +01:00
<input type="text" required>
</div>
<div class="inputBox">
<p>PASSWORD</p>
<input type="password" required>
</div>
<div class="inputBox">
<button @click="page++">Next page</button>
</div>
<div @click="(login=!login) && (page=0)" class="register">
<a>Already Registered</a>
</div>
</div>
<div v-else>
<div class="inputBox">
<p>E-MAIL</p>
<input type="mail" required>
</div>
<div class="inputBox">
<p>ADDRESS</p>
<input type="text" required>
</div>
<div class="inputBox">
<p>COUNTRY</p>
<input type="text" required>
</div>
<div class="inputBox">
<button @click="page--">Last page</button>
</div>
<div @click="(login=!login) && (page=0)" class="register">
<a>Already Registered</a>
</div>
</div>
2024-03-03 18:37:55 +01:00
</div>
</div>
</div>
</div>
</body>
</template>
<style scoped>
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;
}
.inputBox input {
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 14:20:32 +01:00
button , input[type = "submit"] {
margin-top:40px;
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 14:20:32 +01:00
button:active , input[type = "submit"]:active{
2024-03-02 15:52:35 +01:00
opacity:0.8;
}
2024-03-03 18:37:55 +01:00
</style>