mod2/ui/src/app/user-management/user-management.component.html

   1 <!--
   2   # ============LICENSE_START=======================================================
   3   # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
   4   # ================================================================================
   5   # Licensed under the Apache License, Version 2.0 (the "License");
   6   # you may not use this file except in compliance with the License.
   7   # You may obtain a copy of the License at
   8   #
   9   #      http://www.apache.org/licenses/LICENSE-2.0
  10   #
  11   # Unless required by applicable law or agreed to in writing, software
  12   # distributed under the License is distributed on an "AS IS" BASIS,
  13   # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14   # See the License for the specific language governing permissions and
  15   # limitations under the License.
  16   # ============LICENSE_END=========================================================
  17  -->
  18
  19 <div style="margin: 0px 20px 10px 20px">
  20     <p-table #dt [value]="users" [rowHover]="true">
  21         <ng-template pTemplate="caption">
  22             <h5><strong>System User List and Management</strong><i style="font-size: smaller;"> ( for admin only )</i></h5>
  23             <br/>
  24                 <a routerLink="/register">Want to register a new user? Click here!</a>
  25         </ng-template>
  26         <ng-template pTemplate="header">
  27             <tr>
  28                 <th style="width: 15%">Username (ATT UID)</th>
  29                 <th>Full Name</th>
  30                 <th>Roles</th>
  31                 <!-- <th>Active Status</th> -->
  32                 <th style="width: 15%">Actions</th>
  33             </tr>
  34         </ng-template>
  35         <ng-template pTemplate="body" let-user>
  36             <tr>
  37                 <td>{{user.username}}</td>
  38                 <td>{{user.fullName}}</td>
  39                 <td>{{user.roles}}</td>
  40                 <!-- <td>true</td> -->
  41                 <td>
  42                     <i class="pi pi-trash" (click)="handleDelete(user.username)" pTooltip="delete user" tooltipPosition="right"></i>
  43                     <i class="pi pi-pencil" (click)="handleEdit(user)" pTooltip="edit user" tooltipPosition="right" style="margin-left: .5em;"></i>
  44                 </td>
  45             </tr>
  46         </ng-template>
  47     </p-table>
  48
  49     <!--edit user information dialog-->
  50     <p-dialog [(visible)]="editUserFlag" appendTo="body" [modal]="true" [transitionOptions]="'300ms'" [style]="{width: '635px'}" [baseZIndex]="10000"
  51     [closable]="true" (onHide)="closeEditDialog()">
  52     <p-header style="display: inline-flex;">
  53         Edit User Information
  54     </p-header>
  55
  56     <form [formGroup]="editUserForm">
  57         <!-- * * * Username * * * -->
  58         <div class="input">
  59             <label class="inputLabel">ATT UID</label>&nbsp;
  60             <b>{{editUser.username}}</b>
  61         </div>
  62         <!-- * * * User Full Name * * * -->
  63         <div class="input">
  64             <label class="inputLabel">Full Name</label>&nbsp;
  65             <input class="inputFieldSm" type="text" pInputText formControlName="fullName"/>
  66         </div>
  67         <!-- * * * Roles * * * -->
  68         <div class="input">
  69             <label class="inputLabel">Roles</label>&nbsp;
  70             <p-multiSelect [options]="rolesFromBackend" formControlName="roles" [showToggleAll]="true" [virtualScroll]="true" [filter]="false" [style]="{height:'3.6em', width:'200px'}"></p-multiSelect>
  71             <!-- <b>{{editUser.roles}}</b> -->
  72         </div>
  73         <!-- * * * Re-Generate Password * * * -->
  74         <div class="input">
  75             <div class="ui-inputgroup">
  76                 <label class="inputLabel">New Password</label>&nbsp;
  77                 <button pButton type="button" icon="pi pi-refresh" class="ui-button-warn" (click)="generateNewPassword()" ></button>
  78                 <input type="text" pInputText formControlName="password" placeholder="Generate password" class="ui-inputtext" pTooltip="Password should be greater than 5 characters" tooltipPosition="right">
  79             </div>
  80         </div>
  81         <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>
  82         <!-- * * * Submit and Cancel buttons * * * -->
  83         <div style="margin-top: 2em; margin-left: 1.3em; margin-bottom: 2em;">
  84             <button pButton type="button" (click)="closeEditDialog()" label="Cancel"></button>&nbsp;
  85             <button pButton type="submit" (click)="submitEdit(editUser)" class="ui-button-success" label="Submit" style="width: 70px"></button>
  86         </div>
  87     </form>
  88 </p-dialog>
  89 </div>