From 027adb214e219ef28ff42f68a93e457c1345fd2a Mon Sep 17 00:00:00 2001
From: Ingrid Martinsheimen Egge <ingrimeg@stud.ntnu.no>
Date: Wed, 3 May 2023 07:01:36 +0200
Subject: [PATCH] edit account og editprofile css bruker samme klasser
---
src/components/EditAccount.vue | 159 ++++++++++++++++++-----------
src/components/EditProfile.vue | 177 +++++++++++++++------------------
2 files changed, 181 insertions(+), 155 deletions(-)
diff --git a/src/components/EditAccount.vue b/src/components/EditAccount.vue
index ede5681..564f678 100644
--- a/src/components/EditAccount.vue
+++ b/src/components/EditAccount.vue
@@ -1,6 +1,5 @@
<template>
<h2>Konto-innstillinger</h2>
-
<form @submit.prevent="submit">
<p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br>
@@ -12,11 +11,15 @@
<label for="password">Endre passord</label><br>
<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>
+ <button class="greenBtn" @click="saveAccountSettings">Lagre profilendringer</button>
+ <p id="alert">{{alertMsg}}</p>
</form>
- <button @click="logOut">Logg ut</button>
+ <div id="logout">
+ <p class="infoText">Logger deg ut fra din SmartMat-konto</p>
+ <button class ="redBtn" @click="logOut">Logg ut</button>
+ </div>
+
<br>
<br>
@@ -27,15 +30,13 @@
<p class="infoText">Ved å trykke på knappen nedenfor, vil du slette din SmartMat-konto</p>
<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" id ="delAccount" @click="deleteAccount">SLETT KONTO</button>
- <p :style={color:alertMsgColor} id="alert">{{delAlertMsg}}</p>
+ <button class="darkRedBtn" id ="delAccount" @click="deleteAccount">SLETT KONTO</button>
+ <p id="alert">{{delAlertMsg}}</p>
</form>
-
</template>
<script>
import {mapState, mapStores} from "pinia";
-import {Icon} from "@iconify/vue";
import {API} from "@/util/API";
import { useAuthStore } from "@/stores/authStore";
import router from "../router";
@@ -50,16 +51,12 @@ export default {
upPassword:'',
}
},
- iconColor() {
- return "#000000"
- },
},
data() {
return {
+ alertMsg:'', //message at the bottom of the form where you change account firstname and password
deletionConfirmation: false,
- alertMsg:'',
- alertMsgColor:'black',
- delAlertMsg:'',
+ delAlertMsg:'', //message in the 'dager zone'
}
},
methods: {
@@ -73,6 +70,7 @@ export default {
if(this.updatedAccount.upPassword.length!==0) {
newPassword = this.updatedAccount.upPassword;
}
+ //firstName won't be changed if empty
if(this.updatedAccount.upFirstname!==''){
newFirstName = this.updatedAccount.upFirstname;
}
@@ -84,14 +82,14 @@ export default {
}
).then((savedAccount)=>{
useAuthStore().setAccount(savedAccount);
- this.setAlertText("Konto oppdatert.",'light-green')
- }).catch((error)=> {
- this.setAlertText("Det oppsto en feil. ",'red');
+ this.alertMsg = "Konto oppdatert."
+ }).catch(()=> {
+ this.alertMsg = "‼ï¸Det oppsto en feil.â€¼ï¸ "
})
},
deleteAccount(){
if(this.deletionConfirmation===false){
- this.setDeleationAlertText("Du må bekrefte at du vil slette konto ved å huke av boksen", 'red')
+ this.delAlertMsg = "‼ï¸Du mÃ¥ bekrefte at du vil slette konto ved Ã¥ huke av boksen‼ï¸"
}
else {
const id = this.account.id;
@@ -99,8 +97,8 @@ export default {
id
).then(()=>{
router.push('/login')
- }).catch((error)=> {
- this.setDeleationAlertText("Melding: Det oppsto en feil ved sletting av bruker", 'red')
+ }).catch(()=> {
+ this.delAlertMsg = "‼ï¸Det oppsto en feil ved sletting av bruker‼ï¸"
})
}
},
@@ -108,46 +106,93 @@ export default {
useAuthStore().logout();
router.push('/login')
},
-
-
-
-
- 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>
<style scoped lang="scss">
-
+#dangerZone {
+ color: darkred;
+}
+
+#logout{
+ background-color: base.$grey;
+ color: black;
+ padding: 2em;
+ margin-top: 2em;
+ margin-bottom: 2em;
+ display: flex;
+ flex-direction: column;
+}
+
+input[type="checkbox"] {
+ width: 2.5em;
+ height: 2.5em;
+}
+
+
+
+/*--General--*/
+form {
+ background-color: base.$grey;
+ color: black;
+ align-content: end;
+ padding: 2em;
+ margin-top: 2em;
+ margin-bottom: 2em;
+}
+
+input[type="text"],
+input[type="password"]{
+ width: 100%;
+ padding: .5em;
+}
+
+button {
+ color: black;
+ border: 1px solid black;
+ margin: 1em;
+ padding:.9em;
+ font-weight: bold;
+}
+.redBtn {
+ background-color: base.$red;
+ border:none;
+ color:white;
+}
+
+.redBtn:hover {
+ background-color: base.$red-hover;
+}
+
+.darkRedBtn {
+ background-color: darkred;
+ border:none;
+ color:white;
+}
+.darkRedBtn:hover {
+ background-color: base.$darkred-hover;
+}
+
+.greenBtn{
+ background-color: base.$green;
+ border:none;
+ color:white;
+}
+.greenBtn:hover{
+ background-color: base.$green-hover;
+}
+
+.infoText {
+ background-color: white;
+ padding: .5em;
+ margin: .4em;
+}
+
+#alert {
+ display: flex;
+ width:100%;
+ justify-content: center;
+ font-weight: bold;
+ }
</style>
\ No newline at end of file
diff --git a/src/components/EditProfile.vue b/src/components/EditProfile.vue
index 4b00dd4..7b9191c 100644
--- a/src/components/EditProfile.vue
+++ b/src/components/EditProfile.vue
@@ -9,7 +9,7 @@
</div>
<h3>{{this.profile.name}}</h3>
- <button @click="changeProfile" id="changeUserBtn" >Bytt bruker</button>
+ <button @click="changeProfile" id="changeUserBtn" class="redBtn">Bytt bruker</button>
<form @submit.prevent="submit">
<label for="brukernavn">Profilnavn</label><br>
@@ -20,9 +20,9 @@
<label for="normal"> Standard</label><br>
<input type="radio" id="restricted" value="true" name="restrict" v-model="this.updatedProfile.upRestricted">
- <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
+ <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br><br>
+
- <br>
<h3>Profilbilde</h3><br>
<div id="changeUserImage">
<div v-if="hasProfileImage" id = "profilepicture-container">
@@ -39,11 +39,11 @@
</div>
<br><br>
<div id = "submitbuttonBox">
- <button class="saveBtn" @click=" saveUserSettings">Lagre profilendringer</button>
- <button class="delBtn" @click="deleteProfile">Slett brukerprofil</button>
+ <button class="greenBtn" @click=" saveUserSettings">Lagre profilendringer</button>
+ <button class="darkRedBtn" @click="deleteProfile">Slett brukerprofil</button>
</div>
- <p :style={color:alertMsgColor} id="alert">{{alertMsg}}</p>
+ <p id="alert">{{alertMsg}}</p>
</form>
@@ -61,7 +61,6 @@ export default {
data() {
return {
alertMsg:'',
- alertMsgColor:'black',
initialName: '', //used to compare with updated values
initialRestriction: '',
}
@@ -83,9 +82,9 @@ export default {
return this.updatedProfile.upImage.length > 0;
}
},
- beforeMount() {
- this.initialName=this.profile.name;
- this.initialRestriction=this.profile.restricted;
+ beforeMount() {//used to compare with changed values
+ this.initialName = this.profile.name;
+ this.initialRestriction = this.profile.restricted;
},
methods: {
changeProfile(){
@@ -96,10 +95,9 @@ export default {
API.deleteProfile(id).then(() => {
router.push('/selectProfile')
}).catch((_) => {
- this.setAlertText("Alle kontoer må ha minst en profil (profil ble ikke slettet)", 'red')
+ this.alertMsg = "‼ï¸Alle kontoer mÃ¥ ha minst en profil (profil ble ikke slettet)‼ï¸"
})
},
-
saveUserSettings(){
const id = this.profile.id;
@@ -121,16 +119,16 @@ export default {
}
).then((savedProfile)=>{
useAuthStore().setProfile(savedProfile);
- this.setAlertText("Profil oppdatert.",'light-green')
+ this.alertMsg = "Profil oppdatert."
}).catch(error=> {
if (error.message === '400') {
if(this.updatedProfile.name !== this.initialName){
- this.setAlertText('Det oppsto en feil: Det finnes allerede en bruker med samme navn' ,'red')
+ this.alertMsg = '‼ï¸Det oppsto en feil: Det finnes allerede en bruker med samme navn‼ï¸'
} else {
- this.setAlertText('Det oppsto en feil: Sørg for at det finnes mist en standard profil på kontoen ','red')
+ this.alertMsg = '‼ï¸Det oppsto en feil: Sørg for at det finnes mist en standard profil pÃ¥ kontoenâ€¼ï¸ '
}
}else{
- this.setAlertText("Det oppsto en feil.",'red')
+ this.alertMsg = "‼ï¸Det oppsto en feil.‼ï¸"
}
})
},
@@ -142,27 +140,8 @@ export default {
updateImage(){
//todo update image preview
},
-
chooseProfilePicture(){
- this.setAlertText("skriv inn bildelenke i feltet, og oppdater innstillinger",'black')
- },
-
-
- 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;
- }
+ this.alertMsg = "skriv inn bildelenke i feltet, og oppdater innstillinger"
},
}
}
@@ -171,102 +150,106 @@ export default {
<style scoped lang="scss">
-main {
- background-color: white;
- color:black;
- display:flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- width: 100%;
- text-align: left;
- left:0;
+input[type="radio"] {
+ width: 2em;
+ height: 2em;
+
}
-#profilepicture-container {
- display:flex;
- border-radius:50%;
- width:100px;
- height: 100px;
- background-color: white;
- justify-content: center;
- align-items: center;
- border: 3px solid base.$grey;
+#changeUserBtn {
+ border: 1px solid black;
}
-img {
- border-radius: 50%;
+#profilepicture-container {
+ display:flex;
+ border-radius:50%;
+ width:100px;
+ height: 100px;
+ background-color: white;
+ justify-content: center;
+ align-items: center;
+ border: 3px solid base.$grey;
}
#changeUserImage {
display:flex;
}
+img {
+ border-radius: 50%;
+}
+
#changeUserImage #profilepicture-container {
width: 50px;
height: 50px;
}
-.infoText {
- background-color: white;
- padding: .5em;
- margin: .4em;
+#submitbuttonBox {
+ display:flex;
+ justify-content: space-between;
}
+
+
+
+
+/*--General--*/
form {
- background-color: base.$grey;
- color: black;
- align-content: end;
- padding: 2em;
- margin-top: 2em;
- margin-bottom: 2em;
-}
+ background-color: base.$grey;
+ color: black;
+ align-content: end;
+ padding: 2em;
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
input[type="text"],
input[type="password"]{
- width: 100%;
- padding: .5em;
-}
-#submitbuttonBox {
- display:flex;
- justify-content: space-between;
+ width: 100%;
+ padding: .5em;
}
+
button {
- background-color: base.$red;
- color: black;
- border: 1px solid black;
- margin: 1em;
+ color: black;
+ border: 1px solid black;
+ margin: 1em;
+ padding:.9em;
+ font-weight: bold;
}
-button:hover{
- background-color: base.$red-hover;
+.redBtn {
+ background-color: base.$red;
+ border:none;
+ color:white;
}
-#changeUserBtn {
- padding:.9em;
-
+.redBtn:hover {
+ background-color: base.$red-hover;
}
-.delBtn:hover {
+.darkRedBtn {
+ background-color: darkred;
+ border:none;
+ color:white;
+}
+.darkRedBtn:hover {
background-color: base.$darkred-hover;
}
-.saveBtn, .delBtn{
- background-color: base.$green;
- color: white;
- font-weight: bold;
- padding:.9em;
- border:none;
+.greenBtn{
+ background-color: base.$green;
+ border:none;
+ color:white;
}
-.saveBtn:hover{
+.greenBtn:hover{
background-color: base.$green-hover;
}
-.delBtn {
- background-color: darkred;
-}
-#dangerZone {
- color: darkred;
+.infoText {
+ background-color: white;
+ padding: .5em;
+ margin: .4em;
}
+
#alert {
display: flex;
width:100%;
@@ -274,6 +257,4 @@ button:hover{
color: base.$light-green;
font-weight: bold;
}
-
-
</style>
\ No newline at end of file
--
GitLab