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

@@ -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,

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?",

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;
+      });
+    },
+  })
+}
+
 </script>
 
 <template>
-  <div>
+  <div v-if="!isLoading">
     <UserDashboardPageWrapper title="Brugerprofil">
-          <ConfigurationCategory
-              class="mt-2"
-              module="Brugerprofil"
-              title="Fakturaoplysninger"
-              description="Dine fakturaoplysninger"
-              icon="fas fa-user"
-          >
-            <!-- Konto navn -->
-            <ConfigurationInput
-              :title="SessionUser.objects.global.language.customer_name"
-              description="Kundekonto navn"
-              v-bind:value="SessionUser.user.display_name"
-              :disabled="true"
-              />
-            <!-- Konto nummer -->
-            <ConfigurationInput
-              :title="SessionUser.objects.global.language.customer_number"
-              description="Kundekonto nummer"
-              v-bind:value="SessionUser.user.customer_number"
-              :disabled="true"
-              />
-          </ConfigurationCategory>
+      <!-- Invoicing -->
+      <ConfigurationCategory
+          class="mt-2"
+          module="Brugerprofil"
+          title="Fakturaoplysninger"
+          description="Dine fakturaoplysninger"
+          icon="fas fa-user"
+      >
+        <!-- Konto navn -->
+        <ConfigurationInput
+            :title="SessionUser.objects.global.language.customer_name"
+            description="Kundekonto navn"
+            v-bind:value="SessionUser.user.display_name"
+            :disabled="true"
+        />
+        <!-- Konto nummer -->
+        <ConfigurationInput
+            :title="SessionUser.objects.global.language.customer_number"
+            description="Kundekonto nummer"
+            v-bind:value="SessionUser.user.customer_number"
+            :disabled="true"
+        />
+      </ConfigurationCategory>
+      <!-- Security -->
+      <ConfigurationCategory
+          class="mt-2"
+          module="Brugerprofil"
+          title="Sikkerhed"
+          description="Dine sikkerhedsindstillinger"
+          icon="fas fa-lock"
+      >
+        <!-- E-mail -->
+        <ConfigurationInput
+            :title="SessionUser.objects.global.language.email"
+            description="Vi bruger denne e-mail til at nulstille din adgangskode"
+            v-bind:value="SessionUser.user.email"
+            :disabled="true"
+        />
+        <button
+            class="button is-link is-small mt-2"
+            @click="onClickSaveEmail"
+            :disabled="isLoading"
+        >
+          <span>
+            <i class="fas fa-edit"></i>
+            <span class="ml-2">Rediger e-mail</span>
+          </span>
+        </button>
+        <!-- Telefonnummer -->
+        <ConfigurationInput
+            :title="SessionUser.objects.global.language.phone_number"
+            description="Telefonnummer"
+            v-bind:value="SessionUser.user.phone.phone"
+            :disabled="true"
+        />
+      </ConfigurationCategory>
     </UserDashboardPageWrapper>
   </div>
 </template>