From c4ba80e20e78441059f9dae84b527892561adf16 Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Tue, 2 May 2023 14:58:18 +0200
Subject: [PATCH] =?UTF-8?q?opprydding=20og=20sm=C3=A5endringer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/EditAccount.vue | 11 +++++-
src/components/EditProfile.vue | 66 +++++++++++++++++++---------------
src/style.scss | 2 ++
src/util/API.js | 6 ++--
4 files changed, 52 insertions(+), 33 deletions(-)
diff --git a/src/components/EditAccount.vue b/src/components/EditAccount.vue
index 7ac5773..5ad3d4a 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 20d746a..3487a09 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 c715843..3142bce 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 39e994f..acf4a4e 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);
});
},
--
GitLab