portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html

   1 <!--
   2   ============LICENSE_START==========================================
   3   ONAP Portal
   4   ===================================================================
   5   Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
   6   ===================================================================
   7
   8   Unless otherwise specified, all software contained herein is licensed
   9   under the Apache License, Version 2.0 (the "License");
  10   you may not use this software except in compliance with the License.
  11   You may obtain a copy of the License at
  12
  13               http://www.apache.org/licenses/LICENSE-2.0
  14
  15   Unless required by applicable law or agreed to in writing, software
  16   distributed under the License is distributed on an "AS IS" BASIS,
  17   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18   See the License for the specific language governing permissions and
  19   limitations under the License.
  20
  21   Unless otherwise specified, all documentation contained herein is licensed
  22   under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23   you may not use this documentation except in compliance with the License.
  24   You may obtain a copy of the License at
  25
  26               https://creativecommons.org/licenses/by/4.0/
  27
  28   Unless required by applicable law or agreed to in writing, documentation
  29   distributed under the License is distributed on an "AS IS" BASIS,
  30   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31   See the License for the specific language governing permissions and
  32   limitations under the License.
  33
  34   ============LICENSE_END============================================
  35
  36 -->
  37
  38 <div class="container">
  39         <!--Modal Headers-->
  40         <div class="modal-header">
  41                 <h4 class="modal-title">Application Details</h4>
  42                 <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
  43                         <span aria-hidden="true">&times;</span>
  44                 </button>
  45         </div>
  46          <!--Modal Body goes here-->
  47         <div class="modal-body">
  48                 <div class="application-details-modal">
  49                   <div class="app-properties-main" scroll-top="appDetails.scrollApi">
  50                         <form name="appForm" novalidate autocomplete="off">
  51                                 <div id="app-left-container" class="left-container">
  52                                         <div class="property-label checkbox-label">
  53                                                 <mat-checkbox  name="isRestrictedApp" type="checkbox" [(ngModel)]="applicationObj.restrictedApp"
  54                                                         id="checkbox-app-is-restricted" [disabled]="isEditMode" [checked]="applicationObj.restrictedApp">
  55                                                         Hyperlink only application
  56                                                 </mat-checkbox>
  57                                         </div>
  58
  59                                         <div class="property required">
  60                                                 <div class="property-label">Application Name</div>
  61                                                 <input id="input-app-name" type="text"
  62                                                 [(ngModel)]="applicationObj.name" maxlength="100" name="name"
  63                                                 pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required="true" />
  64
  65                                                 <div id="error-container-conflict" class="error-container" ng-show="appDetails.conflictMessages.name"
  66                                                         id="conflictMessages-name">
  67                                                         <small id="app-name-error-conflict" class="err-message"
  68                                                                 ng-bind="appDetails.conflictMessages.name">
  69                                                         </small>
  70                                                 </div>
  71
  72                                                 <div id="error-container-edit" class="error-container"
  73                                                         *ngIf="(!applicationObj.name ||  applicationObj.name.length == 0)">
  74                                                         <small id="app-name-error-required" class="err-message">
  75                                                                 Application name is required
  76                                                         </small>
  77                                                 </div>
  78                                         </div>
  79
  80                                         <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'">
  81                                                 <div id="url-property-label" class="property-label">URL</div>
  82                                                         <input id="input-app-url" [(ngModel)]="applicationObj.url"
  83                                                         maxlength="256" name="url" type="url" placeholder="https://"
  84                                                         pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" required />
  85
  86                                                 <div id="error-container-edit" class="error-container"
  87                                                         *ngIf="(applicationObj.isEnabled && applicationObj.url=='')">
  88                                                         <small id="app-name-error-required" class="err-message">
  89                                                                 Application URL is required
  90                                                         </small>
  91                                                 </div>
  92                                         </div>
  93
  94                                         <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'"
  95                                                 [hidden] ="applicationObj.restrictedApp">
  96                                                 <div class="property-label">Rest API URL</div>
  97                                                 <input id="input-app-rest-url" [(ngModel)]="applicationObj.restUrl"
  98                                                 name="restUrl" type="url" placeholder="https://"
  99                                                 pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" maxlength="256"
 100                                                 ng-required="!applicationObj.restrictedApp" />
 101
 102                                                 <div id="error-container-edit" class="error-container"
 103                                                         *ngIf="(applicationObj.isEnabled && applicationObj.restUrl=='')">
 104                                                         <small id="app-name-error-required" class="err-message">
 105                                                                 Rest API URL is required
 106                                                         </small>
 107                                                 </div>
 108                                         </div>
 109
 110                                         <div [ngClass]="(applicationObj.isEnabled || applicationObj.isCentralAuth) ? 'property required' : 'property'"
 111                                                 [hidden] ="applicationObj.restrictedApp">
 112                                                 <div id="username-property-label" class="property-label">Username</div>
 113                                                 <input type="text" id="input-username-property"  [(ngModel)]="applicationObj.username" name="username"
 114                                                 maxlength="256" ng-required="!appDetails.app.restrictedApp" />
 115
 116                                                 <div id="error-container-edit" class="error-container"
 117                                                         *ngIf="((applicationObj.isEnabled || applicationObj.isCentralAuth) && applicationObj.username =='')">
 118                                                         <small id="app-name-error-required" class="err-message">
 119                                                                 App Username is required
 120                                                         </small>
 121                                                 </div>
 122                                         </div>
 123
 124                                         <div [ngClass]="(applicationObj.isEnabled && !applicationObj.isCentralAuth) ? 'property required' : 'property'"
 125                                                 [hidden] ="applicationObj.restrictedApp">
 126                                                 <div id="pwd-property-label" class="property-label">Password</div>
 127                                                 <input type="password" id="input-mylogins-password"
 128                                                         [(ngModel)]="applicationObj.appPassword" autocomplete="new-password"
 129                                                 name="appPassword" maxlength="256"/>
 130
 131                                                 <div id="error-container-edit" class="error-container"
 132                                                         *ngIf="(applicationObj.isEnabled && !applicationObj.isCentralAuth && applicationObj.appPassword =='')">
 133                                                         <small id="app-name-error-required" class="err-message">
 134                                                                 Password is required
 135                                                         </small>
 136                                                 </div>
 137                                         </div>
 138                                 </div>
 139
 140                                 <!-- Right container-->
 141                                 <div class="right-container">
 142                                 <div class="property">
 143                                         <div class="property-label">Upload Image</div>
 144                                         <input type="file" id="input-app-image-upload"
 145                                                 class="input-file-field input-app-image-upload-ht"
 146                                                 accept="image/*" [(ngModel)]="applicationObj.originalImage"
 147                                                 name="appImage" image-upload="applicationObj.originalImage"
 148                                                 image-upload-resize-max-height="300"
 149                                                 image-upload-resize-max-width="360"
 150                                                 image-upload-resize-quality="0.7"
 151                                                 image-upload-api="appDetails.imageApi"
 152                                                 (change)="appImageHandler($event)" />
 153
 154                                         <div id="app-error-image-upload-type" class="error-container"
 155                                                 *ngIf="appImageTypeError" class="ng-hide">
 156                                                 <div class="error-container">
 157                                                         <small id="error-app-invalid-image-size" class="err-message">File must be an image</small>
 158                                                 </div>
 159                                         </div>
 160
 161                                         <div id="app-error-image-upload" class="error-container"
 162                                                 *ngIf="(applicationObj.originalImage && applicationObj.originalImage.dirty)">
 163                                                 <div ng-messages="appForm.appImage.$error"
 164                                                 class="error-container">
 165                                                 <small id="error-app-invalid-image-size" class="err-message"
 166                                                         ng-message="imageSize">Image file must be smaller than
 167                                                         1MB</small>
 168                                                 </div>
 169                                         </div>
 170
 171                                         <div class="property-label preview">
 172                                                 <span  class="left-label">Preview</span>
 173                                                 <span  class="remove" (click)="removeImage()">Remove</span>
 174                                         </div>
 175                                         <img id="image-app-preview" class="image-preview"
 176                                                                 src="{{applicationObj.imageLink || applicationObj.thumbnail || emptyImgForPreview}}" />
 177
 178                                         <br/>
 179                                         <div id="property-active" class="property-active">
 180                                                 <mat-checkbox name="isEnabled" [(ngModel)]="applicationObj.isEnabled"
 181                                                         [checked]="applicationObj.isEnabled"
 182                                                         id="checkbox-app-is-enabled">Active
 183                                                 </mat-checkbox>
 184                                         </div>
 185
 186                                         <div id="property-guest-access" class="property-guest-access">
 187                                                 <mat-checkbox name="isOpen" [(ngModel)]="applicationObj.isOpen" id="checkbox-app-is-open"
 188                                                 [checked]="(applicationObj.isOpen || applicationObj.restrictedApp)"
 189                                                 [disabled]="applicationObj.restrictedApp">Allow guest access</mat-checkbox>
 190                                         </div>
 191
 192                                         <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
 193                                                 <div id="property-is-central-auth" class="property"     [hidden] ="applicationObj.restrictedApp">
 194                                                         <mat-checkbox name="isCentralAuth" [(ngModel)]="applicationObj.isCentralAuth"
 195                                                                 id="checkbox-app-is-central-auth" [checked]="applicationObj.isCentralAuth">
 196                                                                 Centralized
 197                                                         </mat-checkbox>
 198                                                 </div>
 199
 200                                                 <div class="centralized-key" aria-haspopup="true"  style="padding-left: 150px;">
 201                                                         <div b2b-flyout-toggler class="notification-div" >
 202                                                                 <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
 203                                                                 b2b-accessibility-click="13,32" aria-label="notifications"
 204                                                                 aria-haspopup="true"
 205                                                                 role="button"></div>
 206                                                         </div>
 207
 208                                                         <!--<div id="notification" align="left">
 209                                                                 <p class="uuid-text"
 210                                                                 style="font: normal 12px Omnes-ECOMP-W02, Arial;">
 211                                                                 To convert the non-centralized app to centralized app please
 212                                                                 follow below steps. <a href="https://wiki.web.att.com/display/ECops/BulkUpload" target="_blank">
 213                                                                         https://wiki.web.att.com/display/ECops/BulkUpload</a>
 214                                                                 </p>
 215                                                         </div>-->
 216                                                 </div>
 217                                         </div>
 218
 219                                         <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
 220                                                 <div id="property-communication-key" class="property"
 221                                                         [hidden] ="applicationObj.restrictedApp" style="width: 250px;">
 222                                                         <div id="property-communication-key-label" class="property-label">Application UUID</div>
 223                                                         <input type="text" id="input-UEB-communication-key"
 224                                                         [(ngModel)]="applicationObj.uebKey" name="uebKey"
 225                                                         readonly="readonly" [disabled]="true"/>
 226                                                 </div>
 227
 228                                                 <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
 229                                                 <div b2b-flyout-toggler class="notification-div">
 230                                                         <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
 231                                                         b2b-accessibility-click="13,32" aria-label="notifications"
 232                                                         aria-haspopup="true"
 233                                                         role="button"></div>
 234                                                 </div>
 235                                                 <!--<div id="notification" align="left">
 236                                                         <p class="uuid-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">Application UUID is used as a communication
 237                                                         key between application and portal.Please place this value in
 238                                                         portal.properties</p>
 239                                                 </div>-->
 240                                                 </div>
 241                                         </div>
 242
 243                                         <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
 244
 245                                         <div [ngClass]="(applicationObj.isCentralAuth) ? 'property required' : 'property'"
 246                                                 [hidden] ="applicationObj.restrictedApp" style="width: 250px;">
 247                                                 <div id="pwd-property-label" class="property-label" >Name Space</div>
 248                                                 <input type="text" id="input-mylogins-auth-namespace"
 249                                                         [(ngModel)]="applicationObj.nameSpace" name="appAuthNameSpace"
 250                                                         maxlength="256" [disabled]="!applicationObj.isCentralAuth" />
 251                                         </div>
 252                                         <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
 253
 254                                                 <div b2b-flyout-toggler class="notification-div">
 255                                                         <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
 256                                                         b2b-accessibility-click="13,32" aria-label="notifications"
 257                                                         aria-haspopup="true"
 258                                                         role="button"></div>
 259                                                 </div>
 260                                                 <!--<div id="notification" align="left">
 261                                                         <p class="nameSpace-text"  style="font: normal 12px Omnes-ECOMP-W02, Arial;">NameSpace should be created in AAF and portal mechid should be admin of the given namespace.</p>
 262                                                 </div>-->
 263                                                 </div>
 264                                         </div>
 265                                 </div>
 266                                 </div>
 267                         </form>
 268                         </div>
 269                 </div>
 270          </div>
 271          <div class="modal-footer">
 272                 <button type="button" class="btn btn-primary" [disabled]="(!applicationObj.name ||  applicationObj.name.length == 0)" (click)="saveChanges()">Save</button> &nbsp;
 273                 <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
 274         </div>
 275 </div>