<script setup> import {reactive, ref } from 'vue' import {getSelf,alterSelf} from '../rest/Users.js' import i18n from "@/i18n.js" import { uploadProfilePicture } from '@/rest/uploads.js' const user = await getSelf(); console.log(user); const modif = ref(false); const curric = ref(false); const unreg = ref(false); const reg = ref(false); const toModify = { profilPictureUrl:null, email:null, adress:null, password:null, }; function ChangeInfos(){ for (const [key, value] in Object.entries(toModify)){ if(value !== null){ alterSelf({key:value}) } } } function getPP(){ return user.profilePictureUrl } </script> <template> <div class="body"> <div class="container"> <div class="profilPic"> <img class="subContainter" :src=getPP()> </div> <div class="globalInfos"> <div v-if="modif==false && curric==false && unreg==false && reg==false " class="infosContainer" > <div> {{user.firstName}} {{user.lastName}} </div> <div> E-mail: {{user.email}} </div> <div v-if="user.role==='Student'"> {{user.option}} {{i18n(user.role.toLowerCase())}} </div> <div v-else> Role: {{i18n((user.role).toLowerCase())}} </div> <div> <button @click="modif=!modif"> {{i18n("profile.modify.data")}} </button> </div> <div v-if="(user.role==='Student')"> <button @click="reg=!reg">{{i18n("profile.reRegister")}}</button> <button @click="unreg=!unreg" style="float:right;background-color:rgb(150,0,0);">{{i18n("profile.unRegister")}}</button> </div> <div v-if="(user.role==='Student')"> <button @click="curric=!curric">{{i18n("profile.change.curriculum")}}</button> </div> </div> <div v-else-if="modif" class="infosContainer"> <div> {{i18n("profile.picture")}}: <input type="file" @change="user.profilPicture = uploadProfilePicture($event.target.files);" accept="image/*"> </div> <div> E-mail: <input type="mail" v-model="toModify.email" /> </div> <div> {{i18n("profile.address")}}: <input type="text" v-model="toModify.address"> </div> <div> {{i18n("login.password")}}: <input type="password" v-model="toModify.password"> </div> <div> {{i18n("login.cPassword")}}: <input type="password" id="confirm"> </div> <div> <button @click=" modif=!modif; ChangeInfos();">{{i18n("courses.confirm")}}</button> </div> </div> <div v-else-if="curric" class="infosContainer"> <div> {{i18n("curriculum")}}: <select v-model="curriculum"> <option v-for="item in currcula">{{item}}</option> </select> </div> <div> E-mail: <input type="mail" v-model="mail"> </div> <div> {{i18n("login.password")}}: <input type="password" v-model="assword"> </div> <div> {{i18n("login.cPassword")}}: <input type="password" id="confirm"> </div> <div> <button @click=" curric=!curric;">{{i18n("courses.confirm")}}</button> </div> </div> <div v-else-if="reg" class="infosContainer"> <div> E-mail: <input type="mail" v-model="toModify.email" /> </div> <div> {{i18n("profile.address")}}: <input type="text" v-model="toModify.address"> </div> <div> {{i18n("login.password")}}: <input type="password" v-model="toModify.password"> </div> <div> {{i18n("login.cPassword")}}: <input type="password" id="confirm"> </div> <div> <button @click=" reg=!reg;">{{i18n("courses.confirm")}}</button> </div> </div> <div v-else-if="unreg" class="infosContainer"> <div> E-mail: <input type="mail" v-model="toModify.email" /> </div> <div> {{i18n("profile.address")}}: <input type="text" v-model="toModify.address"> </div> <div> {{i18n("login.password")}}: <input type="password" v-model="toModify.password"> </div> <div> {{i18n("login.cPassword")}}: <input type="password" id="confirm"> </div> <div> <button @click=" unreg=!unreg;">{{i18n("courses.confirm")}}</button> </div> </div> </div> <div v-if="modif==false && curric==false && unreg==false && reg==false "class="moreInfos"> <div v-if="(user.role==='Student')"> <div class="listTitle"> {{i18n("profile.course.list")}} </div> <div class="listElement " v-for="item in user.curriculum"> <div class=" containerElement"> <div class="name"> {{item.name}} </div> <div class="teacher">{{item.teacher}}</div> <div class="credits">Credits:{{item.credits}}</div> </div> </div> </div> <div> </div> <div v-if="(user.role==='Teacher')"> <div class="listTitle"> {{i18n("profile.course.list")}} </div> <div class="listElement " v-for="item in user.coursesOwned"> {{item.name}} </div> </div> </div> </div> </div> </template> <style scoped> .container{ display:grid; grid-template-columns:200px 900px; grid-template-rows:200px auto; column-gap:30px; row-gap:45px; grid-template-areas: "profilPic globalInfos" "minfos minfos"; } .profilPic{ grid-area:profilPic; } .globalInfos { grid-area:globalInfos; align-self :center; } .subContainter{ width:100%; background-color:rgb(50,50,50); border-radius:20px; border:4px solid black; } .moreInfos { grid-area:minfos; } .body { width:100%; margin-bottom:10px; } .containerElement{ justify-content:center; display:grid; grid-template-columns:350px 350px 200px; grid-template-areas: "name teacher credits"; column-gap:10px; } .name { grid-area:name; align-self:center; } .teacher{ grid-area:teacher; align-self:center; } .credits{ grid-area:credits; align-self:center; } .listTitle{ display: flex; justify-content: center; align-items: center; width:200px; margin-left:auto; margin-right:auto; border:2px solid black; font-size:25px; color:white; padding:20px; background-color:rgb(50,50,50); border-radius:20px;margin-bottom:10px; } .listElement{ border:2px solid black; font-size:25px; color:white; padding:20px; background-color:rgb(50,50,50); border-radius:20px; margin-bottom:10px; } .infosContainer { padding-bottom:50px; border:2px solid black; font-size:25px; color:white; padding:20px; background-color:rgb(50,50,50); border-radius:20px; } button{ border:none; background-color:rgb(239, 60, 168); border-radius:10px; height:35px; margin-top:10px; } button:hover{ opacity:0.8; } </style>