mod2/ui/src/app/app.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 <ng4-loading-spinner></ng4-loading-spinner>
  20 <mat-sidenav-container style="background: linear-gradient(to top, #878C94 0%, #DCDFE3 10%, #F2F2F2 40%, #DCDFE3 80%, #878C94 110%);" class="sidenav-container" *ngIf="authService.authPass">
  21     <mat-sidenav [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive" #sideMenu class="sidenav"
  22         fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
  23         [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === true">
  24         <mat-toolbar></mat-toolbar>
  25         <hr width=90%>
  26         <mat-action-list style="margin-top: -10px;">
  27             <button class="nav" mat-list-item (click)="setCrumbs('', 'reset')" [routerLink]="'/home'" [routerLinkActive]="'is-active'">Home</button>
  28             <button class="nav" mat-list-item (click)="setCrumbs('User Management', 'reset')" *ngIf="authService.isAdmin" [routerLink]="'/users'" [routerLinkActive]="'is-active'">User Management</button>
  29             <button class="nav" mat-list-item (click)="setCrumbs('Onboarding Tools', 'reset')" [routerLink]="'/OnboardingTools'" [skipLocationChange]="false" [routerLinkActive]="'is-active'">Onboarding Tools</button>
  30             <button class="nav" mat-list-item (click)="msMenu()">
  31                 <i *ngIf="msMenuIconRight" class="pi pi-chevron-right"></i>
  32                 <i *ngIf="!msMenuIconRight" class="pi pi-chevron-down"></i>
  33                 &nbsp;&nbsp;Microservices</button>
  34             <div *ngIf="showMsMenu" style="margin-left: 20px;">
  35                 <button class="subMenuItem" mat-list-item (click)="setCrumbs('Microservices', 'reset')" [routerLink]="'/base-microservices'" [routerLinkActive]="'is-active'">Microservices</button>
  36                 <button class="subMenuItem" mat-list-item (click)="setCrumbs('MS Instances', 'reset')"  [routerLink]="'/ms-instances'" [routerLinkActive]="'is-active'">MS Instances</button>
  37                 <button class="subMenuItem" mat-list-item (click)="setCrumbs('Blueprints', 'reset')"    [routerLink]="'/blueprints'" [routerLinkActive]="'is-active'">Blueprints</button>
  38
  39                 <button class="nav" mat-list-item (click)="utilitiesMenu()">
  40                     <i *ngIf="utilitiesMenuIconRight" class="pi pi-chevron-right"></i>
  41                     <i *ngIf="!utilitiesMenuIconRight" class="pi pi-chevron-down"></i>
  42                     &nbsp;&nbsp;Utilites</button>
  43
  44                 <div *ngIf="showUtilitiesMenu" style="margin-left: 20px;">
  45                     <button class="subMenuItem" mat-list-item (click)="setCrumbs('Spec Validator', 'reset')"
  46                         [routerLink]="'/spec-validator'" [routerLinkActive]="'is-active'">Spec Validator</button>
  47                     <button class="subMenuItem" mat-list-item (click)="redirectToAPIs()">MOD APIs</button>
  48                 </div>
  49             </div>
  50                 <button class="nav" mat-list-item (click)='redirectTo("https://wiki.web.att.com/pages/viewpage.action?spaceKey=DPD&title=DCAE+MOD+User+Guide")'>User Guide</button>
  51
  52         </mat-action-list>
  53     </mat-sidenav>
  54     <mat-sidenav-content style="margin-top: 70px; max-height: 90%">
  55         <!-- Top bar when Logged in -->
  56         <mat-toolbar [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive" color="primary"
  57                      fixedInViewport="true" style="background-color: #1D2329; color:#F2F2F2">
  58             <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="sideMenu.toggle()" style="color:#F2F2F2">
  59                 <i *ngIf="!sideMenu.opened" class="pi pi-angle-double-right" style="font-size: 25px; margin-left: -30px; margin-bottom: 8px;"></i>
  60                 <i *ngIf="sideMenu.opened"  class="pi pi-angle-double-left"  style="font-size: 25px; margin-left: -30px; margin-bottom: 8px;"></i>
  61             </button>
  62             <span style="font-size: 22px; font-weight: 500; margin-left: 35px">MOD</span>
  63             <button type="button" *ngIf="authService.authPass" (click)="handleLogout()"
  64                     style="float:right; margin-right: 18%; height: 32px; border: none; color:#F2F2F2; background: linear-gradient(to bottom, #1D2329 0%, #454B52 135%);
  65                            font-size: 16px; font-weight: 400">
  66                 <i class="pi pi-sign-out" style="vertical-align:text-top"></i>
  67                 Logout
  68             </button>
  69             <button type="button" *ngIf="authService.authPass" (click)="handleProfile()"
  70                 style="float:right; margin-right: 4%; height: 32px; border: none; color:#F2F2F2; background: linear-gradient(to bottom, #1D2329 0%, #454B52 135%);
  71                     font-size: 16px; font-weight: 400">
  72                     <i class="pi pi-user-edit" style="vertical-align:text-top"></i>
  73                 {{authService.getUser().username}}
  74             </button>
  75             <!-- BREADCRUMBS . . . . . -->
  76             <ul class="breadcrumb">
  77                 <li *ngFor="let crumb of breadcrumbs" [routerLink]="crumb.link" (click)="setCrumbs(crumb.page, 'crumbClicked')"><a>{{crumb.page}}</a></li>
  78             </ul>
  79         </mat-toolbar>
  80         <main [@routeAnimations]="prepareRoute(outlet)" class="content">
  81             <router-outlet #outlet="outlet"></router-outlet>
  82         </main>
  83     </mat-sidenav-content>
  84 </mat-sidenav-container>
  85
  86 <!-- Top bar when Logging in -->
  87 <mat-toolbar *ngIf="!authService.authPass" [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive" color="primary"
  88              fixedInViewport="true" style="background-color: #1D2329">
  89     <span style="font-size: 22px; font-weight: 500">MOD</span>
  90     <app-login></app-login>
  91 </mat-toolbar>
  92
  93 <!-- Login Expired dialog -->
  94 <p-dialog header="Login Expired" [(visible)]="authService.reLoginMsg" [modal]="true"  [style]="{width:'25vw'}" [baseZIndex]="10000"
  95         [draggable]="false" [resizable]="false">
  96   <p>Your login has expired. Please log in again.</p>
  97   <p-footer>
  98     <button type="button" pButton icon="pi pi-check" (click)="onConfirm()" label="OK"></button>
  99   </p-footer>
 100 </p-dialog>
 101
 102 <!--reset User Password dialog-->
 103 <p-dialog [(visible)]="resetPasswordFlag" appendTo="body" [modal]="true" [transitionOptions]="'300ms'" [style]="{width: '630px'}" [baseZIndex]="10000"
 104 [closable]="true" (onHide)="closeResetDialog()">
 105 <p-header style="display: inline-flex;">
 106     Reset User Password
 107 </p-header>
 108 <form [formGroup]="resetPasswordForm">
 109     <!-- * * * New Password * * * -->
 110     <div class="input">
 111         <div class="ui-inputgroup" >
 112             <label class="inputLabel">New Password</label>
 113             <span class="ui-inputgroup-addon" (click)="hidePassword=!hidePassword">
 114             <i [ngClass]="hidePassword? 'pi pi-eye-slash':'pi pi-eye'"></i></span>
 115             <input class="inputFieldSm" [type]="hidePassword? 'password':'text'" pInputText formControlName="password" />
 116         </div>
 117     </div>
 118     <i *ngIf="resetPasswordForm.get('password').errors && resetPasswordForm.get('password').errors.minlength" style="width: 140px;margin-left: 20px;font-size: small;color: red;">password should be more than 5 characters</i>
 119     <!-- * * * Confirm New Password * * * -->
 120     <div class="input">
 121         <div class="ui-inputgroup" >
 122         <label class="inputLabel">Confirm Password</label>
 123         <span class="ui-inputgroup-addon" (click)="hideConfirmPassword=!hideConfirmPassword">
 124         <i [ngClass]="hideConfirmPassword? 'pi pi-eye-slash':'pi pi-eye'"></i></span>
 125         <input class="inputFieldSm" [type]="hideConfirmPassword? 'password':'text'" pInputText formControlName="confirm_password" />
 126         </div>
 127     </div>
 128     <i *ngIf="resetPasswordForm.errors && resetPasswordForm.errors.errMsg" style="width: 140px;margin-left: 20px;font-size: small;color: red;">{{resetPasswordForm.errors.errMsg}}</i>
 129     <!-- * * * Submit and Cancel buttons * * * -->
 130     <div style="margin-top: 2em; margin-left: 1.3em; margin-bottom: 2em;">
 131         <button pButton type="button" (click)="closeResetDialog()" label="Cancel"></button>&nbsp;
 132         <button pButton type="submit" (click)="resetPasswordForm.valid && submitReset()" class="ui-button-success" label="Submit" style="width: 70px"></button>
 133     </div>
 134 </form>
 135
 136 </p-dialog>