ChristophandClaude Opus 5.5
b297518810
- TallStackUI 4 (MIT) statt Flux; Komponenten mit Präfix ts- (<x-ts-…>) - Layouts, Login-, Passwort-, 2FA- und Einstellungsseiten neu aufgebaut - Livewire-Skripte explizit in beiden Layouts, damit Alpine auch auf den Fortify-Seiten ohne Livewire-Komponente läuft - Dark Mode über tallstackui_darkTheme(), ohne Aufblitzen beim Laden - Registrierungs-View und ungenutzte Layout-Varianten entfernt - Test: Seiten laden keine Ressourcen von fremden Hosts (Vorgabe "alles lokal") Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
78 lines
3.4 KiB
PHP
78 lines
3.4 KiB
PHP
<x-layouts::auth :title="__('Two-factor authentication')">
|
|
<div class="flex flex-col gap-6">
|
|
<div class="relative h-auto w-full"
|
|
x-cloak
|
|
x-data="{
|
|
showRecoveryInput: @js($errors->has('recovery_code')),
|
|
code: '',
|
|
recovery_code: '',
|
|
init() {
|
|
if (! this.showRecoveryInput) {
|
|
this.$nextTick(() => this.$refs.code?.focus());
|
|
}
|
|
},
|
|
toggleInput() {
|
|
this.showRecoveryInput = !this.showRecoveryInput;
|
|
|
|
this.code = '';
|
|
this.recovery_code = '';
|
|
|
|
$nextTick(() => {
|
|
this.showRecoveryInput
|
|
? this.$refs.recovery_code?.focus()
|
|
: this.$refs.code?.focus();
|
|
});
|
|
},
|
|
}">
|
|
<div x-show="!showRecoveryInput">
|
|
<x-auth-header :title="__('Authentication code')"
|
|
:description="__('Enter the authentication code provided by your authenticator application.')" />
|
|
</div>
|
|
|
|
<div x-show="showRecoveryInput">
|
|
<x-auth-header :title="__('Recovery code')"
|
|
:description="__('Please confirm access to your account by entering one of your emergency recovery codes.')" />
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('two-factor.login.store') }}">
|
|
@csrf
|
|
|
|
<div class="my-5 space-y-5">
|
|
<div x-show="!showRecoveryInput">
|
|
<x-ts-input name="code"
|
|
:label="__('Authentication code')"
|
|
x-model="code"
|
|
x-ref="code"
|
|
x-bind:required="!showRecoveryInput"
|
|
inputmode="numeric"
|
|
maxlength="6"
|
|
autocomplete="one-time-code"
|
|
class="text-center font-mono tracking-[0.5em]" />
|
|
</div>
|
|
|
|
<div x-show="showRecoveryInput">
|
|
<x-ts-input name="recovery_code"
|
|
:label="__('Recovery code')"
|
|
x-model="recovery_code"
|
|
x-ref="recovery_code"
|
|
x-bind:required="showRecoveryInput"
|
|
autocomplete="one-time-code" />
|
|
</div>
|
|
|
|
<x-ts-button submit class="w-full">
|
|
{{ __('Continue') }}
|
|
</x-ts-button>
|
|
</div>
|
|
|
|
<div class="mt-5 space-x-0.5 text-center text-sm leading-5">
|
|
<span class="opacity-50">{{ __('or you can') }}</span>
|
|
<button type="button" class="inline cursor-pointer font-medium underline opacity-80" x-on:click="toggleInput()">
|
|
<span x-show="!showRecoveryInput">{{ __('login using a recovery code') }}</span>
|
|
<span x-show="showRecoveryInput">{{ __('login using an authentication code') }}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</x-layouts::auth>
|