2025-10-20 08:57:51 +02:00
|
|
|
<script setup lang="ts">
|
|
|
|
|
import InputError from '@/components/InputError.vue';
|
2025-11-21 13:21:59 +01:00
|
|
|
import { Button } from '@/components/ui/crm-button';
|
|
|
|
|
import { Input } from '@/components/ui/crm-input';
|
2025-10-20 08:57:51 +02:00
|
|
|
import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
|
|
|
|
|
import AuthLayout from '@/layouts/AuthLayout.vue';
|
|
|
|
|
import { store } from '@/routes/two-factor/login';
|
|
|
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
|
|
|
import { computed, ref } from 'vue';
|
|
|
|
|
|
|
|
|
|
interface AuthConfigContent {
|
|
|
|
|
title: string;
|
|
|
|
|
description: string;
|
|
|
|
|
toggleText: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const authConfigContent = computed<AuthConfigContent>(() => {
|
|
|
|
|
if (showRecoveryInput.value) {
|
|
|
|
|
return {
|
2026-02-17 10:35:03 +01:00
|
|
|
title: 'Wiederherstellungscode',
|
|
|
|
|
description: 'Bitte bestätige den Zugriff auf Dein Konto, indem Du einen Deiner Notfall-Wiederherstellungscodes eingeben.',
|
|
|
|
|
toggleText: 'mit Authentifizierungscode anmelden',
|
2025-10-20 08:57:51 +02:00
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
title: 'Authentication Code',
|
2026-02-17 10:35:03 +01:00
|
|
|
description: 'Bitte gib das Einmalkennwort aus Deiner Authentifizierungs-App ein.',
|
|
|
|
|
toggleText: 'mit einem Wiederherstellungscode anmelden',
|
2025-10-20 08:57:51 +02:00
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const showRecoveryInput = ref<boolean>(false);
|
|
|
|
|
|
|
|
|
|
const toggleRecoveryMode = (clearErrors: () => void): void => {
|
|
|
|
|
showRecoveryInput.value = !showRecoveryInput.value;
|
|
|
|
|
clearErrors();
|
|
|
|
|
code.value = [];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const code = ref<number[]>([]);
|
|
|
|
|
const codeValue = computed<string>(() => code.value.join(''));
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<AuthLayout :title="authConfigContent.title" :description="authConfigContent.description">
|
2026-02-17 10:35:03 +01:00
|
|
|
|
2025-10-20 08:57:51 +02:00
|
|
|
<Head title="Two-Factor Authentication" />
|
|
|
|
|
|
|
|
|
|
<div class="space-y-6">
|
|
|
|
|
<template v-if="!showRecoveryInput">
|
2026-02-17 10:35:03 +01:00
|
|
|
<Form v-bind="store.form()" class="space-y-4" reset-on-error @error="code = []"
|
|
|
|
|
#default="{ errors, processing, clearErrors }">
|
2025-10-20 08:57:51 +02:00
|
|
|
<input type="hidden" name="code" :value="codeValue" />
|
|
|
|
|
<div class="flex flex-col items-center justify-center space-y-3 text-center">
|
|
|
|
|
<div class="flex w-full items-center justify-center">
|
2026-02-17 10:35:03 +01:00
|
|
|
<PinInput id="otp" placeholder="" v-model="code" type="number" otp>
|
2025-10-20 08:57:51 +02:00
|
|
|
<PinInputGroup>
|
2026-02-17 10:35:03 +01:00
|
|
|
<PinInputSlot v-for="(id, index) in 6" :key="id" :index="index"
|
|
|
|
|
:disabled="processing" autofocus class="bg-background" />
|
2025-10-20 08:57:51 +02:00
|
|
|
</PinInputGroup>
|
|
|
|
|
</PinInput>
|
|
|
|
|
</div>
|
|
|
|
|
<InputError :message="errors.code" />
|
|
|
|
|
</div>
|
2026-02-17 10:35:03 +01:00
|
|
|
<Button type="submit" variant="action" class="w-full" :disabled="processing">Weiter</Button>
|
2025-10-20 08:57:51 +02:00
|
|
|
<div class="text-center text-sm text-muted-foreground">
|
2026-02-17 10:35:03 +01:00
|
|
|
<Button type="button" variant="link" @click="() => toggleRecoveryMode(clearErrors)">
|
2025-10-20 08:57:51 +02:00
|
|
|
{{ authConfigContent.toggleText }}
|
2026-02-17 10:35:03 +01:00
|
|
|
</Button>
|
2025-10-20 08:57:51 +02:00
|
|
|
</div>
|
|
|
|
|
</Form>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-else>
|
2026-02-17 10:35:03 +01:00
|
|
|
<Form v-bind="store.form()" class="space-y-4" reset-on-error
|
|
|
|
|
#default="{ errors, processing, clearErrors }">
|
|
|
|
|
<Input name="recovery_code" type="text" placeholder="Enter recovery code"
|
|
|
|
|
:autofocus="showRecoveryInput" required />
|
2025-10-20 08:57:51 +02:00
|
|
|
<InputError :message="errors.recovery_code" />
|
2026-02-17 10:35:03 +01:00
|
|
|
<Button type="submit" class="w-full" :disabled="processing">Weiter</Button>
|
2025-10-20 08:57:51 +02:00
|
|
|
|
|
|
|
|
<div class="text-center text-sm text-muted-foreground">
|
2026-02-17 10:35:03 +01:00
|
|
|
<Button type="button" variant="link" @click="() => toggleRecoveryMode(clearErrors)">
|
2025-10-20 08:57:51 +02:00
|
|
|
{{ authConfigContent.toggleText }}
|
2026-02-17 10:35:03 +01:00
|
|
|
</Button>
|
2025-10-20 08:57:51 +02:00
|
|
|
</div>
|
|
|
|
|
</Form>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</AuthLayout>
|
|
|
|
|
</template>
|
