<script setup> import { ref } from 'vue' import i18n from '@/i18n.js' import { login , register } from '@/rest/Users.js' import { uploadProfilePicture } from '@/rest/uploads.js' const loginPage= ref(true) const page = ref(0) const submitValue= ref(i18n("login.guest.submit")) const surname=ref("") const firstname=ref("") const password=ref("") const passwordConfirm=ref("") const birthday=ref("") const email=ref("") const address=ref("") const country=ref("") const curriculum=ref("") const imageSaved = ref(false) const ppData = ref(false) </script> <template> <div class='loginBox'> <div v-if="loginPage"> <form @submit.prevent="login(email, password)"class="form"> <h1 style="color:rgb(239,60,168); font-family: sans-serif;"> {{i18n("login.guest.signin")}} </h1> <div class="inputBox"> <p>ID / {{i18n("login.guest.email")}}</p> <input type="text" v-model="email"> </div> <div class="inputBox"> <p>{{i18n("login.guest.password")}}</p> <input type="password" v-model="password"> </div> <div class="register"> <a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a> </div> <div class="inputBox"> <input type="submit" v-model="submitValue"> </div> </form> </div> <div v-else> <form @submit.prevent="register(firstname, surname, birthday, password, mail, address, country, curriculum)" class="form"> <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 class="inputBox"> <p>{{i18n("login.guest.surname")}}</p> <input type="text" v-model="surname"> </div> <div class="inputBox"> <p>{{i18n("login.guest.firstname")}}</p> <input type="text" v-model="firstname"> </div> <div class="inputBox"> <p>{{i18n("login.guest.birthday")}}</p> <input type="date" v-model="birthday"> </div> <div class="inputBox"> <p>{{i18n("login.guest.password")}}</p> <input type="password" v-model="password"> </div> <div class="inputBox"> <p>{{i18n("login.guest.confirm")}} {{i18n("login.guest.password")}}</p> <input type="password" v-model="passwordConfirm"> <!-- TODO: Verify password is same as passwordConfirm --> </div> <div class="switchpage"> <button @click="page++">{{i18n("login.guest.nextpage")}}</button> </div> <div @click="(loginPage=!loginPage) && (page=0)" class="register"> <a>{{i18n("login.guest.alregister")}}</a> </div> </div> <div v-else> <div class="inputBox"> <p>{{i18n("login.guest.email")}}</p> <input type="mail" v-model="email"> </div> <div class="inputBox"> <p>{{i18n("login.guest.address")}}</p> <input type="text" v-model="address"> </div> <div class="inputBox"> <p>{{i18n("login.guest.country")}}</p> <input type="text" v-model="country"> </div> <form novalidate enctype="multipart/form-data" class="inputBox"> <p>ProfilePicture</p> <input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*"> </form> <div class="inputBox"> <p>{{i18n("curriculum").toUpperCase()}}</p> <select v-model="curriculum"> <option value="Chemistry">Chemistry</option> <option value="Psycho">Psychology</option> <option value="IT">IT</option> </select> </div> <div style="align-self:center;" class="inputBox"> <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 @click="(loginPage=!loginPage) && (page=0)" class="register"> <a>{{i18n("login.guest.alregister")}}</a> </div> </div> </form> </div> </div> </template> <style scoped> .Home{ position:absolute; display: flex; z-index: 100; padding: 8px 16px; color:rgb(255, 255, 255); text-decoration: none; } .Home:hover{ width:40px; background-color: black; border-radius:6px; color:white; transform: translate(0px ,1px); } .loginBox { background-color: rgb(24,24,24); width: 400px; display:flex; justify-content: center; padding: 40px; border-radius: 20px; box-shadow:0 5px 25px #000000; } .form { position:relative; width:100%; display: flex; flex-direction: column; justify-content: center; align-items:center; gap: 15px; } .inputBox input,button,select { width:100%; border: none; margin-right: 50px; padding-left: 10px; padding-top:10px; padding-bottom:10px; outline:none; border-radius: 4px; font-size:1.35em; } .inputBox p{ position:relative; z-index: 100; font-family:sans-serif ; color:rgb(239,60,168); transition:0.5; } .register{ color:rgb(239,60,168); width: 100%; display:flex; 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; } input[type=submit],button,select{ margin-bottom:20px; background-color: rgb(239,60,168); cursor: pointer; padding:10px; font-size:1.35em; border:none; border-radius:20px; } button:active ,.switchpage:active{ opacity:0.8; } </style>