Skip to content
Snippets Groups Projects
Commit c4ba80e2 authored by Ingrid Martinsheimen Egge's avatar Ingrid Martinsheimen Egge :cow2:
Browse files

opprydding og småendringer

parent c38b0447
No related branches found
No related tags found
1 merge request!21Merge profilinnstillinger into main
Pipeline #224318 failed with stages
in 1 minute and 40 seconds
<template> <template>
<h1>Konto-innstillinger</h1> <h2>Konto-innstillinger</h2>
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br> <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br>
...@@ -203,6 +203,15 @@ button:hover{ ...@@ -203,6 +203,15 @@ button:hover{
background-color: darkred; background-color: darkred;
} }
button:hover{
background-color: base.$green-hover;
}
.delBtn:hover {
background-color: base.$darkred-hover;
}
#dangerZone { #dangerZone {
color: darkred; color: darkred;
} }
......
<template> <template>
<h1><br><br>Profilinnstillinger <br></h1> <h2>Profilinnstillinger</h2>
<div v-if="hasProfileImage" id = "profilepicture-container"> <div v-if="hasProfileImage" id = "profilepicture-container">
<img width="100" :src="this.updatedProfile.upImage" alt="profile picture"> <img width="100" :src="this.updatedProfile.upImage" alt="profile picture">
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" /> <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
</div> </div>
<h2>{{this.profile.name}}</h2> <h3>{{this.profile.name}}</h3>
<button @click="changeProfile" id="changeUserBtn" >Bytt bruker</button> <button @click="changeProfile" id="changeUserBtn" >Bytt bruker</button>
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<label for="brukernavn">Profilnavn</label><br> <label for="brukernavn">Profilnavn</label><br>
<input type="text" required v-model="this.updatedProfile.upName"><br> <input type="text" required v-model="this.updatedProfile.upName"><br>
<br> <br>
<h4>Brukertype</h4> <h3>Brukertype</h3>
<input type="radio" id="normal" value="false" name="restrict" v-model="this.updatedProfile.upRestricted"> <input type="radio" id="normal" value="false" name="restrict" v-model="this.updatedProfile.upRestricted">
<label for="normal"> Standard</label><br> <label for="normal"> Standard</label><br>
...@@ -32,8 +32,9 @@ ...@@ -32,8 +32,9 @@
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" /> <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
</div> </div>
<label for="chooseImageUrl">Bilde-URL:</label> <label for="chooseImageUrl">Bilde-URL:</label><br>
<input type="text" id="chooseImageUrl" v-model="this.updatedProfile.upImage"> <input type="file" id="chooseImage" v-on:change="updateImage">
<!--<input type="text" id="chooseImageUrl" v-model="this.updatedProfile.upImage">-->
</div> </div>
<br><br> <br><br>
...@@ -64,7 +65,6 @@ export default { ...@@ -64,7 +65,6 @@ export default {
} }
}, },
computed: { computed: {
...mapState(useAuthStore, ['profile']), ...mapState(useAuthStore, ['profile']),
...mapStores(useAuthStore), ...mapStores(useAuthStore),
updatedProfile() { updatedProfile() {
...@@ -75,13 +75,32 @@ export default { ...@@ -75,13 +75,32 @@ export default {
} }
}, },
iconColor() { iconColor() {
return "#000000" return "#D9D9D9"
}, },
hasProfileImage() { hasProfileImage() {
return this.updatedProfile.upImage.length > 0; return this.updatedProfile.upImage.length > 0;
} }
}, },
methods: { 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(){ saveUserSettings(){
const id = this.profile.id; const id = this.profile.id;
...@@ -108,22 +127,8 @@ export default { ...@@ -108,22 +127,8 @@ export default {
chooseProfilePicture(){ chooseProfilePicture(){
this.setAlertText("skriv inn bildelenke i feltet, og oppdater innstillinger",'black') 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){ setAlertText(text, color){
switch (color) { switch (color) {
case 'red': case 'red':
...@@ -210,29 +215,32 @@ input[type="password"]{ ...@@ -210,29 +215,32 @@ input[type="password"]{
button { button {
background-color: base.$red; background-color: base.$red;
color: black; color: black;
border: 1px solid black; border: 1px solid black;
margin: 1em; margin: 1em;
} }
button:hover{
background-color: base.$red-hover;
}
#changeUserBtn { #changeUserBtn {
padding:.9em; padding:.9em;
} }
button:hover{
background-color: #282828;
.delBtn:hover {
background-color: base.$darkred-hover;
} }
.saveBtn, .delBtn { .saveBtn, .delBtn{
background-color: base.$green; background-color: base.$green;
color: white; color: white;
font-weight: bold; font-weight: bold;
padding:.9em; padding:.9em;
border:none; border:none;
} }
.saveBtn:hover{
background-color: base.$green-hover;
}
.delBtn { .delBtn {
background-color: darkred; background-color: darkred;
} }
......
...@@ -4,10 +4,12 @@ $light-green: hsla(160, 100%, 37%, 1); ...@@ -4,10 +4,12 @@ $light-green: hsla(160, 100%, 37%, 1);
$white:#FFFFFF; $white:#FFFFFF;
$grey:#D9D9D9; $grey:#D9D9D9;
$red:#EE6D6D; $red:#EE6D6D;
$darkred: darkred;
$red-hover: darken( $red, 5% ); $red-hover: darken( $red, 5% );
$green-hover: darken( $green, 8% ); $green-hover: darken( $green, 8% );
$light-green-hover: darken( $light-green, 10% ); $light-green-hover: darken( $light-green, 10% );
$darkred-hover: darken(darkred, 10%);
$desktop-min: 800px; $desktop-min: 800px;
......
...@@ -235,7 +235,7 @@ export const API = { ...@@ -235,7 +235,7 @@ export const API = {
throw new Error("Could not fetch fridge item"); throw new Error("Could not fetch fridge item");
}); });
}, },
},
/** /**
* Deletes account from the * Deletes account from the
...@@ -256,8 +256,8 @@ export const API = { ...@@ -256,8 +256,8 @@ export const API = {
authStore.logout() authStore.logout()
router.push('/login') router.push('/login')
}) })
.catch(() => { .catch((error) => {
throw new Error(""); throw new Error(error);
}); });
}, },
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment