clusev/resources/views/livewire/auth/password-change.blade.php

39 lines
2.4 KiB
PHP

@php
$field = 'h-11 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none';
$label = 'mb-1.5 block font-mono text-[11px] uppercase tracking-wider text-ink-3';
$err = 'mt-1.5 flex items-center gap-1.5 font-mono text-[11px] text-offline';
@endphp
<div class="space-y-7">
<div class="space-y-1.5">
<p class="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-accent-text">{{ __('auth.security') }}</p>
<h1 class="font-display text-2xl font-bold tracking-tight text-ink">{{ __('auth.password_change_heading') }}</h1>
<p class="font-mono text-xs leading-relaxed text-ink-3">{{ __('auth.password_change_subtitle') }}</p>
</div>
<form wire:submit="update" class="space-y-4">
<div>
<label for="current" class="{{ $label }}">{{ __('auth.current_password') }}</label>
<input wire:model="current" id="current" type="password" autocomplete="current-password" class="{{ $field }}" />
@error('current') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
</div>
<div>
<label for="password" class="{{ $label }}">{{ __('auth.new_password') }}</label>
<input wire:model="password" id="password" type="password" autocomplete="new-password" class="{{ $field }}" />
@error('password') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
</div>
<div>
<label for="password_confirmation" class="{{ $label }}">{{ __('auth.confirm_new_password') }}</label>
<input wire:model="password_confirmation" id="password_confirmation" type="password" autocomplete="new-password" class="{{ $field }}" />
</div>
<x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="update">
<svg wire:loading wire:target="update" class="h-4 w-4 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>
<span wire:loading.remove wire:target="update">{{ __('auth.save_and_continue') }}</span>
<span wire:loading wire:target="update">{{ __('auth.saving') }}</span>
</x-btn>
</form>
</div>