Flux durch TallStackUI 4 ersetzt

- 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>
This commit is contained in:
Christoph
2026-10-01 09:33:26 +02:00
co-authored by Claude Opus 5.5
parent dedce594a0
commit b297518810
47 changed files with 644 additions and 1362 deletions
@@ -1,13 +1,10 @@
<section class="w-full">
@include('partials.settings-heading')
<flux:heading level="2" class="sr-only">{{ __('Appearance settings') }}</flux:heading>
<x-heading class="sr-only">{{ __('Appearance settings') }}</x-heading>
<x-settings.layout :heading="__('Appearance')" :subheading=" __('Update the appearance settings for your account')">
<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
<flux:radio value="light" icon="sun">{{ __('Light') }}</flux:radio>
<flux:radio value="dark" icon="moon">{{ __('Dark') }}</flux:radio>
<flux:radio value="system" icon="computer-desktop">{{ __('System') }}</flux:radio>
</flux:radio.group>
<x-settings.layout :heading="__('Appearance')" :subheading="__('Update the appearance settings for your account')">
{{-- Hell / Dunkel / System; nutzt den Theme-Zustand aus tallstackui_darkTheme() am <html>-Element. --}}
<x-ts-theme-switch />
</x-settings.layout>
</section>
@@ -1,34 +1,35 @@
<section class="mt-10 space-y-6">
<div class="relative mb-5">
<flux:heading>{{ __('Delete account') }}</flux:heading>
<flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
<x-heading>{{ __('Delete account') }}</x-heading>
<x-subheading>{{ __('Delete your account and all of its resources') }}</x-subheading>
</div>
<flux:modal.trigger name="confirm-user-deletion">
<flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
{{ __('Delete account') }}
</flux:button>
</flux:modal.trigger>
<x-ts-button color="red" x-on:click="$tsui.open.modal('confirm-user-deletion')">
{{ __('Delete account') }}
</x-ts-button>
<flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
<form method="POST" wire:submit="deleteUser" class="space-y-6">
<div>
<flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading>
<x-ts-modal id="confirm-user-deletion" size="lg" center :title="__('Are you sure you want to delete your account?')">
<form id="delete-user-form" wire:submit="deleteUser" class="space-y-6">
<p class="text-sm text-gray-600 dark:text-dark-300">
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
</p>
<flux:subheading>
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
</flux:subheading>
</div>
<flux:input wire:model="password" :label="__('Password')" type="password" viewable />
<div class="flex justify-end space-x-2 rtl:space-x-reverse">
<flux:modal.close>
<flux:button variant="filled">{{ __('Cancel') }}</flux:button>
</flux:modal.close>
<flux:button variant="danger" type="submit">{{ __('Delete account') }}</flux:button>
</div>
<x-ts-password wire:model="password" :label="__('Password')" />
</form>
</flux:modal>
<x-slot:footer>
<div class="flex justify-end gap-2">
<x-ts-button flat color="secondary" x-on:click="$tsui.close.modal('confirm-user-deletion')">
{{ __('Cancel') }}
</x-ts-button>
<x-ts-button submit form="delete-user-form" color="red" loading="deleteUser">
{{ __('Delete account') }}
</x-ts-button>
</div>
</x-slot:footer>
</x-ts-modal>
@if ($errors->isNotEmpty())
<div x-init="$tsui.open.modal('confirm-user-deletion')"></div>
@endif
</section>
@@ -1,31 +1,28 @@
<section class="w-full">
@include('partials.settings-heading')
<flux:heading level="2" class="sr-only">{{ __('Profile settings') }}</flux:heading>
<x-heading class="sr-only">{{ __('Profile settings') }}</x-heading>
<x-settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
<form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
<flux:input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" />
<x-ts-input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" />
<div>
<flux:input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
<x-ts-input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
@if ($this->hasUnverifiedEmail)
<div>
<flux:text class="mt-4">
{{ __('Your email address is unverified.') }}
<p class="mt-4 text-sm text-gray-600 dark:text-dark-300">
{{ __('Your email address is unverified.') }}
<flux:link class="text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification">
{{ __('Click here to re-send the verification email.') }}
</flux:link>
</flux:text>
</div>
<x-ts-link href="#" class="cursor-pointer text-sm" wire:click.prevent="resendVerificationNotification">
{{ __('Click here to re-send the verification email.') }}
</x-ts-link>
</p>
@endif
</div>
<div class="flex items-center gap-4">
<flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button>
<x-ts-button submit loading="updateProfileInformation">{{ __('Save') }}</x-ts-button>
</div>
</form>
@@ -1,289 +1,194 @@
<section class="w-full">
@include('partials.settings-heading')
<flux:heading level="2" class="sr-only">{{ __('Security settings') }}</flux:heading>
<x-heading class="sr-only">{{ __('Security settings') }}</x-heading>
<x-settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
<form method="POST" wire:submit="updatePassword" class="mt-6 space-y-6">
<flux:input
wire:model="current_password"
:label="__('Current password')"
type="password"
required
autocomplete="current-password"
viewable
/>
<flux:input
wire:model="password"
:label="__('New password')"
type="password"
required
autocomplete="new-password"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<flux:input
wire:model="password_confirmation"
:label="__('Confirm password')"
type="password"
required
autocomplete="new-password"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<form wire:submit="updatePassword" class="mt-6 space-y-6">
<x-ts-password wire:model="current_password"
:label="__('Current password')"
required
autocomplete="current-password" />
<x-ts-password wire:model="password"
:label="__('New password')"
required
autocomplete="new-password"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
<x-ts-password wire:model="password_confirmation"
:label="__('Confirm password')"
required
autocomplete="new-password"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
<div class="flex items-center gap-4">
<flux:button variant="primary" type="submit" data-test="update-password-button">{{ __('Save') }}</flux:button>
<x-ts-button submit loading="updatePassword" data-test="update-password-button">{{ __('Save') }}</x-ts-button>
</div>
</form>
@if ($canManageTwoFactor)
<section class="mt-12">
<flux:heading>{{ __('Two-factor authentication') }}</flux:heading>
<flux:subheading>{{ __('Manage your two-factor authentication settings') }}</flux:subheading>
<x-heading>{{ __('Two-factor authentication') }}</x-heading>
<x-subheading>{{ __('Manage your two-factor authentication settings') }}</x-subheading>
<div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
<div class="mx-auto mt-4 flex w-full flex-col space-y-6 text-sm" wire:cloak>
@if ($twoFactorEnabled)
<div class="space-y-4">
<flux:text>
<p class="text-gray-600 dark:text-dark-300">
{{ __('You will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.') }}
</flux:text>
</p>
<div class="flex justify-start">
<flux:button
variant="danger"
wire:click="disable"
>
<x-ts-button color="red" wire:click="disable" loading="disable">
{{ __('Disable 2FA') }}
</flux:button>
</x-ts-button>
</div>
<livewire:settings.two-factor.recovery-codes :$requiresConfirmation />
</div>
@else
<div class="space-y-4">
<flux:text variant="subtle">
<p class="text-gray-500 dark:text-dark-300">
{{ __('When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be retrieved from a TOTP-supported application on your phone.') }}
</flux:text>
</p>
<flux:button
variant="primary"
wire:click="enable"
>
<x-ts-button wire:click="enable" loading="enable">
{{ __('Enable 2FA') }}
</flux:button>
</x-ts-button>
</div>
@endif
</div>
</section>
@endif
@if ($canManageTwoFactor)
<flux:modal
name="two-factor-setup-modal"
class="max-w-md md:min-w-md"
@close="closeModal"
wire:model="showModal"
>
<x-ts-modal wire="showModal" size="md" center x-on:close="$wire.closeModal()">
<div class="space-y-6">
<div class="flex flex-col items-center space-y-4">
<div class="p-0.5 w-auto rounded-full border border-stone-100 dark:border-stone-600 bg-white dark:bg-stone-800 shadow-sm">
<div class="p-2.5 rounded-full border border-stone-200 dark:border-stone-600 overflow-hidden bg-stone-100 dark:bg-stone-200 relative">
<div class="flex items-stretch absolute inset-0 w-full h-full divide-x [&>div]:flex-1 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
@for ($i = 1; $i <= 5; $i++)
<div></div>
@endfor
</div>
<div class="flex flex-col items-stretch absolute w-full h-full divide-y [&>div]:flex-1 inset-0 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
@for ($i = 1; $i <= 5; $i++)
<div></div>
@endfor
</div>
<flux:icon.qr-code class="relative z-20 dark:text-accent-foreground"/>
</div>
<div class="rounded-full border border-gray-200 bg-gray-100 p-3 dark:border-dark-600 dark:bg-dark-700">
<x-ts-icon name="qr-code" lg />
</div>
<div class="space-y-2 text-center">
<flux:heading size="lg">{{ $this->modalConfig['title'] }}</flux:heading>
<flux:text>{{ $this->modalConfig['description'] }}</flux:text>
<x-heading size="lg">{{ $this->modalConfig['title'] }}</x-heading>
<p class="text-sm text-gray-600 dark:text-dark-300">{{ $this->modalConfig['description'] }}</p>
</div>
</div>
@if ($showVerificationStep)
<div class="space-y-6">
<div
class="flex flex-col items-center space-y-3 justify-center"
x-data
x-init="$nextTick(() => $el.querySelector('input')?.focus())"
>
<flux:otp
name="code"
wire:model="code"
length="6"
label="OTP Code"
label:sr-only
class="mx-auto"
/>
<div x-data x-init="$nextTick(() => $el.querySelector('input')?.focus())">
<x-ts-input wire:model="code"
name="code"
:label="__('Authentication code')"
inputmode="numeric"
maxlength="6"
autocomplete="one-time-code"
class="text-center font-mono tracking-[0.5em]" />
</div>
<div class="flex items-center space-x-3">
<flux:button
variant="outline"
class="flex-1"
wire:click="resetVerification"
>
<div class="flex items-center gap-3">
<x-ts-button outline class="flex-1" wire:click="resetVerification">
{{ __('Back') }}
</flux:button>
</x-ts-button>
<flux:button
variant="primary"
class="flex-1"
wire:click="confirmTwoFactor"
x-bind:disabled="$wire.code.length < 6"
>
<x-ts-button class="flex-1"
wire:click="confirmTwoFactor"
loading="confirmTwoFactor"
x-bind:disabled="$wire.code.length < 6">
{{ __('Confirm') }}
</flux:button>
</x-ts-button>
</div>
</div>
@else
@error('setupData')
<flux:callout variant="danger" icon="x-circle" heading="{{ $message }}"/>
<x-ts-alert color="red" icon="x-circle" :text="$message" />
@enderror
<div class="flex justify-center">
<div class="relative w-64 overflow-hidden border rounded-lg border-stone-200 dark:border-stone-700 aspect-square">
{{-- QR-Code immer dunkel auf hell, damit ihn jede Authenticator-App scannen kann. --}}
<div class="relative aspect-square w-64 overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-dark-600">
@empty($qrCodeSvg)
<div class="absolute inset-0 flex items-center justify-center bg-white dark:bg-stone-700 animate-pulse">
<flux:icon.loading/>
<div class="absolute inset-0 flex animate-pulse items-center justify-center">
<x-ts-icon name="arrow-path" class="animate-spin text-gray-400" />
</div>
@else
<div x-data class="flex items-center justify-center h-full p-4">
<div
class="bg-white p-3 rounded"
:style="($flux.appearance === 'dark' || ($flux.appearance === 'system' && $flux.dark)) ? 'filter: invert(1) brightness(1.5)' : ''"
>
{!! $qrCodeSvg !!}
</div>
<div class="flex h-full items-center justify-center p-4">
{!! $qrCodeSvg !!}
</div>
@endempty
</div>
</div>
<div>
<flux:button
:disabled="$errors->has('setupData')"
variant="primary"
class="w-full"
wire:click="showVerificationIfNecessary"
>
{{ $this->modalConfig['buttonText'] }}
</flux:button>
</div>
<x-ts-button class="w-full"
:disabled="$errors->has('setupData')"
wire:click="showVerificationIfNecessary">
{{ $this->modalConfig['buttonText'] }}
</x-ts-button>
<div class="space-y-4">
<div class="relative flex items-center justify-center w-full">
<div class="absolute inset-0 w-full h-px top-1/2 bg-stone-200 dark:bg-stone-600"></div>
<span class="relative px-2 text-sm bg-white dark:bg-stone-800 text-stone-600 dark:text-stone-400">
<div class="relative flex w-full items-center justify-center">
<div class="absolute inset-0 top-1/2 h-px w-full bg-gray-200 dark:bg-dark-600"></div>
<span class="relative bg-white px-2 text-sm text-gray-600 dark:bg-dark-800 dark:text-dark-300">
{{ __('or, enter the code manually') }}
</span>
</div>
<div
class="flex items-center space-x-2"
x-data="{
copied: false,
async copy() {
try {
await navigator.clipboard.writeText('{{ $manualSetupKey }}');
this.copied = true;
setTimeout(() => this.copied = false, 1500);
} catch (e) {
console.warn('Could not copy to clipboard');
}
}
}"
>
<div class="flex items-stretch w-full border rounded-xl dark:border-stone-700">
@empty($manualSetupKey)
<div class="flex items-center justify-center w-full p-3 bg-stone-100 dark:bg-stone-700">
<flux:icon.loading variant="mini"/>
</div>
@else
<input
type="text"
readonly
value="{{ $manualSetupKey }}"
class="w-full p-3 bg-transparent outline-none text-stone-900 dark:text-stone-100"
/>
<button
@click="copy()"
class="px-3 transition-colors border-l cursor-pointer border-stone-200 dark:border-stone-600"
>
<flux:icon.document-duplicate x-show="!copied" variant="outline"></flux:icon>
<flux:icon.check
x-show="copied"
variant="solid"
class="text-green-500"
></flux:icon>
</button>
@endempty
@empty($manualSetupKey)
<div class="flex w-full items-center justify-center rounded-lg bg-gray-100 p-3 dark:bg-dark-700">
<x-ts-icon name="arrow-path" sm class="animate-spin text-gray-400" />
</div>
</div>
@else
<x-ts-clipboard :text="$manualSetupKey" />
@endempty
</div>
@endif
</div>
</flux:modal>
</x-ts-modal>
@endif
@if ($canManagePasskeys)
<section class="mt-12">
<flux:heading>{{ __('Passkeys') }}</flux:heading>
<flux:subheading>{{ __('Manage your passkeys for passwordless sign-in') }}</flux:subheading>
<x-heading>{{ __('Passkeys') }}</x-heading>
<x-subheading>{{ __('Manage your passkeys for passwordless sign-in') }}</x-subheading>
<div class="mt-6 flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
<div class="border rounded-lg border-zinc-200 dark:border-zinc-700 overflow-hidden">
<div class="mx-auto mt-6 flex w-full flex-col space-y-6 text-sm" wire:cloak>
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-dark-600">
@forelse ($passkeys as $passkey)
<div class="flex items-center justify-between p-4 {{ ! $loop->last ? 'border-b border-zinc-200 dark:border-zinc-700' : '' }}">
<div @class([
'flex items-center justify-between p-4',
'border-b border-gray-200 dark:border-dark-600' => ! $loop->last,
])>
<div class="flex items-center gap-4">
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 dark:bg-zinc-800">
<flux:icon.key class="size-5 text-zinc-500 dark:text-zinc-400" />
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-gray-100 dark:bg-dark-700">
<x-ts-icon name="key" class="text-gray-500 dark:text-dark-300" />
</div>
<div class="space-y-1">
<div class="flex items-center gap-2.5">
<p class="font-medium tracking-tight">{{ $passkey['name'] }}</p>
@if ($passkey['authenticator'])
<flux:badge size="sm">{{ $passkey['authenticator'] }}</flux:badge>
<x-ts-badge :text="$passkey['authenticator']" color="gray" light />
@endif
</div>
<p class="text-zinc-500 dark:text-zinc-400 text-xs">
<p class="text-xs text-gray-500 dark:text-dark-300">
{{ __('Added :time', ['time' => $passkey['created_at_diff']]) }}
@if ($passkey['last_used_at_diff'])
<span class="opacity-50 mx-1">/</span>
<span class="mx-1 opacity-50">/</span>
{{ __('Last used :time', ['time' => $passkey['last_used_at_diff']]) }}
@endif
</p>
</div>
</div>
<flux:button
variant="ghost"
size="sm"
icon="trash"
icon:variant="outline"
wire:click="confirmDelete({{ $passkey['id'] }})"
class="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/50"
/>
<x-ts-button.circle icon="trash"
color="red"
flat
wire:click="confirmDelete({{ $passkey['id'] }})" />
</div>
@empty
<div class="p-8 text-center">
<div class="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-zinc-100 dark:bg-zinc-800">
<flux:icon.key class="size-7 text-zinc-400 dark:text-zinc-500" />
<div class="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-gray-100 dark:bg-dark-700">
<x-ts-icon name="key" lg class="text-gray-400 dark:text-dark-400" />
</div>
<p class="font-medium">{{ __('No passkeys yet') }}</p>
<flux:text class="mt-1">{{ __('Add a passkey to sign in without a password') }}</flux:text>
<p class="mt-1 text-gray-500 dark:text-dark-300">{{ __('Add a passkey to sign in without a password') }}</p>
</div>
@endforelse
</div>
@@ -294,34 +199,20 @@
@endif
</x-settings.layout>
<flux:modal
name="delete-passkey-modal"
class="max-w-md md:min-w-md"
@close="closeDeleteModal"
wire:model="showDeleteModal"
>
<div class="space-y-6">
<div class="space-y-2">
<flux:heading size="lg">{{ __('Remove passkey') }}</flux:heading>
<flux:text>
{{ __('Are you sure you want to remove the passkey ":name"? You will no longer be able to use it to sign in.', ['name' => $deletingPasskeyName]) }}
</flux:text>
</div>
<x-ts-modal wire="showDeleteModal" size="md" center :title="__('Remove passkey')" x-on:close="$wire.closeDeleteModal()">
<p class="text-sm text-gray-600 dark:text-dark-300">
{{ __('Are you sure you want to remove the passkey ":name"? You will no longer be able to use it to sign in.', ['name' => $deletingPasskeyName]) }}
</p>
<div class="flex gap-3 justify-end">
<flux:button
variant="outline"
wire:click="closeDeleteModal"
>
<x-slot:footer>
<div class="flex justify-end gap-3">
<x-ts-button outline wire:click="closeDeleteModal">
{{ __('Cancel') }}
</flux:button>
<flux:button
variant="danger"
wire:click="deletePasskey"
>
</x-ts-button>
<x-ts-button color="red" wire:click="deletePasskey" loading="deletePasskey">
{{ __('Remove passkey') }}
</flux:button>
</x-ts-button>
</div>
</div>
</flux:modal>
</x-slot:footer>
</x-ts-modal>
</section>
@@ -1,87 +1,69 @@
<div
class="py-6 space-y-6 border shadow-sm rounded-xl border-zinc-200 dark:border-white/10"
wire:cloak
x-data="{ showRecoveryCodes: false }"
>
<div class="px-6 space-y-2">
<div class="space-y-6 rounded-xl border border-gray-200 py-6 shadow-sm dark:border-dark-600"
wire:cloak
x-data="{ showRecoveryCodes: false }">
<div class="space-y-2 px-6">
<div class="flex items-center gap-2">
<flux:icon.lock-closed variant="outline" class="size-4"/>
<flux:heading size="lg" level="3">{{ __('2FA recovery codes') }}</flux:heading>
<x-ts-icon name="lock-closed" sm />
<x-heading level="3" size="lg">{{ __('2FA recovery codes') }}</x-heading>
</div>
<flux:text variant="subtle">
<x-subheading>
{{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
</flux:text>
</x-subheading>
</div>
<div class="px-6">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<flux:button
x-show="!showRecoveryCodes"
icon="eye"
icon:variant="outline"
variant="primary"
@click="showRecoveryCodes = true;"
aria-expanded="false"
aria-controls="recovery-codes-section"
>
<x-ts-button x-show="!showRecoveryCodes"
icon="eye"
x-on:click="showRecoveryCodes = true"
aria-expanded="false"
aria-controls="recovery-codes-section">
{{ __('View recovery codes') }}
</flux:button>
</x-ts-button>
<flux:button
x-show="showRecoveryCodes"
icon="eye-slash"
icon:variant="outline"
variant="primary"
@click="showRecoveryCodes = false"
aria-expanded="true"
aria-controls="recovery-codes-section"
>
<x-ts-button x-show="showRecoveryCodes"
icon="eye-slash"
x-on:click="showRecoveryCodes = false"
aria-expanded="true"
aria-controls="recovery-codes-section">
{{ __('Hide recovery codes') }}
</flux:button>
</x-ts-button>
@if (filled($recoveryCodes))
<flux:button
x-show="showRecoveryCodes"
icon="arrow-path"
variant="filled"
wire:click="regenerateRecoveryCodes"
>
<x-ts-button x-show="showRecoveryCodes"
icon="arrow-path"
color="secondary"
outline
wire:click="regenerateRecoveryCodes"
loading="regenerateRecoveryCodes">
{{ __('Regenerate codes') }}
</flux:button>
</x-ts-button>
@endif
</div>
<div
x-show="showRecoveryCodes"
x-transition
id="recovery-codes-section"
class="relative overflow-hidden"
x-bind:aria-hidden="!showRecoveryCodes"
>
<div x-show="showRecoveryCodes"
x-transition
id="recovery-codes-section"
class="relative overflow-hidden"
x-bind:aria-hidden="!showRecoveryCodes">
<div class="mt-3 space-y-3">
@error('recoveryCodes')
<flux:callout variant="danger" icon="x-circle" heading="{{$message}}"/>
<x-ts-alert color="red" icon="x-circle" :text="$message" />
@enderror
@if (filled($recoveryCodes))
<div
class="grid gap-1 p-4 font-mono text-sm rounded-lg bg-zinc-100 dark:bg-white/5"
role="list"
aria-label="{{ __('Recovery codes') }}"
>
@foreach($recoveryCodes as $code)
<div
role="listitem"
class="select-text"
wire:loading.class="opacity-50 animate-pulse"
>
<div class="grid gap-1 rounded-lg bg-gray-100 p-4 font-mono text-sm dark:bg-dark-700"
role="list"
aria-label="{{ __('Recovery codes') }}">
@foreach ($recoveryCodes as $code)
<div role="listitem" class="select-text" wire:loading.class="opacity-50 animate-pulse">
{{ $code }}
</div>
@endforeach
</div>
<flux:text variant="subtle" class="text-xs">
<p class="text-xs text-gray-500 dark:text-dark-300">
{{ __('Each recovery code can be used once to access your account and will be removed after use. If you need more, click Regenerate codes above.') }}
</flux:text>
</p>
@endif
</div>
</div>