From c625dd7c13968e37d90129af996e2ff36e9bc8e5 Mon Sep 17 00:00:00 2001 From: Jepp9350 <2jepp9350@gmail.com> Date: Wed, 23 Apr 2025 10:45:16 +0200 Subject: [PATCH] Add email and phone management to user profile Introduced functionality for updating user email with validation and added phone number and email fields to the profile settings. Enhanced error handling and updated the SessionUser data model to include email and phone details. --- src/components/session/token/SessionUser.vue | 34 +++ .../SessionUser/Objects/ObjectsGlobal.vue | 3 + .../userDashboard/profile/UserProfile.vue | 200 ++++++++++++++++-- 3 files changed, 214 insertions(+), 23 deletions(-) diff --git a/src/components/session/token/SessionUser.vue b/src/components/session/token/SessionUser.vue index 3deeb99f..70592ca8 100644 --- a/src/components/session/token/SessionUser.vue +++ b/src/components/session/token/SessionUser.vue @@ -77,6 +77,9 @@ export const getSessionData = async () => { SessionUser.user.id.value = response.data.data.id; SessionUser.user.customer_number.value = response.data.data.customer_number; SessionUser.user.group_id.value = response.data.data.group_id; + SessionUser.user.email.value = response.data.data.email; + SessionUser.user.phone.phone.value = response.data.data.phone.phone; + SessionUser.user.phone.country_code.value = response.data.data.phone.country_code; SessionUser.user.created_at.value = response.data.data.created_at; SessionUser.user.updated_at.value = response.data.data.updated_at; SessionUser.user.display_name.value = response.data.data.display_name; @@ -142,6 +145,11 @@ export const SessionUser = { customer_number: ref(null), display_name: ref(null), group_id: ref(null), + email: ref(null), + phone: { + phone: ref(null), + country_code: ref(null), + }, created_at: ref(null), updated_at: ref(null), cached_at: ref(null), @@ -253,6 +261,9 @@ export const SessionUser = { SessionUser.user.customer_number.value = null; SessionUser.user.display_name.value = null; SessionUser.user.group_id.value = null; + SessionUser.user.email.value = null; + SessionUser.user.phone.phone.value = null; + SessionUser.user.phone.country_code.value = null; SessionUser.user.created_at.value = null; SessionUser.user.updated_at.value = null; SessionUser.user.cached_at.value = null; @@ -405,6 +416,29 @@ export const SessionUser = { window.location.href = url; } }, + }, + parseErrorMessage(error) { + console.log('Parsing error message: ', error); + // Check if the error is a string + if (typeof error === 'string') { + return error; + } + // check if the response.data.data.message exists + if (error.response && error.response.data && error.response.data.data && error.response.data.data.message) { + return error.response.data.data.message; + } + // check if the response.data.message exists + if (error.response && error.response.data && error.response.data.message) { + return error.response.data.message; + } + // check if the response.data exists + if (error.response && error.response.data) { + return error.response.data; + } + // check if the response exists + if (error.response) { + return error.response; + } } }, request: authenticatedRequest, diff --git a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue index 11b9cfdb..605ca525 100644 --- a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue +++ b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue @@ -21,6 +21,9 @@ export const ObjectsGlobal = { cancel: "Annuller", yes: "Ja", no: "Nej", + email: "Email", + password: "Adgangskode", + phone_number: "Telefonnummer", no_data: "Ingen data", confirm_delete: "Ja, slet", confirm_delete_message: "Er du sikker på, at du vil slette dette objekt?", diff --git a/src/views/dashboards/userDashboard/profile/UserProfile.vue b/src/views/dashboards/userDashboard/profile/UserProfile.vue index 99df6ad2..4e401221 100644 --- a/src/views/dashboards/userDashboard/profile/UserProfile.vue +++ b/src/views/dashboards/userDashboard/profile/UserProfile.vue @@ -10,33 +10,187 @@ import ConfigurationCategory from "@/components/displays/superuser/configuration import ConfigurationSelect from "@/components/displays/superuser/configuration/ConfigurationSelect.vue"; import ConfigurationInputNumber from "@/components/displays/superuser/configuration/ConfigurationInputNumber.vue"; import ConfigurationInput from "@/components/displays/superuser/configuration/ConfigurationInput.vue"; + +import { ref } from 'vue'; +import Swal from "sweetalert2"; + +const isLoading = ref(false); + +const onClickSaveEmail = async () => { + // Get the password from Swal + await Swal.fire({ + title: 'Indtast din adgangskode', + input: 'password', + inputPlaceholder: 'Adgangskode', + showCancelButton: true, + preConfirm: () => { + const value = Swal.getInput().value; + if (!value) { + Swal.showValidationMessage('Indtast venligst din adgangskode 1'); + return; + } + Swal.showLoading(); + return value; + }, + inputAttributes: { + 'aria-label': 'Adgangskode', + }, + inputValidator: async (value) => { + if (!value) { + return 'Indtast venligst din adgangskode 2'; + } + // Validate the password + await SessionUser.request( + '/account/security/validate-password', + 'POST', + { + password: value, + } + ).then((result) => { + if (result.status === 200) { + // Show the email input dialog + onSaveEmail(value); + } else { + Swal.fire({ + title: 'Fejl', + text: 'Der opstod en fejl under validering af adgangskoden.', + icon: 'error', + }) + } + }).catch((error) => { + Swal.fire({ + title: 'Fejl', + text: SessionUser.functions.parseErrorMessage(error), + icon: 'error', + }); + }).finally(() => { + isLoading.value = false; + }); + }, + allowOutsideClick: () => !Swal.isLoading(), + showLoaderOnConfirm: true, + }) +} +const onSaveEmail = async (password) => { + // Show the confirmation dialog + await Swal.fire({ + title: 'Hvilken e-mailadresse vil du bruge?', + text: 'Indtast venligst din nye e-mailadresse.', + icon: 'warning', + input: 'text', + inputLabel: 'E-mailadresse', + showCancelButton: true, + preConfirm: () => { + const value = Swal.getInput().value; + if (!value) { + Swal.showValidationMessage('Indtast venligst din e-mailadresse'); + return; + } + // Validate the email address + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(value)) { + Swal.showValidationMessage('Indtast venligst en gyldig e-mailadresse'); + return; + } + isLoading.value = true; + Swal.showLoading(); + SessionUser.request( + '/account/security/change-email', + 'POST', + { + email: value, + password: password, + } + ).then((result) => { + if (result.status === 200) { + Swal.fire({ + title: 'E-mailadresse gemt', + text: 'Din e-mailadresse er blevet gemt.', + icon: 'success', + }); + SessionUser.getSessionData(); + } else { + Swal.fire({ + title: 'Fejl', + text: 'Der opstod en fejl under gemme af e-mailadressen.', + icon: 'error', + }); + } + }).catch((error) => { + Swal.fire({ + title: 'Fejl', + text: SessionUser.functions.parseErrorMessage(error), + icon: 'error', + }); + // Reset the password + }).finally(() => { + isLoading.value = false; + }); + }, + }) +} +