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>

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);
+    });
+  }
+  
+}