From 9ccb508d5172c1ec59a95f767166e04c03a5971c Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Wed, 26 Apr 2023 09:59:27 +0200
Subject: [PATCH] delte opp i mindre komponenter
---
src/components/AppSettings.vue | 38 +++++
src/components/EditAccount.vue | 41 ++++++
src/components/EditProfile.vue | 250 +++++++++++++++++++++++++++++++++
src/stores/authStore.js | 5 +
src/util/API.js | 2 +-
src/views/ProfileSettings.vue | 100 +------------
6 files changed, 340 insertions(+), 96 deletions(-)
create mode 100644 src/components/AppSettings.vue
create mode 100644 src/components/EditAccount.vue
create mode 100644 src/components/EditProfile.vue
diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
new file mode 100644
index 0000000..673503c
--- /dev/null
+++ b/src/components/AppSettings.vue
@@ -0,0 +1,38 @@
+<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
diff --git a/src/components/EditAccount.vue b/src/components/EditAccount.vue
new file mode 100644
index 0000000..41717dd
--- /dev/null
+++ b/src/components/EditAccount.vue
@@ -0,0 +1,41 @@
+<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
diff --git a/src/components/EditProfile.vue b/src/components/EditProfile.vue
new file mode 100644
index 0000000..62c7819
--- /dev/null
+++ b/src/components/EditProfile.vue
@@ -0,0 +1,250 @@
+<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
diff --git a/src/stores/authStore.js b/src/stores/authStore.js
index 79696ca..0b02b04 100644
--- a/src/stores/authStore.js
+++ b/src/stores/authStore.js
@@ -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;
}
}
});
diff --git a/src/util/API.js b/src/util/API.js
index d6f5432..c1985dc 100644
--- a/src/util/API.js
+++ b/src/util/API.js
@@ -146,7 +146,7 @@ export const API = {
})
.then((response) => {
- //authStore.setProfile(response.data)
+ authStore.setProfile(response.data)
return response.data;
})
.catch((error) => {
diff --git a/src/views/ProfileSettings.vue b/src/views/ProfileSettings.vue
index 588c0d1..8d5a095 100644
--- a/src/views/ProfileSettings.vue
+++ b/src/views/ProfileSettings.vue
@@ -1,101 +1,8 @@
<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;
--
GitLab