Further updates on 03-11-2025
This commit is contained in:
@ -1,162 +1,241 @@
|
||||
<!-- user profile -->
|
||||
<div class="profile-layout">
|
||||
<!-- Sidebar -->
|
||||
<app-menu class="sidebar"></app-menu>
|
||||
|
||||
<app-menu></app-menu>
|
||||
<!-- Main Content -->
|
||||
<div class="profile-content">
|
||||
<!-- Header Section -->
|
||||
<div class="profile-header">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">My Profile</h1>
|
||||
<p class="page-subtitle">Manage your account settings and preferences</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade show active" id="profile">
|
||||
<div class="container">
|
||||
<div class="row flex-lg-nowrap">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="e-profile">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-auto">
|
||||
<div class="mx-auto" style="width: 120px;">
|
||||
<div class="d-flex justify-content-center align-items-center rounded">
|
||||
<img class="rounded" height="135" width="135" src="{{loggedInUser?.profileImageUrl}}"
|
||||
alt="">
|
||||
</div>
|
||||
<div *ngIf="fileUploadStatus?.status==='progress'" class="progress mt-1">
|
||||
<div class="progress-bar bg-info" role="progressbar"
|
||||
[style.width.%]="fileUploadStatus?.percentage" aria-valuenow="0" aria-valuemin="0"
|
||||
aria-valuemax="100">{{fileUploadStatus?.percentage}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex flex-column flex-sm-row justify-content-between mb-3">
|
||||
<div class="text-center text-sm-left mb-2 mb-sm-0">
|
||||
<h4
|
||||
class="pt-sm-2 pb-1 mb-0 text-nowrap">{{loggedInUser?.firstName}} {{loggedInUser?.lastName}}</h4>
|
||||
<p class="mb-0">{{loggedInUser?.username}}</p>
|
||||
<div *ngIf="loggedInUser?.lastLoginDateDisplay !== null" class="text-muted"><small>Last
|
||||
login:
|
||||
{{loggedInUser?.lastLoginDateDisplay | date:'medium'}}</small></div>
|
||||
<div class="mt-2">
|
||||
<button (click)="updateProfileImage()" class="btn btn-primary" type="button">
|
||||
<i class="fa fa-fw fa-camera"></i>
|
||||
<span>Change Photo</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-sm-right">
|
||||
<div class="text-muted"><small>Joined {{loggedInUser?.joinDate | date:'mediumDate'}}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content pt-3">
|
||||
<div class="tab-pane active">
|
||||
<form #profileUserForm="ngForm" (ngSubmit)="onUpdateCurrentUser(profileUserForm.value)"
|
||||
class="form" novalidate>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>First Name</label>
|
||||
<input type="text" name="firstName" required [(ngModel)]="loggedInUser.firstName"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Last Name</label>
|
||||
<input type="text" name="lastName" required [(ngModel)]="loggedInUser.lastName"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" name="username" required [(ngModel)]="loggedInUser.username"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="text" name="email" required [(ngModel)]="loggedInUser.email"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col mb-3">
|
||||
<div class="form-group">
|
||||
<label>Role</label><small [hidden]="isAdmin">(read only)</small>
|
||||
<select [disabled]="!isAdmin" name="role" required [(ngModel)]="loggedInUser.role"
|
||||
class="form-control">
|
||||
<option value="ROLE_USER">USER</option>
|
||||
<option value="ROLE_HR">HR</option>
|
||||
<option value="ROLE_MANAGER">MANAGER</option>
|
||||
<option value="ROLE_ADMIN">ADMIN</option>
|
||||
<option value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-5 offset-sm-1 mb-3">
|
||||
<div class="mb-2"><b>Account Settings</b></div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="custom-controls-stacked px-2">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input [disabled]="!isAdmin" name="active" type="checkbox"
|
||||
[(ngModel)]="loggedInUser.active"
|
||||
class="custom-control-input">
|
||||
<label class="custom-control-label">Active</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input [disabled]="!isAdmin" name="notLocked" type="checkbox"
|
||||
[(ngModel)]="loggedInUser.notLocked" class="custom-control-input">
|
||||
<label class="custom-control-label">Unlocked</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col d-flex justify-content-end">
|
||||
<button class="btn btn-primary" type="submit">
|
||||
<i *ngIf="refreshing" class="fas fa-spinner fa-spin"></i>
|
||||
<span>{{refreshing ? 'Loading...' : 'Save Changes'}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Profile Container -->
|
||||
<div class="profile-container">
|
||||
<!-- Main Profile Card -->
|
||||
<div class="profile-main">
|
||||
<div class="profile-card">
|
||||
<!-- Profile Header -->
|
||||
<div class="profile-card-header">
|
||||
<div class="profile-avatar-section">
|
||||
<div class="profile-avatar-wrapper">
|
||||
<img class="profile-avatar" [src]="loggedInUser?.profileImageUrl" [alt]="loggedInUser?.firstName">
|
||||
<button class="avatar-edit-btn" (click)="updateProfileImage()" title="Change Photo">
|
||||
<i class="fa fa-camera"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="fileUploadStatus?.status==='progress'" class="upload-progress">
|
||||
<div class="progress-bar" [style.width.%]="fileUploadStatus?.percentage">
|
||||
<span class="progress-text">{{ fileUploadStatus?.percentage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-info">
|
||||
<h2 class="profile-name">{{ loggedInUser?.firstName }} {{ loggedInUser?.lastName }}</h2>
|
||||
<p class="profile-username">@{{ loggedInUser?.username }}</p>
|
||||
<div class="profile-meta">
|
||||
<div class="meta-item" *ngIf="loggedInUser?.lastLoginDateDisplay !== null">
|
||||
<i class="fa fa-clock"></i>
|
||||
<span>Last login: {{ loggedInUser?.lastLoginDateDisplay | date:'medium' }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fa fa-calendar"></i>
|
||||
<span>Joined {{ loggedInUser?.joinDate | date:'mediumDate' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-3">
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<div class="px-xl-3">
|
||||
<button (click)="onLogOut()" class="btn btn-block btn-secondary">
|
||||
<span>Logout</span>
|
||||
<i class="fas fa-sign-in-alt ml-1"></i>
|
||||
</button>
|
||||
|
||||
<!-- Profile Form -->
|
||||
<div class="profile-card-body">
|
||||
<form #profileUserForm="ngForm" (ngSubmit)="onUpdateCurrentUser(profileUserForm.value)" class="profile-form">
|
||||
|
||||
<!-- Personal Information Section -->
|
||||
<div class="form-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fa fa-user"></i>
|
||||
Personal Information
|
||||
</h3>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="firstName">
|
||||
<i class="fa fa-id-card"></i>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
required
|
||||
[(ngModel)]="loggedInUser.firstName"
|
||||
class="form-input"
|
||||
placeholder="Enter first name">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="lastName">
|
||||
<i class="fa fa-id-card"></i>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
required
|
||||
[(ngModel)]="loggedInUser.lastName"
|
||||
class="form-input"
|
||||
placeholder="Enter last name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="username">
|
||||
<i class="fa fa-at"></i>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
[(ngModel)]="loggedInUser.username"
|
||||
class="form-input"
|
||||
placeholder="Enter username">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
[(ngModel)]="loggedInUser.email"
|
||||
class="form-input"
|
||||
placeholder="Enter email address">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title font-weight-bold">Permissions From Role</h6>
|
||||
<h6 *ngFor="let authority of loggedInUser?.authorities" class="card-text">{{authority}}</h6>
|
||||
|
||||
<!-- Role & Permissions Section -->
|
||||
<div class="form-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fa fa-shield-alt"></i>
|
||||
Role & Permissions
|
||||
</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="role">
|
||||
<i class="fa fa-user-tag"></i>
|
||||
User Role
|
||||
<small *ngIf="!isAdmin" class="readonly-badge">(read only)</small>
|
||||
</label>
|
||||
<select
|
||||
id="role"
|
||||
[disabled]="!isAdmin"
|
||||
name="role"
|
||||
required
|
||||
[(ngModel)]="loggedInUser.role"
|
||||
class="form-select">
|
||||
<option value="ROLE_USER">USER</option>
|
||||
<option value="ROLE_HR">HR</option>
|
||||
<option value="ROLE_MANAGER">MANAGER</option>
|
||||
<option value="ROLE_ADMIN">ADMIN</option>
|
||||
<option value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Settings Section -->
|
||||
<div class="form-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fa fa-cog"></i>
|
||||
Account Settings
|
||||
</h3>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<div class="checkbox-wrapper">
|
||||
<input
|
||||
[disabled]="!isAdmin"
|
||||
name="active"
|
||||
type="checkbox"
|
||||
id="active"
|
||||
[(ngModel)]="loggedInUser.active"
|
||||
class="checkbox-input">
|
||||
<label for="active" class="checkbox-label">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span class="checkbox-text">
|
||||
<strong>Active Account</strong>
|
||||
<small>User can access the system</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-wrapper">
|
||||
<input
|
||||
[disabled]="!isAdmin"
|
||||
name="notLocked"
|
||||
type="checkbox"
|
||||
id="notLocked"
|
||||
[(ngModel)]="loggedInUser.notLocked"
|
||||
class="checkbox-input">
|
||||
<label for="notLocked" class="checkbox-label">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span class="checkbox-text">
|
||||
<strong>Unlocked Account</strong>
|
||||
<small>User is not locked out</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="form-actions">
|
||||
<button class="btn-primary" type="submit" [disabled]="refreshing">
|
||||
<i *ngIf="refreshing" class="fas fa-spinner fa-spin"></i>
|
||||
<i *ngIf="!refreshing" class="fa fa-save"></i>
|
||||
<span>{{ refreshing ? 'Saving...' : 'Save Changes' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="profile-sidebar">
|
||||
<!-- Logout Card -->
|
||||
<div class="sidebar-card logout-card">
|
||||
<div class="card-icon">
|
||||
<i class="fa fa-sign-out-alt"></i>
|
||||
</div>
|
||||
<h4>Session Management</h4>
|
||||
<p>Sign out of your account securely</p>
|
||||
<button (click)="onLogOut()" class="btn-logout">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Permissions Card -->
|
||||
<div class="sidebar-card permissions-card">
|
||||
<div class="card-header-small">
|
||||
<i class="fa fa-shield-alt"></i>
|
||||
<h4>Permissions</h4>
|
||||
</div>
|
||||
<div class="permissions-list">
|
||||
<div *ngFor="let authority of loggedInUser?.authorities" class="permission-item">
|
||||
<i class="fa fa-check-circle"></i>
|
||||
<span>{{ authority }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -165,9 +244,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- profile image change form -->
|
||||
<!-- Profile Image Change Form (Hidden) -->
|
||||
<form enctype="multipart/form-data" style="display:none;">
|
||||
<input type="file"
|
||||
(change)="onProfileImageChange($any($event).target.files); onUpdateProfileImage()"
|
||||
name="profile-image-input" id="profile-image-input" placeholder="file" accept="image/*"/>
|
||||
</form>
|
||||
<input
|
||||
type="file"
|
||||
(change)="onProfileImageChange($any($event).target.files); onUpdateProfileImage()"
|
||||
name="profile-image-input"
|
||||
id="profile-image-input"
|
||||
accept="image/*"/>
|
||||
</form>
|
||||
Reference in New Issue
Block a user