171 lines
6.5 KiB
Vue
171 lines
6.5 KiB
Vue
<script setup lang="ts">
|
|
import { Head, useForm } from '@inertiajs/vue3';
|
|
import { KeyRound } from 'lucide-vue-next';
|
|
import { computed, onUnmounted } from 'vue';
|
|
import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
|
|
import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
|
|
import FeedbackState from '@/components/FeedbackState.vue';
|
|
import InputError from '@/components/InputError.vue';
|
|
import PasswordInput from '@/components/PasswordInput.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { useFormProtection } from '@/composables/useFormProtection';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
import AuthFlowLayout from '@/layouts/auth/AuthFlowLayout.vue';
|
|
import { logout } from '@/routes/index';
|
|
|
|
withDefaults(defineProps<{ status?: string | null }>(), { status: null });
|
|
const { t } = useLocalization();
|
|
const form = useForm({
|
|
current_password: '',
|
|
password: '',
|
|
password_confirmation: '',
|
|
}).dontRemember('current_password', 'password', 'password_confirmation');
|
|
const logoutForm = useForm({});
|
|
const protection = useFormProtection(form, { isDirty: () => false });
|
|
const logoutProtection = useFormProtection(logoutForm);
|
|
const busy = computed(() => form.processing || logoutForm.processing);
|
|
const submit = (): void =>
|
|
protection.submit(SecurityController.update(), {
|
|
onSuccess: () => form.reset(),
|
|
});
|
|
const signOut = (): void => {
|
|
if (busy.value) {
|
|
return;
|
|
}
|
|
form.reset();
|
|
logoutProtection.submit(logout());
|
|
};
|
|
onUnmounted(() => form.reset());
|
|
</script>
|
|
|
|
<template>
|
|
<AuthFlowLayout
|
|
:title="t('auth.forceChange.title')"
|
|
:description="t('auth.forceChange.description')"
|
|
:icon="KeyRound"
|
|
>
|
|
<Head :title="t('auth.forceChange.title')" />
|
|
<FeedbackState
|
|
v-if="status"
|
|
state="success"
|
|
:title="t('auth.forceChange.statusTitle')"
|
|
:description="status"
|
|
/>
|
|
<form
|
|
:action="SecurityController.update.url()"
|
|
method="post"
|
|
class="grid gap-5"
|
|
@submit.prevent="submit"
|
|
>
|
|
<AuthFormFeedback
|
|
:state="protection.state.value"
|
|
:response-status="protection.responseStatus.value"
|
|
:loading-title="t('auth.forceChange.pending')"
|
|
@retry="submit"
|
|
/>
|
|
<div class="gap-stack grid">
|
|
<Label for="current_password">{{
|
|
t('auth.forceChange.currentPassword')
|
|
}}</Label>
|
|
<PasswordInput
|
|
id="current_password"
|
|
v-model="form.current_password"
|
|
name="current_password"
|
|
required
|
|
autocomplete="current-password"
|
|
autofocus
|
|
:disabled="busy"
|
|
:invalid="Boolean(form.errors.current_password)"
|
|
aria-describedby="current-password-error"
|
|
/>
|
|
<InputError
|
|
id="current-password-error"
|
|
:message="form.errors.current_password"
|
|
/>
|
|
</div>
|
|
<div class="gap-stack grid">
|
|
<Label for="password">{{
|
|
t('auth.forceChange.password')
|
|
}}</Label>
|
|
<PasswordInput
|
|
id="password"
|
|
v-model="form.password"
|
|
name="password"
|
|
required
|
|
autocomplete="new-password"
|
|
:disabled="busy"
|
|
:invalid="Boolean(form.errors.password)"
|
|
aria-describedby="new-password-hint new-password-error"
|
|
/>
|
|
<p
|
|
id="new-password-hint"
|
|
class="text-caption text-muted-foreground"
|
|
>
|
|
{{ t('auth.forceChange.passwordHint') }}
|
|
</p>
|
|
<InputError
|
|
id="new-password-error"
|
|
:message="form.errors.password"
|
|
/>
|
|
</div>
|
|
<div class="gap-stack grid">
|
|
<Label for="password_confirmation">{{
|
|
t('auth.forceChange.passwordConfirmation')
|
|
}}</Label>
|
|
<PasswordInput
|
|
id="password_confirmation"
|
|
v-model="form.password_confirmation"
|
|
name="password_confirmation"
|
|
required
|
|
autocomplete="new-password"
|
|
:disabled="busy"
|
|
:invalid="Boolean(form.errors.password_confirmation)"
|
|
aria-describedby="new-password-confirmation-error"
|
|
/>
|
|
<InputError
|
|
id="new-password-confirmation-error"
|
|
:message="form.errors.password_confirmation"
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
class="w-full"
|
|
:disabled="logoutForm.processing"
|
|
:loading="form.processing"
|
|
:loading-label="t('auth.forceChange.pending')"
|
|
data-test="force-password-change-button"
|
|
>{{ t('auth.forceChange.submit') }}</Button
|
|
>
|
|
</form>
|
|
<div class="gap-stack pt-column grid border-t">
|
|
<p class="text-body text-muted-foreground">
|
|
{{ t('auth.forceChange.wrongAccount') }}
|
|
</p>
|
|
<form
|
|
:action="logout.url()"
|
|
method="post"
|
|
class="gap-card grid"
|
|
@submit.prevent="signOut"
|
|
>
|
|
<AuthFormFeedback
|
|
:state="logoutProtection.state.value"
|
|
:response-status="logoutProtection.responseStatus.value"
|
|
:loading-title="t('auth.signingOut')"
|
|
@retry="signOut"
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
variant="outline"
|
|
class="w-full"
|
|
:disabled="form.processing"
|
|
:loading="logoutForm.processing"
|
|
:loading-label="t('auth.signingOut')"
|
|
>{{ t('auth.signOut') }}</Button
|
|
>
|
|
</form>
|
|
</div>
|
|
<template #footer>{{ t('auth.forceChange.footer') }}</template>
|
|
</AuthFlowLayout>
|
|
</template>
|