opprydding og småendringer

src/components/EditAccount.vue

 <template>
-    <h1>Konto-innstillinger</h1>
+    <h2>Konto-innstillinger</h2>
     <form @submit.prevent="submit">
         <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br>
 
@@ -203,6 +203,15 @@ button:hover{
     background-color: darkred;
 }
 
+button:hover{
+    background-color: base.$green-hover;
+}
+
+.delBtn:hover {
+    background-color: base.$darkred-hover;
+}
+
+
 #dangerZone {
     color: darkred;
 }

src/components/EditProfile.vue

 <template>
-        <h1><br><br>Profilinnstillinger <br></h1>
+        <h2>Profilinnstillinger</h2>
 
         <div v-if="hasProfileImage" id = "profilepicture-container">
             <img width="100" :src="this.updatedProfile.upImage" alt="profile picture">
@@ -8,14 +8,14 @@
             <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
         </div>
 
-        <h2>{{this.profile.name}}</h2>
+        <h3>{{this.profile.name}}</h3>
         <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>
+            <h3>Brukertype</h3>
             <input type="radio" id="normal" value="false" name="restrict" v-model="this.updatedProfile.upRestricted">
             <label for="normal"> Standard</label><br>
 
@@ -32,8 +32,9 @@
                     <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">
+                <label for="chooseImageUrl">Bilde-URL:</label><br>
+                <input type="file" id="chooseImage" v-on:change="updateImage">
+                <!--<input type="text" id="chooseImageUrl" v-model="this.updatedProfile.upImage">-->
 
             </div>
         <br><br>
@@ -64,7 +65,6 @@ export default {
         }
     },
     computed: {
-
         ...mapState(useAuthStore, ['profile']),
         ...mapStores(useAuthStore),
         updatedProfile() {
@@ -75,13 +75,32 @@ export default {
           }
         },
         iconColor() {
-            return "#000000"
+            return "#D9D9D9"
         },
         hasProfileImage() {
             return this.updatedProfile.upImage.length > 0;
         }
     },
     methods: {
+        changeProfile(){
+            router.push("/selectProfile");
+        },
+        async deleteProfile() {
+                const id = this.profile.id;
+                API.deleteProfile(id).then(() => {
+                    router.push('/selectProfile')
+                }).catch((error) => {
+                    this.setAlertText("Det oppsto en feil ved sletting profil: " + error, 'red')
+                })
+        },
+
+
+
+
+
+        updateImage(){
+            //todo update image preview
+        },
         saveUserSettings(){
             const id = this.profile.id;
 
@@ -108,22 +127,8 @@ export default {
         chooseProfilePicture(){
             this.setAlertText("skriv inn bildelenke i feltet, og oppdater innstillinger",'black')
         },
-        changeProfile(){
-            router.push("/selectProfile");
-        },
-      deleteProfile(){
-          const numOfProfiles = API.getProfiles().length
-          if(numOfProfiles===1){
-              this.setAlertText("Du kan ikke slette profilen. Hver Konto må ha minst en profil",'red')
-          }else {
-            const id = this.profile.id;
-            API.deleteProfile(id).then(()=>{
-              router.push('/selectProfile')
-            }).catch((error)=> {
-                this.setAlertText("Det oppsto en feil ved sletting profil", 'red')
-            })
-          }
-      },
+
+
         setAlertText(text, color){
             switch (color) {
                 case 'red':
@@ -210,29 +215,32 @@ input[type="password"]{
 button {
     background-color: base.$red;
     color: black;
-
     border: 1px solid black;
-
     margin: 1em;
 }
-
+button:hover{
+  background-color: base.$red-hover;
+}
 
 #changeUserBtn {
     padding:.9em;
 
 }
-button:hover{
-    background-color: #282828;
 
+.delBtn:hover {
+  background-color: base.$darkred-hover;
 }
 
-.saveBtn, .delBtn {
+.saveBtn, .delBtn{
     background-color: base.$green;
     color: white;
     font-weight: bold;
     padding:.9em;
     border:none;
 }
+.saveBtn:hover{
+  background-color: base.$green-hover;
+}
 .delBtn {
     background-color: darkred;
 }

src/style.scss

@@ -4,10 +4,12 @@ $light-green: hsla(160, 100%, 37%, 1);
 $white:#FFFFFF;
 $grey:#D9D9D9;
 $red:#EE6D6D;
+$darkred: darkred;
 
 $red-hover: darken( $red, 5% );
 $green-hover: darken( $green, 8% );
 $light-green-hover: darken( $light-green, 10% );
+$darkred-hover: darken(darkred, 10%);
 
 
 $desktop-min: 800px;

src/util/API.js

@@ -235,7 +235,7 @@ export const API = {
                 throw new Error("Could not fetch fridge item");
             });
     },
-    },
+
 
     /**
      * Deletes account from the
@@ -256,8 +256,8 @@ export const API = {
                 authStore.logout()
                 router.push('/login')
             })
-            .catch(() => {
-                throw new Error("");
+            .catch((error) => {
+                throw new Error(error);
             });
 
     },