126 lines
3.1 KiB
Vue
126 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import type { IAccountChangePasswordResponse, IVerificationNotificationResponse } from '~/types/account'
|
|
|
|
const form = ref()
|
|
const auth = useAuthStore()
|
|
|
|
const state = reactive({
|
|
current_password: '',
|
|
password: '',
|
|
password_confirmation: '',
|
|
})
|
|
|
|
const { refresh: onSubmit, status: accountPasswordStatus } = useFetch<IAccountChangePasswordResponse>('account/password', {
|
|
method: 'POST',
|
|
body: state,
|
|
immediate: false,
|
|
watch: false,
|
|
async onResponse({ response }) {
|
|
if (response?.status === 422) {
|
|
form.value.setErrors(response._data?.errors)
|
|
}
|
|
else if (response._data?.ok) {
|
|
useToast().add({
|
|
icon: 'i-heroicons-check-circle-20-solid',
|
|
title: 'The password was successfully updated.',
|
|
color: 'primary',
|
|
})
|
|
|
|
state.current_password = ''
|
|
state.password = ''
|
|
state.password_confirmation = ''
|
|
}
|
|
},
|
|
})
|
|
|
|
const { refresh: sendResetPasswordEmail, status: resetPasswordEmailStatus } = useFetch<IVerificationNotificationResponse>('verification-notification', {
|
|
method: 'POST',
|
|
body: { email: auth.user.email },
|
|
immediate: false,
|
|
watch: false,
|
|
onResponse({ response }) {
|
|
if (response._data?.ok) {
|
|
useToast().add({
|
|
icon: 'i-heroicons-check-circle-20-solid',
|
|
title: 'A link to reset your password has been sent to your email.',
|
|
color: 'primary',
|
|
})
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UForm
|
|
v-if="auth.user.has_password"
|
|
ref="form"
|
|
:state="state"
|
|
class="space-y-4"
|
|
@submit="onSubmit"
|
|
>
|
|
<UFormField
|
|
label="Current Password"
|
|
name="current_password"
|
|
required
|
|
>
|
|
<UInput
|
|
v-model="state.current_password"
|
|
type="password"
|
|
autocomplete="off"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="New Password"
|
|
name="password"
|
|
hint="min 8 characters"
|
|
:ui="{ hint: 'text-xs text-gray-500 dark:text-gray-400' }"
|
|
required
|
|
>
|
|
<UInput
|
|
v-model="state.password"
|
|
type="password"
|
|
autocomplete="off"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Repeat Password"
|
|
name="password_confirmation"
|
|
required
|
|
>
|
|
<UInput
|
|
v-model="state.password_confirmation"
|
|
type="password"
|
|
autocomplete="off"
|
|
/>
|
|
</UFormField>
|
|
|
|
<div class="pt-2">
|
|
<UButton
|
|
type="submit"
|
|
label="Save"
|
|
:loading="accountPasswordStatus === 'pending'"
|
|
/>
|
|
</div>
|
|
</UForm>
|
|
|
|
<UAlert
|
|
v-else
|
|
icon="i-heroicons-information-circle-20-solid"
|
|
title="Send a link to your email to reset your password."
|
|
description="To create a password for your account, you must go through the password recovery process."
|
|
:actions="[
|
|
{
|
|
label: 'Send link to Email',
|
|
variant: 'solid',
|
|
color: 'neutral',
|
|
loading: resetPasswordEmailStatus === 'pending',
|
|
onClick: () => sendResetPasswordEmail(),
|
|
},
|
|
]"
|
|
/>
|
|
</div>
|
|
</template>
|