Register proto
This commit is contained in:
		@ -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;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user