diff --git a/src/components/EditAccount.vue b/src/components/EditAccount.vue
index 15a6da8243327b8d2c7ffe517df37ff8f6d66c80..7ac577383f77346d52f6e6f3b959815e08b85e8c 100644
--- a/src/components/EditAccount.vue
+++ b/src/components/EditAccount.vue
@@ -1,7 +1,6 @@
<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
diff --git a/src/components/EditProfile.vue b/src/components/EditProfile.vue
index aef56dfc497e03af73a5c481c8bea27371f60839..20d746a34266257e8d6996913324ae0a8972de61 100644
--- a/src/components/EditProfile.vue
+++ b/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