EditProfile.vue

<template>
        <h2>Profilinnstillinger</h2>


        <div v-if="hasProfileImage" id = "profilepicture-container">
            <img  width="100" :src="this.updatedProfile.upImage" alt="profile picture">
        </div>
        <div v-else id="#placeholder">
            <Icon   icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
        </div>

        <h3>{{this.profile.name}}</h3>
        <button  @click="changeProfile" id="changeUserBtn" class="redBtn">Bytt bruker</button>

    <form @submit.prevent="submit">
            <label for="brukernavn">Profilnavn</label><br>
            <input type="text" required id="brukernavn" v-model="this.updatedProfile.upName"><br>
            <br>
            <h3>Brukertype</h3>
            <input type="radio" id="normal" value="false" name="restrict" v-model="this.updatedProfile.upRestricted">
            <label for="normal"> Standard</label><br>

            <input type="radio" id="restricted" value="true" name="restrict" v-model="this.updatedProfile.upRestricted">
            <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br><br>


            <h3>Profilbilde</h3><br>
            <div id="changeUserImage">
                <div v-if="hasProfileImage" id = "profilepicture-container">
                    <img width="50" :src="this.updatedProfile.upImage" alt="profile picture">
                </div>
                <div v-else id = "profilepicture-container">
                    <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
                </div>

                <label for="chooseImageUrl">Bilde-URL:</label><br>
                <!--<input type="file" id="chooseImage" v-on:change="updateImage">-->
                <input type="text" id="chooseImageUrl" v-model="this.updatedProfile.upImage">

            </div>
        <br><br>
            <div id = "submitbuttonBox">
                <button class="greenBtn" @click=" saveUserSettings">Lagre profilendringer</button>
                <button class="darkRedBtn" @click="deleteProfile">Slett brukerprofil</button>
            </div>

            <p id="alert">{{alertMsg}}</p>

        </form>

</template>

<script>
import {mapState, mapStores} from "pinia";
import {Icon} from "@iconify/vue";
import {API} from "@/util/API";
import { useAuthStore } from "@/stores/authStore";
import router from "../router";
export default {
    name: "EditProfile",
    components: {Icon},
    data() {
        return {
            alertMsg:'',
            initialName: '', //used to compare with updated values
            initialRestriction: '',
        }
    },
    computed: {
        ...mapState(useAuthStore, ['profile']),
        ...mapStores(useAuthStore),
        updatedProfile() {
          return {
              upName: this.profile.name,
              upRestricted: this.profile.restricted,
              upImage: this.profile.profileImageUrl,
          }
        },
        iconColor() {
            return "#D9D9D9"
        },
        hasProfileImage() {
            return false;
        }
    },
    beforeMount() {//used to compare with changed values
        this.initialName = this.profile.name;
        this.initialRestriction = this.profile.restricted;
    },
    methods: {
        changeProfile(){
            router.push("/selectProfile");
        },
        async deleteProfile() {
                const id = this.profile.id;
                API.deleteProfile(id).then(() => {
                    router.push('/selectProfile')
                }).catch((_) => {
                    this.alertMsg = "‼️Alle kontoer må ha minst en profil (profil ble ikke slettet)‼️"
                })
        },
        saveUserSettings(){
            const id = this.profile.id;

            let newName = null;
            let newRestricted = null;

            if(this.updatedProfile.upName !== this.initialName){
                newName = this.updatedProfile.upName
            }
            if(this.updatedProfile.upRestricted !== this.initialRestriction){
                newRestricted = this.updatedProfile.upRestricted
            }

            API.updateProfile(
                id,{
                    name:newName,
                    profileImageUrl:this.updatedProfile.upImage,
                    isRestricted: newRestricted,
                }
            ).then((savedProfile)=>{
                useAuthStore().setProfile(savedProfile);
                this.alertMsg = "Profil oppdatert."
            }).catch(error=> {
                console.log(error)
                if (error.message === '400') {
                    if(newRestricted){
                        this.alertMsg = '‼️Det oppsto en feil: Sørg for at det finnes mist en standard profil på kontoen‼️ '
                    } else if(this.updatedProfile.name !== this.initialName || this.updatedProfile.name) {
                        this.alertMsg = '‼️Det oppsto en feil: Det finnes allerede en bruker med samme navn‼️'
                    }
                }else{
                    this.alertMsg = "‼️Det oppsto en feil.‼️"
                }
            })
        },





        updateImage(){
            //todo update image preview
        },
        chooseProfilePicture(){
            this.alertMsg = "skriv inn bildelenke i feltet, og oppdater innstillinger"
        },
    }
}

</script>

<style scoped lang="scss">

input[type="radio"] {
  width: 2em;
  height: 2em;

}

#changeUserBtn {
  border: 1px solid black;
}

#profilepicture-container {
  display:flex;
  border-radius:50%;
  width:100px;
  height: 100px;
  background-color: white;
  justify-content: center;
  align-items: center;
  border: 3px solid base.$grey;
}

#changeUserImage {
    display:flex;
}

img {
  border-radius: 50%;
}

#changeUserImage #profilepicture-container {
    width: 50px;
    height: 50px;
}

#submitbuttonBox {
    display:flex;
    justify-content: space-between;
}





/*--General--*/
form {
   background-color: base.$grey;
   color: black;
   align-content: end;
   padding: 2em;
   margin-top: 2em;
   margin-bottom: 2em;
 }

input[type="text"],
input[type="password"]{
  width: 100%;
  padding: .5em;
}

button {
  color: black;
  border: 1px solid black;
  margin: 1em;
  padding:.9em;
  font-weight: bold;
}
.redBtn {
  background-color: base.$red;
  border:none;
  color:white;
}

.redBtn:hover {
  background-color: base.$red-hover;
}

.darkRedBtn {
  background-color: darkred;
  border:none;
  color:white;
}
.darkRedBtn:hover {
  background-color: base.$darkred-hover;
}

.greenBtn{
  background-color: base.$green;
  border:none;
  color:white;
}
.greenBtn:hover{
  background-color: base.$green-hover;
}

.infoText {
  background-color: white;
  padding: .5em;
  margin: .4em;
}

#alert {
  display: flex;
  width:100%;
  justify-content: center;
  color: base.$light-green;
  font-weight: bold;
}
</style>