EditProfile.vue

<template>
        <h1><br><br>Profilinnstillinger <br></h1>

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

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

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

            <input type="radio" id="restricted" value="true" 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>
                <input type="text" id="chooseImageUrl" v-model="this.updatedProfile.upImage">

            </div>
        <br><br>
            <div id = "submitbuttonBox">
                <button class="saveBtn" @click=" saveUserSettings">Lagre profilendringer</button>
                <button class="delBtn" @click="deleteUser">Slett brukerprofil</button>
            </div>

        </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},
    computed: {

        ...mapState(useAuthStore, ['profile']),
        ...mapStores(useAuthStore),
        updatedProfile() {
          return {
              upName: this.profile.name,
              upRestricted: this.profile.restricted,
              upImage: this.profile.profileImageUrl,
          }
        },
        iconColor() {
            return "#000000"
        },
        hasProfileImage() {
            return this.updatedProfile.upImage.length > 0;
        }
    },
    data() {
        return {
            deletionConfirmation: false,
        }
    },
    methods: {
        saveUserSettings(){
            const id = this.profile.id;

            API.updateProfile(
                id,{
                    name:this.updatedProfile.upName,
                    profileImageUrl:this.updatedProfile.upImage,
                    restricted:this.updatedProfile.upRestricted,
                }
            ).then((savedProfile)=>{
                useAuthStore().setProfile(savedProfile);
                alert("profil oppdatert.")
            }).catch((error)=> {
                console.log(this.updatedProfile.imageUrl)
                console.log(error)
            })
        },
        chooseProfilePicture(){
            alert("skriv inn bildelenke i feltet, og oppdater innstillinger")
        },
        deleteUser(){
            alert("(Denne knappen gjør ingen ting)  bruker slettet")
            //API.deleteAccount(this.user.id, token).then
        },
        changeProfile(){
            router.push("/selectProfile");
        }
    }
}

</script>

<style scoped lang="scss">

main {
    background-color: white;
    color:black;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: left;
    left:0;
}

#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;
}

img {
    border-radius: 50%;
}

#changeUserImage {
    display:flex;
}

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

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

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;
}
#submitbuttonBox {
    display:flex;
    justify-content: space-between;
}
button {
    background-color: base.$red;
    color: black;

    border: 1px solid black;

    margin: 1em;
}


#changeUserBtn {
    padding:.9em;

}
button:hover{
    background-color: #282828;

}

.saveBtn, .delBtn {
    background-color: base.$green;
    color: white;
    font-weight: bold;
    padding:.9em;
    border:none;
}
.delBtn {
    background-color: darkred;
}

#dangerZone {
    color: darkred;
}

</style>