Done Profile

pull/2/head
sundayenglish 4 weeks ago
parent b387c315b6
commit 7d273db2ab
  1. 7
      app/Components/Profile/Manager.php
  2. 43
      resources/views/components/profile/manager.blade.php
  3. 2
      resources/views/components/skeleton-table.blade.php

@ -13,8 +13,6 @@ class Manager extends Component
public object $user; public object $user;
public array $roles = []; public array $roles = [];
public array $allRoles = []; public array $allRoles = [];
// Đổi mật khẩu
public string $mode = 'view'; // 'view' | 'password' public string $mode = 'view'; // 'view' | 'password'
public string $currentPassword = ''; public string $currentPassword = '';
public string $password = ''; public string $password = '';
@ -51,17 +49,14 @@ class Manager extends Component
// 1. Validate // 1. Validate
$this->validate(); $this->validate();
// 2. Kiểm tra mật khẩu hiện tại
if (! Hash::check($this->currentPassword, $this->user->password)) { if (! Hash::check($this->currentPassword, $this->user->password)) {
$this->addError('currentPassword', 'Mật khẩu hiện tại không đúng.'); $this->addError('currentPassword', 'Mật khẩu hiện tại không đúng.');
return; return;
} }
// 3. Cập nhật mật khẩu mới
$this->user->password = Hash::make($this->password); $this->user->password = Hash::make($this->password);
$this->user->save(); $this->user->save();
// 4. Thông báo & quay về view
session()->flash('message', 'Đổi mật khẩu thành công.'); session()->flash('message', 'Đổi mật khẩu thành công.');
$this->showView(); $this->showView();
} }
@ -72,7 +67,7 @@ class Manager extends Component
'user' => $this->user, 'user' => $this->user,
'roles' => $this->roles, 'roles' => $this->roles,
'allRoles' => collect($this->allRoles), 'allRoles' => collect($this->allRoles),
'title' => 'Profile của tôi', 'title' => 'My Profile',
]); ]);
} }
} }

@ -7,13 +7,12 @@
<h6 class="mb-0">{{ $title }}</h6> <h6 class="mb-0">{{ $title }}</h6>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
@if ($mode === 'view') @if ($mode === 'view')
<button wire:click="showPasswordForm" class="btn btn-sm btn-info"> <button wire:click="showPasswordForm" class="btn btn-sm btn-info">
Đổi mật khẩu Change Password
</button> </button>
@else @else
<button wire:click="showView" class="btn btn-sm btn-secondary"> <button wire:click="showView" class="btn btn-sm btn-secondary">
Quay lại Back to Profile
</button> </button>
@endif @endif
</div> </div>
@ -26,77 +25,77 @@
@endif @endif
@if ($mode === 'view') @if ($mode === 'view')
{{-- Skeleton khi loading dữ liệu profile --}} {{-- Skeleton while loading profile data --}}
<div wire:loading class="w-100"> <div wire:loading class="w-100">
{{-- 2 columns (label + value), 4 rows --}} {{-- 2 columns (label + value), 4 rows --}}
<x-skeleton-form :columns="2" :rows="4" height="2.5rem" /> <x-skeleton-table :columns="1" :rows="4" height="2.5rem" />
</div> </div>
{{-- Actual profile --}} {{-- Actual profile display --}}
<div wire:loading.remove> <div wire:loading.remove>
<dl class="row mb-0" style="line-height:2.5rem"> <dl class="row mb-0" style="line-height:2.5rem">
<dt class="col-sm-3">Họ và tên</dt> <dt class="col-sm-3">Full Name</dt>
<dd class="col-sm-9">{{ $user->fullname }}</dd> <dd class="col-sm-9">{{ $user->fullname }}</dd>
<dt class="col-sm-3">Email</dt> <dt class="col-sm-3">Email</dt>
<dd class="col-sm-9">{{ $user->email }}</dd> <dd class="col-sm-9">{{ $user->email }}</dd>
<dt class="col-sm-3">Vai trò</dt> <dt class="col-sm-3">Roles</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
@if ($roles) @if ($roles)
{{ implode(', ', $roles) }} {{ implode(', ', $roles) }}
@else @else
<em>Chưa có vai trò</em> <em>No roles assigned</em>
@endif @endif
</dd> </dd>
<dt class="col-sm-3">Ngày tạo tài khoản</dt> <dt class="col-sm-3">Account Created At</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
{{ $user->created_at?->format('d/m/Y H:i') ?? '—' }} {{ $user->created_at?->format('d/m/Y H:i') ?? '—' }}
</dd> </dd>
</dl> </dl>
</div> </div>
@else @else
{{-- Skeleton khi loading form đổi mật khẩu --}} {{-- Skeleton while loading change-password form --}}
<div wire:loading class="w-100"> <div wire:loading class="w-100">
{{-- 3 fields + 2 buttons --}} {{-- 3 fields + 2 buttons --}}
<x-skeleton-form :fields="3" :button-count="2" /> <x-skeleton-form :fields="3" :button-count="0" />
</div> </div>
{{-- Actual đổi mật khẩu --}} {{-- Actual change-password form --}}
<div wire:loading.remove> <div wire:loading.remove>
<form wire:submit.prevent="updatePassword"> <form wire:submit.prevent="updatePassword">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Mật khẩu hiện tại</label> <label class="form-label">Current Password</label>
<input type="password" wire:model.defer="currentPassword" class="form-control" <input type="password" wire:model.defer="currentPassword" class="form-control"
placeholder="Nhập mật khẩu hiện tại"> placeholder="Enter current password">
@error('currentPassword') @error('currentPassword')
<div class="text-danger text-xs mt-1">{{ $message }}</div> <div class="text-danger text-xs mt-1">{{ $message }}</div>
@enderror @enderror
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Mật khẩu mới</label> <label class="form-label">New Password</label>
<input type="password" wire:model.defer="password" class="form-control" <input type="password" wire:model.defer="password" class="form-control"
placeholder="Tối thiểu 8 ký tự"> placeholder="At least 8 characters">
@error('password') @error('password')
<div class="text-danger text-xs mt-1">{{ $message }}</div> <div class="text-danger text-xs mt-1">{{ $message }}</div>
@enderror @enderror
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Xác nhận mật khẩu mới</label> <label class="form-label">Confirm New Password</label>
<input type="password" wire:model.defer="password_confirmation" class="form-control" <input type="password" wire:model.defer="password_confirmation" class="form-control"
placeholder="Nhập lại mật khẩu mới"> placeholder="Re-enter new password">
</div> </div>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<button wire:click="showView" type="button" class="btn btn-secondary btn-sm me-2"> <button wire:click="showView" type="button" class="btn btn-secondary btn-sm me-2">
Hủy Cancel
</button> </button>
<button type="submit" class="btn btn-info btn-sm" <button type="submit" class="btn btn-info btn-sm"
onclick="return confirm('Bạn có chắc muốn đổi mật khẩu?')"> onclick="return confirm('Are you sure you want to change your password?')">
Xác nhận Confirm
</button> </button>
</div> </div>
</form> </form>

@ -3,7 +3,7 @@
'columns', 'columns',
'rows', 'rows',
'height', 'height',
'pages' => 3, // Default to 3 pages if not specified 'pages' => 0, // Default to 3 pages if not specified
]) ])
<div wire:loading class="w-100"> <div wire:loading class="w-100">

Loading…
Cancel
Save