diff --git a/src/components/EditAccount.vue b/src/components/EditAccount.vue index 7ac577383f77346d52f6e6f3b959815e08b85e8c..5ad3d4a0a042e7f0cf54434649465e81186157aa 100644 --- a/src/components/EditAccount.vue +++ b/src/components/EditAccount.vue @@ -1,5 +1,5 @@ <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; } diff --git a/src/components/EditProfile.vue b/src/components/EditProfile.vue index 20d746a34266257e8d6996913324ae0a8972de61..3487a09cd3219d560f5bc10970bb1a24345585da 100644 --- a/src/components/EditProfile.vue +++ b/src/components/EditProfile.vue @@ -1,5 +1,5 @@ <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; } diff --git a/src/style.scss b/src/style.scss index c7158435ec70a7af663f63d364e5946679272560..3142bce63de8907d0511e5f6fb2b243594c15834 100644 --- a/src/style.scss +++ b/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; diff --git a/src/util/API.js b/src/util/API.js index 39e994f91f0f6f93c5f19266c266ebaede117b4b..acf4a4e8869e70bc82dcf65e63af42ffc709d120 100644 --- a/src/util/API.js +++ b/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); }); },