v-modeling

src/util/API.js

 import axios from "axios";
+
 export const API = {
     /**
      * Fetches all available foodpreference options
      */
-    getFoodpreferences(){
+    getFoodpreferences: async () => {
         return axios.get(`${import.meta.env.VITE_BACKEND_URL}/foodpreferences`)
             .then((response) => {
                 return response.data;
             }).catch(() => {
                 throw new Error();
             });
-    }
+    },
+
+    /**
+     *
+     * @param id id of the account to retrieve
+     * @returns {Promise<*>}
+     */
+    getAccount: async (id) => {
+        return axios.get(`${import.meta.env.VITE_BACKEND_URL}/account/{id}`)
+            .then((response) => {
+                return response.data;
+            }).catch(() => {
+                throw new Error();
+            });
+    },
+
+    /**
+     * Updates profile
+     */
+    updateAccount: async () => {
+        return axios.put(`${import.meta.env.VITE_BACKEND_URL}/account/{id}`)
+            .then((response) => {
+                return response.data;
+            }).catch(() => {
+                throw new Error();
+            });
+    },
+
+    /**
+     * Deletes account from the
+     * @param id
+     * @param token
+     * @returns {Promise<*>}
+     */
+    deleteAccount: async (id, token) => {
+        return axios.delete(`${import.meta.env.VITE_BACKEND_URL}/account/{id}`, {
+            headers: { Authorization: `Bearer ${token}` },
+        })
+            .then((response) => {
+                return response.data;
+            })
+            .catch(() => {
+                throw new Error("Account not found or not accessible");
+            });
+
+    },
+
+
+
+
 
 }

src/views/ProfileSettings.vue

@@ -3,28 +3,34 @@
 
         <h1><br><br>Profilinnstillinger <br></h1>
 
-        <div id = "profilepicture">
+        <div v-if="hasProfileImage" id = "profilepicture-container">
+            <img width="500px" src="{{profile.image}}" alt="profile picture">
+        </div>
+        <div v-else id = "profilepicture-container">
             <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
         </div>
 
-        <h2>Petter</h2>
-        <button id="changeUserBtn">Bytt bruker</button>
+        <h2>{{profile.name}}</h2>
+        <button id="changeUserBtn" >Bytt bruker</button>
 
         <form @submit.prevent="submit">
             <label for="brukernavn">Profilnavn</label><br>
-            <input type="text" required><br>
+            <input type="text" required v-model="profile.name"><br>
           <br>
             <h4>Brukertype</h4>
-            <input type="radio" id="normal" name="userType" value="normal">
+            <input type="radio" id="normal" value="false" v-model="profile.isRestricted">
             <label for="normal"> Standard</label><br>
 
-            <input type="radio" id="restricted" name="userType" value="restricted">
+            <input type="radio" id="restricted" value="true" v-model="profile.isRestricted">
             <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
 
             <br>
             <h3>Profilbilde</h3>
             <div id="changeUserImage">
-                <div id = "profilepicture">
+                <div v-if="hasProfileImage" id = "profilepicture-container">
+                    <img width="30px" src="{{profile.image}}" alt="profile picture">
+                </div>
+                <div v-else id = "profilepicture-container">
                     <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
                 </div>
                 <button>Endre bilde</button>
@@ -68,10 +74,9 @@
         <h1>Konto-innstillinger</h1>
         <form @submit.prevent="submit">
 
-            <p class="infoText">OBS: Ved å endre epost endrer du også brukernavnet ditt</p>
+            <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p>
 
-            <label for="email">Epost</label><br>
-            <input type="text" id="email">
+            <h2>Epost: {{user.username}}</h2>
 
             <label for="password">Passord</label><br>
             <input type="password" id="password">
@@ -86,8 +91,8 @@
           <form  @submit.prevent="submit" id = "dangerZone">
           <h1>🔺FARESONE🔺</h1>
           <p class="infoText">Ved å trykke på knappen nedenfor, vil du slette din SmartMat-konto</p>
-            <input type="checkbox" id="melk" name="melk" value="melk">
-            <label for="allergen"> Jeg bekrefter jeg skjønner dette, og ønsker å slette kontoen min SmartMat-konto for alltid.</label><br>
+            <input type="checkbox" id="deletionCheckbox" v-model="deletionConfirmation">
+            <label for="deletionCheckbox"> Jeg bekrefter jeg skjønner dette, og ønsker å slette kontoen min SmartMat-konto for alltid.</label><br>
             <button class="delBtn" @click="deleteAccount">SLETT KONTO</button>
           </form>
 
@@ -105,6 +110,27 @@ export default {
     computed: {
         iconColor() {
             return "#000000"
+        },
+        hasProfileImage() {
+            return this.profile.image.length > 0;
+        }
+    },
+    data() {
+        return {
+            user: {
+                id: "",
+                username: "petter@hello.no",
+                password: "",
+
+            },
+            profile: {
+                name: "Petter",
+                isRestricted: false,
+                image: "",
+            },
+            foodPreferences: [],
+            allergens: [],
+            deletionConfirmation: false,
         }
     },
     methods: {
@@ -115,7 +141,13 @@ export default {
         alert("(Denne knappen gjør ingen ting) konto oppdatert")
       },
       deleteAccount(){
-        alert("(Denne knappen gjør ingen ting) men  account deleted")
+          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")
+          }
+
       },
       deleteUser(){
         alert("(Denne knappen gjør ingen ting)  bruker slettet")
@@ -131,10 +163,9 @@ export default {
 #dangerZone {
   color: white;
   color: darkred;
-  qwidth: 100%;
 }
 
-#profilepicture {
+#profilepicture-container {
     display:flex;
     border-radius:50%;
     width:100px;
@@ -149,7 +180,7 @@ export default {
     display:flex;
 }
 
-#changeUserImage #profilepicture {
+#changeUserImage #profilepicture-container {
   width: 50px;
   height: 50px;
 }
@@ -222,7 +253,7 @@ main {
     flex-direction: column;
     width: 100%;
     text-align: left;
-  left:0;
+    left:0;
 }