Index: ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue (revision 423908fe24fd13db9896e83a732ea3c6ad0dad40)
+++ ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue (revision 7db50745e8a98b64e3259400052ce3bbaafe7022)
@@ -2,164 +2,151 @@
import { userStore } from '@/PiniaStores/UserStore.js'
import blankProfile from '@/components/ectd/blank-profile.webp'
+import { useToasts } from '@/composables/useToast.js'
+import { isValidEmail } from '@/mixins/utilFunctions.js'
+import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
+import {useUser} from '@/repository/user.ts'
export default {
+ components: { LoadingIcon },
data() {
return {
userStore_: userStore(),
- newFirstName: '',
- newLastName: '',
- newPhoneNumber: '',
- newEmail: '',
newPassword: '',
currentPassword: '',
-
profileData: {},
-
isProfileImageButtonDisabled: true,
profileImageSrc: null,
-
- blankProfile: blankProfile
+ blankProfile: blankProfile,
+ showToast: useToasts().showToast,
+
+ isSavingDetails: false,
+ isUpdatingEmail: false,
+ isUpdatingPassword: false,
+ isUpdatingPicture: false,
}
},
methods: {
async updateProfileSettings() {
- try {
- const response = await fetch('http://localhost:8080/api/user/edit', {
- method: 'PUT',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: this.userStore_.getToken,
- },
- body: JSON.stringify({
- firstName: this.profileData.firstName,
- lastName: this.profileData.lastName,
- phoneNumber: this.profileData.phoneNumber,
- }),
+ this.isSavingDetails = true
+ try {
+ const payload = {
+ firstName: this.profileData.firstName,
+ lastName: this.profileData.lastName,
+ phoneNumber: this.profileData.phoneNumber,
+ }
+ const updatedUser = await useUser.updateProfile(payload)
+ this.userStore_.setNewEditedDataToLocalStorage(updatedUser)
+ this.showToast('Profile details saved successfully!', 'success')
+ } catch (err) {
+ this.showToast(err.response || 'Failed to save details.', 'error')
+ } finally {
+ this.isSavingDetails = false
+ }
+ },
+ async updateEmail() {
+ if (!isValidEmail(this.profileData.email)) {
+ this.showToast('Please enter a valid email address.', 'error')
+ return
+ }
+ this.isUpdatingEmail = true
+ try {
+ const payload = { newEmail: this.profileData.email }
+ const updatedTokenData = (await useUser.changeEmail(payload))
+ this.userStore_.setNewEmailToLocalStorage(updatedTokenData) // Assumes this updates the token with new email info
+ this.showToast(
+ 'Email updated successfully! Please check your old email for confirmation.',
+ 'success',
+ )
+ } catch (err) {
+ this.showToast(err.response || 'Failed to update email.', 'error')
+ } finally {
+ this.isUpdatingEmail = false
+ }
+ },
+ async updatePassword() {
+ this.isUpdatingPassword = true
+ try {
+ const payload = {
+ currentPassword: this.currentPassword,
+ newPassword: this.newPassword,
+ }
+ await useUser.changePassword(payload)
+ this.showToast('Password changed successfully.', 'success')
+ this.currentPassword = ''
+ this.newPassword = ''
+ } catch (err) {
+ this.showToast(err.response || 'Failed to change password.', 'error')
+ } finally {
+ this.isUpdatingPassword = false
+ }
+ },
+ async updateProfilePicture() {
+ const profilePictureFile = document.getElementById('profilePhotoInput').files[0]
+ if (!profilePictureFile) return
+
+ this.isUpdatingPicture = true
+ const formData = new FormData()
+ formData.append('avatar', profilePictureFile)
+
+ try {
+ const profileAvatarStringPath = await useUser.uploadAvatar(formData)
+
+ const response = await fetch('http://localhost:8080' + profileAvatarStringPath, {
+ headers: { Authorization: this.userStore_.getToken },
})
- const json = await response.json()
- this.userStore_.setNewEditedDataToLocalStorage(json)
- } catch (err) {
- console.log(err)
- }
- },
- async updateEmail() {
- try {
- const response = await fetch('http://localhost:8080/api/user/change-email', {
- method: 'PATCH',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: this.userStore_.getToken,
- },
- body: JSON.stringify({ newEmail: this.profileData.email }),
- })
- const json = await response.json()
- this.userStore_.setNewEmailToLocalStorage(json)
- } catch (err) {
- console.log(err)
- }
- },
- async updatePassword() {
- try {
- await fetch('http://localhost:8080/api/user/change-password', {
- method: 'PATCH',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: this.userStore_.getToken,
- },
- body: JSON.stringify({
- currentPassword: this.currentPassword,
- newPassword: this.newPassword,
- }),
- })
- } catch (err) {
- console.log(err)
- }
- },
- updateProfilePicture() {
- const profilePictureFile = document.getElementById('profilePhotoInput').files[0];
- if (!profilePictureFile) return;
-
- const formData = new FormData();
- formData.append('avatar', profilePictureFile);
-
- fetch('http://localhost:8080/api/user/upload-avatar', {
- method: 'POST',
- headers: {
- Authorization: this.userStore_.getToken,
- },
- body: formData
- })
- .then(response => response.text())
- .then(profileAvatarStringPath => {console.log("Profile Picture data returned", profileAvatarStringPath);
-
-
-
- fetch('http://localhost:8080' + profileAvatarStringPath, {
- headers: {
- Authorization: this.userStore_.getToken,
- }
- })
- .then(response => response.blob())
- .then(blob => {
- const reader = new FileReader();
- reader.onloadend = () => {
- const base64data = reader.result;
-
- this.userStore_.setProfilePicturePathToLocalStorage(profileAvatarStringPath, base64data)
- };
- reader.readAsDataURL(blob);
- })
- .catch(err => console.log("Error parsing the blob", err))
-
- })
- .catch(err => console.log("Profile picture upload failed:", err));
- },
- deleteProfilePicture() {
- fetch('http://localhost:8080/api/user/delete-avatar', {
- method: 'DELETE',
- headers: {
- Authorization: this.userStore_.getToken,
+ const blob = await response.blob()
+ const reader = new FileReader()
+ reader.onloadend = () => {
+ this.userStore_.setProfilePicturePathToLocalStorage(
+ profileAvatarStringPath,
+ reader.result,
+ )
+ this.showToast('Profile picture updated!', 'success')
}
- })
- .then(() => this.userStore_.removeProfilePictureFromLocaleStorage())
- .catch(err => console.log("Erorr didnt remove profile picture", err))
+ reader.readAsDataURL(blob)
+ } catch (err) {
+ this.showToast(err.response || 'Profile picture upload failed.', 'error')
+ } finally {
+ this.isUpdatingPicture = false
+ this.isProfileImageButtonDisabled = true
+ }
+ },
+ async deleteProfilePicture() {
+ this.isUpdatingPicture = true
+ try {
+ await useUser.deleteAvatar()
+ this.userStore_.removeProfilePictureFromLocaleStorage()
+ this.showToast('Profile picture removed.', 'success')
+ } catch (err) {
+ this.showToast(err.response || 'Failed to remove profile picture.', 'error')
+ } finally {
+ this.isUpdatingPicture = false
+ }
+ },
+ },
+ async beforeMount() {
+ try {
+ this.profileData = await useUser.getProfile()
+ } catch (error) {
+ console.log('Error fetching profile settings', error)
+ this.showToast('Could not load your profile data.', 'error')
}
-
-
- },
- beforeMount() {
- fetch('http://localhost:8080/api/user/profile', {
- method: 'GET',
- headers: {
- Authorization: this.userStore_.getToken,
- },
- })
- .then((response) => response.json())
- .then((data) => {
- this.profileData = data
- console.log('Priting response from profile api', this.profileData)
- })
- .catch((error) => {
- console.log('Error fetching profile settings', error)
- })
},
mounted() {
- this.isProfileImageButtonDisabled = true;
- const profilePictureImage = document.getElementById('profilePictureModal');
- const inputProfilePicture = document.getElementById('profilePhotoInput');
+ this.isProfileImageButtonDisabled = true
+ const profilePictureImage = document.getElementById('profilePictureModal')
+ const inputProfilePicture = document.getElementById('profilePhotoInput')
inputProfilePicture.addEventListener('change', (event) => {
- this.isProfileImageButtonDisabled = false;
-
- const file = event.target.files[0];
+ this.isProfileImageButtonDisabled = false
+ const file = event.target.files[0]
if (file && file.type.startsWith('image/')) {
- const reader = new FileReader();
+ const reader = new FileReader()
reader.onload = (e) => {
- profilePictureImage.src = e.target.result;
- };
- reader.readAsDataURL(file);
- }
- });
-
+ profilePictureImage.src = e.target.result
+ }
+ reader.readAsDataURL(file)
+ }
+ })
},
}
@@ -175,5 +162,5 @@
![Profile Picture]()
-