84 lines
4.7 KiB
PHP
84 lines
4.7 KiB
PHP
@php
|
|
$field = 'h-9 w-full rounded-md border border-line bg-inset px-3 font-sans text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none';
|
|
$label = 'mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3';
|
|
$err = 'mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline';
|
|
@endphp
|
|
|
|
<div class="mx-auto max-w-3xl space-y-5">
|
|
{{-- Header --}}
|
|
<div>
|
|
<p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accent-text">Konto</p>
|
|
<h2 class="mt-0.5 font-display text-xl font-semibold text-ink sm:text-2xl">Einstellungen</h2>
|
|
</div>
|
|
|
|
{{-- Profil --}}
|
|
<x-panel title="Profil" subtitle="Name und E-Mail">
|
|
<form wire:submit="updateProfile" class="space-y-4">
|
|
<div>
|
|
<label class="{{ $label }}">Name</label>
|
|
<input wire:model="name" type="text" class="{{ $field }}" />
|
|
@error('name') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="{{ $label }}">E-Mail</label>
|
|
<input wire:model="email" type="email" class="{{ $field }} font-mono" />
|
|
@error('email') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<x-btn variant="primary" type="submit" wire:target="updateProfile" wire:loading.attr="disabled">
|
|
<svg wire:loading wire:target="updateProfile" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
|
|
Speichern
|
|
</x-btn>
|
|
</div>
|
|
</form>
|
|
</x-panel>
|
|
|
|
{{-- Passwort --}}
|
|
<x-panel title="Passwort" subtitle="Mindestens 10 Zeichen">
|
|
<form wire:submit="updatePassword" class="space-y-4">
|
|
<div>
|
|
<label class="{{ $label }}">Aktuelles Passwort</label>
|
|
<input wire:model="current_password" type="password" autocomplete="current-password" class="{{ $field }} font-mono" />
|
|
@error('current_password') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
|
</div>
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="{{ $label }}">Neues Passwort</label>
|
|
<input wire:model="password" type="password" autocomplete="new-password" class="{{ $field }} font-mono" />
|
|
@error('password') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="{{ $label }}">Wiederholen</label>
|
|
<input wire:model="password_confirmation" type="password" autocomplete="new-password" class="{{ $field }} font-mono" />
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<x-btn variant="primary" type="submit" wire:target="updatePassword" wire:loading.attr="disabled">
|
|
<svg wire:loading wire:target="updatePassword" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
|
|
Passwort ändern
|
|
</x-btn>
|
|
</div>
|
|
</form>
|
|
</x-panel>
|
|
|
|
{{-- 2FA --}}
|
|
<x-panel title="Zwei-Faktor-Authentifizierung" subtitle="TOTP (Authenticator-App)">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<div class="flex items-center gap-3">
|
|
<x-status-dot :status="$twoFactorEnabled ? 'online' : 'offline'" />
|
|
<div>
|
|
<p class="text-sm text-ink">{{ $twoFactorEnabled ? '2FA ist aktiv' : '2FA ist nicht eingerichtet' }}</p>
|
|
<p class="font-mono text-[11px] text-ink-3">{{ $twoFactorEnabled ? 'Der Login erfordert einen TOTP-Code.' : 'Empfohlen — schützt den Login mit einem zweiten Faktor.' }}</p>
|
|
</div>
|
|
</div>
|
|
@if ($twoFactorEnabled)
|
|
<x-btn variant="ghost-danger" wire:click="confirmDisableTwoFactor">Deaktivieren</x-btn>
|
|
@else
|
|
<x-btn variant="accent" :href="route('two-factor.setup')" wire:navigate>
|
|
<x-icon name="shield" class="h-3.5 w-3.5" /> Einrichten
|
|
</x-btn>
|
|
@endif
|
|
</div>
|
|
</x-panel>
|
|
</div>
|