40 lines
2.0 KiB
PHP
40 lines
2.0 KiB
PHP
<div class="flex min-h-screen items-center justify-center p-6" x-data="{ recovery: false }">
|
|
<div class="w-full max-w-sm">
|
|
<div class="mb-6 text-center">
|
|
<span class="font-mono text-xl font-semibold tracking-tight text-ink">CluPilot</span>
|
|
</div>
|
|
|
|
<x-ui.card>
|
|
<h1 class="text-lg font-semibold text-ink">{{ __('auth.twofa_title') }}</h1>
|
|
<p x-show="! recovery" class="mt-1 text-sm text-muted">{{ __('auth.twofa_subtitle') }}</p>
|
|
<p x-show="recovery" x-cloak class="mt-1 text-sm text-muted">{{ __('auth.twofa_recovery_subtitle') }}</p>
|
|
|
|
@error('code')
|
|
<x-ui.alert variant="danger" class="mt-4">{{ $message }}</x-ui.alert>
|
|
@enderror
|
|
@error('recovery_code')
|
|
<x-ui.alert variant="danger" class="mt-4">{{ $message }}</x-ui.alert>
|
|
@enderror
|
|
|
|
{{-- TOTP code --}}
|
|
<form x-show="! recovery" method="POST" action="{{ route('two-factor.login.store') }}" class="mt-5 space-y-4">
|
|
@csrf
|
|
<x-ui.otp-input name="code" :label="__('auth.otp_digit')" />
|
|
<x-ui.button type="submit" variant="primary" class="w-full">{{ __('auth.verify') }}</x-ui.button>
|
|
</form>
|
|
|
|
{{-- Recovery code fallback --}}
|
|
<form x-show="recovery" x-cloak method="POST" action="{{ route('two-factor.login.store') }}" class="mt-5 space-y-4">
|
|
@csrf
|
|
<x-ui.input name="recovery_code" :label="__('auth.recovery_code')" autocomplete="one-time-code" />
|
|
<x-ui.button type="submit" variant="primary" class="w-full">{{ __('auth.verify') }}</x-ui.button>
|
|
</form>
|
|
|
|
<button type="button" class="mt-4 text-sm font-medium text-accent-text hover:underline" @click="recovery = ! recovery">
|
|
<span x-show="! recovery">{{ __('auth.use_recovery') }}</span>
|
|
<span x-show="recovery" x-cloak>{{ __('auth.use_otp') }}</span>
|
|
</button>
|
|
</x-ui.card>
|
|
</div>
|
|
</div>
|