generated from thegrind/laravel-dockerized
94 lines
5.0 KiB
PHP
94 lines
5.0 KiB
PHP
<div>
|
|
<div x-data="{edit: false}" class="border rounded-sm dark:border-zinc-600 border-stone-300 p-4">
|
|
<div x-show="!edit" class="flex gap-4">
|
|
<div>
|
|
@if (!empty($avatarUpload))
|
|
<img src="{{$avatarUpload->temporaryUrl()}}" alt="" class="size-20">
|
|
@elseif(!empty($avatar))
|
|
<img src="{{auth()->user()->avatarUrl()}}" alt="" class="size-20">
|
|
@else
|
|
<div
|
|
class="size-20 flex items-center justify-center mx-auto rounded-sm dark:bg-zinc-600 bg-stone-300 dark:text-white text-black">
|
|
<div class="text-4xl font-bold">{{auth()->user()->initials()}}</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="flex-1 flex flex-col justify-between">
|
|
<flux:text>{{auth()->user()->name}}</flux:text>
|
|
@if (!empty(auth()->user()->preferred_username))
|
|
<flux:text>{{auth()->user()->preferred_username}} <span class="italic">(preferred username)</span>
|
|
</flux:text>
|
|
@else
|
|
<flux:text>No preferred username</flux:text>
|
|
@endif
|
|
<flux:text>{{auth()->user()->email}}</flux:text>
|
|
</div>
|
|
</div>
|
|
<form x-show="edit" wire:submit="updateProfileInformation" x-on:submit="edit = false"
|
|
class="my-6 w-full space-y-6">
|
|
<div class="flex items-center gap-8">
|
|
<div class="relative">
|
|
<label for="avatar-upload"
|
|
class="flex items-center justify-center absolute bg-black opacity-0 cursor-pointer hover:opacity-80 top-0 bottom-0 left-0 right-0">
|
|
<flux:icon.pencil class="size-12" />
|
|
</label>
|
|
@if (!empty($avatarUpload))
|
|
<img src="{{$avatarUpload->temporaryUrl()}}" alt="" class="size-32">
|
|
@elseif(!empty($avatar))
|
|
<img src="{{auth()->user()->avatarUrl()}}" alt="" class="size-32">
|
|
@else
|
|
<div
|
|
class="size-32 flex items-center justify-center mx-auto rounded-sm dark:bg-zinc-600 bg-stone-300 dark:text-white text-black">
|
|
<div class="text-4xl font-bold">{{auth()->user()->initials()}}</div>
|
|
</div>
|
|
@endif
|
|
<flux:input type="file" id="avatar-upload" wire:model="avatarUpload" class="hidden" />
|
|
</div>
|
|
<div class="flex-1 flex flex-col gap-4">
|
|
<flux:input wire:model="name" :label="__('Name')" type="text" required autofocus
|
|
autocomplete="name" />
|
|
<flux:input wire:model="preferred_username" :label="__('Preferred Username')" type="text" required
|
|
autofocus autocomplete="username" />
|
|
<flux:input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center justify-end">
|
|
<flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
|
|
<flux:button variant="subtle" x-on:click="edit = false">Cancel</flux:button>
|
|
</div>
|
|
|
|
<x-action-message class="me-3" on="profile-updated">
|
|
{{ __('Saved.') }}
|
|
</x-action-message>
|
|
</div>
|
|
</form>
|
|
<div class="mt-4">
|
|
<flux:button variant="subtle" icon="pencil" x-on:click="edit = true" inset>Edit Profile information
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
<div x-data="{edit: false}" class="mt-4">
|
|
<flux:button variant="primary" x-show="!edit" x-on:click="edit = true">Change Password</flux:button>
|
|
<form wire:submit="updatePassword" class="mt-6 space-y-6" x-show="edit">
|
|
<flux:input wire:model="current_password" :label="__('Current password')" type="password" required
|
|
autocomplete="current-password" />
|
|
<flux:input wire:model="password" :label="__('New password')" type="password" required
|
|
autocomplete="new-password" />
|
|
<flux:input wire:model="password_confirmation" :label="__('Confirm Password')" type="password" required
|
|
autocomplete="new-password" />
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center justify-end">
|
|
<flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
|
|
<flux:button variant="subtle" x-on:click="edit = false">Cancel</flux:button>
|
|
</div>
|
|
|
|
<x-action-message class="me-3" on="password-updated">
|
|
{{ __('Saved.') }}
|
|
</x-action-message>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> |