85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import Button from '@/components/ui/Button.vue';
|
|
import Input from '@/components/ui/Input.vue';
|
|
import { useTranslations } from '@/composables/useVanguard';
|
|
|
|
const props = defineProps<{
|
|
userId: number;
|
|
twoFactor: {
|
|
enabled: boolean;
|
|
needsVerification: boolean;
|
|
action: 'enable' | 'disable' | 'verify';
|
|
qrCode: string | null;
|
|
};
|
|
}>();
|
|
|
|
const { __ } = useTranslations();
|
|
|
|
const form = useForm({ user: props.userId, code: '' });
|
|
|
|
function submit(): void {
|
|
form.post(route(`2fa.${props.twoFactor.action}`), { preserveScroll: true });
|
|
}
|
|
|
|
/**
|
|
* Declared here rather than inline so the strings handed to __() match the
|
|
* language file keys exactly, apostrophes included.
|
|
*/
|
|
const copy = {
|
|
intro: __('Please finish configuring Two-Factor authentication below.'),
|
|
prompt: __(
|
|
'When two factor authentication is enabled, you will be prompted for a secure, random token during authentication.',
|
|
),
|
|
retrieve: __("You may retrieve this token from your phone's Authenticator application."),
|
|
scan: __(
|
|
"To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.",
|
|
),
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit.prevent="submit">
|
|
<Button
|
|
v-if="twoFactor.action === 'enable'"
|
|
type="submit"
|
|
:label="__('Enable')"
|
|
:loading="form.processing"
|
|
/>
|
|
|
|
<Button
|
|
v-else-if="twoFactor.action === 'disable'"
|
|
type="submit"
|
|
icon="fa fa-times"
|
|
:label="__('Disable')"
|
|
severity="danger"
|
|
:loading="form.processing"
|
|
/>
|
|
|
|
<div v-else class="space-y-4">
|
|
<h3 class="text-lg font-medium text-slate-800">{{ copy.intro }}</h3>
|
|
|
|
<p class="font-semibold text-slate-600">{{ copy.prompt }} {{ copy.retrieve }}</p>
|
|
|
|
<p class="text-slate-600">{{ copy.scan }}</p>
|
|
|
|
<!-- eslint-disable-next-line vue/no-v-html -- server generated SVG -->
|
|
<div class="flex justify-center py-4" v-html="twoFactor.qrCode" />
|
|
|
|
<div>
|
|
<label for="code" class="sr-only">{{ __('Code') }}</label>
|
|
<Input
|
|
id="code"
|
|
v-model="form.code"
|
|
class="w-full"
|
|
:placeholder="__('Code')"
|
|
:invalid="Boolean(form.errors.code)"
|
|
/>
|
|
<small v-if="form.errors.code" class="text-red-600">{{ form.errors.code }}</small>
|
|
</div>
|
|
|
|
<Button type="submit" :label="__('Confirm')" :loading="form.processing" />
|
|
</div>
|
|
</form>
|
|
</template>
|