[PLA-1718] add email change

resources/js/api/auth.ts

@@ -140,4 +140,15 @@ export class AuthApi {
 
         return AuthApi.sendPlatfromRequest(data);
     }
+
+    static async updateUser(email: string) {
+        const data = {
+            query: mutations.UpdateUser,
+            variables: {
+                email,
+            },
+        };
+
+        return AuthApi.sendPlatfromRequest(data);
+    }
 }

resources/js/api/mutations.ts

@@ -44,6 +44,7 @@ import RevokeApiTokens from '~/graphql/mutation/auth/RevokeApiTokens';
 import ResendVerifyEmail from '~/graphql/query/auth/ResendVerifyEmail';
 import ChangePassword from '~/graphql/mutation/auth/ChangePassword';
 import DeleteAccount from '~/graphql/mutation/auth/DeleteAccount';
+import UpdateUser from '~/graphql/mutation/auth/UpdateUser';
 
 import AddAccount from '~/graphql/mutation/fueltank/AddAccount';
 import RemoveAccount from '~/graphql/mutation/fueltank/RemoveAccount';
@@ -113,6 +114,7 @@ export default {
     ResendVerifyEmail,
     ChangePassword,
     DeleteAccount,
+    UpdateUser,
 
     AddAccount,
     RemoveAccount,

resources/js/components/pages/Settings.vue

@@ -4,15 +4,15 @@
             <LoadingCircle v-if="loading" class="mt-40" :size="44" />
             <template v-else>
                 <div
-                    v-if="!appStore.hasValidConfig && appStore.isMultiTenant && !tokens?.length"
+                    v-if="!appStore.hasValidConfig && isMultiTenant && !tokens?.length"
                     class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white"
                 >
                     <p class="font-bold">Initialization Guide</p>
                     <p>Please complete these steps in order to use the platform:</p>
                     <div>Create an API token</div>
                 </div>
                 <div class="flex flex-col space-y-8">
-                    <div v-if="appStore.isMultiTenant" class="flex flex-col space-y-4">
+                    <div v-if="isMultiTenant" class="flex flex-col space-y-4">
                         <CollapseCard
                             dusk-id="apiTokensTab"
                             title="Api tokens"
@@ -52,7 +52,8 @@
                     <div class="flex justify-between">
                         <h1 class="text-xl">Settings</h1>
                     </div>
-                    <SettingsResetPassword v-if="appStore.isMultiTenant" />
+                    <SettingsResetPassword v-if="isMultiTenant" />
+                    <SettingsChangeEmail v-if="isMultiTenant" />
                     <FormCheckbox
                         v-model="advancedMode"
                         name="advancedMode"
@@ -61,10 +62,8 @@
                         readmore="Advanced mode"
                     />
                     <div class="flex space-x-4">
-                        <Btn dusk="deleteBtn" v-if="appStore.isMultiTenant" @click="confirmModal = true"
-                            >Delete account</Btn
-                        >
-                        <Btn dusk="logoutBtn" v-if="appStore.isMultiTenant" class="mr-auto" @click="logout">Logout</Btn>
+                        <Btn dusk="deleteBtn" v-if="isMultiTenant" @click="confirmModal = true"> Delete account </Btn>
+                        <Btn dusk="logoutBtn" v-if="isMultiTenant" class="mr-auto" @click="logout">Logout</Btn>
                         <Btn dusk="resetBtn" v-else class="mr-auto" error @click="resetSettings">Reset Settings</Btn>
                     </div>
                 </div>
@@ -96,6 +95,7 @@ import Tooltip from '../Tooltip.vue';
 import { AuthApi } from '~/api/auth';
 import ConfirmModal from '../ConfirmModal.vue';
 import { ApiService } from '~/api';
+import SettingsChangeEmail from './SettingsChangeEmail.vue';
 
 const router = useRouter();
 const appStore = useAppStore();
@@ -106,6 +106,8 @@ const confirmModal = ref(false);
 
 const tokens = computed(() => appStore.user?.apiTokens);
 
+const isMultiTenant = computed(() => appStore.isMultiTenant);
+
 const logout = async () => {
     await appStore.logout();
     router.push({ name: 'platform.auth.login' });

resources/js/components/pages/SettingsChangeEmail.vue

@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <div v-if="enableReset" class="flex flex-col space-y-4">
+            <Form
+                id="changeEmailForm"
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @submit="changeEmail"
+            >
+                <FormInput
+                    v-model="currentEmail"
+                    label="Current Email"
+                    class="sm:w-[430px] flex-1 sm:flex-none text-gray-400"
+                    name="currentEmail"
+                    disabled
+                />
+                <FormInput
+                    v-model="newEmail"
+                    label="New Email"
+                    placeholder="New Email"
+                    class="sm:w-[430px] flex-1 sm:flex-none text-gray-400"
+                    name="newEmail"
+                />
+                <div class="flex space-x-4">
+                    <Btn @click="enableReset = false" id="changeEmailCancelBtn">Cancel</Btn>
+                    <Btn is-submit primary :loading="isLoading" id="changeEmailSubmitBtn">Change Email</Btn>
+                </div>
+            </Form>
+        </div>
+        <div v-else>
+            <Btn primary @click="enableReset = true" dusk="changeEmailBtn">Change Email</Btn>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import FormInput from '../FormInput.vue';
+import { AuthApi } from '~/api/auth';
+import Btn from '../Btn.vue';
+import * as yup from 'yup';
+import { snackbarErrors } from '~/util';
+import snackbar from '~/util/snackbar';
+import { Form } from 'vee-validate';
+import { useAppStore } from '~/store';
+
+const appStore = useAppStore();
+
+const currentEmail = ref(appStore.user?.email);
+const newEmail = ref();
+const isLoading = ref(false);
+const formRef = ref();
+const enableReset = ref(false);
+
+const validation = yup.object().shape({
+    newEmail: yup.string().email().required(),
+});
+
+const isValid = async () => {
+    await formRef.value.validate();
+    return formRef.value.getMeta().valid;
+};
+
+const changeEmail = async () => {
+    if (!(await isValid())) return;
+
+    isLoading.value = true;
+    try {
+        const res = await AuthApi.updateUser(newEmail.value);
+        if (res.data.UpdateUser) {
+            snackbar.success({
+                title: 'Email changed',
+                text: 'Your email has been changed successfully.',
+            });
+            appStore.logout();
+        }
+    } catch (e) {
+        if (snackbarErrors(e)) return;
+        snackbar.error({
+            title: 'Failed to change email',
+            text: 'Please try again.',
+        });
+    } finally {
+        isLoading.value = false;
+    }
+};
+</script>

resources/js/graphql/mutation/auth/UpdateUser.ts

@@ -0,0 +1,3 @@
+export default `mutation UpdateUser($email: String) {
+    UpdateUser(email: $email)
+  }`;