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

edit account og editprofile css bruker samme klasser

parent d646442a
No related branches found
No related tags found
1 merge request!21Merge profilinnstillinger into main
Hide whitespace changes
Inline Side-by-side
src/components/EditAccount.vue
+ 102
− 57
View file @ 027adb21
<template> <template>
<h2>Konto-innstillinger</h2> <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>
...@@ -12,11 +11,15 @@ ...@@ -12,11 +11,15 @@
<label for="password">Endre passord</label><br> <label for="password">Endre passord</label><br>
<input type="password" id="password" v-model="updatedAccount.upPassword"> <input type="password" id="password" v-model="updatedAccount.upPassword">
<button class="saveBtn" @click="saveAccountSettings">Lagre profilendringer</button> <button class="greenBtn" @click="saveAccountSettings">Lagre profilendringer</button>
<p :style={color:alertMsgColor} id="alert">{{alertMsg}}</p> <p id="alert">{{alertMsg}}</p>
</form> </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>
<br> <br>
...@@ -27,15 +30,13 @@ ...@@ -27,15 +30,13 @@
<p class="infoText">Ved å trykke på knappen nedenfor, vil du slette din SmartMat-konto</p> <p class="infoText">Ved å trykke på knappen nedenfor, vil du slette din SmartMat-konto</p>
<input type="checkbox" id="deletionCheckbox" v-model="deletionConfirmation"> <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> <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> <button class="darkRedBtn" id ="delAccount" @click="deleteAccount">SLETT KONTO</button>
<p :style={color:alertMsgColor} id="alert">{{delAlertMsg}}</p> <p id="alert">{{delAlertMsg}}</p>
</form> </form>
</template> </template>
<script> <script>
import {mapState, mapStores} from "pinia"; import {mapState, mapStores} from "pinia";
import {Icon} from "@iconify/vue";
import {API} from "@/util/API"; import {API} from "@/util/API";
import { useAuthStore } from "@/stores/authStore"; import { useAuthStore } from "@/stores/authStore";
import router from "../router"; import router from "../router";
...@@ -50,16 +51,12 @@ export default { ...@@ -50,16 +51,12 @@ export default {
upPassword:'', upPassword:'',
} }
}, },
iconColor() {
return "#000000"
},
}, },
data() { data() {
return { return {
alertMsg:'', //message at the bottom of the form where you change account firstname and password
deletionConfirmation: false, deletionConfirmation: false,
alertMsg:'', delAlertMsg:'', //message in the 'dager zone'
alertMsgColor:'black',
delAlertMsg:'',
} }
}, },
methods: { methods: {
...@@ -73,6 +70,7 @@ export default { ...@@ -73,6 +70,7 @@ export default {
if(this.updatedAccount.upPassword.length!==0) { if(this.updatedAccount.upPassword.length!==0) {
newPassword = this.updatedAccount.upPassword; newPassword = this.updatedAccount.upPassword;
} }
//firstName won't be changed if empty
if(this.updatedAccount.upFirstname!==''){ if(this.updatedAccount.upFirstname!==''){
newFirstName = this.updatedAccount.upFirstname; newFirstName = this.updatedAccount.upFirstname;
} }
...@@ -84,14 +82,14 @@ export default { ...@@ -84,14 +82,14 @@ export default {
} }
).then((savedAccount)=>{ ).then((savedAccount)=>{
useAuthStore().setAccount(savedAccount); useAuthStore().setAccount(savedAccount);
this.setAlertText("Konto oppdatert.",'light-green') this.alertMsg = "Konto oppdatert."
}).catch((error)=> { }).catch(()=> {
this.setAlertText("Det oppsto en feil. ",'red'); this.alertMsg = "‼️Det oppsto en feil.‼️ "
}) })
}, },
deleteAccount(){ deleteAccount(){
if(this.deletionConfirmation===false){ 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 { else {
const id = this.account.id; const id = this.account.id;
...@@ -99,8 +97,8 @@ export default { ...@@ -99,8 +97,8 @@ export default {
id id
).then(()=>{ ).then(()=>{
router.push('/login') router.push('/login')
}).catch((error)=> { }).catch(()=> {
this.setDeleationAlertText("Melding: Det oppsto en feil ved sletting av bruker", 'red') this.delAlertMsg = "‼️Det oppsto en feil ved sletting av bruker‼️"
}) })
} }
}, },
...@@ -108,46 +106,93 @@ export default { ...@@ -108,46 +106,93 @@ export default {
useAuthStore().logout(); useAuthStore().logout();
router.push('/login') 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> </script>
<style scoped lang="scss"> <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> </style>
\ No newline at end of file
src/components/EditProfile.vue
+ 79
− 98
View file @ 027adb21
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
<h3>{{this.profile.name}}</h3> <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"> <form @submit.prevent="submit">
<label for="brukernavn">Profilnavn</label><br> <label for="brukernavn">Profilnavn</label><br>
...@@ -20,9 +20,9 @@ ...@@ -20,9 +20,9 @@
<label for="normal"> Standard</label><br> <label for="normal"> Standard</label><br>
<input type="radio" id="restricted" value="true" name="restrict" v-model="this.updatedProfile.upRestricted"> <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> <h3>Profilbilde</h3><br>
<div id="changeUserImage"> <div id="changeUserImage">
<div v-if="hasProfileImage" id = "profilepicture-container"> <div v-if="hasProfileImage" id = "profilepicture-container">
...@@ -39,11 +39,11 @@ ...@@ -39,11 +39,11 @@
</div> </div>
<br><br> <br><br>
<div id = "submitbuttonBox"> <div id = "submitbuttonBox">
<button class="saveBtn" @click=" saveUserSettings">Lagre profilendringer</button> <button class="greenBtn" @click=" saveUserSettings">Lagre profilendringer</button>
<button class="delBtn" @click="deleteProfile">Slett brukerprofil</button> <button class="darkRedBtn" @click="deleteProfile">Slett brukerprofil</button>
</div> </div>
<p :style={color:alertMsgColor} id="alert">{{alertMsg}}</p> <p id="alert">{{alertMsg}}</p>
</form> </form>
...@@ -61,7 +61,6 @@ export default { ...@@ -61,7 +61,6 @@ export default {
data() { data() {
return { return {
alertMsg:'', alertMsg:'',
alertMsgColor:'black',
initialName: '', //used to compare with updated values initialName: '', //used to compare with updated values
initialRestriction: '', initialRestriction: '',
} }
...@@ -83,9 +82,9 @@ export default { ...@@ -83,9 +82,9 @@ export default {
return this.updatedProfile.upImage.length > 0; return this.updatedProfile.upImage.length > 0;
} }
}, },
beforeMount() { beforeMount() {//used to compare with changed values
this.initialName=this.profile.name; this.initialName = this.profile.name;
this.initialRestriction=this.profile.restricted; this.initialRestriction = this.profile.restricted;
}, },
methods: { methods: {
changeProfile(){ changeProfile(){
...@@ -96,10 +95,9 @@ export default { ...@@ -96,10 +95,9 @@ export default {
API.deleteProfile(id).then(() => { API.deleteProfile(id).then(() => {
router.push('/selectProfile') router.push('/selectProfile')
}).catch((_) => { }).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(){ saveUserSettings(){
const id = this.profile.id; const id = this.profile.id;
...@@ -121,16 +119,16 @@ export default { ...@@ -121,16 +119,16 @@ export default {
} }
).then((savedProfile)=>{ ).then((savedProfile)=>{
useAuthStore().setProfile(savedProfile); useAuthStore().setProfile(savedProfile);
this.setAlertText("Profil oppdatert.",'light-green') this.alertMsg = "Profil oppdatert."
}).catch(error=> { }).catch(error=> {
if (error.message === '400') { if (error.message === '400') {
if(this.updatedProfile.name !== this.initialName){ 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 { } 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{ }else{
this.setAlertText("Det oppsto en feil.",'red') this.alertMsg = "‼️Det oppsto en feil.‼️"
} }
}) })
}, },
...@@ -142,27 +140,8 @@ export default { ...@@ -142,27 +140,8 @@ export default {
updateImage(){ updateImage(){
//todo update image preview //todo update image preview
}, },
chooseProfilePicture(){ chooseProfilePicture(){
this.setAlertText("skriv inn bildelenke i feltet, og oppdater innstillinger",'black') this.alertMsg = "skriv inn bildelenke i feltet, og oppdater innstillinger"
},
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;
}
}, },
} }
} }
...@@ -171,102 +150,106 @@ export default { ...@@ -171,102 +150,106 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
main { input[type="radio"] {
background-color: white; width: 2em;
color:black; height: 2em;
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: left;
left:0;
} }
#profilepicture-container { #changeUserBtn {
display:flex; border: 1px solid black;
border-radius:50%;
width:100px;
height: 100px;
background-color: white;
justify-content: center;
align-items: center;
border: 3px solid base.$grey;
} }
img { #profilepicture-container {
border-radius: 50%; display:flex;
border-radius:50%;
width:100px;
height: 100px;
background-color: white;
justify-content: center;
align-items: center;
border: 3px solid base.$grey;
} }
#changeUserImage { #changeUserImage {
display:flex; display:flex;
} }
img {
border-radius: 50%;
}
#changeUserImage #profilepicture-container { #changeUserImage #profilepicture-container {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.infoText { #submitbuttonBox {
background-color: white; display:flex;
padding: .5em; justify-content: space-between;
margin: .4em;
} }
/*--General--*/
form { form {
background-color: base.$grey; background-color: base.$grey;
color: black; color: black;
align-content: end; align-content: end;
padding: 2em; padding: 2em;
margin-top: 2em; margin-top: 2em;
margin-bottom: 2em; margin-bottom: 2em;
} }
input[type="text"], input[type="text"],
input[type="password"]{ input[type="password"]{
width: 100%; width: 100%;
padding: .5em; padding: .5em;
}
#submitbuttonBox {
display:flex;
justify-content: space-between;
} }
button { button {
background-color: base.$red; color: black;
color: black; border: 1px solid black;
border: 1px solid black; margin: 1em;
margin: 1em; padding:.9em;
font-weight: bold;
} }
button:hover{ .redBtn {
background-color: base.$red-hover; background-color: base.$red;
border:none;
color:white;
} }
#changeUserBtn { .redBtn:hover {
padding:.9em; background-color: base.$red-hover;
} }
.delBtn:hover { .darkRedBtn {
background-color: darkred;
border:none;
color:white;
}
.darkRedBtn:hover {
background-color: base.$darkred-hover; background-color: base.$darkred-hover;
} }
.saveBtn, .delBtn{ .greenBtn{
background-color: base.$green; background-color: base.$green;
color: white; border:none;
font-weight: bold; color:white;
padding:.9em;
border:none;
} }
.saveBtn:hover{ .greenBtn:hover{
background-color: base.$green-hover; background-color: base.$green-hover;
} }
.delBtn {
background-color: darkred;
}
#dangerZone { .infoText {
color: darkred; background-color: white;
padding: .5em;
margin: .4em;
} }
#alert { #alert {
display: flex; display: flex;
width:100%; width:100%;
...@@ -274,6 +257,4 @@ button:hover{ ...@@ -274,6 +257,4 @@ button:hover{
color: base.$light-green; color: base.$light-green;
font-weight: bold; font-weight: bold;
} }
</style> </style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment