Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts (working copy) @@ -9,6 +9,8 @@ import {WebConsole} from './components/sub-components/web-console/web-console'; import {Tasks} from './components/tasks/tasks'; import {Notification} from './components/notification/notification'; +import {AdminTools} from './components/admin-tools/admin-tools'; +import {RoleDetails} from './components/sub-components/role-details/role-details'; export const routes: Routes = [ @@ -62,6 +64,16 @@ data: {roles: ['super_admin', 'device_admin', 'common_admin']} }, { + path: 'admin-tools', + component: AdminTools, + data: {roles: ['super_admin', 'device_admin', 'common_admin']}, + }, + { + path: 'admin-tools/role/:roleName', + component: RoleDetails, + data: {roles: ['super_admin', 'device_admin', 'common_admin']} + }, + { path: 'notifications', component: Notification, data: {roles: ['super_admin', 'device_admin', 'common_admin']} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/admin-tools/admin-tools.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/admin-tools/admin-tools.html (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/admin-tools/admin-tools.html (working copy) @@ -1 +1,32 @@ -

admin-tools works!

+
+ + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/admin-tools/admin-tools.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/admin-tools/admin-tools.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/admin-tools/admin-tools.ts (working copy) @@ -1,11 +1,60 @@ -import { Component } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {SharedModule} from '../../shared/shared-module'; +import {UserManagement} from '../sub-components/user-management/user-management'; +import {RoleManagement} from '../sub-components/role-management/role-management'; +import {OperationLogs} from '../sub-components/operation-logs/operation-logs'; +import {SystemControl} from '../sub-components/system-control/system-control'; +import {ActivatedRoute, Router} from '@angular/router'; +import {MatTabChangeEvent} from '@angular/material/tabs'; @Component({ selector: 'app-admin-tools', - imports: [], + imports: [SharedModule, UserManagement, RoleManagement, OperationLogs, SystemControl], templateUrl: './admin-tools.html', styleUrl: './admin-tools.scss' }) -export class AdminTools { +export class AdminTools implements OnInit { + selectedTabIndex: number = 0; + private tabNames: string[] = [ + 'User Management', + 'Role Management', + 'Operational Logs', + 'System Reboot/Shutdown' + ]; + + constructor(private route: ActivatedRoute, private router: Router) { + } + + ngOnInit(): void { + this.route.queryParams.subscribe(params => { + const tabParam = params['tab']; + if (tabParam) { + const index = this.tabNames.indexOf(tabParam); + if (index !== -1) { + this.selectedTabIndex = index; + } else { + this.selectedTabIndex = 0; + } + } else { + this.updateQueryParams(this.selectedTabIndex); + } + }); + } + + onTabChange(event: MatTabChangeEvent): void { + this.selectedTabIndex = event.index; + this.updateQueryParams(event.index); + } + + private updateQueryParams(tabIndex: number): void { + const tabName = this.tabNames[tabIndex]; + if (tabName) { + this.router.navigate([], { + relativeTo: this.route, + queryParams: {tab: tabName}, + queryParamsHandling: 'merge' + }); + } + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.html (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.html (working copy) @@ -1 +1,104 @@ -

operation-logs works!

+
+ +
+
+
+ + Log Level + + @for (level of availableLevels; track level) { + {{ level.displayName }} + } + + + + + Module + + All + @for (_module of availableModules; track _module) { + {{ _module | titlecase }} + } + + + + + Username + + + + + IP + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Id.{{ element.id }}Timestamp{{ element.time }}Level{{ element.level }}Username{{ element.username }}IP{{ element.client_ip }}Module{{ element.module }}Operation{{ element.operation }}Action +
+ +
+
No results found.
+ +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.scss (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.scss (working copy) @@ -0,0 +1,12 @@ +.filter-row { + display: flex; + gap: 15px; + flex-wrap: wrap; + margin-top: 15px; + align-items: center; + + .filter-field { + min-width: 180px; + flex: 1; + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.ts (working copy) @@ -1,11 +1,204 @@ -import { Component } from '@angular/core'; +import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core'; +import {SystemService} from '../../../services/system-service'; +import {SharedModule} from '../../../shared/shared-module'; +import {debounceTime, take} from 'rxjs/operators'; +import {NotificationService} from '../../../services/notification'; +import {MatPaginator, PageEvent} from '@angular/material/paginator'; +import {Confirmation} from '../../../services/confirmation'; +import {Subject} from 'rxjs'; @Component({ selector: 'app-operation-logs', - imports: [], + standalone: true, + imports: [SharedModule], templateUrl: './operation-logs.html', - styleUrl: './operation-logs.scss' + styleUrls: ['./operation-logs.scss'] }) -export class OperationLogs { +export class OperationLogs implements OnInit, AfterViewInit { + reqPayload: any = {start: 0, number: 10, search: {}, sort_predicate: 'time', sort_reverse: ''}; + totalRecords: number = 0; + logDataSource: any[] = []; + logColumns: string[] = ['serial', 'datetime', 'level', 'username', 'ip', 'module', 'operation', 'action']; + @ViewChild(MatPaginator) paginator!: MatPaginator; + filterValues = { + level: '', + module: '', + username: '', + ip: '' + }; + availableLevels: any[] = [ + {value: '', displayName: 'All'}, + {value: 'debug', displayName: 'Debug'}, + {value: 'info', displayName: 'Info'}, + {value: 'notice', displayName: 'Notice'}, + {value: 'warning', displayName: 'Warning'}, + {value: 'error', displayName: 'Error'}, + {value: 'critical', displayName: 'Critical'}, + ]; + availableModules: string[] = []; + protected usernameSearch$ = new Subject(); + protected ipSearch$ = new Subject(); + + constructor( + private systemService: SystemService, + private notification: NotificationService, + private confirmationService: Confirmation, + private cdRef: ChangeDetectorRef + ) { + } + + ngOnInit() { + this.usernameSearch$.pipe(debounceTime(300)).subscribe(value => { + if (value.length === 0 || value.length >= 3) { + this.filterValues.username = value; + this.applyFilters(); + } + }); + + this.ipSearch$.pipe(debounceTime(300)).subscribe(value => { + if (value.length === 0 || value.length >= 3) { + this.filterValues.ip = value; + this.applyFilters(); + } + }); + } + + ngAfterViewInit() { + this.paginator.page.subscribe((event: PageEvent) => { + this.reqPayload.start = event.pageIndex * event.pageSize; + this.reqPayload.number = event.pageSize; + this.getOperationalLogs(); + }); + + this.cdRef.detectChanges(); + + setTimeout(() => { + this.getOperationalLogs(); + }) + } + + getOperationalLogs() { + const payload = new FormData(); + payload.set('post_data', JSON.stringify(this.reqPayload)); + + this.systemService.getOperationalLogs(payload).pipe(take(1)).subscribe({ + next: (result: any) => { + this.totalRecords = Number(result.total) || 0; + + this.logDataSource = Array.isArray(result.data) ? result.data : []; + + // this.availableLevels = [...new Set(this.logDataSource.map(log => log.level).filter(Boolean))]; + if (this.filterValues.level == '' && this.filterValues.module == '' && this.filterValues.username == '' && this.filterValues.ip == '') { + this.availableModules = [...new Set(this.logDataSource.map(log => log.module).filter(Boolean))]; + } + + if (this.paginator) { + this.paginator.length = this.totalRecords; + this.paginator.pageIndex = Math.floor(this.reqPayload.start / this.reqPayload.number); + this.paginator.pageSize = this.reqPayload.number; + } + + setTimeout(() => { + this.cdRef.detectChanges(); + }, 0); + }, + error: (error) => { + console.error('API Error:', error); + this.notification.showError(`Error: ${error?.message || 'Failed to fetch logs'}`); + this.logDataSource = []; + this.totalRecords = 0; + if (this.paginator) { + this.paginator.length = 0; + this.paginator.pageIndex = 0; + } + setTimeout(() => { + this.cdRef.detectChanges(); + }, 0); + } + }); + } + + deleteOperationalLog(log: any) { + let confirmMsg = `Are you sure you want to delete ${log.id} - ${log?.operation}? This action cannot be undone.`; + this.confirmationService.openConfirmDialog({ + title: `Delete operation log`, + message: confirmMsg, + confirmButtonText: 'Yes, Delete It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe((result: boolean) => { + if (result) { + let rawPayload = new FormData(); + rawPayload.set('id', log.id); + this.systemService.deleteOperationalLog(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.state) { + this.notification.showSuccess('The operation log has been deleted.'); + this.getOperationalLogs(); + } else { + this.notification.showError('Failed to delete the operation log.'); + } + }, + error: (err: any) => { + this.notification.showError('Failed to delete the operation log.'); + } + }) + } + }) + } + + deleteAllLogs() { + let confirmMsg = `Are you sure you want to clear the operational logs? This action cannot be undone.`; + this.confirmationService.openConfirmDialog({ + title: `Delete all operation logs`, + message: confirmMsg, + confirmButtonText: 'Yes, Delete It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe((result: boolean) => { + if (result) { + this.systemService.deleteAllOperationalLogs() + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + console.log(result); + if (result && result.state) { + this.notification.showSuccess('The operation logs has been deleted.'); + this.getOperationalLogs(); + } else { + this.notification.showError('Failed to delete the operation logs.'); + } + }, + error: (err: any) => { + this.notification.showError('Failed to delete the operation logs.'); + } + }) + } + }) + } + + clearFilters() { + this.filterValues = { + level: '', + module: '', + username: '', + ip: '' + }; + + this.reqPayload.start = 0; + this.reqPayload.search = {...this.filterValues}; + this.getOperationalLogs(); + } + + applyFilters() { + console.log(this.filterValues, this.reqPayload); + this.reqPayload.start = 0; // Reset to first page + this.reqPayload.search = {...this.filterValues}; + this.getOperationalLogs(); + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/modify-role-device-groups.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/modify-role-device-groups.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/modify-role-device-groups.html (working copy) @@ -0,0 +1,32 @@ +

Modify Role Device Groups

+ +
+
+ + + + @for (_group of this.data.aGroups; track _group) { + {{ _group }} + } + + +
+
+ + + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.html (working copy) @@ -0,0 +1,50 @@ + + + + + + Role Management - {{ roleDetails?.role_name }} + + + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + +
Id.{{ i + 1 }}Device Group{{ element.group_name }}Managed Devices{{ element.devices }}Action +
+ +
+
No results found.
+ +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.scss (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.scss (working copy) @@ -0,0 +1,22 @@ +.page-card-1 { + width: 100%; + border-radius: 0; + background-color: inherit; + font-size: 14px !important; + + mat-card-header { + color: #1170cf; + } +} + +mat-card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4px 10px; +} + +mat-card-title { + font-size: medium; +} + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.spec.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.spec.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.spec.ts (working copy) @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoleDetails } from './role-details'; + +describe('RoleDetails', () => { + let component: RoleDetails; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RoleDetails] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RoleDetails); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.ts (working copy) @@ -0,0 +1,221 @@ +import {ChangeDetectorRef, Component, inject, OnInit} from '@angular/core'; +import {SharedModule} from '../../../shared/shared-module'; +import {ActivatedRoute, Router} from '@angular/router'; +import {take} from 'rxjs/operators'; +import {SystemService} from '../../../services/system-service'; +import {NotificationService} from '../../../services/notification'; +import {Confirmation} from '../../../services/confirmation'; +import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; + +@Component({ + selector: 'app-role-details', + imports: [SharedModule], + templateUrl: './role-details.html', + styleUrl: './role-details.scss' +}) +export class RoleDetails implements OnInit { + + roleName!: string | null; + roleDetails!: any; + totalRecords: number = 0; + + deviceGroupColumns: string[] = ['serial', 'groups', 'devices', 'action']; + deviceGroupDataSource: any[] = []; + + assignedDeviceGroups: string[] = []; + aGroups: string[] = []; + dialog = inject(MatDialog); + dialogConfig = new MatDialogConfig(); + + constructor( + private route: ActivatedRoute, + private router: Router, + private systemService: SystemService, + private notification: NotificationService, + private cdRef: ChangeDetectorRef, + private confirmationService: Confirmation, + ) { + } + + ngOnInit(): void { + this.roleName = this.route.snapshot.paramMap.get('roleName'); + this.roleDetails = history.state.roleDetails; + setTimeout(() => { + this.getDeviceGroupsByRoleId(); + this.getAllDeviceGroups(); + }) + } + + getDeviceGroupsByRoleId() { + this.assignedDeviceGroups = []; + let payload = new FormData(); + payload.set('action', 'FilterRoleDeviceGroups'); + payload.set('options', JSON.stringify({role_id: this.roleDetails?.id})); + this.systemService.getDeviceGroupsByRoleId(payload).pipe(take(1)).subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + let devices: any = ''; + result[1].result.forEach((_group: any) => { + this.assignedDeviceGroups.push(_group?.group_name); + devices = ''; + _group?.device_list.forEach((_device: any) => { + if (devices !== '') { + devices += ', ' + } + devices += _device.ip; + }) + _group['devices'] = devices; + }) + this.deviceGroupDataSource = result[1].result; + this.totalRecords = result[1].result.length; + } + this.cdRef.detectChanges(); + }, + error: (error: any) => { + this.notification.showError(`Error: ${error?.message || 'Failed to fetch device groups.'}`); + this.cdRef.detectChanges(); + } + }); + } + + getAllDeviceGroups() { + this.aGroups = []; + let payload = new FormData(); + payload.set('action', 'FilterRoleDeviceGroups'); + payload.set('options', JSON.stringify({role_id: 0})); + this.systemService.getAllDeviceGroups(payload).pipe(take(1)).subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + result[1].result.forEach((_group: any) => { + this.aGroups.push(_group?.group_name); + }) + } + this.cdRef.detectChanges(); + }, + error: (error: any) => { + this.notification.showError(`Error: ${error?.message || 'Failed to fetch device groups.'}`); + this.cdRef.detectChanges(); + } + }); + } + + backToRoleManagement() { + this.router.navigate(['/system/admin-tools'], {queryParams: {tab: 'Role Management'}}); + } + + addDeviceGroup() { + this.dialogConfig.data = { + role_id: this.roleDetails?.id, + groups: this.assignedDeviceGroups, + aGroups: this.aGroups, + }; + this.dialogConfig.disableClose = true; + const dialogRef = this.dialog.open(ModifyRoleDeviceGroupsDialog, this.dialogConfig); + dialogRef.afterClosed().subscribe((isUpdated: boolean) => { + if (isUpdated) { + this.getDeviceGroupsByRoleId(); + } + }) + } + + removeDeviceGroup(_group: any) { + let confirmMsg = `Are you sure you want to remove "${_group?.group_name}"?` + this.confirmationService.openConfirmDialog({ + title: `Remove device group - ${_group?.group_name}?`, + message: confirmMsg, + confirmButtonText: 'Yes, Remove It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe(result => { + if (result) { + let groups = [...this.assignedDeviceGroups]; + groups = groups.filter(item => item !== _group?.group_name); + let rawPayload = new FormData(); + rawPayload.set('action', 'UpdateRoleDeviceGroups'); + rawPayload.set('options', JSON.stringify({ + role_id: this.roleDetails?.id, + groups: groups + })); + this.systemService.updateDeviceGroupsForRoleId(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (!result[0]) { + this.notification.showError(`Failed - ${result[1]}`); + } else { + this.notification.showSuccess(`${_group?.group_name} removed successfully!`); + this.getDeviceGroupsByRoleId() + } + } + }, + error: (err: any) => { + this.notification.showError('Failed to remove device groups.'); + } + }) + } else { + this.notification.showSuccess('Removal cancelled.'); + } + }) + } +} + +@Component({ + selector: 'modify-role-device-groups', + templateUrl: './modify-role-device-groups.html', + imports: [SharedModule] +}) +export class ModifyRoleDeviceGroupsDialog implements OnInit { + + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + roleDeviceForm: FormGroup; + + constructor( + private formBuilder: FormBuilder, + private systemService: SystemService, + private notification: NotificationService, + ) { + this.roleDeviceForm = this.formBuilder.group({ + groups: ['', Validators.required], + }) + } + + ngOnInit() { + this.roleDeviceForm.patchValue({ + groups: this.data.groups + }); + } + + onCancel() { + this.dialogRef.close(false); + } + + onSubmit() { + let rawPayload = new FormData(); + rawPayload.set('action', 'UpdateRoleDeviceGroups'); + rawPayload.set('options', JSON.stringify({ + role_id: this.data.role_id, + groups: this.roleDeviceForm.value.groups + })); + this.systemService.updateDeviceGroupsForRoleId(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (!result[0]) { + this.notification.showError(`Failed - ${result[1]}`); + } else { + this.notification.showSuccess(`Device groups updated successfully!`); + this.dialogRef.close(true); + } + } + }, + error: (err: any) => { + this.notification.showError('Failed to update the device groups.'); + } + }) + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/add-role.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/add-role.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/add-role.html (working copy) @@ -0,0 +1,43 @@ +

Add Role

+ +
+
+ + + + @if (roleForm.get('role_name')?.invalid && roleForm.get('role_name')?.touched) { + + @if (roleForm.get('role_name')?.errors?.['required']) { + Role name is required. + } @else if (roleForm.get('role_name')?.errors) { + Invalid role name format. + } + + } + +
+
+ + + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/rename-role.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/rename-role.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/rename-role.html (working copy) @@ -0,0 +1,43 @@ +

Update - Rename Role

+ +
+
+ + + + @if (roleForm.get('role_name')?.invalid && roleForm.get('role_name')?.touched) { + + @if (roleForm.get('role_name')?.errors?.['required']) { + Role name is required. + } @else if (roleForm.get('role_name')?.errors) { + Invalid role name format. + } + + } + +
+
+ + + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/role-management.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/role-management.html (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/role-management.html (working copy) @@ -1 +1,40 @@ -

role-management works!

+
+ +
+
+ + + + + + + + + + + + + + + + + + +
Id.{{ i + 1 }}Role Name{{ element.role_name }}Action +
+    +    + +
+
No results found.
+ +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/role-management.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/role-management.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/role-management.ts (working copy) @@ -1,11 +1,234 @@ -import { Component } from '@angular/core'; +import {ChangeDetectorRef, Component, inject, OnInit} from '@angular/core'; +import {SharedModule} from '../../../shared/shared-module'; +import {SystemService} from '../../../services/system-service'; +import {take} from 'rxjs/operators'; +import {NotificationService} from '../../../services/notification'; +import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {Confirmation} from '../../../services/confirmation'; +import {Router} from '@angular/router'; @Component({ selector: 'app-role-management', - imports: [], + imports: [SharedModule], templateUrl: './role-management.html', styleUrl: './role-management.scss' }) -export class RoleManagement { +export class RoleManagement implements OnInit { + totalRecords: number = 0; + roleDataSource: any[] = []; + roleColumns: string[] = ['serial', 'role_name', 'action']; + dialog = inject(MatDialog); + dialogConfig = new MatDialogConfig(); + constructor( + private systemService: SystemService, + private notification: NotificationService, + private cdRef: ChangeDetectorRef, + private confirmationService: Confirmation, + private router: Router + ) { + } + + ngOnInit() { + setTimeout(() => { + this.getRoles(); + }) + } + + getRoles() { + this.roleDataSource = []; + this.totalRecords = 0; + this.systemService.getUserRoles().pipe(take(1)).subscribe({ + next: (result: any) => { + this.roleDataSource = result; + this.totalRecords = result.length; + this.cdRef.detectChanges(); + }, + error: (error: any) => { + this.notification.showError(`Error: ${error?.message || 'Failed to fetch roles'}`); + this.cdRef.detectChanges(); + } + }); + } + + addRole() { + this.dialogConfig.disableClose = true; + const dialogRef = this.dialog.open(AddRoleDialog, this.dialogConfig); + dialogRef.afterClosed().subscribe((isUpdated: boolean) => { + if (isUpdated) { + this.getRoles(); + } + }) + } + + deleteRole(_role: any) { + let confirmMsg = `Are you sure you want to delete "${_role?.role_name}"? This action cannot be undone.` + this.confirmationService.openConfirmDialog({ + title: `Delete Role - ${_role?.role_name}?`, + message: confirmMsg, + confirmButtonText: 'Yes, Delete It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe(result => { + if (result) { + let rawPayload = new FormData(); + rawPayload.set('pk', JSON.stringify({id: _role.id})); + this.systemService.deleteUserRole(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (!result[0]) { + this.notification.showError(`Failed - ${result[1]}`); + } + } + }, + error: (err: any) => { + if (err?.status === 200) { + // ToDo: Backend fix required. + this.notification.showSuccess(`${_role?.role_name} deleted successfully!`); + this.getRoles(); + } else { + this.notification.showError('Deletion Failed.'); + } + } + }) + } else { + this.notification.showSuccess('Deletion cancelled.'); + } + }) + } + + renameRole(_role: any) { + this.dialogConfig.data = _role; + this.dialogConfig.disableClose = true; + const dialogRef = this.dialog.open(RenameRoleDialog, this.dialogConfig); + dialogRef.afterClosed().subscribe((isUpdated: boolean) => { + if (isUpdated) { + this.getRoles(); + } + }) + } + + goToDetails(_role: any) { + this.router.navigate(['/system/admin-tools/role', _role.role_name], { + state: { roleDetails: _role } + }); + } } + +@Component({ + selector: 'rename-role', + templateUrl: './rename-role.html', + imports: [SharedModule] +}) +export class RenameRoleDialog implements OnInit { + + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + roleForm: FormGroup; + + constructor( + private formBuilder: FormBuilder, + private systemService: SystemService, + private notification: NotificationService, + ) { + this.roleForm = this.formBuilder.group({ + role_name: ['', Validators.required], + }) + } + + ngOnInit() { + this.roleForm.patchValue(this.data) + } + + onSubmit() { + if (this.roleForm.invalid) { + console.log(this.roleForm.value); + this.roleForm.markAllAsTouched(); + return; + } + let rawPayload = new FormData(); + rawPayload.set('post_data', JSON.stringify({id: this.data.id, role_name: this.roleForm.value.role_name})); + this.systemService.renameUserRole(this.data.id, rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (result[0]) { + this.notification.showSuccess(`The role has been updated successfully!`); + this.dialogRef.close(true); + } else { + this.notification.showError(`Failed to update the role - ${result[1]}`); + } + } + }, + error: () => { + this.notification.showError(`Failed to update the role.`); + } + }) + } + + onCancel() { + this.dialogRef.close(false); + } +} + +@Component({ + selector: 'add-role', + templateUrl: './add-role.html', + imports: [SharedModule] +}) +export class AddRoleDialog implements OnInit { + + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + roleForm: FormGroup; + + constructor( + private formBuilder: FormBuilder, + private systemService: SystemService, + private notification: NotificationService, + ) { + this.roleForm = this.formBuilder.group({ + role_name: ['', Validators.required], + }) + } + + ngOnInit() { + this.roleForm.patchValue(this.data) + } + + onSubmit() { + if (this.roleForm.invalid) { + console.log(this.roleForm.value); + this.roleForm.markAllAsTouched(); + return; + } + let rawPayload = new FormData(); + rawPayload.set('post_data', JSON.stringify({role_name: this.roleForm.value.role_name})); + this.systemService.addUserRole(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (result[0]) { + this.notification.showSuccess(`The role has been added successfully!`); + this.dialogRef.close(true); + } else { + this.notification.showError(`Failed to add the role - ${result[1]}`); + } + } + }, + error: () => { + this.notification.showError(`Failed to add the role.`); + } + }) + } + + onCancel() { + this.dialogRef.close(false); + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.html (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.html (working copy) @@ -1 +1,54 @@ -

system-control works!

+ + + System Shutdown + + +
+
+ + + + @for (_options of shutdownOptions; track _options) { + {{ _options.displayName }} + } + + +
+
+ +
+
+ + + + + System Reboot + + +
+
+ +
+
+ + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.scss (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.scss (working copy) @@ -0,0 +1,22 @@ +.page-card-1 { + width: 100%; + border-radius: 0; + background-color: inherit; + font-size: 14px !important; + + mat-card-header { + color: #1170cf; + } +} + +mat-card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4px 10px; +} + +mat-card-title { + font-size: medium; +} + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.ts (working copy) @@ -1,11 +1,108 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {SharedModule} from '../../../shared/shared-module'; +import {Confirmation} from '../../../services/confirmation'; +import {SystemService} from '../../../services/system-service'; +import {take} from 'rxjs/operators'; +import {NotificationService} from '../../../services/notification'; @Component({ selector: 'app-system-control', - imports: [], + imports: [ + SharedModule + ], templateUrl: './system-control.html', styleUrl: './system-control.scss' }) export class SystemControl { + systemRebootForm: FormGroup; + systemShutdownForm: FormGroup; + + shutdownOptions: any[] = [ + {value: 'halt', displayName: 'Halt'}, + {value: 'poweroff', displayName: 'PowerOff'}, + ] + + constructor( + private formBuilder: FormBuilder, + private confirmationService: Confirmation, + private systemService: SystemService, + private notification: NotificationService, + ) { + this.systemRebootForm = this.formBuilder.group({}); + this.systemShutdownForm = this.formBuilder.group({ + option: ['halt', [Validators.required]], + }); + } + + rebootSystem() { + let confirmMsg = `Please confirm your intent to execute the system reboot. This process will induce a temporary period of unavailability, estimated to last for a few seconds.` + this.confirmationService.openConfirmDialog({ + title: `System Reboot`, + message: confirmMsg, + confirmButtonText: 'Reboot', + cancelButtonText: 'Cancel', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe((result: boolean) => { + if (result) { + let payload: any = { + option: null + }; + let rawPayload = new FormData(); + rawPayload.set('action', 'Reboot'); + rawPayload.set('options', JSON.stringify(payload)); + this.systemService.performSystemReboot(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 0 && result[0]) { + this.notification.showSuccess('System Reboot Initiated.'); + } else { + this.notification.showError('System Reboot Failed.'); + } + }, + error: (err: any) => { + this.notification.showError('System Reboot Failed.'); + } + }) + } + }) + } + + shutdownSystem() { + let confirmMsg = `Please be advised that initiating the system shutdown will render the system inaccessible until it is manually powered on.` + this.confirmationService.openConfirmDialog({ + title: `System Shutdown`, + message: confirmMsg, + confirmButtonText: 'Shutdown', + cancelButtonText: 'Cancel', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe((result: boolean) => { + if (result) { + let payload: any = { + option: this.systemShutdownForm.value.option + }; + let rawPayload = new FormData(); + rawPayload.set('action', 'Shutdown'); + rawPayload.set('options', JSON.stringify(payload)); + this.systemService.performSystemReboot(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + // ToDo: Fix backend - no response from the backend. + }, + error: (err: any) => { + if (err.status === 500) { + this.notification.showError('System shutdown initiated.'); + } else { + this.notification.showError('System shutdown Failed.'); + } + } + }) + } + }) + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/add-user.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/add-user.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/add-user.html (working copy) @@ -0,0 +1,151 @@ +

Add System Administrator

+ +
+
+ + + + @if (userForm.get('username')?.invalid && userForm.get('username')?.touched) { + + @if (userForm.get('username')?.errors?.['required']) { + Username is required. + } @else if (userForm.get('username')?.errors) { + Invalid username format. + } + + } + +
+
+ + + + @for (_type of userTypes; track _type) { + {{ _type.label }} + } + + @if (userForm.get('user_type')?.invalid && userForm.get('user_type')?.touched) { + + @if (userForm.get('user_type')?.errors?.['required']) { + User type is required. + } @else if (userForm.get('user_type')?.errors) { + Invalid user type format. + } + + } + +
+ @if (userForm.get('user_type')?.value === 'Device Admin') { +
+ + + + @for (_role of this.data.roles; track _role) { + {{ _role.role_name }} + } + + @if (userForm.get('role_id')?.invalid && userForm.get('role_id')?.touched) { + + @if (userForm.get('role_id')?.errors?.['requiredForDeviceAdmin']) { + Role is required. + } @else if (userForm.get('role_id')?.errors) { + Invalid role format. + } + + } + +
+ } +
+ + + + @if (userForm.get('password')?.invalid && userForm.get('password')?.touched) { + + @if (userForm.get('password')?.errors?.['required']) { + Password is required. + } @else if (userForm.get('password')?.errors) { + Invalid password format. + } + + } + +
+
+ + + + @if (userForm.get('confirm_password')?.invalid && userForm.get('confirm_password')?.touched) { + + @if (userForm.get('confirm_password')?.errors?.['required']) { + Confirm password is required. + } @else if (userForm.get('confirm_password')?.errors) { + Invalid confirm password format. + } + + } + +
+
+ + + + @if (userForm.get('email')?.invalid && userForm.get('email')?.touched) { + + @if (userForm.get('email')?.errors?.['required']) { + Email is required. + } @else if (userForm.get('email')?.errors) { + Invalid email format. + } + + } + +
+ @if (userForm.hasError('passwordMismatch') && userForm.get('confirm_password')?.touched) { + + Please verify that the password and its confirmation are identical. + + } +
+ + + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/modify-user.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/modify-user.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/modify-user.html (working copy) @@ -0,0 +1,151 @@ +

Modify System Administrator

+ +
+
+ + + + @if (userForm.get('username')?.invalid && userForm.get('username')?.touched) { + + @if (userForm.get('username')?.errors?.['required']) { + Username is required. + } @else if (userForm.get('username')?.errors) { + Invalid username format. + } + + } + +
+
+ + + + @for (_type of userTypes; track _type) { + {{ _type.label }} + } + + @if (userForm.get('user_type')?.invalid && userForm.get('user_type')?.touched) { + + @if (userForm.get('user_type')?.errors?.['required']) { + User type is required. + } @else if (userForm.get('user_type')?.errors) { + Invalid user type format. + } + + } + +
+ @if (userForm.get('user_type')?.value === 'Device Admin') { +
+ + + + @for (_role of this.data.roles; track _role) { + {{ _role.role_name }} + } + + @if (userForm.get('role_id')?.invalid && userForm.get('role_id')?.touched) { + + @if (userForm.get('role_id')?.errors?.['requiredForDeviceAdmin']) { + Role is required. + } @else if (userForm.get('role_id')?.errors) { + Invalid role format. + } + + } + +
+ } +
+ + + + @if (userForm.get('password')?.invalid && userForm.get('password')?.touched) { + + @if (userForm.get('password')?.errors?.['required']) { + Password is required. + } @else if (userForm.get('password')?.errors) { + Invalid password format. + } + + } + +
+
+ + + + @if (userForm.get('confirm_password')?.invalid && userForm.get('confirm_password')?.touched) { + + @if (userForm.get('confirm_password')?.errors?.['required']) { + Confirm password is required. + } @else if (userForm.get('confirm_password')?.errors) { + Invalid confirm password format. + } + + } + +
+
+ + + + @if (userForm.get('email')?.invalid && userForm.get('email')?.touched) { + + @if (userForm.get('email')?.errors?.['required']) { + Email is required. + } @else if (userForm.get('email')?.errors) { + Invalid email format. + } + + } + +
+ @if (userForm.hasError('passwordMismatch') && userForm.get('confirm_password')?.touched) { + + Please verify that the password and its confirmation are identical. + + } +
+ + + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/user-management.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/user-management.html (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/user-management.html (working copy) @@ -1 +1,57 @@ -

user-management works!

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Id.{{ i + 1 }}Username{{ element.username }}User Type{{ element.user_type }}Role Name{{ element.role_name }}Email{{ element.email }}Action +
+    + @if (element?.user_type === 'Device Admin') { +    + } @else { +    + } + +
+
No results found.
+ +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/user-management.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/user-management.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/user-management.ts (working copy) @@ -1,11 +1,346 @@ -import { Component } from '@angular/core'; +import {ChangeDetectorRef, Component, inject, OnInit} from '@angular/core'; +import {SharedModule} from '../../../shared/shared-module'; +import {SystemService} from '../../../services/system-service'; +import {NotificationService} from '../../../services/notification'; +import {Confirmation} from '../../../services/confirmation'; +import {Router} from '@angular/router'; +import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog'; +import {take} from 'rxjs/operators'; +import {AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators} from '@angular/forms'; +import {CustomValidators} from '../../../utils/custom-validators'; @Component({ selector: 'app-user-management', - imports: [], + imports: [SharedModule,], templateUrl: './user-management.html', styleUrl: './user-management.scss' }) -export class UserManagement { +export class UserManagement implements OnInit { + totalRecords: number = 0; + + userDataSource: any[] = []; + userColumns: string[] = ['serial', 'username', 'type', 'role', 'email', 'action']; + dialog = inject(MatDialog); + dialogConfig = new MatDialogConfig(); + roles: any[] = []; + + constructor( + private systemService: SystemService, + private notification: NotificationService, + private cdRef: ChangeDetectorRef, + private confirmationService: Confirmation, + private router: Router + ) { + } + + ngOnInit() { + setTimeout(() => { + this.getUsers(); + this.getRoles(); + }) + } + + getUsers() { + this.userDataSource = []; + this.systemService.getUsers().pipe(take(1)).subscribe({ + next: (result: any) => { + this.userDataSource = result; + this.totalRecords = result.length; + this.cdRef.detectChanges(); + }, + error: (error: any) => { + this.notification.showError(`Error: ${error?.message || 'Failed to fetch roles'}`); + this.cdRef.detectChanges(); + } + }); + } + + getRoles() { + this.roles = []; + this.systemService.getUserRoles().pipe(take(1)).subscribe({ + next: (result: any) => { + this.roles = result; + this.cdRef.detectChanges(); + }, + error: (error: any) => { + this.notification.showError(`Error: ${error?.message || 'Failed to fetch roles'}`); + this.cdRef.detectChanges(); + } + }); + } + + addUser(): void { + this.dialogConfig.data = { + roles: this.roles, + } + this.dialogConfig.width = '45%'; + this.dialogConfig.disableClose = true; + const dialogRef = this.dialog.open(AddUserDialog, this.dialogConfig); + dialogRef.afterClosed().subscribe((isUpdated: boolean) => { + if (isUpdated) { + this.getUsers(); + } + }) + } + + editUser(_user: any): void { + this.dialogConfig.data = { + user: _user, + roles: this.roles, + } + this.dialogConfig.width = '45%'; + this.dialogConfig.disableClose = true; + const dialogRef = this.dialog.open(ModifyUserDialog, this.dialogConfig); + dialogRef.afterClosed().subscribe((isUpdated: boolean) => { + if (isUpdated) { + this.getUsers(); + } + }) + } + + deleteUser(_user: any): void { + let confirmMsg = `Are you sure you want to delete user - "${_user?.username}"? This action cannot be undone.` + this.confirmationService.openConfirmDialog({ + title: `Delete User - ${_user?.username}?`, + message: confirmMsg, + confirmButtonText: 'Yes, Delete It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe(result => { + if (result) { + let rawPayload = new FormData(); + rawPayload.set('pk', JSON.stringify({username: _user.username})); + this.systemService.deleteUser(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (!result[0]) { + this.notification.showError(`Failed - ${result[1]}`); + } + } + }, + error: (err: any) => { + if (err?.status === 200) { + // ToDo: Backend fix required. + this.notification.showSuccess(`${_user?.username} deleted successfully!`); + this.getUsers(); + } else { + this.notification.showError('Deletion Failed.'); + } + } + }) + } else { + this.notification.showSuccess('Deletion cancelled.'); + } + }) + } + + showRoleDetails(_user: any): void { + let _role: any = {}; + for (const role of this.roles) { + if (role.id === _user.role_id) { + _role = role; + break; + } + } + this.router.navigate(['/system/admin-tools/role', _user.role_name], { + state: {roleDetails: _role} + }); + } } + +@Component({ + selector: 'add-user', + templateUrl: './add-user.html', + imports: [SharedModule] +}) +export class AddUserDialog implements OnInit { + + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + userForm: FormGroup; + + userTypes: any[] = [ + {value: 'Super Admin', label: 'Super Admin'}, + {value: 'Common Admin', label: 'Common Admin'}, + {value: 'Device Admin', label: 'Device Admin'}, + ] + + constructor( + private formBuilder: FormBuilder, + private systemService: SystemService, + private notification: NotificationService, + ) { + this.userForm = this.formBuilder.group({ + username: ['', Validators.required], + user_type: ['Common Admin', Validators.required], + role_id: [0], + password: ['', Validators.required], + confirm_password: ['', [Validators.required]], + email: ['', [Validators.required, Validators.email]], + }, {validators: [CustomValidators.passwordMatchValidator(), this.roleIdConditionalValidator()]}) + } + + ngOnInit() { + this.userForm.patchValue(this.data) + } + + roleIdConditionalValidator(): ValidatorFn { + return (control: AbstractControl): { [key: string]: any } | null => { + const userTypeControl = control.get('user_type'); + const roleIdControl = control.get('role_id'); + + if (userTypeControl && roleIdControl) { + if (userTypeControl.value === 'Device Admin' && !roleIdControl.value) { + roleIdControl.setErrors({'requiredForDeviceAdmin': true}); + return {'roleIdRequired': true}; + } else if (userTypeControl.value !== 'Device Admin' && roleIdControl.hasError('requiredForDeviceAdmin')) { + roleIdControl.setErrors(null); + } + } + return null; + }; + } + + onSubmit() { + if (this.userForm.invalid) { + console.log(this.userForm.value); + this.userForm.markAllAsTouched(); + return; + } + let payload: any = { + username: this.userForm.value.username, + user_type: this.userForm.value.user_type, + role_id: this.userForm.value.role_id, + root: this.userForm.value.user_type == 'Super Admin' ? 1 : 0, + passwords: this.userForm.value.password, + level: "config", + email: this.userForm.value.email, + } + let rawPayload = new FormData(); + rawPayload.set('post_data', JSON.stringify(payload)); + this.systemService.addUser(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (result[0]) { + this.notification.showSuccess(`The user has been added successfully!`); + this.dialogRef.close(true); + } else { + this.notification.showError(`Failed to add the user - ${result[1]}`); + } + } + }, + error: () => { + this.notification.showError(`Failed to add the user.`); + } + }) + } + + onCancel() { + this.dialogRef.close(false); + } +} + + +@Component({ + selector: 'modify-user', + templateUrl: './modify-user.html', + imports: [SharedModule] +}) +export class ModifyUserDialog implements OnInit { + + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + userForm: FormGroup; + + userTypes: any[] = [ + {value: 'Super Admin', label: 'Super Admin'}, + {value: 'Common Admin', label: 'Common Admin'}, + {value: 'Device Admin', label: 'Device Admin'}, + ] + + constructor( + private formBuilder: FormBuilder, + private systemService: SystemService, + private notification: NotificationService, + ) { + this.userForm = this.formBuilder.group({ + username: [{value: '', disabled: true}, Validators.required], + user_type: [{value: 'Common Admin', disabled: true}, Validators.required], + role_id: [{value: 0, disabled: true}], + password: ['', Validators.required], + confirm_password: ['', [Validators.required]], + email: ['', [Validators.required, Validators.email]], + }, {validators: [CustomValidators.passwordMatchValidator(), this.roleIdConditionalValidator()]}) + } + + ngOnInit() { + this.userForm.patchValue({ + username: this.data.user?.username, + user_type: this.data.user.user_type, + role_id: this.data.user.role_id, + email: this.data.user.email, + }) + } + + roleIdConditionalValidator(): ValidatorFn { + return (control: AbstractControl): { [key: string]: any } | null => { + const userTypeControl = control.get('user_type'); + const roleIdControl = control.get('role_id'); + + if (userTypeControl && roleIdControl) { + if (userTypeControl.value === 'Device Admin' && !roleIdControl.value) { + roleIdControl.setErrors({'requiredForDeviceAdmin': true}); + return {'roleIdRequired': true}; + } else if (userTypeControl.value !== 'Device Admin' && roleIdControl.hasError('requiredForDeviceAdmin')) { + roleIdControl.setErrors(null); + } + } + return null; + }; + } + + onSubmit() { + if (this.userForm.invalid) { + console.log(this.userForm.value); + this.userForm.markAllAsTouched(); + return; + } + let payload: any = { + user_type: this.userForm.value.user_type, + role_id: this.userForm.value.role_id, + root: this.userForm.value.user_type == 'Super Admin' ? 1 : 0, + passwords: this.userForm.value.password, + level: "config", + email: this.userForm.value.email, + } + let rawPayload = new FormData(); + rawPayload.set('post_data', JSON.stringify(payload)); + this.systemService.updateUser(this.data.user?.username, rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (result[0]) { + this.notification.showSuccess(`The user has been updated successfully!`); + this.dialogRef.close(true); + } else { + this.notification.showError(`Failed to update the user - ${result[1]}`); + } + } + }, + error: () => { + this.notification.showError(`Failed to update the user.`); + } + }) + } + + onCancel() { + this.dialogRef.close(false); + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts (working copy) @@ -70,4 +70,21 @@ SEND_TEST_EMAIL_URL: `${PREFIX}/composer/notify/channel/test`, SEND_TEST_WEBHOOK_URL: `${PREFIX}/composer/notify/channel/test`, ADD_NOTIFICATION_CHANNEL_URL: `${PREFIX}/composer/notify/channel/store`, + PERFORM_SYSTEM_REBOOT_URL: `${PREFIX}/api/cm/system/system_mgmt/SystemPowerManager/_perform`, + PERFORM_SYSTEM_SHUTDOWN_URL: `${PREFIX}/api/cm/system/system_mgmt/SystemPowerManager/_perform`, + GET_OPERATIONAL_LOGS_URL: `${PREFIX}/cm/get_operation_log`, + DELETE_OPERATIONAL_LOG_URL: `${PREFIX}/cm/del_operation_log`, + DELETE_ALL_OPERATIONAL_LOGS_URL: `${PREFIX}/cm/clear_operation_log`, + GET_USER_ROLES_URL: `${PREFIX}/api/cm/system/user_mgmt/Role/_get_list_data`, + RENAME_USER_ROLE_URL: `${PREFIX}/api/cm/system/user_mgmt/Role/_update/id`, + ADD_USER_ROLE_URL: `${PREFIX}/api/cm/system/user_mgmt/Role/_add`, + DELETE_USER_ROLE_URL: `${PREFIX}/api/cm/system/user_mgmt/Role/_delete`, + GET_DEVICE_GROUPS_BY_ROLE_ID_URL: `${PREFIX}/api/cm/device_mgmt/device_group/RoleDeviceGroup/_perform`, + GET_DEVICE_GROUPS_LIST_URL: `${PREFIX}/api/cm/device_mgmt/device_group/RoleDeviceGroup/_perform`, + UPDATE_USER_ROLE_DEVICE_GROUPS_URL: `${PREFIX}/api/cm/device_mgmt/device_group/RoleDeviceGroup/_perform`, + GET_USERS_URLS: `${PREFIX}/api/cm/system/user_mgmt/Administrator/_get_list_data`, + DELETE_USER_URL: `${PREFIX}/api/cm/system/user_mgmt/Administrator/_delete`, + ADD_USER_URL: `${PREFIX}/api/cm/system/user_mgmt/Administrator/_add`, + UPDATE_USER_URL: `${PREFIX}/api/cm/system/user_mgmt/Administrator/_update/username`, + } as const; // Makes properties readonly Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts (working copy) @@ -303,6 +303,121 @@ addNotificationChannel(payload: any) { return this.http.post(URLS.ADD_NOTIFICATION_CHANNEL_URL, payload); + } + + performSystemReboot(payload: any) { + return this.http.post(URLS.PERFORM_SYSTEM_REBOOT_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + performSystemShutdown(payload: any) { + return this.http.post(URLS.PERFORM_SYSTEM_SHUTDOWN_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) } + getOperationalLogs(payload: any) { + return this.http.post(URLS.GET_OPERATIONAL_LOGS_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + deleteOperationalLog(payload: any) { + return this.http.post(URLS.DELETE_OPERATIONAL_LOG_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + deleteAllOperationalLogs() { + return this.http.get(URLS.DELETE_ALL_OPERATIONAL_LOGS_URL); + } + + getUserRoles() { + return this.http.get(URLS.GET_USER_ROLES_URL); + } + + renameUserRole(roleId: number, payload: any) { + return this.http.post(`${URLS.RENAME_USER_ROLE_URL}/${roleId}`, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + addUserRole(payload: any) { + return this.http.post(URLS.ADD_USER_ROLE_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + deleteUserRole(payload: any) { + return this.http.post(URLS.DELETE_USER_ROLE_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + getDeviceGroupsByRoleId(payload: any) { + return this.http.post(URLS.GET_DEVICE_GROUPS_BY_ROLE_ID_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + getAllDeviceGroups(payload: any) { + return this.http.post(URLS.GET_DEVICE_GROUPS_LIST_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + updateDeviceGroupsForRoleId(payload: any) { + return this.http.post(URLS.UPDATE_USER_ROLE_DEVICE_GROUPS_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + getUsers() { + return this.http.get(URLS.GET_USERS_URLS); + } + + deleteUser(payload: any) { + return this.http.post(URLS.DELETE_USER_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + addUser(payload: any) { + return this.http.post(URLS.ADD_USER_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } + + updateUser(username: string, payload: any) { + return this.http.post(`${URLS.UPDATE_USER_URL}/%22${username}%22`, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }) + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts (working copy) @@ -24,6 +24,7 @@ faTv, faTerminal, faIdBadge, + faServer, } from '@fortawesome/free-solid-svg-icons'; import { faBell, @@ -39,7 +40,8 @@ faSave, faCalendar, faEdit, - faXmarkCircle + faXmarkCircle, + faBuilding, } from '@fortawesome/free-regular-svg-icons'; import {MatGridListModule} from '@angular/material/grid-list'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -157,7 +159,9 @@ faIdBadge, faCalendar, faEdit, - faXmarkCircle + faXmarkCircle, + faServer, + faBuilding ); } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/utils/custom-validators.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/utils/custom-validators.ts (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/utils/custom-validators.ts (working copy) @@ -54,6 +54,18 @@ }; } + static passwordMatchValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const password = control.get('password')?.value; + const confirmPassword = control.get('confirm_password')?.value; + + if (password && confirmPassword && password !== confirmPassword) { + return { passwordMismatch: true }; + } + return null; + }; + } + static isIPv4(ip: string): boolean { const ipv4Regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss (revision 2665) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss (working copy) @@ -279,3 +279,10 @@ .warning { color: red !important; } + +.disabled-state { + color: #a0a0a0; + opacity: 0.6; + cursor: not-allowed; + pointer-events: none; +}