tethys.backend/resources/js/Pages/Auth/AccountInfo.vue

<script setup lang="ts">
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import { useForm, router } from '@inertiajs/vue3';
// import { reactive } from 'vue';
import {
    mdiAccount,
    // mdiAccountCircle,
    mdiLock,
    // mdiMail,
    mdiAsterisk,
    mdiFormTextboxPassword,
    mdiArrowLeftBoldOutline,
    mdiAlertBoxOutline,
    mdiInformation
} from '@mdi/js';
import SectionMain from '@/Components/SectionMain.vue';
import CardBox from '@/Components/CardBox.vue';
import BaseDivider from '@/Components/BaseDivider.vue';
import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import NotificationBar from '@/Components/NotificationBar.vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
// import { Inertia } from '@inertiajs/inertia';
import { computed, Ref } from 'vue';
import { usePage } from '@inertiajs/vue3';
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
// import { Inertia } from '@inertiajs/inertia';


const props = defineProps({
    // user will be returned from controller action
    user: {
        type: Object,
        default: () => ({}),
    },
    twoFactorEnabled: {
        type: Boolean,
        default: false
    },
    code: {
        type: Object,
    },
    recoveryCodes: {
        type: Array<string>,
        default: () => [],
    },
    errors: {
        type: Object,
        default: () => ({}),
    },
});

// const factorForm = useForm({
//     login: props.user.login,
//     email: props.user.email,
// });
const enableTwoFactorAuthentication = async () => {
    await router.post(stardust.route('account.password.enable2fa'));
};
const disableTwoFactorAuthentication = async () => {
    await router.post(stardust.route('account.password.disable2fa'));
};


const passwordForm = useForm({
    old_password: '',
    new_password: '',
    confirm_password: '',
});
const passwordSubmit = async () => {
    await passwordForm.post(stardust.route('account.password.store'), {
        preserveScroll: true,
        onSuccess: () => {
            // console.log(resp);
            passwordForm.reset();
        },
    });
};

const flash: Ref<any> = computed(() => {
    return usePage().props.flash;
});
</script>

<template>
    <LayoutAuthenticated>
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
                <BaseButton :route-name="stardust.route('dashboard')" :icon="mdiArrowLeftBoldOutline" label="Back"
                    color="white" rounded-full small />
            </SectionTitleLineWithButton>

            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                {{ flash.message }}
            </NotificationBar>
            <!-- <NotificationBar v-if="$page.props.flash.message" color="success" :icon="mdiAlertBoxOutline">
        {{ $page.props.flash.message }}
      </NotificationBar> -->

            <!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> -->
            <div class="grid grid-cols-1 lg:grid-cols-1 gap-6">

                <!-- password form -->
                <!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileForm.post(route('admin.account.info.store'))"> -->
                <!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileSubmit()">
                    <FormField label="Login" help="Required. Your login name" :class="{ 'text-red-400': errors.login }">
                        <FormControl v-model="profileForm.login" v-bind:icon="mdiAccount" name="login" required :error="errors.login">
                            <div class="text-red-400 text-sm" v-if="errors.login">
                                {{ errors.login }}
                            </div>
                        </FormControl>
                    </FormField>
                    <FormField label="Email" help="Required. Your e-mail" :class="{ 'text-red-400': errors.email }">
                        <FormControl v-model="profileForm.email" :icon="mdiMail" type="email" name="email" required :error="errors.email">
                            <div class="text-red-400 text-sm" v-if="errors.email">
                                {{ errors.email }}
                            </div>
                        </FormControl>
                    </FormField>

                    <template #footer>
                        <BaseButtons>
                            <BaseButton color="info" type="submit" label="Submit" />
                        </BaseButtons>
                    </template>
                </CardBox> -->

                <!-- password form -->
                <!-- <CardBox title="Change Password" :icon="mdiLock" form @submit.prevent="passwordForm.post(route('admin.account.password.store'), {
            preserveScroll: true,
            onSuccess: () => passwordForm.reset(),
          })  "> -->
                <CardBox id="passwordForm" title="Change Password" :icon="mdiLock" form @submit.prevent="passwordSubmit()">
                    <FormValidationErrors v-bind:errors="errors" />

                    <FormField label="Current password" help="Required. Your current password"
                        :class="{ 'text-red-400': passwordForm.errors.old_password }">
                        <FormControl v-model="passwordForm.old_password" :icon="mdiAsterisk" name="old_password"
                            type="password" required :error="passwordForm.errors.old_password">
                            <div class="text-red-400 text-sm" v-if="passwordForm.errors.old_password">
                                {{ passwordForm.errors.old_password }}
                            </div>
                        </FormControl>
                    </FormField>
                    <BaseDivider />

                    <FormField label="New password" help="Required. New password"
                        :class="{ 'text-red-400': passwordForm.errors.new_password }">
                        <FormControl v-model="passwordForm.new_password" :icon="mdiFormTextboxPassword" name="new_password"
                            type="password" required :error="passwordForm.errors.new_password">
                            <div class="text-red-400 text-sm" v-if="passwordForm.errors.new_password">
                                {{ passwordForm.errors.new_password }}
                            </div>
                        </FormControl>
                    </FormField>

                    <FormField label="Confirm password" help="Required. New password one more time"
                        :class="{ 'text-red-400': passwordForm.errors.confirm_password }">
                        <FormControl v-model="passwordForm.confirm_password" :icon="mdiFormTextboxPassword"
                            name="confirm_password" type="password" required :error="passwordForm.errors.confirm_password">
                            <div class="text-red-400 text-sm" v-if="passwordForm.errors.confirm_password">
                                {{ passwordForm.errors.confirm_password }}
                            </div>
                        </FormControl>
                    </FormField>


                    <div v-if="flash && flash.warning" class="flex flex-col mt-6 animate-fade-in">
                        <div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
                            <p class="font-bold">Be Warned</p>
                            <p>{{ flash.warning }}</p>
                        </div>
                    </div>
                    <BaseDivider />

                    <template #footer>
                        <BaseButtons>
                            <BaseButton type="submit" color="info" label="Change password" />
                        </BaseButtons>
                    </template>
                </CardBox>



                <!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileForm.post(route('admin.account.info.store'))"> -->
                <CardBox v-if="!props.twoFactorEnabled" title="Two-Factor Authentication" :icon="mdiInformation" form
                    @submit.prevent="enableTwoFactorAuthentication()">
                    <!-- <FormField label="Login" help="Required. Your login name" :class="{ 'text-red-400': errors.login }">
                        <FormControl v-model="factorForm.login" v-bind:icon="mdiAccount" name="login" required :error="errors.login">
                            <div class="text-red-400 text-sm" v-if="errors.login">
                                {{ errors.login }}
                            </div>
                        </FormControl>
                    </FormField>
                    <FormField label="Email" help="Required. Your e-mail" :class="{ 'text-red-400': errors.email }">
                        <FormControl v-model="factorForm.email" :icon="mdiMail" type="email" name="email" required :error="errors.email">
                            <div class="text-red-400 text-sm" v-if="errors.email">
                                {{ errors.email }}
                            </div>
                        </FormControl>
                    </FormField> -->

                    <div class="text-lg font-medium text-gray-900">
                        You have not enabled two factor authentication.
                    </div>
                    <div class="text-sm text-gray-600">
                        When two factor authentication is enabled, you will be prompted for a secure,
                        random token during authentication. You may retrieve this token from your phone's
                        Google Authenticator application.
                    </div>

                    <template #footer>
                        <BaseButtons>
                            <BaseButton color="info" type="submit" label="Enable" />
                        </BaseButtons>
                    </template>
                </CardBox>

                <CardBox v-else-if="props.twoFactorEnabled" title="Two-Factor Authentication" :icon="mdiInformation" form  @submit.prevent="disableTwoFactorAuthentication()">
                    <!-- <div class="w-1/2 space-y-4 bg-gray-100 p-8"> -->
                    <h3 class="text-lg font-medium text-gray-900">
                        You have enabled two factor authentication.
                    </h3>
                    <div class="mt-3 max-w-xl text-sm text-gray-600">
                        <p>
                            When two factor authentication is enabled, you will be prompted for a secure, random
                            token during authentication. You may retrieve this token from your phone's Google
                            Authenticator application.
                        </p>
                    </div>

                    <div v-if="code">
                        <div class="mt-4 max-w-xl text-sm text-gray-600">
                            <p class="font-semibold">
                                Two factor authentication is now enabled. Scan the following QR code using your
                                phone's authenticator application.
                            </p>
                        </div>

                        <div class="mt-4">
                            <img :src="code?.svg" />
                        </div>
                    </div>

                    <!-- @if(recoveryCodes) -->
                    <div v-if="recoveryCodes" class="mt-4 max-w-xl text-sm text-gray-600">
                        <p class="font-semibold">
                            Store these recovery codes in a secure password manager. They can be used to recover
                            access to your account if your two factor authentication device is lost.
                        </p>
                    </div>
                    <!-- <div class="mt-4 grid max-w-xl gap-1 rounded-lg bg-gray-100 px-4 py-4 font-mono text-sm">
                @each(code in recoveryCodes)
                <div>
                    {{ code }}
                </div>
                @endeach
            </div> -->
                    <!-- @endif -->

                    <div class="flex justify-between">
                        <!-- <form action="{{ route('UserController.fetchRecoveryCodes') }}" method="GET">
                                <button type="submit" class="px-auto items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs 
                font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none
              ">
                                    Show Recovery Codes
                                </button>
                            </form>
                            <form action="{{ route('UserController.disableTwoFactorAuthentication') }}" method="POST">
                                <button type="submit" class="px-auto items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs 
                font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none
              ">
                                    Disable
                                </button>
                            </form> -->
                            <BaseButton color="info" type="submit" label="Disable" />

                    </div>
                    <!-- </div> -->
                </CardBox>

            </div>
        </SectionMain>
    </LayoutAuthenticated>
</template>