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>
<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
src/components/EditProfile.vue
+ 79
− 98
View file @ 027adb21
......@@ -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
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