man kan oppdatere fornavn og passord

src/components/EditAccount.vue

@@ -4,10 +4,13 @@
 
         <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br>
 
-        <p>Epost: {{user.email}}</p><br>
+        <p>Epost: {{this.user.email}}</p><br>
+
+        <label for="fname">Endre fornavn</label><br>
+        <input type="text" id="fname" v-model="updatedUser.upFirstname"><br>
 
         <label for="password">Endre passord</label><br>
-        <input type="password" id="password" v-model="this.currentUser.newPassword">
+        <input type="password" id="password" v-model="updatedUser.upPassword">
 
         <button class="saveBtn" @click="saveAccountSettings">Lagre nytt passord</button>
 
@@ -27,15 +30,138 @@
 </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 {
-    name: "EditAccount"
+    name: "EditAccount",
+    computed: {
+        ...mapState(useAuthStore, ['user']),
+        ...mapStores(useAuthStore),
+        updatedUser() {
+            return {
+                upFirstname: this.user.firstname,
+                upPassword:'',
+            }
+        },
+        iconColor() {
+            return "#000000"
+        },
+        hasProfileImage() {
+            return this.updatedProfile.upImage.length > 0;
+        }
+    },
+    data() {
+        return {
+            deletionConfirmation: false,
+        }
+    },
+    methods: {
+        saveAccountSettings(){ //passord
+            if(this.updatedUser.upPassword.length===0){ //Oppdater ikke passordet dersom man ikke har gjort endringer
+                const id = this.user.id;
+
+                API.updateAccount(
+                    id,{
+                        firstname:this.updatedUser.upFirstname,
+                        password:null,
+                    }
+                ).then((savedUser)=>{
+                    useAuthStore().setUser(savedUser);
+                    alert("Bruker oppdatert.")
+                }).catch((error)=> {
+                    console.log(error)
+                })
+            } else {
+                const id = this.user.id;
+
+                API.updateAccount(
+                    id,{
+                        firstname:this.updatedUser.upFirstname,
+                        password:this.updatedUser.upPassword,
+                    }
+                ).then((savedUser)=>{
+                    useAuthStore().setUser(savedUser);
+                    alert("Bruker oppdatert.")
+                }).catch((error)=> {
+                    console.log(error)
+                })
+            }
+        },
+        deleteAccount(){
+            if(this.deletionConfirmation===false){
+                alert("Du må bekrefte at du vil slette konto ved å huke av boksen")
+            }
+            else {
+                alert("(Denne knappen gjør ingen ting) men  account deleted")
+                API.deleteAccount(this.user.id, token);
+            }
+        },
+    }
 }
 </script>
 
-<style scoped>
+<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;
+}
+.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;
+}
+
+button {
+    background-color: base.$red;
+    color: black;
+
+    border: 1px solid black;
+
+    margin: 1em;
+}
+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>
\ No newline at end of file

src/components/EditProfile.vue

@@ -23,7 +23,7 @@
             <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
 
             <br>
-            <h3>Profilbilde</h3>
+            <h3>Profilbilde</h3><br>
             <div id="changeUserImage">
                 <div v-if="hasProfileImage" id = "profilepicture-container">
                     <img width="50" :src="this.updatedProfile.upImage" alt="profile picture">
@@ -31,11 +31,14 @@
                 <div v-else id = "profilepicture-container">
                     <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
                 </div>
-                <button @click="chooseProfilePicture">Endre bilde</button>
-            </div>
 
+                <label for="chooseImageUrl">Bilde-URL:</label>
+                <input type="text" id="chooseImageUrl" v-model="this.updatedProfile.upImage">
+
+            </div>
+        <br><br>
             <div id = "submitbuttonBox">
-                <button @click=" saveUserSettings">Submit</button>
+                <button class="saveBtn" @click=" saveUserSettings">Lagre profilendringer</button>
                 <button class="delBtn" @click="deleteUser">Slett brukerprofil</button>
             </div>
 
@@ -86,32 +89,15 @@ export default {
                     restricted:this.updatedProfile.upRestricted,
                 }
             ).then((savedProfile)=>{
-                console.log(this.updatedProfile.upName)
                 useAuthStore().setProfile(savedProfile);
                 alert("profil oppdatert.")
             }).catch((error)=> {
+                console.log(this.updatedProfile.imageUrl)
                 console.log(error)
             })
         },
         chooseProfilePicture(){
-            alert("velgBilde")
-        },
-        saveAccountSettings(){ //passord
-            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")
-            }
-        },
-        deleteAccount(){
-            if(this.deletionConfirmation===false){
-                alert("Du må bekrefte at du vil slette konto ved å huke av boksen")
-            }
-            else {
-                alert("(Denne knappen gjør ingen ting) men  account deleted")
-                //API.deleteAccount(this.user.id, token);
-            }
-
+            alert("skriv inn bildelenke i feltet, og oppdater innstillinger")
         },
         deleteUser(){
             alert("(Denne knappen gjør ingen ting)  bruker slettet")

src/util/API.js

@@ -124,17 +124,34 @@ export const API = {
     },
 
     /**
-     * Updates profile
+     *
+     * @param id account id
+     * @param request password and firstname
+     * @returns {Promise<*>}
      */
-    updateAccount: async (id, password) => {
-        return axios.put(`${import.meta.env.VITE_BACKEND_URL}/account/{id}`)
+    updateAccount: async (id, request) => {
+        const authStore = useAuthStore();
+        if (!authStore.isLoggedIn) {
+            throw new Error();
+        }
+
+        return axios.put(`${import.meta.env.VITE_BACKEND_URL}/account/${id}`,request, {
+                headers: { Authorization: `Bearer ${authStore.token}` },
+            })
             .then((response) => {
+                authStore.setUser(response.data)
                 return response.data;
             }).catch(() => {
-                throw new Error();
+                throw new Error("Error when updating account: ");
             });
     },
 
+    /**
+     * Updates the profile name, restriction and profile image
+     * @param id profile id
+     * @param request
+     * @returns {Promise<*>}
+     */
     updateProfile: async (id, request) => {
         const authStore = useAuthStore();
         if (!authStore.isLoggedIn) {

src/views/ProfileSettings.vue

 <template>
     <main>
     <EditProfile></EditProfile>
-
-        <!--<EditAccount></EditAccount>-->
+        <EditAccount></EditAccount>
     </main>
 </template>
 <script setup>