Andreas Reinhold / reiniandClaude Opus 5
a88a052d9a
Livewire Material 2.0.0 aligns every component with Material 3 Expressive and carries no Tailwind anywhere, so SealShare drops tailwindcss and its Vite plugin and writes its views in the package's vocabulary: layout components (<x-pane>, <x-stack>, <x-row>, <x-grid>, <x-form>) with M3's spacing tokens, the md-type-*/md-ink-* text classes, and --md-sys-* tokens in its own small stylesheet. - resources/css/app.css opens with the package's layer order, imports foundation.css and the stylesheet of each component the views render, then the scheme, regenerated with the 2025 colour rules at M3's three contrast levels. The app's own rules follow, one section per view, on tokens and on M3's breakpoints (600/840/1200/1600px) only. - Every view is rewritten in that vocabulary while SealShare keeps the shape it had: the admin table, the admin settings, the recovery codes, the share options and the download page are cards, and their fields fill them rather than stopping at the 40rem bound a card already bounds. The user settings pages became cards too, to match the admin's, each with the sections that stand apart from its one subject — deleting the account, the recovery codes — in a card beside it. Material 3 decides how a component behaves, not whether a container survives: buttons keep their label's width, a form's actions end it, and each heading level keeps one type role. - The layouts clear the floating toolbar by the --material-bottom-toolbar the package publishes, and the snackbar clears it by itself. - The two-factor setup QR code comes from QrCodeService, so it keeps a white field and quiet zone in the dark theme and still scans. - Browse Files is a real button that opens the file input, reachable and visibly focused from the keyboard. - Tests: the design test scans views, JS, CSS and app/ and checks the CSS entry both ways (no missing, no unused import). New Chromium suites cover the frame, settings and admin, the share flow, and every page at M3's breakpoint edges (599/600, 839/840, 1199/1200, 1600px). The package's renamed data-md-* hooks replace the 1.x ones. - Boost's update brings the material-3 guideline and skill and drops the Tailwind skill. composer.json requires nonameweb/livewire-material ^2.0 from the Gitea repository, resolved at the 2.0.0 tag. The CHANGELOG records the move as 2.1.0. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
96 lines
3.8 KiB
PHP
96 lines
3.8 KiB
PHP
<?php
|
|
|
|
use Laravel\Fortify\Actions\GenerateNewRecoveryCodes;
|
|
use Livewire\Attributes\Locked;
|
|
use Livewire\Component;
|
|
|
|
new class extends Component {
|
|
#[Locked]
|
|
public array $recoveryCodes = [];
|
|
|
|
/**
|
|
* Mount the component.
|
|
*/
|
|
public function mount(): void
|
|
{
|
|
$this->loadRecoveryCodes();
|
|
}
|
|
|
|
/**
|
|
* Generate new recovery codes for the user.
|
|
*/
|
|
public function regenerateRecoveryCodes(GenerateNewRecoveryCodes $generateNewRecoveryCodes): void
|
|
{
|
|
$generateNewRecoveryCodes(auth()->user());
|
|
|
|
$this->loadRecoveryCodes();
|
|
}
|
|
|
|
/**
|
|
* Load the recovery codes for the user.
|
|
*/
|
|
private function loadRecoveryCodes(): void
|
|
{
|
|
$user = auth()->user();
|
|
|
|
if ($user->hasEnabledTwoFactorAuthentication() && $user->two_factor_recovery_codes) {
|
|
try {
|
|
$this->recoveryCodes = json_decode(decrypt($user->two_factor_recovery_codes), true);
|
|
} catch (Exception) {
|
|
$this->addError('recoveryCodes', 'Failed to load recovery codes');
|
|
|
|
$this->recoveryCodes = [];
|
|
}
|
|
}
|
|
}
|
|
}; ?>
|
|
|
|
{{--
|
|
Recovery codes are one more group within the two-factor settings page's single subject, not
|
|
content about a subject of their own: a heading and this stack's own spacing give the
|
|
hierarchy an outlined card would (M3 § Cards: "Don't force content into cards when simple
|
|
spacing, headlines and dividers would give a clearer hierarchy"). The enclosing page places
|
|
a divider on each side instead.
|
|
--}}
|
|
<x-card variant="outlined" wire:cloak x-data="{ showRecoveryCodes: false }">
|
|
<x-stack gap="space200">
|
|
<x-stack gap="space50">
|
|
<x-row gap="space100">
|
|
<x-icon name="lock" size="20" class="md-ink-variant" />
|
|
<h2 class="md-type-title-md">{{ __('2FA Recovery Codes') }}</h2>
|
|
</x-row>
|
|
<p class="md-type-body-md md-ink-variant">
|
|
{{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
|
|
</p>
|
|
</x-stack>
|
|
|
|
<x-row gap="space100" wrap>
|
|
<x-button icon="visibility" :label="__('View Recovery Codes')" variant="tonal" x-show="! showRecoveryCodes" x-on:click="showRecoveryCodes = true" />
|
|
<x-button icon="visibility_off" :label="__('Hide Recovery Codes')" variant="tonal" x-show="showRecoveryCodes" x-cloak x-on:click="showRecoveryCodes = false" />
|
|
|
|
@if (filled($recoveryCodes))
|
|
<x-button icon="refresh" :label="__('Regenerate Codes')" variant="outlined" x-show="showRecoveryCodes" x-cloak wire:click="regenerateRecoveryCodes" />
|
|
@endif
|
|
</x-row>
|
|
|
|
<x-stack gap="space100" x-show="showRecoveryCodes" x-cloak id="recovery-codes-section">
|
|
@error('recoveryCodes')
|
|
<x-alert color="error">{{ $message }}</x-alert>
|
|
@enderror
|
|
|
|
@if (filled($recoveryCodes))
|
|
<x-surface level="surface-container-highest" padding="space200" corner="md" class="md-type-body-md" role="list" :aria-label="__('Recovery codes')">
|
|
<x-stack gap="space50">
|
|
@foreach ($recoveryCodes as $code)
|
|
<code role="listitem" class="settings-recovery-code" wire:loading.class="settings-recovery-code--loading">{{ $code }}</code>
|
|
@endforeach
|
|
</x-stack>
|
|
</x-surface>
|
|
<p class="md-type-body-sm md-ink-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
|
|
</x-stack>
|
|
</x-stack>
|
|
</x-card>
|