Register proto
This commit is contained in:
parent
24a54bdee4
commit
3350533e74
@ -4,5 +4,5 @@ login.guest.login=log in
|
||||
login.guest.register=register
|
||||
login.guest.welcome=Please Register here
|
||||
login.success=You are now registered as $name
|
||||
|
||||
login.guest.firstname= Firstname
|
||||
#=====================================================
|
||||
|
@ -4,5 +4,5 @@ login.guest.login=s'identifier
|
||||
login.guest.register=s'enregistrer
|
||||
login.guest.welcome=Veuillez vous enregistrer ici
|
||||
login.success=Vous êtes maintenant identifié comme $name
|
||||
|
||||
login.guest.firstrname= Prénom
|
||||
#=====================================================
|
||||
|
@ -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>
|
||||
<body>
|
||||
<div class="logBoxCenterer">
|
||||
<div class='loginBox'>
|
||||
<div class="form">
|
||||
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
|
||||
<div class="inputBox">
|
||||
<p>USERNAME</p>
|
||||
<input type="text" required>
|
||||
|
||||
<div v-if="login">
|
||||
<div class="form">
|
||||
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
|
||||
<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 class="inputBox">
|
||||
<p>PASSWORD</p>
|
||||
<input type="password" required>
|
||||
</div>
|
||||
<div class="register">
|
||||
<a>Register</a>
|
||||
</div>
|
||||
<div class="inputBox">
|
||||
<input type="submit" value="Login">
|
||||
|
||||
<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>
|
||||
|
||||
<div v-if="page=== 0">
|
||||
<div class="inputBox">
|
||||
<p>LASTNAME</p>
|
||||
<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>
|
||||
@ -83,20 +146,24 @@
|
||||
.register{
|
||||
color:rgb(239,60,168);
|
||||
width: 100%;
|
||||
align-items:center;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type = "submit"] {
|
||||
|
||||
button , input[type = "submit"] {
|
||||
margin-top:40px;
|
||||
margin-bottom:20px;
|
||||
background-color: rgb(239,60,168);
|
||||
cursor: pointer;
|
||||
padding:10px;
|
||||
font-size:1.35em;
|
||||
border:none;
|
||||
border-radius:20px;
|
||||
|
||||
}
|
||||
|
||||
input[type = "submit"]:active{
|
||||
button:active , input[type = "submit"]:active{
|
||||
opacity:0.8;
|
||||
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user