meldinger ved feil

src/components/EditAccount.vue

 <template>
     <h1>Konto-innstillinger</h1>
     <form @submit.prevent="submit">
-
         <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br>
 
         <p>Epost: {{this.account.email}}</p><br>
@@ -13,8 +12,9 @@
         <input type="password" id="password" v-model="updatedAccount.upPassword">
 
         <button class="saveBtn" @click="saveAccountSettings">Lagre profilendringer</button>
-
+        <p :style={color:alertMsgColor} id="alert">{{alertMsg}}</p>
     </form>
+
     <br>
     <br>
     <hr>
@@ -25,6 +25,7 @@
         <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>
+        <p :style={color:alertMsgColor} id="alert">{{delAlertMsg}}</p>
     </form>
 
 </template>
@@ -53,6 +54,9 @@ export default {
     data() {
         return {
             deletionConfirmation: false,
+            alertMsg:'',
+            alertMsgColor:'black',
+            delAlertMsg:'',
         }
     },
     methods: {
@@ -67,8 +71,9 @@ export default {
                     }
                 ).then((savedAccount)=>{
                     useAuthStore().setAccount(savedAccount);
-                    alert("Bruker oppdatert.")
+                    this.setAlertText("Melding: Bruker oppdatert.",'light-green');
                 }).catch((error)=> {
+                    this.setAlertText("Melding: Det oppsto en feil. ",'red');
                     console.log(error)
                 })
             } else {
@@ -81,15 +86,16 @@ export default {
                     }
                 ).then((savedAccount)=>{
                     useAuthStore().setAccount(savedAccount);
-                    alert("Konto oppdatert.")
+                    this.setAlertText("Melding: Konto oppdatert.",'light-green')
                 }).catch((error)=> {
+                    this.setAlertText("Melding: Det oppsto en feil. ",'red');
                     console.log(error)
                 })
             }
         },
         deleteAccount(){
             if(this.deletionConfirmation===false){
-                alert("Du må bekrefte at du vil slette konto ved å huke av boksen")
+                this.setDeleationAlertText("Du må bekrefte at du vil slette konto ved å huke av boksen", 'red')
             }
             else {
                 const id = this.account.id;
@@ -98,11 +104,43 @@ export default {
                 ).then(()=>{
                     router.push('/login')
                 }).catch((error)=> {
-                    alert("Det oppsto en feil ved sletting av bruker")
-                    console.log(error)
+                    this.setDeleationAlertText("Melding: Det oppsto en feil ved sletting av bruker", 'red')
                 })
             }
         },
+        setAlertText(text, color){
+            switch (color) {
+                case 'red':
+                    this.alertMsgColor ='#EE6D6D';
+                    this.alertMsg = text;
+                    break;
+                case 'light-green':
+                    this.alertMsgColor ='hsla(160, 100%, 37%, 1);';
+                    this.alertMsg = text;
+                    break;
+                default:
+                    this.alertMsgColor ='black';
+                    this.alertMsg = text;
+                    break;
+            }
+        },
+        setDeleationAlertText(text,color){
+            switch (color) {
+                case 'red':
+                    this.alertMsgColor ='#EE6D6D';
+                    this.delAlertMsg = text;
+                    break;
+                case 'light-green':
+                    this.alertMsgColor ='hsla(160, 100%, 37%, 1);';
+                    this.delAlertMsg = text;
+                    break;
+                default:
+                    this.alertMsgColor ='black';
+                    this.delAlertMsg = text;
+                    break;
+            }
+        }
+
     }
 }
 </script>
@@ -142,6 +180,7 @@ input[type="password"]{
 
 button {
     background-color: base.$red;
+
     color: black;
 
     border: 1px solid black;
@@ -168,4 +207,12 @@ button:hover{
     color: darkred;
 }
 
+#alert {
+    display: flex;
+    width:100%;
+   justify-content: center;
+    color: base.$light-green;
+    font-weight: bold;
+}
+
 </style>
\ No newline at end of file

src/components/EditProfile.vue

@@ -42,6 +42,8 @@
                 <button class="delBtn" @click="deleteProfile">Slett brukerprofil</button>
             </div>
 
+            <p :style={color:alertMsgColor} id="alert">{{alertMsg}}</p>
+
         </form>
 
 </template>
@@ -55,6 +57,12 @@ import router from "../router";
 export default {
     name: "EditProfile",
     components: {Icon},
+    data() {
+        return {
+            alertMsg:'',
+            alertMsgColor:'black',
+        }
+    },
     computed: {
 
         ...mapState(useAuthStore, ['profile']),
@@ -79,7 +87,7 @@ export default {
 
             const numOfProfiles = API.getProfiles().length
             if(numOfProfiles===1 && this.updatedProfile.upRestricted===true){
-              alert("Du må ha minst en standardprofil per konto. (ingen endringer er gjort)")
+                this.setAlertText("Du må ha minst en standardprofil per konto. (ingen endringer er gjort)",'red')
             }
             else {
               API.updateProfile(
@@ -90,14 +98,15 @@ export default {
                   }
               ).then((savedProfile)=>{
                 useAuthStore().setProfile(savedProfile);
-                alert("profil oppdatert.")
+                  this.setAlertText("profil oppdatert.",'light-green')
               }).catch((error)=> {
+                  this.setAlertText("Det oppsto en feil",'red')
                 console.log(error)
               })
             }
         },
         chooseProfilePicture(){
-            alert("skriv inn bildelenke i feltet, og oppdater innstillinger")
+            this.setAlertText("skriv inn bildelenke i feltet, og oppdater innstillinger",'black')
         },
         changeProfile(){
             router.push("/selectProfile");
@@ -105,16 +114,32 @@ export default {
       deleteProfile(){
           const numOfProfiles = API.getProfiles().length
           if(numOfProfiles===1){
-            alert("Du kan ikke slette profilen. Hver Konto må ha minst en profil")
+              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)=> {
-              alert("Det oppsto en feil ved sletting profil: " + error)
+                this.setAlertText("Det oppsto en feil ved sletting profil", 'red')
             })
           }
-      }
+      },
+        setAlertText(text, color){
+            switch (color) {
+                case 'red':
+                    this.alertMsgColor ='#EE6D6D';
+                    this.alertMsg = text;
+                    break;
+                case 'light-green':
+                    this.alertMsgColor ='hsla(160, 100%, 37%, 1);';
+                    this.alertMsg = text;
+                    break;
+                default:
+                    this.alertMsgColor ='black';
+                    this.alertMsg = text;
+                    break;
+            }
+        },
     }
 }
 
@@ -215,5 +240,13 @@ button:hover{
 #dangerZone {
     color: darkred;
 }
+#alert {
+  display: flex;
+  width:100%;
+  justify-content: center;
+  color: base.$light-green;
+  font-weight: bold;
+}
+
 
 </style>
\ No newline at end of file