ChristophandClaude Opus 5.5
b297518810
- TallStackUI 4 (MIT) statt Flux; Komponenten mit Präfix ts- (<x-ts-…>) - Layouts, Login-, Passwort-, 2FA- und Einstellungsseiten neu aufgebaut - Livewire-Skripte explizit in beiden Layouts, damit Alpine auch auf den Fortify-Seiten ohne Livewire-Komponente läuft - Dark Mode über tallstackui_darkTheme(), ohne Aufblitzen beim Laden - Registrierungs-View und ungenutzte Layout-Varianten entfernt - Test: Seiten laden keine Ressourcen von fremden Hosts (Vorgabe "alles lokal") Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
219 lines
12 KiB
PHP
219 lines
12 KiB
PHP
<section class="w-full">
|
|
@include('partials.settings-heading')
|
|
|
|
<x-heading class="sr-only">{{ __('Security settings') }}</x-heading>
|
|
|
|
<x-settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
|
|
<form wire:submit="updatePassword" class="mt-6 space-y-6">
|
|
<x-ts-password wire:model="current_password"
|
|
:label="__('Current password')"
|
|
required
|
|
autocomplete="current-password" />
|
|
<x-ts-password wire:model="password"
|
|
:label="__('New password')"
|
|
required
|
|
autocomplete="new-password"
|
|
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
|
|
<x-ts-password wire:model="password_confirmation"
|
|
:label="__('Confirm password')"
|
|
required
|
|
autocomplete="new-password"
|
|
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}" />
|
|
|
|
<div class="flex items-center gap-4">
|
|
<x-ts-button submit loading="updatePassword" data-test="update-password-button">{{ __('Save') }}</x-ts-button>
|
|
</div>
|
|
</form>
|
|
|
|
@if ($canManageTwoFactor)
|
|
<section class="mt-12">
|
|
<x-heading>{{ __('Two-factor authentication') }}</x-heading>
|
|
<x-subheading>{{ __('Manage your two-factor authentication settings') }}</x-subheading>
|
|
|
|
<div class="mx-auto mt-4 flex w-full flex-col space-y-6 text-sm" wire:cloak>
|
|
@if ($twoFactorEnabled)
|
|
<div class="space-y-4">
|
|
<p class="text-gray-600 dark:text-dark-300">
|
|
{{ __('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 class="flex justify-start">
|
|
<x-ts-button color="red" wire:click="disable" loading="disable">
|
|
{{ __('Disable 2FA') }}
|
|
</x-ts-button>
|
|
</div>
|
|
|
|
<livewire:settings.two-factor.recovery-codes :$requiresConfirmation />
|
|
</div>
|
|
@else
|
|
<div class="space-y-4">
|
|
<p class="text-gray-500 dark:text-dark-300">
|
|
{{ __('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-ts-button wire:click="enable" loading="enable">
|
|
{{ __('Enable 2FA') }}
|
|
</x-ts-button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
|
|
<x-ts-modal wire="showModal" size="md" center x-on:close="$wire.closeModal()">
|
|
<div class="space-y-6">
|
|
<div class="flex flex-col items-center space-y-4">
|
|
<div class="rounded-full border border-gray-200 bg-gray-100 p-3 dark:border-dark-600 dark:bg-dark-700">
|
|
<x-ts-icon name="qr-code" lg />
|
|
</div>
|
|
|
|
<div class="space-y-2 text-center">
|
|
<x-heading size="lg">{{ $this->modalConfig['title'] }}</x-heading>
|
|
<p class="text-sm text-gray-600 dark:text-dark-300">{{ $this->modalConfig['description'] }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($showVerificationStep)
|
|
<div class="space-y-6">
|
|
<div x-data x-init="$nextTick(() => $el.querySelector('input')?.focus())">
|
|
<x-ts-input wire:model="code"
|
|
name="code"
|
|
:label="__('Authentication code')"
|
|
inputmode="numeric"
|
|
maxlength="6"
|
|
autocomplete="one-time-code"
|
|
class="text-center font-mono tracking-[0.5em]" />
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<x-ts-button outline class="flex-1" wire:click="resetVerification">
|
|
{{ __('Back') }}
|
|
</x-ts-button>
|
|
|
|
<x-ts-button class="flex-1"
|
|
wire:click="confirmTwoFactor"
|
|
loading="confirmTwoFactor"
|
|
x-bind:disabled="$wire.code.length < 6">
|
|
{{ __('Confirm') }}
|
|
</x-ts-button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
@error('setupData')
|
|
<x-ts-alert color="red" icon="x-circle" :text="$message" />
|
|
@enderror
|
|
|
|
<div class="flex justify-center">
|
|
{{-- QR-Code immer dunkel auf hell, damit ihn jede Authenticator-App scannen kann. --}}
|
|
<div class="relative aspect-square w-64 overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-dark-600">
|
|
@empty($qrCodeSvg)
|
|
<div class="absolute inset-0 flex animate-pulse items-center justify-center">
|
|
<x-ts-icon name="arrow-path" class="animate-spin text-gray-400" />
|
|
</div>
|
|
@else
|
|
<div class="flex h-full items-center justify-center p-4">
|
|
{!! $qrCodeSvg !!}
|
|
</div>
|
|
@endempty
|
|
</div>
|
|
</div>
|
|
|
|
<x-ts-button class="w-full"
|
|
:disabled="$errors->has('setupData')"
|
|
wire:click="showVerificationIfNecessary">
|
|
{{ $this->modalConfig['buttonText'] }}
|
|
</x-ts-button>
|
|
|
|
<div class="space-y-4">
|
|
<div class="relative flex w-full items-center justify-center">
|
|
<div class="absolute inset-0 top-1/2 h-px w-full bg-gray-200 dark:bg-dark-600"></div>
|
|
<span class="relative bg-white px-2 text-sm text-gray-600 dark:bg-dark-800 dark:text-dark-300">
|
|
{{ __('or, enter the code manually') }}
|
|
</span>
|
|
</div>
|
|
|
|
@empty($manualSetupKey)
|
|
<div class="flex w-full items-center justify-center rounded-lg bg-gray-100 p-3 dark:bg-dark-700">
|
|
<x-ts-icon name="arrow-path" sm class="animate-spin text-gray-400" />
|
|
</div>
|
|
@else
|
|
<x-ts-clipboard :text="$manualSetupKey" />
|
|
@endempty
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</x-ts-modal>
|
|
@endif
|
|
|
|
@if ($canManagePasskeys)
|
|
<section class="mt-12">
|
|
<x-heading>{{ __('Passkeys') }}</x-heading>
|
|
<x-subheading>{{ __('Manage your passkeys for passwordless sign-in') }}</x-subheading>
|
|
|
|
<div class="mx-auto mt-6 flex w-full flex-col space-y-6 text-sm" wire:cloak>
|
|
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-dark-600">
|
|
@forelse ($passkeys as $passkey)
|
|
<div @class([
|
|
'flex items-center justify-between p-4',
|
|
'border-b border-gray-200 dark:border-dark-600' => ! $loop->last,
|
|
])>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-gray-100 dark:bg-dark-700">
|
|
<x-ts-icon name="key" class="text-gray-500 dark:text-dark-300" />
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="flex items-center gap-2.5">
|
|
<p class="font-medium tracking-tight">{{ $passkey['name'] }}</p>
|
|
@if ($passkey['authenticator'])
|
|
<x-ts-badge :text="$passkey['authenticator']" color="gray" light />
|
|
@endif
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-dark-300">
|
|
{{ __('Added :time', ['time' => $passkey['created_at_diff']]) }}
|
|
@if ($passkey['last_used_at_diff'])
|
|
<span class="mx-1 opacity-50">/</span>
|
|
{{ __('Last used :time', ['time' => $passkey['last_used_at_diff']]) }}
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<x-ts-button.circle icon="trash"
|
|
color="red"
|
|
flat
|
|
wire:click="confirmDelete({{ $passkey['id'] }})" />
|
|
</div>
|
|
@empty
|
|
<div class="p-8 text-center">
|
|
<div class="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-gray-100 dark:bg-dark-700">
|
|
<x-ts-icon name="key" lg class="text-gray-400 dark:text-dark-400" />
|
|
</div>
|
|
<p class="font-medium">{{ __('No passkeys yet') }}</p>
|
|
<p class="mt-1 text-gray-500 dark:text-dark-300">{{ __('Add a passkey to sign in without a password') }}</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<x-passkey-registration />
|
|
</div>
|
|
</section>
|
|
@endif
|
|
</x-settings.layout>
|
|
|
|
<x-ts-modal wire="showDeleteModal" size="md" center :title="__('Remove passkey')" x-on:close="$wire.closeDeleteModal()">
|
|
<p class="text-sm text-gray-600 dark:text-dark-300">
|
|
{{ __('Are you sure you want to remove the passkey ":name"? You will no longer be able to use it to sign in.', ['name' => $deletingPasskeyName]) }}
|
|
</p>
|
|
|
|
<x-slot:footer>
|
|
<div class="flex justify-end gap-3">
|
|
<x-ts-button outline wire:click="closeDeleteModal">
|
|
{{ __('Cancel') }}
|
|
</x-ts-button>
|
|
<x-ts-button color="red" wire:click="deletePasskey" loading="deletePasskey">
|
|
{{ __('Remove passkey') }}
|
|
</x-ts-button>
|
|
</div>
|
|
</x-slot:footer>
|
|
</x-ts-modal>
|
|
</section>
|