tethys.backend/resources/js/Pages/profile/partials/update-password-form.vue

<script lang="ts" setup>
import FormControl from '@/Components/FormControl.vue';
import FormField from '@/Components/FormField.vue';
import ActionMessage from '@/Components/action-message.vue'
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import { useForm, usePage } from '@inertiajs/vue3';
import { ref, Ref, computed } from 'vue';
import { stardust } from '@eidellev/adonis-stardust/client';
import CardBox from '@/Components/CardBox.vue';
import { mdiLock } from '@mdi/js';
import PasswordMeter from '@/Components/SimplePasswordMeter/password-meter.vue';
// import BaseDivider from '@/Components/BaseDivider.vue';

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

const newPasswordInput: Ref<typeof FormControl | null> = ref(null);
const oldPasswordInput: Ref<typeof FormControl | null> = ref(null);

const enabled = ref(false);
const handleScore = (score: number) => {
    if (score >= 4) {
        enabled.value = true;
    } else {
        enabled.value = false;
    }
    //   strengthLabel.value = scoreLabel;
    //   score.value = scoreValue;
};

const form = useForm({
    old_password: '',
    new_password: '',
    confirm_password: '',
});
const updatePassword = async () => {
    await form.put(stardust.route('settings.password.update'), {
        preserveScroll: true,
        onSuccess: () => {
            form.reset();
        },
        onError: () => {
            if (form.errors.new_password) {
                form.reset('new_password', 'confirm_password');
                enabled.value = false;
                // newPasswordInput.value.focus();
                // newPasswordInput.value?.focus();
            }

            if (form.errors.old_password) {
                form.reset('old_password');
                // oldPasswordInput.value?.focus();
            }
        },
    });
};

</script>

<template>
    <!-- <div class="p-7 text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600  dark:bg-secondary-dark dark:text-white"> -->




    <!-- <div class="mb-4">
            <h3 class="text-dark text-md">{{ 'Update Password' }}</h3>
        </div> -->

    <CardBox id="passwordForm" title="Change Password" :icon="mdiLock" form :show-header-icon="false">



        <FormField label="Current password" help="Required. Your current password"
            :class="{ 'text-red-400': form.errors.old_password }">
            <FormControl label="Current Password" id="current_password" ref="oldPasswordInput"
                :placeholder="'Please Enter Current Password'" v-model="form.old_password"
                :error="form.errors.old_password" type="password" class="block w-full" autocomplete="current-password">
                <div class="text-red-400 text-sm" v-if="form.errors.old_password">
                    {{ form.errors.old_password }}
                </div>
            </FormControl>
        </FormField>


        <!-- <div class="col-span-6 sm:col-span-4"> -->
        <!-- <FormControl label="New Password" id="password" :placeholder="'Please Enter New Password'"
                    ref="newPasswordInput" v-model="form.new_password" type="password" class="block w-full"
                    autocomplete="new-password" :error="form.errors.new_password">
                    <div class="text-red-400 text-sm" v-if="form.errors.new_password">
                        {{ form.errors.new_password }}
                    </div>
                </FormControl> -->
        <PasswordMeter ref="newPasswordInput" v-model="form.new_password" :errors="form.errors"
            @score="handleScore" />

        <!-- </div> -->

        <FormField label="Confirm password" help="Required. New password one more time"
            :class="{ 'text-red-400': form.errors.confirm_password }">
            <FormControl label="Confirm Password" :placeholder="'Please Enter Confirm Password'" id="confirm_password"
                v-model="form.confirm_password" type="password" class="block w-full" autocomplete="new-password"
                :error="form.errors.confirm_password">
                <div class="text-red-400 text-sm" v-if="form.errors.confirm_password">
                    {{ form.errors.confirm_password }}
                </div>
            </FormControl>
        </FormField>

        <!-- <BaseDivider /> -->

        <template #footer>



            <div class="flex items-center justify-end gap-3 mt-5">
                <ActionMessage v-if="flash.message" :on="form.recentlySuccessful" color="success">
                    {{ flash.message }}
                </ActionMessage>
                <ActionMessage v-if="flash.warning" :on="form.recentlySuccessful" color="warning">
                    {{ flash.warning }}
                </ActionMessage>
                <BaseButtons>
                    <BaseButton type="submit" color="info" label="Change password" @click.prevent="updatePassword()"
                        :disabled="form.processing == true || enabled == false" />
                </BaseButtons>
            </div>
        </template>
    </CardBox>
</template>