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

delte opp i mindre komponenter

parent 35b25960
No related branches found
No related tags found
1 merge request!21Merge profilinnstillinger into main
Hide whitespace changes
Inline Side-by-side
src/components/AppSettings.vue 0 → 100644
+ 38
− 0
View file @ 9ccb508d
<template>
<h1>App-innstillinger</h1>
<form @submit.prevent="submit">
<h2>-Matpreferanser-</h2>
<p class ="infoText">Hvis huket av, så vil du kun få oppskrifter av disse typene:</p>
<input type="checkbox" id="vegetar" name="vegetar" value="vegetar">
<label for="vegetar"> vegetar </label><br>
<input type="checkbox" id="vegan" name="vegan" value="vegan">
<label for="vegan"> vegan </label><br>
<br>
<h2>-Allergener-</h2>
<p class ="infoText">Du vil ikke få forslag om oppskrifter med disse varene:</p>
<input type="checkbox" id="gluten" name="gluten" value="Gluten">
<label for="allergen"> gluten</label><br>
<input type="checkbox" id="nøtter" name="nøtter" value="nøtter">
<label for="allergen"> nøtter</label><br>
<input type="checkbox" id="melk" name="melk" value="melk">
<label for="allergen"> melk</label><br>
<button class="saveBtn" @click="saveFoodPreference">Lagre matpreferanser <br> og allergener</button>
</form>
</template>
<script>
export default {
name: "AppSettings"
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/EditAccount.vue 0 → 100644
+ 41
− 0
View file @ 9ccb508d
<template>
<h1>Konto-innstillinger</h1>
<form @submit.prevent="submit">
<p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br>
<p>Epost: {{user.email}}</p><br>
<label for="password">Endre passord</label><br>
<input type="password" id="password" v-model="this.currentUser.newPassword">
<button class="saveBtn" @click="saveAccountSettings">Lagre nytt passord</button>
</form>
<br>
<br>
<hr>
<form @submit.prevent="submit" id = "dangerZone">
<h1>🔺FARESONE🔺</h1>
<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" @click="deleteAccount">SLETT KONTO</button>
</form>
</template>
<script>
import {mapStores} from "pinia";
import {Icon} from "@iconify/vue";
import {API} from "@/util/API";
import { useAuthStore } from "@/stores/authStore";
export default {
name: "EditAccount"
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/EditProfile.vue 0 → 100644
+ 250
− 0
View file @ 9ccb508d
<template>
<h1><br><br>Profilinnstillinger <br></h1>
<div v-if="hasProfileImage" id = "profilepicture-container">
<img width="100" :src="this.currentProfile.image" alt="profile picture">
</div>
<div v-else id = "profilepicture-container">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
</div>
<h2>{{profile.name}}</h2>
<button @click="changeProfile" id="changeUserBtn" >Bytt bruker</button>
<form @submit.prevent="submit">
<label for="brukernavn">Profilnavn</label><br>
<input type="text" required v-model="profileName"><br>
<br>
<h4>Brukertype</h4>
<input type="radio" id="normal" value="false" v-model="isRestricted">
<label for="normal"> Standard</label><br>
<input type="radio" id="restricted" value="true" v-model="isRestricted">
<label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
<br>
<h3>Profilbilde</h3>
<div id="changeUserImage">
<div v-if="hasProfileImage" id = "profilepicture-container">
<img width="50" :src="profileImage" alt="profile picture">
</div>
<div v-else id = "profilepicture-container">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
</div>
<button @click="chooseProfilePicture">Endre bilde</button>
</div>
<div id = "submitbuttonBox">
<button @click=" saveUserSettings">Submit</button>
<button class="delBtn" @click="deleteUser">Slett brukerprofil</button>
</div>
</form>
</template>
<script>
import {mapStores} from "pinia";
import {Icon} from "@iconify/vue";
import {API} from "@/util/API";
import { useAuthStore } from "@/stores/authStore";
import router from "../router";
export default {
setup() {
const authStore = useAuthStore();
const profileName = authStore.profile.name;
const profileImage = authStore.profile.profileImageUrl;
const isRestricted = authStore.profile.restricted;
},
name: "EditProfile",
components: {Icon},
computed: {
...mapStores(useAuthStore),
profile() {
let store = useAuthStore();
this.currentProfile.name = store.profile.name;
this.currentProfile.isRestricted = store.profile.restricted;
this.currentProfile.image = store.profile.profileImageUrl;
return store.profile
},
user() {
const store = useAuthStore();
return store.user
},
iconColor() {
return "#000000"
},
hasProfileImage() {
return this.currentProfile.image.length > 0;
}
},
data() {
return {
currentUser: {
newPassword: "",
},
currentProfile: {
name: "",
isRestricted: true,
image: "",
},
foodPreferences: [],
allergens: [],
deletionConfirmation: false,
}
},
methods: {
saveUserSettings(){ //profilnavn, profilbilde, profilrestriksjoner
const namee = this.currentProfile.name;
const isRestrictede = this.currentProfile.isRestricted;
const profileImageUrle = this.currentProfile.image;
API.updateProfile(
this.profile.id,{
name:namee,
profileImageUrl: profileImageUrle,
restricted: isRestrictede,
}
).then((savedProfile)=>{
useAuthStore().setProfile(savedProfile);
}).catch((error)=> {
console.log(error)
})
},
chooseProfilePicture(){
alert("velgBilde")
},
saveAccountSettings(){ //passord
if(this.currentUser.newPassword.length===0){
alert("Det er ikke gjort endringer, og passordet vil ikke bli oppdatert")
} else {
alert("(Denne knappen gjør ingen ting) konto oppdatert")
}
},
deleteAccount(){
if(this.deletionConfirmation===false){
alert("Du må bekrefte at du vil slette konto ved å huke av boksen")
}
else {
alert("(Denne knappen gjør ingen ting) men account deleted")
//API.deleteAccount(this.user.id, token);
}
},
deleteUser(){
alert("(Denne knappen gjør ingen ting) bruker slettet")
//API.deleteAccount(this.user.id, token).then
},
changeProfile(){
router.push("/selectProfile");
}
}
}
</script>
<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;
}
#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;
}
img {
border-radius: 50%;
}
#changeUserImage {
display:flex;
}
#changeUserImage #profilepicture-container {
width: 50px;
height: 50px;
}
.infoText {
background-color: white;
padding: .5em;
margin: .4em;
}
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;
}
#submitbuttonBox {
display:flex;
justify-content: space-between;
}
button {
background-color: base.$red;
color: black;
border: 1px solid black;
margin: 1em;
}
#changeUserBtn {
padding:.9em;
}
button:hover{
background-color: #282828;
}
.saveBtn, .delBtn {
background-color: base.$green;
color: white;
font-weight: bold;
padding:.9em;
border:none;
}
.delBtn {
background-color: darkred;
}
#dangerZone {
color: darkred;
}
</style>
\ No newline at end of file
src/stores/authStore.js
+ 5
− 0
View file @ 9ccb508d
......@@ -27,6 +27,11 @@ export const useAuthStore = defineStore("auth", {
},
setProfile(profile) {
this.profile = profile;
},
updateProfile(name, image, isRestricted){
this.profile.name = name;
this.profile.profileImageUrl = image;
this.profile.restricted = isRestricted;
}
}
});
src/util/API.js
+ 1
− 1
View file @ 9ccb508d
......@@ -146,7 +146,7 @@ export const API = {
})
.then((response) => {
//authStore.setProfile(response.data)
authStore.setProfile(response.data)
return response.data;
})
.catch((error) => {
......
src/views/ProfileSettings.vue
+ 5
− 95
View file @ 9ccb508d
<template>
<main>
<h1><br><br>Profilinnstillinger <br></h1>
<EditProfile></EditProfile>
<div v-if="hasProfileImage" id = "profilepicture-container">
<img width="100" :src="this.currentProfile.image" alt="profile picture">
</div>
<div v-else id = "profilepicture-container">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
</div>
<h2>{{profile.name}}</h2>
<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.currentProfile.name"><br>
<br>
<h4>Brukertype</h4>
<input type="radio" id="normal" value="false" v-model="this.currentProfile.isRestricted">
<label for="normal"> Standard</label><br>
<input type="radio" id="restricted" value="true" v-model="this.currentProfile.isRestricted">
<label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
<br>
<h3>Profilbilde</h3>
<div id="changeUserImage">
<div v-if="hasProfileImage" id = "profilepicture-container">
<img width="50" :src="this.currentProfile.image" alt="profile picture">
</div>
<div v-else id = "profilepicture-container">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
</div>
<button @click="chooseProfilePicture">Endre bilde</button>
</div>
<div id = "submitbuttonBox">
<button class="saveBtn" @click="saveUserSettings" >Lagre brukerinnstillinger</button>
<button class="delBtn" @click="deleteUser">Slett brukerprofil</button>
</div>
</form>
<!-- <h1>App-innstillinger</h1>
<form @submit.prevent="submit">
<h2>-Matpreferanser-</h2>
<p class ="infoText">Hvis huket av, så vil du kun få oppskrifter av disse typene:</p>
<input type="checkbox" id="vegetar" name="vegetar" value="vegetar">
<label for="vegetar"> vegetar </label><br>
<input type="checkbox" id="vegan" name="vegan" value="vegan">
<label for="vegan"> vegan </label><br>
<br>
<h2>-Allergener-</h2>
<p class ="infoText">Du vil ikke få forslag om oppskrifter med disse varene:</p>
<input type="checkbox" id="gluten" name="gluten" value="Gluten">
<label for="allergen"> gluten</label><br>
<input type="checkbox" id="nøtter" name="nøtter" value="nøtter">
<label for="allergen"> nøtter</label><br>
<input type="checkbox" id="melk" name="melk" value="melk">
<label for="allergen"> melk</label><br>
<button class="saveBtn" @click="saveFoodPreference">Lagre matpreferanser <br> og allergener</button>
</form>
-->
<h1>Konto-innstillinger</h1>
<form @submit.prevent="submit">
<p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br>
<p>Epost: {{user.email}}</p><br>
<label for="password">Endre passord</label><br>
<input type="password" id="password" v-model="this.currentUser.newPassword">
<button class="saveBtn" @click="saveAccountSettings">Lagre nytt passord</button>
</form>
<br>
<br>
<hr>
<form @submit.prevent="submit" id = "dangerZone">
<h1>🔺FARESONE🔺</h1>
<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" @click="deleteAccount">SLETT KONTO</button>
</form>
<br><br><br>
<!--<EditAccount></EditAccount>-->
</main>
</template>
<script setup>
......@@ -103,6 +10,8 @@
import EditProfile from "../components/EditProfile.vue";
import EditAccount from "../components/EditAccount.vue";
</script>
......@@ -119,6 +28,7 @@ export default {
...mapStores(useAuthStore),
profile() {
let store = useAuthStore();
this.currentProfile.name = store.profile.name;
this.currentProfile.isRestricted = store.profile.restricted;
this.currentProfile.image = store.profile.profileImageUrl;
......
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