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.
115 lines
5.2 KiB
115 lines
5.2 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">
|
|
Đổi mật khẩu
|
|
</button>
|
|
@else
|
|
<button wire:click="showView" class="btn btn-sm btn-secondary">
|
|
← Quay lại
|
|
</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 khi loading dữ liệu profile --}}
|
|
<div wire:loading class="w-100">
|
|
{{-- 2 columns (label + value), 4 rows --}}
|
|
<x-skeleton-form :columns="2" :rows="4" height="2.5rem" />
|
|
</div>
|
|
|
|
{{-- Actual profile --}}
|
|
<div wire:loading.remove>
|
|
<dl class="row mb-0" style="line-height:2.5rem">
|
|
<dt class="col-sm-3">Họ và tên</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">Vai trò</dt>
|
|
<dd class="col-sm-9">
|
|
@if ($roles)
|
|
{{ implode(', ', $roles) }}
|
|
@else
|
|
<em>Chưa có vai trò</em>
|
|
@endif
|
|
</dd>
|
|
|
|
<dt class="col-sm-3">Ngày tạo tài khoản</dt>
|
|
<dd class="col-sm-9">
|
|
{{ $user->created_at?->format('d/m/Y H:i') ?? '—' }}
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
@else
|
|
{{-- Skeleton khi loading form đổi mật khẩu --}}
|
|
<div wire:loading class="w-100">
|
|
{{-- 3 fields + 2 buttons --}}
|
|
<x-skeleton-form :fields="3" :button-count="2" />
|
|
</div>
|
|
|
|
{{-- Actual đổi mật khẩu --}}
|
|
<div wire:loading.remove>
|
|
<form wire:submit.prevent="updatePassword">
|
|
<div class="mb-3">
|
|
<label class="form-label">Mật khẩu hiện tại</label>
|
|
<input type="password" wire:model.defer="currentPassword" class="form-control"
|
|
placeholder="Nhập mật khẩu hiện tại">
|
|
@error('currentPassword')
|
|
<div class="text-danger text-xs mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Mật khẩu mới</label>
|
|
<input type="password" wire:model.defer="password" class="form-control"
|
|
placeholder="Tối thiểu 8 ký tự">
|
|
@error('password')
|
|
<div class="text-danger text-xs mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Xác nhận mật khẩu mới</label>
|
|
<input type="password" wire:model.defer="password_confirmation" class="form-control"
|
|
placeholder="Nhập lại mật khẩu mới">
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end">
|
|
<button wire:click="showView" type="button" class="btn btn-secondary btn-sm me-2">
|
|
Hủy
|
|
</button>
|
|
<button type="submit" class="btn btn-info btn-sm"
|
|
onclick="return confirm('Bạn có chắc muốn đổi mật khẩu?')">
|
|
Xác nhận
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
@script
|
|
<script>
|
|
document.title = @json($title);
|
|
</script>
|
|
@endscript
|
|
</div>
|
|
|