126 lines
4.5 KiB
PHP
126 lines
4.5 KiB
PHP
<?php
|
|
|
|
use Livewire\Component;
|
|
use Illuminate\Support\Facades\Auth;
|
|
|
|
new class extends Component
|
|
{
|
|
public bool $isOpen = false;
|
|
|
|
public string $name = '';
|
|
public string $email = '';
|
|
|
|
public function openModal(): void
|
|
{
|
|
$user = Auth::user();
|
|
|
|
$this->name = (string) ($user?->name ?? '');
|
|
$this->email = (string) ($user?->email ?? '');
|
|
|
|
$this->isOpen = true;
|
|
}
|
|
|
|
public function closeModal(): void
|
|
{
|
|
$this->isOpen = false;
|
|
}
|
|
|
|
public function save(): void
|
|
{
|
|
$user = Auth::user();
|
|
|
|
$this->validate([
|
|
'name' => ['required', 'string', 'min:2', 'max:60'],
|
|
]);
|
|
|
|
$user->forceFill([
|
|
'name' => $this->name,
|
|
])->save();
|
|
|
|
$this->dispatch('toastMagic',
|
|
status: 'success',
|
|
title: 'Profile updated',
|
|
message: 'Your profile has been saved.'
|
|
);
|
|
|
|
$this->isOpen = false;
|
|
}
|
|
};
|
|
?>
|
|
|
|
<div class="relative">
|
|
<button type="button" wire:click="openModal" class="btn-primary w-full text-base">
|
|
Edit profile
|
|
</button>
|
|
|
|
@if($isOpen)
|
|
<div class="fixed inset-0 z-[9999]" role="dialog" aria-modal="true" wire:keydown.escape.window="closeModal">
|
|
<button
|
|
type="button"
|
|
class="absolute inset-0 bg-black/50"
|
|
wire:click="closeModal"
|
|
aria-label="Close modal"
|
|
></button>
|
|
|
|
<div class="absolute inset-0 bg-card">
|
|
<div class="mx-auto flex h-full w-full max-w-[420px] flex-col px-6 pt-6 pb-8">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-lg font-semibold">Edit profile</h3>
|
|
<p class="mt-1 text-xs text-muted-foreground">Update your display name.</p>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
wire:click="closeModal"
|
|
class="grid h-10 w-10 place-items-center rounded-xl bg-background ring-1 ring-border"
|
|
aria-label="Close"
|
|
>
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-6 flex flex-col gap-3">
|
|
<label class="rounded-2xl bg-background p-4 ring-1 ring-border">
|
|
<p class="text-xs text-muted-foreground">Name</p>
|
|
<input
|
|
type="text"
|
|
wire:model.defer="name"
|
|
autocomplete="name"
|
|
class="mt-2 w-full rounded bg-transparent text-sm outline-none"
|
|
placeholder="Your name"
|
|
/>
|
|
@error('name')
|
|
<p class="mt-2 text-xs text-red-500">{{ $message }}</p>
|
|
@enderror
|
|
</label>
|
|
|
|
<label class="rounded-2xl bg-background p-4 ring-1 ring-border opacity-70">
|
|
<p class="text-xs text-muted-foreground">Email</p>
|
|
<input
|
|
type="email"
|
|
value="{{ auth()->user()->email }}"
|
|
disabled
|
|
class="mt-2 w-full rounded bg-transparent text-sm outline-none"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-auto pt-6 flex flex-col gap-3">
|
|
<button type="button" wire:click="save" wire:loading.attr="disabled" class="btn-primary w-full text-base">
|
|
<span wire:loading.remove wire:target="save">Save</span>
|
|
<span wire:loading wire:target="save">Saving...</span>
|
|
</button>
|
|
|
|
<button type="button" wire:click="closeModal" class="btn-outline w-full text-base">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|