oppdatere profilnavn

src/components/EditProfile.vue

@@ -2,31 +2,31 @@
         <h1><br><br>Profilinnstillinger <br></h1>
 
         <div v-if="hasProfileImage" id = "profilepicture-container">
-            <img width="100" :src="this.currentProfile.image" alt="profile picture">
+            <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>{{profile.name}}</h2>
+        <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="profileName"><br>
+            <input type="text" required v-model="this.updatedProfile.upName"><br>
             <br>
             <h4>Brukertype</h4>
-            <input type="radio" id="normal" value="false" v-model="isRestricted">
+            <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="isRestricted">
+            <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>
             <div id="changeUserImage">
                 <div v-if="hasProfileImage" id = "profilepicture-container">
-                    <img width="50" :src="profileImage" alt="profile picture">
+                    <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'}" />
@@ -44,75 +44,54 @@
 </template>
 
 <script>
-import {mapStores} from "pinia";
+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 {
-    setup() {
-        const authStore = useAuthStore();
-        const profileName = authStore.profile.name;
-        const profileImage = authStore.profile.profileImageUrl;
-        const isRestricted = authStore.profile.restricted;
-    },
     name: "EditProfile",
     components: {Icon},
     computed: {
-        ...mapStores(useAuthStore),
-        profile() {
-            let store = useAuthStore();
 
-            this.currentProfile.name = store.profile.name;
-            this.currentProfile.isRestricted = store.profile.restricted;
-            this.currentProfile.image = store.profile.profileImageUrl;
-            return store.profile
-        },
-        user() {
-            const store = useAuthStore();
-            return store.user
+        ...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.currentProfile.image.length > 0;
+            return this.updatedProfile.upImage.length > 0;
         }
     },
     data() {
         return {
-            currentUser: {
-                newPassword: "",
-            },
-            currentProfile: {
-                name: "",
-                isRestricted: true,
-                image: "",
-            },
-            foodPreferences: [],
-            allergens: [],
             deletionConfirmation: false,
         }
     },
     methods: {
-        saveUserSettings(){ //profilnavn, profilbilde, profilrestriksjoner
-            const namee = this.currentProfile.name;
-            const isRestrictede = this.currentProfile.isRestricted;
-            const profileImageUrle = this.currentProfile.image;
+        saveUserSettings(){
+            const id = this.profile.id;
 
             API.updateProfile(
-                this.profile.id,{
-                    name:namee,
-                    profileImageUrl: profileImageUrle,
-                    restricted: isRestrictede,
+                id,{
+                    name:this.updatedProfile.upName,
+                    profileImageUrl:this.updatedProfile.upImage,
+                    restricted:this.updatedProfile.upRestricted,
                 }
             ).then((savedProfile)=>{
+                console.log(this.updatedProfile.upName)
                 useAuthStore().setProfile(savedProfile);
-
+                alert("profil oppdatert.")
             }).catch((error)=> {
                 console.log(error)
             })
-
         },
         chooseProfilePicture(){
             alert("velgBilde")
@@ -121,7 +100,6 @@ export default {
             if(this.currentUser.newPassword.length===0){
                 alert("Det er ikke gjort endringer, og passordet vil ikke bli oppdatert")
             } else {
-
                 alert("(Denne knappen gjør ingen ting) konto oppdatert")
             }
         },
@@ -145,8 +123,6 @@ export default {
     }
 }
 
-
-
 </script>
 
 <style scoped lang="scss">
@@ -245,6 +221,4 @@ button:hover{
     color: darkred;
 }
 
-
-
 </style>
\ No newline at end of file