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,11 +1,26 @@ | ||||
| <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 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"> | ||||
| @ -13,13 +28,61 @@ | ||||
|                 <input type="password" required> | ||||
|               </div> | ||||
|               <div class="register"> | ||||
|             <a>Register</a> | ||||
|                 <a @click="login=!login">Register</a> | ||||
|               </div> | ||||
|               <div class="inputBox"> | ||||
|                 <input type="submit" value="Login"> | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|  | ||||
|           <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> | ||||
|     </div> | ||||
|   </body> | ||||
| </template> | ||||
| @ -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