From 90ee70524cb9fcc01bbb78c111fa11ad007743ec Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Mon, 24 Apr 2023 10:46:03 +0200
Subject: [PATCH] v-modeling
---
src/util/API.js | 54 +++++++++++++++++++++++++++--
src/views/ProfileSettings.vue | 65 ++++++++++++++++++++++++++---------
2 files changed, 100 insertions(+), 19 deletions(-)
diff --git a/src/util/API.js b/src/util/API.js
index aeb8780..fadc566 100644
--- a/src/util/API.js
+++ b/src/util/API.js
@@ -1,15 +1,65 @@
import axios from "axios";
+
export const API = {
/**
* Fetches all available foodpreference options
*/
- getFoodpreferences(){
+ getFoodpreferences: async () => {
return axios.get(`${import.meta.env.VITE_BACKEND_URL}/foodpreferences`)
.then((response) => {
return response.data;
}).catch(() => {
throw new Error();
});
- }
+ },
+
+ /**
+ *
+ * @param id id of the account to retrieve
+ * @returns {Promise<*>}
+ */
+ getAccount: async (id) => {
+ return axios.get(`${import.meta.env.VITE_BACKEND_URL}/account/{id}`)
+ .then((response) => {
+ return response.data;
+ }).catch(() => {
+ throw new Error();
+ });
+ },
+
+ /**
+ * Updates profile
+ */
+ updateAccount: async () => {
+ return axios.put(`${import.meta.env.VITE_BACKEND_URL}/account/{id}`)
+ .then((response) => {
+ return response.data;
+ }).catch(() => {
+ throw new Error();
+ });
+ },
+
+ /**
+ * Deletes account from the
+ * @param id
+ * @param token
+ * @returns {Promise<*>}
+ */
+ deleteAccount: async (id, token) => {
+ return axios.delete(`${import.meta.env.VITE_BACKEND_URL}/account/{id}`, {
+ headers: { Authorization: `Bearer ${token}` },
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch(() => {
+ throw new Error("Account not found or not accessible");
+ });
+
+ },
+
+
+
+
}
diff --git a/src/views/ProfileSettings.vue b/src/views/ProfileSettings.vue
index ed13416..67d3629 100644
--- a/src/views/ProfileSettings.vue
+++ b/src/views/ProfileSettings.vue
@@ -3,28 +3,34 @@
<h1><br><br>Profilinnstillinger <br></h1>
- <div id = "profilepicture">
+ <div v-if="hasProfileImage" id = "profilepicture-container">
+ <img width="500px" src="{{profile.image}}" alt="profile picture">
+ </div>
+ <div v-else id = "profilepicture-container">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
</div>
- <h2>Petter</h2>
- <button id="changeUserBtn">Bytt bruker</button>
+ <h2>{{profile.name}}</h2>
+ <button id="changeUserBtn" >Bytt bruker</button>
<form @submit.prevent="submit">
<label for="brukernavn">Profilnavn</label><br>
- <input type="text" required><br>
+ <input type="text" required v-model="profile.name"><br>
<br>
<h4>Brukertype</h4>
- <input type="radio" id="normal" name="userType" value="normal">
+ <input type="radio" id="normal" value="false" v-model="profile.isRestricted">
<label for="normal"> Standard</label><br>
- <input type="radio" id="restricted" name="userType" value="restricted">
+ <input type="radio" id="restricted" value="true" v-model="profile.isRestricted">
<label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
<br>
<h3>Profilbilde</h3>
<div id="changeUserImage">
- <div id = "profilepicture">
+ <div v-if="hasProfileImage" id = "profilepicture-container">
+ <img width="30px" src="{{profile.image}}" alt="profile picture">
+ </div>
+ <div v-else id = "profilepicture-container">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
</div>
<button>Endre bilde</button>
@@ -68,10 +74,9 @@
<h1>Konto-innstillinger</h1>
<form @submit.prevent="submit">
- <p class="infoText">OBS: Ved å endre epost endrer du også brukernavnet ditt</p>
+ <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p>
- <label for="email">Epost</label><br>
- <input type="text" id="email">
+ <h2>Epost: {{user.username}}</h2>
<label for="password">Passord</label><br>
<input type="password" id="password">
@@ -86,8 +91,8 @@
<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="melk" name="melk" value="melk">
- <label for="allergen"> Jeg bekrefter jeg skjønner dette, og ønsker å slette kontoen min SmartMat-konto for alltid.</label><br>
+ <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>
@@ -105,6 +110,27 @@ export default {
computed: {
iconColor() {
return "#000000"
+ },
+ hasProfileImage() {
+ return this.profile.image.length > 0;
+ }
+ },
+ data() {
+ return {
+ user: {
+ id: "",
+ username: "petter@hello.no",
+ password: "",
+
+ },
+ profile: {
+ name: "Petter",
+ isRestricted: false,
+ image: "",
+ },
+ foodPreferences: [],
+ allergens: [],
+ deletionConfirmation: false,
}
},
methods: {
@@ -115,7 +141,13 @@ export default {
alert("(Denne knappen gjør ingen ting) konto oppdatert")
},
deleteAccount(){
- alert("(Denne knappen gjør ingen ting) men account deleted")
+ 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")
+ }
+
},
deleteUser(){
alert("(Denne knappen gjør ingen ting) bruker slettet")
@@ -131,10 +163,9 @@ export default {
#dangerZone {
color: white;
color: darkred;
- qwidth: 100%;
}
-#profilepicture {
+#profilepicture-container {
display:flex;
border-radius:50%;
width:100px;
@@ -149,7 +180,7 @@ export default {
display:flex;
}
-#changeUserImage #profilepicture {
+#changeUserImage #profilepicture-container {
width: 50px;
height: 50px;
}
@@ -222,7 +253,7 @@ main {
flex-direction: column;
width: 100%;
text-align: left;
- left:0;
+ left:0;
}
--
GitLab