From 7b4d0274a7e2bac7240c7d23e85b59661b453e81 Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Wed, 26 Apr 2023 10:55:04 +0200
Subject: [PATCH] oppdatere profilnavn
---
src/components/EditProfile.vue | 74 +++++++++++-----------------------
1 file changed, 24 insertions(+), 50 deletions(-)
diff --git a/src/components/EditProfile.vue b/src/components/EditProfile.vue
index 62c7819..e3837ca 100644
--- a/src/components/EditProfile.vue
+++ b/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
--
GitLab