Wal/Clyde
1
0
Fork 0
forked from PGL/Clyde
Code Pull Requests Activity

Register proto

Browse Source
This commit is contained in:
Wawilski 2024-03-06 14:20:32 +01:00
parent 24a54bdee4
commit 3350533e74
3 changed files with 87 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/i18n/EN.txt
View File

@ -4,5 +4,5 @@ login.guest.login=log in
login.guest.register=register login.guest.register=register
login.guest.welcome=Please Register here login.guest.welcome=Please Register here
login.success=You are now registered as $name login.success=You are now registered as $name
login.guest.firstname= Firstname
#===================================================== #=====================================================

2
frontend/public/i18n/FR.txt
View File

@ -4,5 +4,5 @@ login.guest.login=s'identifier
login.guest.register=s'enregistrer login.guest.register=s'enregistrer
login.guest.welcome=Veuillez vous enregistrer ici login.guest.welcome=Veuillez vous enregistrer ici
login.success=Vous êtes maintenant identifié comme $name login.success=Vous êtes maintenant identifié comme $name
login.guest.firstrname= Prénom
#===================================================== #=====================================================

103
frontend/src/Login.vue
View File

@ -1,22 +1,85 @@
<script setup>
import { ref } from 'vue'
import i18n from './i18n.js'
const formname = i18n(login.guest.forname)
const login= ref(true)
const page = ref(0)
const message = ref("")
</script>
<template> <template>
<body> <body>
<div class="logBoxCenterer"> <div class="logBoxCenterer">
<div class='loginBox'> <div class='loginBox'>
<div class="form">
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1> <div v-if="login">
<div class="inputBox"> <div class="form">
<p>USERNAME</p> <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
<input type="text" required> <div class="inputBox">
<p>USERNAME</p>
<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>
</div> </div>
<div class="inputBox">
<p>PASSWORD</p> <div v-else>
<input type="password" required> <div class="form">
</div> <h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">WELCOME TO THE UNIVERSITY</h1>
<div class="register">
<a>Register</a> <div v-if="page=== 0">
</div> <div class="inputBox">
<div class="inputBox"> <p>LASTNAME</p>
<input type="submit" value="Login"> <input type="text" required>
</div>
<div class="inputBox">
<p>{{ forname }}</p>
<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>
</div> </div>
</div> </div>
</div> </div>
@ -83,20 +146,24 @@
.register{ .register{
color:rgb(239,60,168); color:rgb(239,60,168);
width: 100%; width: 100%;
align-items:center;
display:flex; display:flex;
justify-content: center;
cursor: pointer; cursor: pointer;
} }
input[type = "submit"] {
button , input[type = "submit"] {
margin-top:40px;
margin-bottom:20px;
background-color: rgb(239,60,168); background-color: rgb(239,60,168);
cursor: pointer; cursor: pointer;
padding:10px; padding:10px;
font-size:1.35em; font-size:1.35em;
border:none;
border-radius:20px;
} }
input[type = "submit"]:active{ button:active , input[type = "submit"]:active{
opacity:0.8; opacity:0.8;
} }