summaryrefslogtreecommitdiffstats
path: root/mod2/ui/src/app/user-management
diff options
context:
space:
mode:
authorNicholas Soteropoulos <ns299g@us.att.com>2020-09-14 17:19:10 -0400
committerNicholas Soteropoulos <ns299g@us.att.com>2020-09-22 17:25:58 -0400
commit457685063fd4b960441e482cc8b88fa8c972a7d2 (patch)
treeb96a9bbc90c44a2319ed7666f2e811d1c20bd339 /mod2/ui/src/app/user-management
parent8f3e2c0068392a6d2e7aeed2959c3a681f6a1fe6 (diff)
Fix mod ui build issues
Change-Id: I4d002645240852a3a5f1964d9ffa2cac11c45b47 Signed-off-by: Nicholas Soteropoulos <ns299g@us.att.com> Issue-ID: DCAEGEN2-2317 Signed-off-by: Nicholas Soteropoulos <ns299g@us.att.com>
Diffstat (limited to 'mod2/ui/src/app/user-management')
-rw-r--r--mod2/ui/src/app/user-management/user-management.component.css54
-rw-r--r--mod2/ui/src/app/user-management/user-management.component.html89
-rw-r--r--mod2/ui/src/app/user-management/user-management.component.spec.ts63
-rw-r--r--mod2/ui/src/app/user-management/user-management.component.ts149
4 files changed, 355 insertions, 0 deletions
diff --git a/mod2/ui/src/app/user-management/user-management.component.css b/mod2/ui/src/app/user-management/user-management.component.css
new file mode 100644
index 0000000..495d0f8
--- /dev/null
+++ b/mod2/ui/src/app/user-management/user-management.component.css
@@ -0,0 +1,54 @@
+/*
+ * # ============LICENSE_START=======================================================
+ * # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
+ * # ================================================================================
+ * # Licensed under the Apache License, Version 2.0 (the "License");
+ * # you may not use this file except in compliance with the License.
+ * # You may obtain a copy of the License at
+ * #
+ * # http://www.apache.org/licenses/LICENSE-2.0
+ * #
+ * # Unless required by applicable law or agreed to in writing, software
+ * # distributed under the License is distributed on an "AS IS" BASIS,
+ * # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * # See the License for the specific language governing permissions and
+ * # limitations under the License.
+ * # ============LICENSE_END=========================================================
+ */
+
+.pi-trash:hover {
+ color:red;
+}
+.pi-pencil:hover {
+ color:blue;
+}
+
+label {
+ cursor: pointer;
+}
+
+.input{
+ padding-top: 10px;
+}
+
+.inputLabel {
+ font-weight: 600;
+ margin-left: 20px;
+ width: 140px;
+}
+
+.inputFieldSm {
+ width: 200px;
+ height: 35px;
+ padding-left: 6px;
+}
+.inputFieldMed {
+ width: 300px;
+ height: 35px;
+ padding-left: 6px;
+}
+.inputFieldLg {
+ width: 400px;
+ height: 35px;
+ padding-left: 6px;
+} \ No newline at end of file
diff --git a/mod2/ui/src/app/user-management/user-management.component.html b/mod2/ui/src/app/user-management/user-management.component.html
new file mode 100644
index 0000000..6885fe1
--- /dev/null
+++ b/mod2/ui/src/app/user-management/user-management.component.html
@@ -0,0 +1,89 @@
+<!--
+ # ============LICENSE_START=======================================================
+ # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
+ # ================================================================================
+ # Licensed under the Apache License, Version 2.0 (the "License");
+ # you may not use this file except in compliance with the License.
+ # You may obtain a copy of the License at
+ #
+ # http://www.apache.org/licenses/LICENSE-2.0
+ #
+ # Unless required by applicable law or agreed to in writing, software
+ # distributed under the License is distributed on an "AS IS" BASIS,
+ # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ # See the License for the specific language governing permissions and
+ # limitations under the License.
+ # ============LICENSE_END=========================================================
+ -->
+
+<div style="margin: 0px 20px 10px 20px">
+ <p-table #dt [value]="users" [rowHover]="true">
+ <ng-template pTemplate="caption">
+ <h5><strong>System User List and Management</strong><i style="font-size: smaller;"> ( for admin only )</i></h5>
+ <br/>
+ <a routerLink="/register">Want to register a new user? Click here!</a>
+ </ng-template>
+ <ng-template pTemplate="header">
+ <tr>
+ <th style="width: 15%">Username (ATT UID)</th>
+ <th>Full Name</th>
+ <th>Roles</th>
+ <!-- <th>Active Status</th> -->
+ <th style="width: 15%">Actions</th>
+ </tr>
+ </ng-template>
+ <ng-template pTemplate="body" let-user>
+ <tr>
+ <td>{{user.username}}</td>
+ <td>{{user.fullName}}</td>
+ <td>{{user.roles}}</td>
+ <!-- <td>true</td> -->
+ <td>
+ <i class="pi pi-trash" (click)="handleDelete(user.username)" pTooltip="delete user" tooltipPosition="right"></i>
+ <i class="pi pi-pencil" (click)="handleEdit(user)" pTooltip="edit user" tooltipPosition="right" style="margin-left: .5em;"></i>
+ </td>
+ </tr>
+ </ng-template>
+ </p-table>
+
+ <!--edit user information dialog-->
+ <p-dialog [(visible)]="editUserFlag" appendTo="body" [modal]="true" [transitionOptions]="'300ms'" [style]="{width: '635px'}" [baseZIndex]="10000"
+ [closable]="true" (onHide)="closeEditDialog()">
+ <p-header style="display: inline-flex;">
+ Edit User Information
+ </p-header>
+
+ <form [formGroup]="editUserForm">
+ <!-- * * * Username * * * -->
+ <div class="input">
+ <label class="inputLabel">ATT UID</label>&nbsp;
+ <b>{{editUser.username}}</b>
+ </div>
+ <!-- * * * User Full Name * * * -->
+ <div class="input">
+ <label class="inputLabel">Full Name</label>&nbsp;
+ <input class="inputFieldSm" type="text" pInputText formControlName="fullName"/>
+ </div>
+ <!-- * * * Roles * * * -->
+ <div class="input">
+ <label class="inputLabel">Roles</label>&nbsp;
+ <p-multiSelect [options]="rolesFromBackend" formControlName="roles" [showToggleAll]="true" [virtualScroll]="true" [filter]="false" [style]="{height:'3.6em', width:'200px'}"></p-multiSelect>
+ <!-- <b>{{editUser.roles}}</b> -->
+ </div>
+ <!-- * * * Re-Generate Password * * * -->
+ <div class="input">
+ <div class="ui-inputgroup">
+ <label class="inputLabel">New Password</label>&nbsp;
+ <button pButton type="button" icon="pi pi-refresh" class="ui-button-warn" (click)="generateNewPassword()" ></button>
+ <input type="text" pInputText formControlName="password" placeholder="Generate password" class="ui-inputtext" pTooltip="Password should be greater than 5 characters" tooltipPosition="right">
+ </div>
+ </div>
+ <i *ngIf="editUserForm.get('password').errors && editUserForm.get('password').errors.minlength" style="width: 140px;margin-left: 20px;font-size: small;color: red;">password should be at least 6 characters</i>
+ <!-- * * * Submit and Cancel buttons * * * -->
+ <div style="margin-top: 2em; margin-left: 1.3em; margin-bottom: 2em;">
+ <button pButton type="button" (click)="closeEditDialog()" label="Cancel"></button>&nbsp;
+ <button pButton type="submit" (click)="submitEdit(editUser)" class="ui-button-success" label="Submit" style="width: 70px"></button>
+ </div>
+ </form>
+</p-dialog>
+</div> \ No newline at end of file
diff --git a/mod2/ui/src/app/user-management/user-management.component.spec.ts b/mod2/ui/src/app/user-management/user-management.component.spec.ts
new file mode 100644
index 0000000..2cb6a6e
--- /dev/null
+++ b/mod2/ui/src/app/user-management/user-management.component.spec.ts
@@ -0,0 +1,63 @@
+/*
+ * # ============LICENSE_START=======================================================
+ * # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
+ * # ================================================================================
+ * # Licensed under the Apache License, Version 2.0 (the "License");
+ * # you may not use this file except in compliance with the License.
+ * # You may obtain a copy of the License at
+ * #
+ * # http://www.apache.org/licenses/LICENSE-2.0
+ * #
+ * # Unless required by applicable law or agreed to in writing, software
+ * # distributed under the License is distributed on an "AS IS" BASIS,
+ * # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * # See the License for the specific language governing permissions and
+ * # limitations under the License.
+ * # ============LICENSE_END=========================================================
+ */
+
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
+import { DialogModule } from 'primeng/dialog';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { TableModule } from 'primeng/table';
+
+import { UserManagementComponent } from './user-management.component';
+
+describe('UserManagementComponent', () => {
+ let component: UserManagementComponent;
+ let fixture: ComponentFixture<UserManagementComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [UserManagementComponent],
+ imports: [
+ TableModule,
+ DialogModule,
+ MultiSelectModule,
+ FormsModule,
+ ReactiveFormsModule,
+ HttpClientTestingModule,
+ RouterTestingModule
+ ],
+ providers: [
+ { provide: JWT_OPTIONS, useValue: JWT_OPTIONS },
+ JwtHelperService
+ ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UserManagementComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/mod2/ui/src/app/user-management/user-management.component.ts b/mod2/ui/src/app/user-management/user-management.component.ts
new file mode 100644
index 0000000..b7ee6e7
--- /dev/null
+++ b/mod2/ui/src/app/user-management/user-management.component.ts
@@ -0,0 +1,149 @@
+/*
+ * # ============LICENSE_START=======================================================
+ * # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
+ * # ================================================================================
+ * # Licensed under the Apache License, Version 2.0 (the "License");
+ * # you may not use this file except in compliance with the License.
+ * # You may obtain a copy of the License at
+ * #
+ * # http://www.apache.org/licenses/LICENSE-2.0
+ * #
+ * # Unless required by applicable law or agreed to in writing, software
+ * # distributed under the License is distributed on an "AS IS" BASIS,
+ * # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * # See the License for the specific language governing permissions and
+ * # limitations under the License.
+ * # ============LICENSE_END=========================================================
+ */
+
+import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { User } from '../models/User';
+import { UserService } from '../services/user.service';
+import { Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { SelectItem } from 'primeng/api';
+import { AuthService } from '../services/auth.service';
+
+@Component({
+ selector: 'app-user-management',
+ templateUrl: './user-management.component.html',
+ styleUrls: ['./user-management.component.css']
+})
+export class UserManagementComponent implements OnInit {
+
+ users: User[] = [];
+ editUser: User = {
+ username:'',
+ fullName:'',
+ roles: []
+ };
+ editUserFlag: boolean = false;
+ editUserForm: FormGroup;
+ rolesFromBackend = [];
+ selectedRoles : Array<String>= [];
+
+ constructor(private userService: UserService, private router: Router, private fb: FormBuilder, private authService: AuthService) { }
+
+ ngOnInit() {
+ this.userService.getUsers().subscribe((res: User[]) => {
+ this.users = res;
+ this.users.map(user=>{
+ let tempRoles = [];
+ user.roles.map(role=>{
+ tempRoles.push(role.name.substring(5));
+ });
+ user.roles = tempRoles;
+ });
+
+ });
+ this.editUserForm = this.fb.group({
+ username: '',
+ fullName: '',
+ password: [null, [ Validators.minLength(6)]],
+ roles: [this.selectedRoles, [Validators.required]]
+ });
+ this.userService.getRoles().subscribe(res=>{
+ Object.values(res).forEach(ele=>{
+ this.rolesFromBackend.push({label:ele.substring(5), value:ele});
+ });
+ });
+ }
+
+ handleDelete(username) {
+ const result = window.confirm('Are you sure to delete this user?');
+ if(result === true) {
+ this.userService.deleteUser(username).subscribe(res=>{
+ alert(res.message);
+ this.userService.getUsers().subscribe( r => {
+ this.users = r;
+ this.users.map(user=>{
+ let tempRoles = [];
+ user.roles.map(role=>{
+ tempRoles.push(role.name.substring(5));
+ });
+ user.roles = tempRoles;
+ });
+ });
+ });
+ }
+ }
+
+ handleEdit(user) {
+ this.selectedRoles = [];
+ this.editUserFlag = true;
+ this.editUser = user;
+ this.editUserForm.get('username').setValue(user.username);
+ this.editUserForm.get('fullName').setValue(user.fullName);
+ user.roles.map(ele => {
+ let temp = "ROLE_" + ele;
+ this.selectedRoles.push(temp);
+ })
+
+ this.editUserForm.get('roles').setValue(this.selectedRoles);
+
+ }
+
+ closeEditDialog() {
+ this.editUserForm.reset();
+ this.editUserFlag = false;
+ }
+
+ generateNewPassword() {
+ this.editUserForm.value.password = '';
+ const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&';
+ var array = new Uint32Array(32);
+ window.crypto.getRandomValues(array);
+ for(let i=0;i<32;i++) {
+ const index = Math.floor(array[i] % chars.length);
+ this.editUserForm.value.password += chars.charAt(index);
+ }
+ this.editUserForm.patchValue({password: this.editUserForm.value.password});
+ }
+
+ submitEdit(user) {
+ this.editUserFlag = false;
+ console.log(this.editUserForm.value.fullName);
+ let tempUser = this.editUserForm.value as User;
+ console.log(tempUser);
+ this.userService.editUser(user.username, this.editUserForm.value as User).subscribe(res=>{
+ alert("User information updated successfully.");
+ this.userService.getUsers().subscribe( r => {
+ this.users = r;
+ this.users.map(user=>{
+ let tempRoles = [];
+ user.roles.map(role=>{
+ tempRoles.push(role.name.substring(5));
+ });
+ user.roles = tempRoles;
+ });
+ }, (err)=>{
+ // alert(err.error.message);
+ alert("Sorry but your credentials are out of date. Please log in again to resolve this.");
+ this.authService.logout();
+ });
+ }, (err)=>{
+ alert(err.error.message);
+ });
+ }
+
+}