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
@@ -1,22 +1,24 @@
|
||||
<div class="flex items-start max-md:flex-col">
|
||||
<div class="me-10 w-full pb-4 md:w-[220px]">
|
||||
<x-menu class="!p-0">
|
||||
<x-menu-item title="{{ __('Profile') }}" link="{{ route('profile.edit') }}" wire:navigate />
|
||||
<x-menu-item title="{{ __('Password') }}" link="{{ route('user-password.edit') }}" wire:navigate />
|
||||
@if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
|
||||
<x-menu-item title="{{ __('Two-Factor Auth') }}" link="{{ route('two-factor.show') }}" wire:navigate />
|
||||
@endif
|
||||
<x-menu-item title="{{ __('Appearance') }}" link="{{ route('appearance.edit') }}" wire:navigate />
|
||||
</x-menu>
|
||||
</div>
|
||||
@php
|
||||
$items = [
|
||||
['title' => __('Profile'), 'icon' => 'person', 'url' => route('profile.edit'), 'active' => request()->routeIs('profile.edit')],
|
||||
['title' => __('Password'), 'icon' => 'password', 'url' => route('user-password.edit'), 'active' => request()->routeIs('user-password.edit')],
|
||||
];
|
||||
|
||||
<div class="divider md:hidden"></div>
|
||||
if (Laravel\Fortify\Features::canManageTwoFactorAuthentication()) {
|
||||
$items[] = ['title' => __('Two-Factor Auth'), 'icon' => 'shield_lock', 'url' => route('two-factor.show'), 'active' => request()->routeIs('two-factor.show')];
|
||||
}
|
||||
|
||||
<div class="flex-1 self-stretch max-md:pt-6">
|
||||
<h2 class="text-lg font-semibold">{{ $heading ?? '' }}</h2>
|
||||
<p class="text-sm opacity-60">{{ $subheading ?? '' }}</p>
|
||||
$items[] = ['title' => __('Appearance'), 'icon' => 'contrast', 'url' => route('appearance.edit'), 'active' => request()->routeIs('appearance.edit')];
|
||||
@endphp
|
||||
|
||||
<div class="mt-5 w-full max-w-lg">
|
||||
<div class="w-full">
|
||||
<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">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -10,6 +10,6 @@ new class extends Component {
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<x-pages::settings.layout :heading="__('Appearance')" :subheading="__('Update the appearance settings for your account')">
|
||||
<x-theme-toggle />
|
||||
<x-theme-toggle mode="picker" class="w-full max-w-sm" data-test="appearance-picker" />
|
||||
</x-pages::settings.layout>
|
||||
</section>
|
||||
|
||||
@@ -26,31 +26,30 @@ new class extends Component {
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<section class="mt-10 space-y-6">
|
||||
<div class="relative mb-5">
|
||||
<h3 class="text-lg font-semibold">{{ __('Delete account') }}</h3>
|
||||
<p class="text-sm opacity-60">{{ __('Delete your account and all of its resources') }}</p>
|
||||
<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>
|
||||
|
||||
<x-button
|
||||
label="{{ __('Delete account') }}"
|
||||
class="btn-error"
|
||||
@click="$wire.showDeleteModal = true"
|
||||
data-test="delete-user-button"
|
||||
/>
|
||||
<div>
|
||||
<x-button :label="__('Delete account')" danger icon="delete" wire:click="$set('showDeleteModal', true)" data-test="delete-user-button" />
|
||||
</div>
|
||||
|
||||
<x-modal wire:model="showDeleteModal" title="{{ __('Are you sure you want to delete your account?') }}">
|
||||
<p class="text-sm opacity-70">
|
||||
<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>
|
||||
|
||||
<form wire:submit="deleteUser" class="space-y-6 mt-4">
|
||||
<x-password wire:model="password" label="{{ __('Password') }}" />
|
||||
|
||||
<x-slot:actions>
|
||||
<x-button label="{{ __('Cancel') }}" @click="$wire.showDeleteModal = false" />
|
||||
<x-button type="submit" label="{{ __('Delete account') }}" class="btn-error" data-test="confirm-delete-user-button" />
|
||||
</x-slot:actions>
|
||||
<form id="delete-user-form" wire:submit="deleteUser" class="mt-4">
|
||||
<x-password wire:model="password" :label="__('Password')" autocomplete="current-password" />
|
||||
</form>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -5,9 +5,11 @@ use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Validation\Rules\Password;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
use Livewire\Component;
|
||||
use NoNameWeb\LivewireMaterial\Concerns\Toasts;
|
||||
|
||||
new class extends Component {
|
||||
use PasswordValidationRules;
|
||||
use Toasts;
|
||||
|
||||
public string $current_password = '';
|
||||
public string $password = '';
|
||||
@@ -36,6 +38,8 @@ new class extends Component {
|
||||
$this->reset('current_password', 'password', 'password_confirmation');
|
||||
|
||||
$this->dispatch('password-updated');
|
||||
|
||||
$this->success(__('Saved.'));
|
||||
}
|
||||
}; ?>
|
||||
|
||||
@@ -43,34 +47,13 @@ new class extends Component {
|
||||
@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="mt-6 space-y-6">
|
||||
<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"
|
||||
/>
|
||||
<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" />
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center justify-end">
|
||||
<x-button type="submit" label="{{ __('Save') }}" class="btn-primary" spinner="updatePassword" data-test="update-password-button" />
|
||||
</div>
|
||||
|
||||
<x-action-message class="me-3" on="password-updated">
|
||||
{{ __('Saved.') }}
|
||||
</x-action-message>
|
||||
<div>
|
||||
<x-button type="submit" :label="__('Save')" variant="filled" spinner="updatePassword" data-test="update-password-button" />
|
||||
</div>
|
||||
</form>
|
||||
</x-pages::settings.layout>
|
||||
|
||||
@@ -8,9 +8,11 @@ use Illuminate\Support\Facades\Session;
|
||||
use Illuminate\Validation\Rule;
|
||||
use Livewire\Attributes\Computed;
|
||||
use Livewire\Component;
|
||||
use NoNameWeb\LivewireMaterial\Concerns\Toasts;
|
||||
|
||||
new class extends Component {
|
||||
use ProfileValidationRules;
|
||||
use Toasts;
|
||||
|
||||
public string $name = '';
|
||||
public string $email = '';
|
||||
@@ -42,6 +44,8 @@ new class extends Component {
|
||||
$user->save();
|
||||
|
||||
$this->dispatch('profile-updated', name: $user->name);
|
||||
|
||||
$this->success(__('Saved.'));
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -52,7 +56,7 @@ new class extends Component {
|
||||
$user = Auth::user();
|
||||
|
||||
if ($user->hasVerifiedEmail()) {
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false));
|
||||
$this->redirectIntended(default: route('admin.dashboard', absolute: false));
|
||||
|
||||
return;
|
||||
}
|
||||
@@ -80,39 +84,29 @@ new class extends Component {
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<x-pages::settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
|
||||
<form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
|
||||
<x-input wire:model="name" label="{{ __('Name') }}" type="text" required autofocus autocomplete="name" icon="o-user" />
|
||||
<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" />
|
||||
|
||||
<div>
|
||||
<x-input wire:model="email" label="{{ __('Email') }}" type="email" required autocomplete="email" icon="o-envelope" />
|
||||
<div class="grid gap-3">
|
||||
<x-input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" icon="mail" />
|
||||
|
||||
@if ($this->hasUnverifiedEmail)
|
||||
<div>
|
||||
<p class="mt-4 text-sm opacity-70">
|
||||
{{ __('Your email address is unverified.') }}
|
||||
<p class="type-body-md text-on-surface-variant">
|
||||
{{ __('Your email address is unverified.') }}
|
||||
|
||||
<a class="link link-primary text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification">
|
||||
{{ __('Click here to re-send the verification email.') }}
|
||||
</a>
|
||||
</p>
|
||||
<button type="button" class="link" wire:click.prevent="resendVerificationNotification">
|
||||
{{ __('Click here to re-send the verification email.') }}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
@if (session('status') === 'verification-link-sent')
|
||||
<p class="mt-2 text-sm font-medium text-success">
|
||||
{{ __('A new verification link has been sent to your email address.') }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
@if (session('status') === 'verification-link-sent')
|
||||
<x-alert color="success">{{ __('A new verification link has been sent to your email address.') }}</x-alert>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center justify-end">
|
||||
<x-button type="submit" label="{{ __('Save') }}" class="btn-primary" spinner="updateProfileInformation" data-test="update-profile-button" />
|
||||
</div>
|
||||
|
||||
<x-action-message class="me-3" on="profile-updated">
|
||||
{{ __('Saved.') }}
|
||||
</x-action-message>
|
||||
<div>
|
||||
<x-button type="submit" :label="__('Save')" variant="filled" spinner="updateProfileInformation" data-test="update-profile-button" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -184,142 +184,81 @@ new class extends Component {
|
||||
:heading="__('Two Factor Authentication')"
|
||||
:subheading="__('Manage your two-factor authentication settings')"
|
||||
>
|
||||
<div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
|
||||
<div class="grid w-full gap-6" wire:cloak>
|
||||
@if ($twoFactorEnabled)
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="badge badge-success">{{ __('Enabled') }}</span>
|
||||
</div>
|
||||
<div class="grid justify-items-start gap-4">
|
||||
<x-badge :value="__('Enabled')" tonal color="success" />
|
||||
|
||||
<p class="opacity-70">
|
||||
<p class="type-body-md text-on-surface-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 />
|
||||
<livewire:pages::settings.two-factor.recovery-codes :$requiresConfirmation />
|
||||
|
||||
<div class="flex justify-start">
|
||||
<x-button
|
||||
label="{{ __('Disable 2FA') }}"
|
||||
icon="o-shield-exclamation"
|
||||
class="btn-error"
|
||||
wire:click="disable"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<x-button :label="__('Disable 2FA')" icon="remove_moderator" danger wire:click="disable" />
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="badge badge-error">{{ __('Disabled') }}</span>
|
||||
</div>
|
||||
<div class="grid justify-items-start gap-4">
|
||||
<x-badge :value="__('Disabled')" tonal color="error" />
|
||||
|
||||
<p class="opacity-60">
|
||||
<p class="type-body-md text-on-surface-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="o-shield-check"
|
||||
class="btn-primary"
|
||||
wire:click="enable"
|
||||
/>
|
||||
<x-button :label="__('Enable 2FA')" icon="shield_lock" variant="filled" wire:click="enable" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-pages::settings.layout>
|
||||
|
||||
<x-modal wire:model="showModal" :title="$this->modalConfig['title']" class="max-w-md">
|
||||
<p class="text-sm opacity-70">{{ $this->modalConfig['description'] }}</p>
|
||||
|
||||
<x-modal wire:model="showModal" :title="$this->modalConfig['title']" :subtitle="$this->modalConfig['description']" fullscreen>
|
||||
@if ($showVerificationStep)
|
||||
<div class="space-y-6 mt-4">
|
||||
<div class="flex flex-col items-center space-y-3 justify-center">
|
||||
<x-input
|
||||
name="code"
|
||||
wire:model="code"
|
||||
placeholder="000000"
|
||||
class="text-center text-2xl tracking-widest"
|
||||
maxlength="6"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<x-slot:actions>
|
||||
<x-button
|
||||
label="{{ __('Back') }}"
|
||||
wire:click="resetVerification"
|
||||
/>
|
||||
<x-button
|
||||
label="{{ __('Confirm') }}"
|
||||
class="btn-primary"
|
||||
wire:click="confirmTwoFactor"
|
||||
x-bind:disabled="$wire.code.length < 6"
|
||||
/>
|
||||
</x-slot:actions>
|
||||
<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-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')
|
||||
<div class="alert alert-error mt-4">{{ $message }}</div>
|
||||
<x-alert color="error" class="mt-2">{{ $message }}</x-alert>
|
||||
@enderror
|
||||
|
||||
<div class="flex justify-center mt-4">
|
||||
<div class="relative w-64 overflow-hidden border rounded-lg border-base-300 aspect-square">
|
||||
<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)
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-base-200 animate-pulse">
|
||||
<span class="loading loading-spinner"></span>
|
||||
</div>
|
||||
<x-loading :label="__('Loading')" />
|
||||
@else
|
||||
<div class="flex items-center justify-center h-full p-4 bg-white">
|
||||
{!! $qrCodeSvg !!}
|
||||
</div>
|
||||
{!! $qrCodeSvg !!}
|
||||
@endempty
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 mt-4">
|
||||
<div class="relative flex items-center justify-center w-full">
|
||||
<div class="absolute inset-0 w-full h-px top-1/2 bg-base-300"></div>
|
||||
<span class="relative px-2 text-sm bg-base-100 opacity-60">
|
||||
{{ __('or, enter the code manually') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-6 grid gap-3">
|
||||
<p class="text-center type-label-lg text-on-surface-variant">{{ __('or, enter the code manually') }}</p>
|
||||
|
||||
<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="join w-full">
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
value="{{ $manualSetupKey }}"
|
||||
class="input input-bordered join-item w-full"
|
||||
/>
|
||||
<button
|
||||
@click="copy()"
|
||||
class="btn join-item"
|
||||
>
|
||||
<x-icon x-show="!copied" name="o-document-duplicate" class="w-4 h-4" />
|
||||
<x-icon x-show="copied" name="o-check" class="w-4 h-4 text-success" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<x-input :label="__('Setup key')" :value="$manualSetupKey" readonly copyable mono />
|
||||
</div>
|
||||
|
||||
<x-slot:actions>
|
||||
<x-button
|
||||
:disabled="$errors->has('setupData')"
|
||||
label="{{ $this->modalConfig['buttonText'] }}"
|
||||
class="btn-primary"
|
||||
:label="$this->modalConfig['buttonText']"
|
||||
variant="filled"
|
||||
wire:click="showVerificationIfNecessary"
|
||||
/>
|
||||
</x-slot:actions>
|
||||
|
||||
Reference in New Issue
Block a user