Clyde/frontend/src/Apps/Profil.vue

<script setup>
  import {reactive, ref } from 'vue'
  import {getSelf,alterSelf,disconnect,deleteUser} from '../rest/Users.js'
  import {getSelfCurriculum, getAllCurriculums} from '../rest/curriculum.js'
  import {getCourses} from "../rest/courses.js"
  import i18n from "@/i18n.js"
  import { uploadProfilePicture } from '@/rest/uploads.js'

  const user = ref(await getSelf());
  const UserCurriculum = ref(""); 
  const curricula = ref (await getAllCurriculums());
  if(user.value.role === "Student"){
    UserCurriculum.value = await getSelfCurriculum();
  }

  if(user.role === "Teacher"){
    UserCurriculum.value = await getCourses("Teacher");
  }
  const modif = ref(false);
  const curric = ref(false);
  const reg = ref(false);

  const pattern = {
    profilPictureUrl:null,
    email:null,
    address:null,
    password:null,
  };
  
  const patternInfos ={
    email: null,
    password: null,
    passwordConfirm:null,
    id:null,
  }

  
  let toModify= Object.assign({}, pattern);
  let personnalInfos =  Object.assign({}, patternInfos);
  
  function resetInputs(inputs,list){
    inputs=Object.assign({},list); 
  }
  
  async function ChangeInfos(){
    for (let element in toModify){
         if (element =="email" && (toModify[element] !== null)){
          await  alterSelf(user.value.regNo,{email : toModify[element]});
        }      

        if (element =="profilPictureUrl" && (toModify[element] !== null)){
          await  alterSelf(user.value.regNo,{ profilPictureUrl : toModify[element]});
        }
        else if(element == "address" && (toModify[element] !== null)){
          await  alterSelf(user.value.regNo,{address : toModify[element]});
        }
        else if(element == "password" && (toModify[element] !== null)){
          await  alterSelf(user.value.regNo,{password : toModify[element]});
        }
    }
      toModify= Object.assign({},pattern);
        user.value = await getSelf()

   } 
  
  function setModify(item){
     toModify.address = item.address;
     toModify.profilPictureUrl = item.profilPictureUrl;
     toModify.email= item.email;
     toModify.password= item.password;
  }

  
  async function unRegister(){
   deleteUser(user.value.regNo);
   disconnect()
   setTimeout(() => {
      window.location.href="#/home";
      }, "500");
    
  }

  function getPP(){
    if(user.value.profilePictureUrl === null){
      return "/Clyde.png"
    }
    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 && 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)}} 
          </div>
          <div v-else>
            Role:  {{i18n((user.role))}} 
          </div>
          <div>
            <button @click="modif=!modif; setModify(user)"> {{i18n("profile.modify.data")}} </button>
          </div>
          <div v-if="(user.role==='Student')">
            <button @click="reg=!reg">{{i18n("profile.reRegister")}}</button>
            <button @click="unRegister()" 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.id">
          </div>
          <div>
            {{i18n("login.password")}}:
            <input type="password" v-model="toModify.password">
          </div>
          <div>
            {{i18n("login.cPassword")}}:
            <input type="password" v-model="toModify.passwordConfirm">
          </div>
          <div>
            <button @click=" modif=!modif; ChangeInfos();">{{i18n("courses.confirm")}}</button>
            <button @click="modif=!modif; resetInputs(toModify,pattern);" style="float:right;">{{i18n("courses.back")}}</button>
          </div>
        </div>
        <div v-else-if="curric" class="infosContainer">
          <div style="height:40px;">
            {{i18n("Curriculum")}}:  
            <select v-model="curriculum" >
              <option v-for="item in curricula" style="font-size:20px;" :value="item">{{item.option}}</option>        
            </select>
          </div>

          <div>
            <button @click=" curric=!curric;">{{i18n("courses.confirm")}}</button>
            <button @click="curric=!curric; resetInputs(personnalInfos,patternInfos);" style="float:right;">{{i18n("courses.back")}}</button>
          </div>
        </div>
        <div v-else-if="reg" class="infosContainer">
          <div>
            E-mail:  
            <input type="mail" v-model="toModify.email" />
          </div>
          <div>
            ID :
            <input type="text" v-model="toModify.id">
          </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>
            <button @click=" reg=!reg; resetInputs(personnalInfos,patternInfos);" style="float:right;">{{i18n("courses.back")}}</button>
          </div>
        </div>

      </div>
      
      <div v-if="modif==false && curric==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 UserCurriculum.courses">
          <div class=" containerElement">
            <div class="name"> {{item.title}} </div>
            <div class="teacher">{{item.owner.lastName}}</div> 
            <div class="credits">Credits:{{item.credits}}</div>  
          </div>
          </div>
        </div>
        
        <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>