Move SealShare onto Livewire Material
Replaces maryUI and daisyUI with nonameweb/livewire-material: the Vibrant indigo scheme, a system/light/dark theme under sealshare-theme, one top app bar with the account menu, the upload drop zone and link-ready moments, M3 fields, dialogs instead of wire:confirm, snackbars instead of flashed messages, a sortable admin table, and the starter-kit cleanup. Docker builds assets after Composer; CI drops the Flux step. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
6d7120e8e2
commit
c4a17b65c8
@@ -45,83 +45,48 @@ new class extends Component {
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div
|
||||
class="py-6 space-y-6 border shadow-sm rounded-xl border-base-300"
|
||||
wire:cloak
|
||||
x-data="{ showRecoveryCodes: false }"
|
||||
>
|
||||
<div class="px-6 space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-icon name="o-lock-closed" class="w-4 h-4" />
|
||||
<h3 class="text-lg font-semibold">{{ __('2FA Recovery Codes') }}</h3>
|
||||
<x-card variant="outlined" wire:cloak x-data="{ showRecoveryCodes: false }">
|
||||
<div class="grid gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<x-icon name="lock" class="size-5 text-on-surface-variant" />
|
||||
<h3 class="type-title-md">{{ __('2FA Recovery Codes') }}</h3>
|
||||
</div>
|
||||
<p class="mt-1 type-body-md text-on-surface-variant">
|
||||
{{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm opacity-60">
|
||||
{{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="px-6">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<x-button
|
||||
x-show="!showRecoveryCodes"
|
||||
icon="o-eye"
|
||||
label="{{ __('View Recovery Codes') }}"
|
||||
class="btn-primary btn-sm"
|
||||
@click="showRecoveryCodes = true;"
|
||||
/>
|
||||
|
||||
<x-button
|
||||
x-show="showRecoveryCodes"
|
||||
icon="o-eye-slash"
|
||||
label="{{ __('Hide Recovery Codes') }}"
|
||||
class="btn-primary btn-sm"
|
||||
@click="showRecoveryCodes = false"
|
||||
/>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span x-show="! showRecoveryCodes" class="inline-flex">
|
||||
<x-button icon="visibility" :label="__('View Recovery Codes')" variant="tonal" x-on:click="showRecoveryCodes = true" />
|
||||
</span>
|
||||
<span x-show="showRecoveryCodes" x-cloak class="inline-flex">
|
||||
<x-button icon="visibility_off" :label="__('Hide Recovery Codes')" variant="tonal" x-on:click="showRecoveryCodes = false" />
|
||||
</span>
|
||||
|
||||
@if (filled($recoveryCodes))
|
||||
<x-button
|
||||
x-show="showRecoveryCodes"
|
||||
icon="o-arrow-path"
|
||||
label="{{ __('Regenerate Codes') }}"
|
||||
class="btn-sm"
|
||||
wire:click="regenerateRecoveryCodes"
|
||||
/>
|
||||
<span x-show="showRecoveryCodes" x-cloak class="inline-flex">
|
||||
<x-button icon="refresh" :label="__('Regenerate Codes')" variant="outlined" wire:click="regenerateRecoveryCodes" />
|
||||
</span>
|
||||
@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')
|
||||
<div class="alert alert-error">{{ $message }}</div>
|
||||
@enderror
|
||||
<div x-show="showRecoveryCodes" x-cloak id="recovery-codes-section" class="grid gap-3">
|
||||
@error('recoveryCodes')
|
||||
<x-alert color="error">{{ $message }}</x-alert>
|
||||
@enderror
|
||||
|
||||
@if (filled($recoveryCodes))
|
||||
<div
|
||||
class="grid gap-1 p-4 font-mono text-sm rounded-lg bg-base-200"
|
||||
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 opacity-60">
|
||||
{{ __('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>
|
||||
@if (filled($recoveryCodes))
|
||||
<div class="grid gap-1 rounded-corner-md bg-surface-container-highest p-4 font-mono type-body-md" role="list" aria-label="{{ __('Recovery codes') }}">
|
||||
@foreach ($recoveryCodes as $code)
|
||||
<div role="listitem" class="select-text" wire:loading.class="animate-pulse opacity-50">{{ $code }}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<p class="type-body-sm text-on-surface-variant">
|
||||
{{ __('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>
|
||||
</x-card>
|
||||
|
||||
Reference in New Issue
Block a user