d63489ea33
- Replaced deprecated `flux` components with `maryUI` counterparts (`flux:input` → `x-mary-input`, `flux:button` → `x-mary-button`, etc.). - Removed unused partials (`settings-heading.blade.php`) and outdated structures from Blade files. - Adjusted Livewire modal, form, and button implementations for consistency with `maryUI`. - Streamlined layout and theme styling for improved maintainability and readability.
88 lines
3.4 KiB
PHP
88 lines
3.4 KiB
PHP
<x-shared.card
|
|
title="{{ __('Recovery codes') }}"
|
|
icon="lucide-key"
|
|
wire:cloak
|
|
x-data="{ showRecoveryCodes: false }"
|
|
>
|
|
<div class="p-4">
|
|
|
|
<div class="space-y-2">
|
|
<p class="text-sm text-gray-400">
|
|
{{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<x-mary-button
|
|
class="btn-neutral"
|
|
x-show="!showRecoveryCodes"
|
|
icon="lucide.eye"
|
|
@click="showRecoveryCodes = true;"
|
|
aria-expanded="false"
|
|
aria-controls="recovery-codes-section"
|
|
>
|
|
{{ __('View recovery codes') }}
|
|
</x-mary-button>
|
|
|
|
<x-mary-button
|
|
class="btn-neutral"
|
|
x-show="showRecoveryCodes"
|
|
icon="lucide.eye-closed"
|
|
@click="showRecoveryCodes = false"
|
|
aria-expanded="true"
|
|
aria-controls="recovery-codes-section"
|
|
>
|
|
{{ __('Hide recovery codes') }}
|
|
</x-mary-button>
|
|
|
|
@if (filled($recoveryCodes))
|
|
<x-mary-button
|
|
x-show="showRecoveryCodes"
|
|
icon="lucide.refresh-cw"
|
|
class="btn-primary"
|
|
wire:click="regenerateRecoveryCodes"
|
|
>
|
|
{{ __('Regenerate codes') }}
|
|
</x-mary-button>
|
|
@endif
|
|
</div>
|
|
|
|
<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')
|
|
<x-mary-alert class="alert-error" icon="lucide.x" title="{{$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"
|
|
>
|
|
{{ $code }}
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<p class="text-xs text-gray-400">
|
|
{{ __('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.') }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-shared.card>
|