clusev/resources/views/livewire/settings/profile.blade.php

56 lines
3.5 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="space-y-5">
<x-panel :title="__('settings.profile_title')" :subtitle="__('settings.profile_subtitle')">
<form wire:submit="updateProfile" class="space-y-4">
<div>
<label class="{{ $label }}">{{ __('settings.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 }}">{{ __('settings.email') }}</label>
<input wire:model="email" type="text" 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>
{{ __('common.save') }}
</x-btn>
</div>
</form>
</x-panel>
<x-panel :title="__('settings.password_title')" :subtitle="__('settings.password_subtitle')">
<form wire:submit="updatePassword" class="space-y-4">
<div>
<label class="{{ $label }}">{{ __('settings.current_password') }}</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 }}">{{ __('settings.new_password') }}</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 }}">{{ __('settings.repeat_password') }}</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>
{{ __('settings.change_password') }}
</x-btn>
</div>
</form>
</x-panel>
</div>