You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
4.9 KiB
111 lines
4.9 KiB
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card mb-4">
|
|
|
|
{{-- Header --}}
|
|
<div class="card-header d-flex justify-content-between align-items-center pb-0">
|
|
<h6 class="mb-0">{{ $title }}</h6>
|
|
<div class="d-flex align-items-center">
|
|
@if ($mode === 'view')
|
|
<button wire:click="showPasswordForm" class="btn btn-sm btn-info">
|
|
Change Password
|
|
</button>
|
|
@else
|
|
<button wire:click="showView" class="btn btn-sm btn-secondary">
|
|
← Back to Profile
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Body --}}
|
|
<div class="card-body p-3">
|
|
@if (session()->has('message'))
|
|
<div class="alert alert-success">{{ session('message') }}</div>
|
|
@endif
|
|
|
|
@if ($mode === 'view')
|
|
{{-- Skeleton while loading profile data --}}
|
|
<div wire:loading class="w-100">
|
|
{{-- 2 columns (label + value), 4 rows --}}
|
|
<x-skeleton-table :columns="1" :rows="4" height="2.5rem" />
|
|
</div>
|
|
|
|
{{-- Actual profile display --}}
|
|
<div wire:loading.remove>
|
|
<dl class="row mb-0" style="line-height:2.5rem">
|
|
<dt class="col-sm-3">Full Name</dt>
|
|
<dd class="col-sm-9">{{ $user->fullname }}</dd>
|
|
|
|
<dt class="col-sm-3">Email</dt>
|
|
<dd class="col-sm-9">{{ $user->email }}</dd>
|
|
|
|
<dt class="col-sm-3">Roles</dt>
|
|
<dd class="col-sm-9">
|
|
@if ($roles)
|
|
{{ implode(', ', $roles) }}
|
|
@else
|
|
<em>No roles assigned</em>
|
|
@endif
|
|
</dd>
|
|
|
|
<dt class="col-sm-3">Account Created At</dt>
|
|
<dd class="col-sm-9">
|
|
{{ $user->created_at?->format('d/m/Y H:i') ?? '—' }}
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
@else
|
|
{{-- Skeleton while loading change-password form --}}
|
|
<div wire:loading class="w-100">
|
|
{{-- 3 fields + 2 buttons --}}
|
|
<x-skeleton-form :fields="3" :button-count="0" />
|
|
</div>
|
|
|
|
{{-- Actual change-password form --}}
|
|
<div wire:loading.remove>
|
|
<form wire:submit.prevent="updatePassword">
|
|
<div class="mb-3">
|
|
<label class="form-label">Current Password</label>
|
|
<input type="password" wire:model.defer="currentPassword" class="form-control"
|
|
placeholder="Enter current password">
|
|
@error('currentPassword')
|
|
<div class="text-danger text-xs mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">New Password</label>
|
|
<input type="password" wire:model.defer="password" class="form-control"
|
|
placeholder="At least 8 characters">
|
|
@error('password')
|
|
<div class="text-danger text-xs mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Confirm New Password</label>
|
|
<input type="password" wire:model.defer="password_confirmation" class="form-control"
|
|
placeholder="Re-enter new password">
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-info btn-sm"
|
|
onclick="return confirm('Are you sure you want to change your password?')">
|
|
Confirm
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
@script
|
|
<script>
|
|
document.title = @json($title);
|
|
</script>
|
|
@endscript
|
|
</div>
|
|
|