From 52ae287e26314d4e0efa33b114a8d737440254c9 Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Wed, 26 Apr 2023 13:04:10 +0200
Subject: [PATCH] man kan oppdatere fornavn og passord
---
src/components/EditAccount.vue | 136 +++++++++++++++++++++++++++++++--
src/components/EditProfile.vue | 32 +++-----
src/util/API.js | 25 +++++-
src/views/ProfileSettings.vue | 3 +-
4 files changed, 162 insertions(+), 34 deletions(-)
diff --git a/src/components/EditAccount.vue b/src/components/EditAccount.vue
index 41717dd..8dcd8a8 100644
--- a/src/components/EditAccount.vue
+++ b/src/components/EditAccount.vue
@@ -4,10 +4,13 @@
<p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br>
- <p>Epost: {{user.email}}</p><br>
+ <p>Epost: {{this.user.email}}</p><br>
+
+ <label for="fname">Endre fornavn</label><br>
+ <input type="text" id="fname" v-model="updatedUser.upFirstname"><br>
<label for="password">Endre passord</label><br>
- <input type="password" id="password" v-model="this.currentUser.newPassword">
+ <input type="password" id="password" v-model="updatedUser.upPassword">
<button class="saveBtn" @click="saveAccountSettings">Lagre nytt passord</button>
@@ -27,15 +30,138 @@
</template>
<script>
-import {mapStores} from "pinia";
+import {mapState, mapStores} from "pinia";
import {Icon} from "@iconify/vue";
import {API} from "@/util/API";
import { useAuthStore } from "@/stores/authStore";
+import router from "../router";
export default {
- name: "EditAccount"
+ name: "EditAccount",
+ computed: {
+ ...mapState(useAuthStore, ['user']),
+ ...mapStores(useAuthStore),
+ updatedUser() {
+ return {
+ upFirstname: this.user.firstname,
+ upPassword:'',
+ }
+ },
+ iconColor() {
+ return "#000000"
+ },
+ hasProfileImage() {
+ return this.updatedProfile.upImage.length > 0;
+ }
+ },
+ data() {
+ return {
+ deletionConfirmation: false,
+ }
+ },
+ methods: {
+ saveAccountSettings(){ //passord
+ if(this.updatedUser.upPassword.length===0){ //Oppdater ikke passordet dersom man ikke har gjort endringer
+ const id = this.user.id;
+
+ API.updateAccount(
+ id,{
+ firstname:this.updatedUser.upFirstname,
+ password:null,
+ }
+ ).then((savedUser)=>{
+ useAuthStore().setUser(savedUser);
+ alert("Bruker oppdatert.")
+ }).catch((error)=> {
+ console.log(error)
+ })
+ } else {
+ const id = this.user.id;
+
+ API.updateAccount(
+ id,{
+ firstname:this.updatedUser.upFirstname,
+ password:this.updatedUser.upPassword,
+ }
+ ).then((savedUser)=>{
+ useAuthStore().setUser(savedUser);
+ alert("Bruker oppdatert.")
+ }).catch((error)=> {
+ console.log(error)
+ })
+ }
+ },
+ 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);
+ }
+ },
+ }
}
</script>
-<style scoped>
+<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;
+}
+.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;
+}
+
+button {
+ background-color: base.$red;
+ color: black;
+
+ border: 1px solid black;
+
+ margin: 1em;
+}
+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/components/EditProfile.vue b/src/components/EditProfile.vue
index e3837ca..5da9e4f 100644
--- a/src/components/EditProfile.vue
+++ b/src/components/EditProfile.vue
@@ -23,7 +23,7 @@
<label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
<br>
- <h3>Profilbilde</h3>
+ <h3>Profilbilde</h3><br>
<div id="changeUserImage">
<div v-if="hasProfileImage" id = "profilepicture-container">
<img width="50" :src="this.updatedProfile.upImage" alt="profile picture">
@@ -31,11 +31,14 @@
<div v-else id = "profilepicture-container">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
</div>
- <button @click="chooseProfilePicture">Endre bilde</button>
- </div>
+ <label for="chooseImageUrl">Bilde-URL:</label>
+ <input type="text" id="chooseImageUrl" v-model="this.updatedProfile.upImage">
+
+ </div>
+ <br><br>
<div id = "submitbuttonBox">
- <button @click=" saveUserSettings">Submit</button>
+ <button class="saveBtn" @click=" saveUserSettings">Lagre profilendringer</button>
<button class="delBtn" @click="deleteUser">Slett brukerprofil</button>
</div>
@@ -86,32 +89,15 @@ export default {
restricted:this.updatedProfile.upRestricted,
}
).then((savedProfile)=>{
- console.log(this.updatedProfile.upName)
useAuthStore().setProfile(savedProfile);
alert("profil oppdatert.")
}).catch((error)=> {
+ console.log(this.updatedProfile.imageUrl)
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);
- }
-
+ alert("skriv inn bildelenke i feltet, og oppdater innstillinger")
},
deleteUser(){
alert("(Denne knappen gjør ingen ting) bruker slettet")
diff --git a/src/util/API.js b/src/util/API.js
index c1985dc..7489117 100644
--- a/src/util/API.js
+++ b/src/util/API.js
@@ -124,17 +124,34 @@ export const API = {
},
/**
- * Updates profile
+ *
+ * @param id account id
+ * @param request password and firstname
+ * @returns {Promise<*>}
*/
- updateAccount: async (id, password) => {
- return axios.put(`${import.meta.env.VITE_BACKEND_URL}/account/{id}`)
+ updateAccount: async (id, request) => {
+ const authStore = useAuthStore();
+ if (!authStore.isLoggedIn) {
+ throw new Error();
+ }
+
+ return axios.put(`${import.meta.env.VITE_BACKEND_URL}/account/${id}`,request, {
+ headers: { Authorization: `Bearer ${authStore.token}` },
+ })
.then((response) => {
+ authStore.setUser(response.data)
return response.data;
}).catch(() => {
- throw new Error();
+ throw new Error("Error when updating account: ");
});
},
+ /**
+ * Updates the profile name, restriction and profile image
+ * @param id profile id
+ * @param request
+ * @returns {Promise<*>}
+ */
updateProfile: async (id, request) => {
const authStore = useAuthStore();
if (!authStore.isLoggedIn) {
diff --git a/src/views/ProfileSettings.vue b/src/views/ProfileSettings.vue
index 8d5a095..0677be6 100644
--- a/src/views/ProfileSettings.vue
+++ b/src/views/ProfileSettings.vue
@@ -1,8 +1,7 @@
<template>
<main>
<EditProfile></EditProfile>
-
- <!--<EditAccount></EditAccount>-->
+ <EditAccount></EditAccount>
</main>
</template>
<script setup>
--
GitLab