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

Inputs setup

Browse Source
This commit is contained in:
Wawilski
2024-03-06 17:41:18 +01:00
parent 34a36f8b1e
commit d9ec085d2c
4 changed files with 90 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,17 @@
# English translations (some examples to remove) # English translations (some examples to remove)
login.guest.login=log in login.guest.signin=Sign in
login.guest.register=register login.guest.register=Register
login.guest.welcome=Please Register here login.guest.alregister=Already Registered
login.success=You are now registered as $name login.guest.welcome=WELCOME TO THE UNIVERSITY
login.guest.firstname= Firstname login.guest.email=E-MAIL
login.guest.firstname= FIRSTNAME
login.guest.surname=SURNAME
login.guest.country=COUNTRY
login.guest.address=ADDRESS
login.guest.password=PASSWORD
login.guest.nextpage=Next Page
login.guest.lastpage=Last Page
login.guest.submit=Submit
#===================================================== #=====================================================

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

@ -1,8 +1,17 @@
# Traductions françaises (Quelques examples a enlever) # Traductions françaises (Quelques examples a enlever)
login.guest.login=s'identifier login.guest.signin=SE CONNECTER
login.guest.register=s'enregistrer login.guest.register=S'enregistrer
login.guest.welcome=Veuillez vous enregistrer ici login.guest.alregister=Déjà Enregistré
login.success=Vous êtes maintenant identifié comme $name login.guest.welcome=BIENVENUE A L'UNIVERSITE
login.guest.firstrname= Prénom login.guest.email=E-MAIL
login.guest.firstname= PRENOM
login.guest.surname= NOM
login.guest.country= PAYS
login.guest.address=ADRESSE
login.guest.password= MOT DE PASSE
login.guest.nextpage=Prochaine Page
login.guest.lastpage=Derniere Page
login.guest.submit=Envoyer
#===================================================== #=====================================================

92
frontend/src/Login.vue
View File

@ -1,11 +1,21 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import i18n from './i18n.js' import i18n from './i18n.js'
const login= ref(true) const login= ref(true)
const page = ref(0) const page = ref(0)
const message = ref(i18n("login.guest.login") ) const emailIN=ref("")
const passwordIN=ref("")
const surname=ref("")
const firstname=ref("")
const passwordOUT=ref("")
const emailOUT=ref("")
const address=ref("")
const country=ref("")
const inputs = [emailIN,passwordIN]
const outputs= [surname,firstname,passwordOUT,emailOUT,address,country]
</script> </script>
@ -16,66 +26,71 @@
<div v-if="login"> <div v-if="login">
<div class="form"> <div class="form">
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1> <h1 style="color:rgb(239,60,168); font-family: sans-serif;">{{i18n("login.guest.signin")}}</h1>
<div class="inputBox"> <div class="inputBox">
<p>USERNAME</p> <p>ID / {{i18n("login.guest.email")}}</p>
<input type="text" required> <input type="text" v-model="emailIN">
</div> </div>
<div class="inputBox"> <div class="inputBox">
<p>PASSWORD</p> <p>{{i18n("login.guest.password")}}</p>
<input type="password" required> <input type="password" v-model="passwordIN">
</div> </div>
<div class="register"> <div class="register">
<a @click="login=!login">Register</a> <a @click="login=!login">{{i18n("login.guest.register")}}</a>
</div> </div>
<div class="inputBox"> <div class="inputBox">
<input type="submit" value="Login"> <button @click="console.log(inputs)">{{i18n("login.guest.submit")}}</button>
</div> </div>
</div> </div>
</div> </div>
<div v-else> <div v-else>
<div class="form"> <div class="form">
<h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">WELCOME TO THE UNIVERSITY</h1> <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 v-if="page === 0">
<div class="inputBox"> <div class="inputBox">
<p>LASTNAME</p> <p>{{i18n("login.guest.surname")}}</p>
<input type="text" required> <input type="text" v-model="surname">
</div> </div>
<div class="inputBox"> <div class="inputBox">
<p>{{ message }}</p> <p>{{i18n("login.guest.firstname")}}</p>
<input type="text" required> <input type="text" v-model="firstname">
</div> </div>
<div class="inputBox"> <div class="inputBox">
<p>PASSWORD</p> <p>{{i18n("login.guest.password")}}</p>
<input type="password" required> <input type="password" v-model="passwordOUT">
</div> </div>
<div class="inputBox"> <div class="switchpage">
<button @click="page++">Next page</button> <button @click="page++">{{i18n("login.guest.nextpage")}}</button>
</div> </div>
<div @click="(login=!login) && (page=0)" class="register"> <div @click="(login=!login) && (page=0)" class="register">
<a>Already Registered</a> <a>{{i18n("login.guest.alregister")}}</a>
</div> </div>
</div> </div>
<div v-else> <div v-else>
<div class="inputBox"> <div class="inputBox">
<p>E-MAIL</p> <p>{{i18n("login.guest.email")}}</p>
<input type="mail" required> <input type="mail" v-model="emailOUT">
</div> </div>
<div class="inputBox"> <div class="inputBox">
<p>ADDRESS</p> <p>{{i18n("login.guest.address")}}</p>
<input type="text" required> <input type="text" v-model="address">
</div> </div>
<div class="inputBox"> <div class="inputBox">
<p>COUNTRY</p> <p>{{i18n("login.guest.country")}}</p>
<input type="text" required> <input type="text" v-model="country">
</div> </div>
<div class="inputBox"> <div style="align-self:center;" class="inputBox">
<button @click="page--">Last page</button> <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>
<div @click="(login=!login) && (page=0)" class="register"> <div @click="(login=!login) && (page=0)" class="register">
<a>Already Registered</a> <a>{{i18n("login.guest.alregister")}}</a>
</div> </div>
</div> </div>
</div> </div>
@ -119,7 +134,8 @@
} }
.inputBox input { .inputBox input,button {
width:100%; width:100%;
background:rgb(255, 0 255); background:rgb(255, 0 255);
border: none; border: none;
@ -148,9 +164,21 @@
cursor: pointer; 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 , input[type = "submit"] { }
margin-top:40px;
button {
margin-bottom:20px; margin-bottom:20px;
background-color: rgb(239,60,168); background-color: rgb(239,60,168);
cursor: pointer; cursor: pointer;
@ -161,7 +189,7 @@ button , input[type = "submit"] {
} }
button:active , input[type = "submit"]:active{ button:active ,.switchpage:active{
opacity:0.8; opacity:0.8;
} }

2
frontend/src/i18n.js
View File

@ -61,7 +61,7 @@ export async function loadLangs(lang){
lang = lang != null ? lang : getCookie("lang"); lang = lang != null ? lang : getCookie("lang");
lang = lang != "" ? lang : default_lang; lang = lang != "" ? lang : default_lang;
const filename = "./i18n/" + lang.toUpperCase() + ".txt"; const filename = "/i18n/" + lang.toUpperCase() + ".txt";
const content = await (await fetch(filename)).text(); const content = await (await fetch(filename)).text();
const lines = content.split("\n"); const lines = content.split("\n");