noNameWEB/SealShare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Move onto Livewire Material 2.0.0 and leave Tailwind behind

Browse Source 
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>
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 22:30:51 +02:00
co-authored by Claude Opus 5
parent 461bc23f0a
commit a88a052d9a
48 changed files with 8311 additions and 2078 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/pages/auth/confirm-password.blade.php
+5 -3
View File
@@ -6,7 +6,7 @@
<x-auth-session-status :status="session('status')" />
<form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-5">
<x-form method="POST" action="{{ route('password.confirm.store') }}">
@csrf
<x-password
@@ -17,6 +17,8 @@
autocomplete="current-password"
/>
<x-button type="submit" :label="__('Confirm')" variant="filled" class="w-full" data-test="confirm-password-button" />
</form>
<x-slot:actions>
<x-button type="submit" :label="__('Confirm')" variant="filled" data-test="confirm-password-button" />
</x-slot:actions>
</x-form>
</x-layouts::auth>
resources/views/pages/auth/forgot-password.blade.php
+7 -5
View File
@@ -3,7 +3,7 @@
<x-auth-session-status :status="session('status')" />
<form method="POST" action="{{ route('password.email') }}" class="flex flex-col gap-5">
<x-form method="POST" action="{{ route('password.email') }}">
@csrf
<x-input
@@ -17,11 +17,13 @@
icon="mail"
/>
<x-button type="submit" :label="__('Email password reset link')" variant="filled" class="w-full" data-test="email-password-reset-link-button" />
</form>
<x-slot:actions>
<x-button type="submit" :label="__('Email password reset link')" variant="filled" data-test="email-password-reset-link-button" />
</x-slot:actions>
</x-form>
<p class="text-center type-body-md text-on-surface-variant">
<p class="md-type-body-md md-ink-variant md-text-center">
{{ __('Or, return to') }}
<a href="{{ route('login') }}" class="link" wire:navigate>{{ __('log in') }}</a>
<a href="{{ route('login') }}" class="md-link" wire:navigate>{{ __('log in') }}</a>
</p>
</x-layouts::auth>
resources/views/pages/auth/login.blade.php
+12 -8
View File
@@ -3,7 +3,7 @@
<x-auth-session-status :status="session('status')" />
<form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-5">
<x-form method="POST" action="{{ route('login.store') }}">
@csrf
<x-input
@@ -18,7 +18,7 @@
icon="mail"
/>
<div class="grid gap-1">
<x-stack gap="space50">
<x-password
name="password"
:label="__('Password')"
@@ -27,14 +27,18 @@
/>
@if (Route::has('password.request'))
<a class="link w-fit justify-self-end type-label-lg" href="{{ route('password.request') }}" wire:navigate>
{{ __('Forgot your password?') }}
</a>
<x-row justify="end">
<a class="md-link md-type-label-lg" href="{{ route('password.request') }}" wire:navigate>
{{ __('Forgot your password?') }}
</a>
</x-row>
@endif
</div>
</x-stack>
<x-checkbox name="remember" :label="__('Remember me')" :checked="(bool) old('remember')" />
<x-button type="submit" :label="__('Log in')" variant="filled" class="w-full" data-test="login-button" />
</form>
<x-slot:actions>
<x-button type="submit" :label="__('Log in')" variant="filled" data-test="login-button" />
</x-slot:actions>
</x-form>
</x-layouts::auth>
resources/views/pages/auth/reset-password.blade.php
+5 -3
View File
@@ -3,7 +3,7 @@
<x-auth-session-status :status="session('status')" />
<form method="POST" action="{{ route('password.update') }}" class="flex flex-col gap-5">
<x-form method="POST" action="{{ route('password.update') }}">
@csrf
<input type="hidden" name="token" value="{{ request()->route('token') }}">
@@ -31,6 +31,8 @@
autocomplete="new-password"
/>
<x-button type="submit" :label="__('Reset password')" variant="filled" class="w-full" data-test="reset-password-button" />
</form>
<x-slot:actions>
<x-button type="submit" :label="__('Reset password')" variant="filled" data-test="reset-password-button" />
</x-slot:actions>
</x-form>
</x-layouts::auth>
resources/views/pages/auth/two-factor-challenge.blade.php
+12 -10
View File
@@ -1,8 +1,8 @@
<x-layouts::auth :title="__('Two-factor authentication')">
<div
class="flex flex-col gap-6"
<x-stack
gap="space300"
x-data="{
showRecoveryInput: @js($errors->has('recovery_code')),
showRecoveryInput: {{ \Illuminate\Support\Js::from($errors->has('recovery_code')) }},
toggleInput() {
this.showRecoveryInput = ! this.showRecoveryInput;
$nextTick(() => {
@@ -27,7 +27,7 @@
/>
</div>
<form method="POST" action="{{ route('two-factor.login.store') }}" class="flex flex-col gap-5">
<x-form method="POST" action="{{ route('two-factor.login.store') }}">
@csrf
<div x-ref="code" x-show="! showRecoveryInput">
@@ -53,13 +53,15 @@
/>
</div>
<x-button type="submit" :label="__('Continue')" variant="filled" class="w-full" />
</form>
<x-slot:actions>
<x-button type="submit" :label="__('Continue')" variant="filled" />
</x-slot:actions>
</x-form>
<p class="text-center type-body-md text-on-surface-variant">
<p class="md-type-body-md md-ink-variant md-text-center">
{{ __('or you can') }}
<button type="button" class="link" x-show="! showRecoveryInput" x-on:click="toggleInput()">{{ __('login using a recovery code') }}</button>
<button type="button" class="link" x-show="showRecoveryInput" x-cloak x-on:click="toggleInput()">{{ __('login using an authentication code') }}</button>
<button type="button" class="md-link" x-show="! showRecoveryInput" x-on:click="toggleInput()">{{ __('login using a recovery code') }}</button>
<button type="button" class="md-link" x-show="showRecoveryInput" x-cloak x-on:click="toggleInput()">{{ __('login using an authentication code') }}</button>
</p>
</div>
</x-stack>
</x-layouts::auth>
resources/views/pages/auth/verify-email.blade.php
+11 -7
View File
@@ -10,15 +10,19 @@
</x-alert>
@endif
<div class="flex flex-col items-stretch gap-3">
<form method="POST" action="{{ route('verification.send') }}">
<x-stack gap="space100">
<x-form method="POST" action="{{ route('verification.send') }}">
@csrf
<x-button type="submit" :label="__('Resend verification email')" variant="filled" class="w-full" />
</form>
<x-slot:actions>
<x-button type="submit" :label="__('Resend verification email')" variant="filled" />
</x-slot:actions>
</x-form>
<form method="POST" action="{{ route('logout') }}" class="self-center">
{{-- Log out posts elsewhere, so it is a form of its own; it sits under Resend at the same end
edge, the page's two actions end-aligned below its content. --}}
<x-row as="form" justify="end" method="POST" action="{{ route('logout') }}">
@csrf
<x-button type="submit" :label="__('Log out')" data-test="logout-button" />
</form>
</div>
</x-row>
</x-stack>
</x-layouts::auth>
resources/views/pages/settings/layout.blade.php
+11 -9
View File
@@ -11,15 +11,17 @@
$items[] = ['title' => __('Appearance'), 'icon' => 'contrast', 'url' => route('appearance.edit'), 'active' => request()->routeIs('appearance.edit')];
@endphp
<div class="w-full">
<x-stack gap="space400">
<x-section-nav :items="$items" :label="__('Settings')" />
<div class="mt-8">
<h2 class="type-title-lg">{{ $heading ?? '' }}</h2>
<p class="mt-1 type-body-md text-on-surface-variant">{{ $subheading ?? '' }}</p>
<div class="mt-6 w-full max-w-lg">
{{-- Every settings page is a card headed by its own title, as the admin's settings are. A page
with a section that stands apart from that one subject — deleting the account, the recovery
codes — puts it in `after`, where it becomes a card of its own beside this one. --}}
<x-stack gap="space300" class="settings-column">
<x-card :title="$heading ?? ''" :subtitle="$subheading ?? ''" heading="h2" variant="outlined">
{{ $slot }}
</div>
</div>
</div>
</x-card>
{{ $after ?? '' }}
</x-stack>
</x-stack>
resources/views/pages/settings/two-factor/⚡recovery-codes.blade.php
+31 -28
View File
@@ -45,48 +45,51 @@ new class extends Component {
}
}; ?>
{{--
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 }">
<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">
<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>
</div>
</x-stack>
<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>
<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))
<span x-show="showRecoveryCodes" x-cloak class="inline-flex">
<x-button icon="refresh" :label="__('Regenerate Codes')" variant="outlined" wire:click="regenerateRecoveryCodes" />
</span>
<x-button icon="refresh" :label="__('Regenerate Codes')" variant="outlined" x-show="showRecoveryCodes" x-cloak wire:click="regenerateRecoveryCodes" />
@endif
</div>
</x-row>
<div x-show="showRecoveryCodes" x-cloak id="recovery-codes-section" class="grid gap-3">
<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))
<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">
<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
</div>
</div>
</x-stack>
</x-stack>
</x-card>
resources/views/pages/settings/⚡appearance.blade.php
+2 -2
View File
@@ -6,10 +6,10 @@ new class extends Component {
//
}; ?>
<section class="w-full">
<section>
@include('partials.settings-heading')
<x-pages::settings.layout :heading="__('Appearance')" :subheading="__('Update the appearance settings for your account')">
<x-theme-toggle mode="picker" class="w-full max-w-sm" data-test="appearance-picker" />
<x-theme-toggle mode="picker" class="settings-appearance-picker" data-test="appearance-picker" />
</x-pages::settings.layout>
</section>
resources/views/pages/settings/⚡delete-user-form.blade.php
+11 -18
View File
@@ -26,30 +26,23 @@ new class extends Component {
}
}; ?>
<section class="mt-12 grid gap-4">
<x-divider />
<div>
<h3 class="type-title-md">{{ __('Delete account') }}</h3>
<p class="mt-1 type-body-md text-on-surface-variant">{{ __('Delete your account and all of its resources') }}</p>
</div>
<div>
<x-button :label="__('Delete account')" danger icon="delete" wire:click="$set('showDeleteModal', true)" data-test="delete-user-button" />
</div>
<x-card :title="__('Delete account')" :subtitle="__('Delete your account and all of its resources')" heading="h2" variant="outlined">
<x-button :label="__('Delete account')" danger icon="delete" wire:click="$set('showDeleteModal', true)" data-test="delete-user-button" />
<x-modal wire:model="showDeleteModal" :title="__('Are you sure you want to delete your account?')" icon="delete">
<p>
{{ __('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>
<x-stack gap="space200">
<p>
{{ __('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>
<form id="delete-user-form" wire:submit="deleteUser" class="mt-4">
<x-password wire:model="password" :label="__('Password')" autocomplete="current-password" />
</form>
<x-form id="delete-user-form" wire:submit="deleteUser">
<x-password wire:model="password" :label="__('Password')" autocomplete="current-password" />
</x-form>
</x-stack>
<x-slot:actions>
<x-button :label="__('Cancel')" x-on:click="close()" />
<x-button type="submit" form="delete-user-form" :label="__('Delete account')" danger data-test="confirm-delete-user-button" />
</x-slot:actions>
</x-modal>
</section>
</x-card>
resources/views/pages/settings/⚡password.blade.php
+8 -8
View File
@@ -43,18 +43,18 @@ new class extends Component {
}
}; ?>
<section class="w-full">
<section>
@include('partials.settings-heading')
<x-pages::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="grid gap-5">
<x-password wire:model="current_password" :label="__('Current password')" required autocomplete="current-password" />
<x-password wire:model="password" :label="__('New password')" required autocomplete="new-password" />
<x-password wire:model="password_confirmation" :label="__('Confirm Password')" required autocomplete="new-password" />
<x-form method="POST" wire:submit="updatePassword">
<x-password full wire:model="current_password" :label="__('Current password')" required autocomplete="current-password" />
<x-password full wire:model="password" :label="__('New password')" required autocomplete="new-password" />
<x-password full wire:model="password_confirmation" :label="__('Confirm Password')" required autocomplete="new-password" />
<div>
<x-slot:actions>
<x-button type="submit" :label="__('Save')" variant="filled" spinner="updatePassword" data-test="update-password-button" />
</div>
</form>
</x-slot:actions>
</x-form>
</x-pages::settings.layout>
</section>
resources/views/pages/settings/⚡profile.blade.php
+16 -14
View File
@@ -80,21 +80,21 @@ new class extends Component {
}
}; ?>
<section class="w-full">
<section>
@include('partials.settings-heading')
<x-pages::settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
<form wire:submit="updateProfileInformation" class="grid w-full gap-5">
<x-input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" icon="person" />
<x-form wire:submit="updateProfileInformation">
<x-input full wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" icon="person" />
<div class="grid gap-3">
<x-input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" icon="mail" />
<x-stack gap="space100">
<x-input full wire:model="email" :label="__('Email')" type="email" required autocomplete="email" icon="mail" />
@if ($this->hasUnverifiedEmail)
<p class="type-body-md text-on-surface-variant">
<p class="md-type-body-md md-ink-variant">
{{ __('Your email address is unverified.') }}
<button type="button" class="link" wire:click.prevent="resendVerificationNotification">
<button type="button" class="md-link" wire:click.prevent="resendVerificationNotification">
{{ __('Click here to re-send the verification email.') }}
</button>
</p>
@@ -103,15 +103,17 @@ new class extends Component {
<x-alert color="success">{{ __('A new verification link has been sent to your email address.') }}</x-alert>
@endif
@endif
</div>
</x-stack>
<div>
<x-slot:actions>
<x-button type="submit" :label="__('Save')" variant="filled" spinner="updateProfileInformation" data-test="update-profile-button" />
</div>
</form>
</x-slot:actions>
</x-form>
@if ($this->showDeleteUser)
<livewire:pages::settings.delete-user-form />
@endif
<x-slot:after>
@if ($this->showDeleteUser)
<livewire:pages::settings.delete-user-form />
@endif
</x-slot:after>
</x-pages::settings.layout>
</section>
resources/views/pages/settings/⚡two-factor.blade.php
+46 -42
View File
@@ -1,5 +1,6 @@
<?php
use App\Services\QrCodeService;
use Laravel\Fortify\Actions\ConfirmTwoFactorAuthentication;
use Laravel\Fortify\Actions\DisableTwoFactorAuthentication;
use Laravel\Fortify\Actions\EnableTwoFactorAuthentication;
@@ -69,7 +70,7 @@ new class extends Component {
$user = auth()->user();
try {
$this->qrCodeSvg = $user?->twoFactorQrCodeSvg();
$this->qrCodeSvg = app(QrCodeService::class)->svg($user?->twoFactorQrCodeUrl());
$this->manualSetupKey = decrypt($user->two_factor_secret);
} catch (Exception) {
$this->addError('setupData', 'Failed to fetch setup data.');
@@ -177,82 +178,85 @@ new class extends Component {
}
} ?>
<section class="w-full">
<section>
@include('partials.settings-heading')
<x-pages::settings.layout
:heading="__('Two Factor Authentication')"
:subheading="__('Manage your two-factor authentication settings')"
>
<div class="grid w-full gap-6" wire:cloak>
<x-stack gap="space300" wire:cloak>
@if ($twoFactorEnabled)
<div class="grid justify-items-start gap-4">
<x-stack gap="space200" align="start">
<x-badge :value="__('Enabled')" tonal color="success" />
<p class="type-body-md text-on-surface-variant">
<p class="md-type-body-md md-ink-variant">
{{ __('With two-factor authentication enabled, you will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.') }}
</p>
</div>
<livewire:pages::settings.two-factor.recovery-codes :$requiresConfirmation />
<div>
<x-button :label="__('Disable 2FA')" icon="remove_moderator" danger wire:click="disable" />
</div>
</x-stack>
@else
<div class="grid justify-items-start gap-4">
<x-stack gap="space200" align="start">
<x-badge :value="__('Disabled')" tonal color="error" />
<p class="type-body-md text-on-surface-variant">
<p class="md-type-body-md md-ink-variant">
{{ __('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.') }}
</p>
<x-button :label="__('Enable 2FA')" icon="shield_lock" variant="filled" wire:click="enable" />
</div>
</x-stack>
@endif
</div>
</x-stack>
{{-- The recovery codes are their own subject, so they are their own card beside this one. --}}
<x-slot:after>
@if ($twoFactorEnabled)
<livewire:pages::settings.two-factor.recovery-codes :$requiresConfirmation />
@endif
</x-slot:after>
</x-pages::settings.layout>
<x-modal wire:model="showModal" :title="$this->modalConfig['title']" :subtitle="$this->modalConfig['description']" fullscreen>
@if ($showVerificationStep)
<div class="mt-2">
<x-input
name="code"
wire:model="code"
:label="__('Code')"
inputmode="numeric"
autocomplete="one-time-code"
maxlength="6"
mono
autofocus
/>
</div>
<x-input
name="code"
wire:model="code"
:label="__('Code')"
inputmode="numeric"
autocomplete="one-time-code"
maxlength="6"
mono
autofocus
/>
<x-slot:actions>
<x-button :label="__('Back')" wire:click="resetVerification" />
<x-button :label="__('Confirm')" variant="filled" wire:click="confirmTwoFactor" x-bind:disabled="$wire.code.length < 6" />
</x-slot:actions>
@else
@error('setupData')
<x-alert color="error" class="mt-2">{{ $message }}</x-alert>
@enderror
<x-stack gap="space300">
@error('setupData')
<x-alert color="error">{{ $message }}</x-alert>
@enderror
<div class="mt-2 flex justify-center">
{{-- The QR code keeps a white ground in both themes: scanners read dark on light. --}}
<div class="grid aspect-square w-64 place-items-center overflow-hidden rounded-corner-lg bg-white p-4">
@empty($qrCodeSvg)
<x-loading :label="__('Loading')" />
@else
{!! $qrCodeSvg !!}
@endempty
</div>
</div>
<x-row justify="center">
<div class="settings-two-factor-qr">
@empty($qrCodeSvg)
<x-loading :label="__('Loading')" />
@else
{!! $qrCodeSvg !!}
@endempty
</div>
</x-row>
<div class="mt-6 grid gap-3">
<p class="text-center type-label-lg text-on-surface-variant">{{ __('or, enter the code manually') }}</p>
<x-stack gap="space200">
<p class="md-type-label-lg md-ink-variant md-text-center">{{ __('or, enter the code manually') }}</p>
<x-input :label="__('Setup key')" :value="$manualSetupKey" readonly copyable mono />
</div>
<x-input :label="__('Setup key')" :value="$manualSetupKey" readonly copyable mono />
</x-stack>
</x-stack>
<x-slot:actions>
<x-button