Added portal-FE-os components
[portal.git] / portal-FE-os / src / app / pages / application-onboarding / application-details-dialog / application-details-dialog.component.html
diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html
new file mode 100644 (file)
index 0000000..bef37b8
--- /dev/null
@@ -0,0 +1,275 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software 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.
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+              https://creativecommons.org/licenses/by/4.0/
+  Unless required by applicable law or agreed to in writing, documentation
+  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 class="container">
+       <!--Modal Headers-->
+       <div class="modal-header">
+               <h4 class="modal-title">Application Details</h4>
+               <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+                       <span aria-hidden="true">&times;</span>
+               </button>
+       </div>
+        <!--Modal Body goes here-->
+       <div class="modal-body">
+               <div class="application-details-modal">
+                 <div class="app-properties-main" scroll-top="appDetails.scrollApi">
+                       <form name="appForm" novalidate autocomplete="off">
+                               <div id="app-left-container" class="left-container">
+                                       <div class="property-label checkbox-label">
+                                               <mat-checkbox  name="isRestrictedApp" type="checkbox" [(ngModel)]="applicationObj.restrictedApp"
+                                                       id="checkbox-app-is-restricted" [disabled]="isEditMode" [checked]="applicationObj.restrictedApp">
+                                                       Hyperlink only application
+                                               </mat-checkbox>
+                                       </div>
+                               
+                                       <div class="property required">
+                                               <div class="property-label">Application Name</div>
+                                               <input id="input-app-name" type="text"
+                                               [(ngModel)]="applicationObj.name" maxlength="100" name="name"
+                                               pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required="true" />
+               
+                                               <div id="error-container-conflict" class="error-container" ng-show="appDetails.conflictMessages.name"
+                                                       id="conflictMessages-name">
+                                                       <small id="app-name-error-conflict" class="err-message"
+                                                               ng-bind="appDetails.conflictMessages.name">
+                                                       </small>
+                                               </div>
+                                               
+                                               <div id="error-container-edit" class="error-container" 
+                                                       *ngIf="(!applicationObj.name ||  applicationObj.name.length == 0)">
+                                                       <small id="app-name-error-required" class="err-message">
+                                                               Application name is required
+                                                       </small> 
+                                               </div>
+                                       </div>
+                                       
+                                       <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'">
+                                               <div id="url-property-label" class="property-label">URL</div>
+                                                       <input id="input-app-url" [(ngModel)]="applicationObj.url"
+                                                       maxlength="256" name="url" type="url" placeholder="https://"
+                                                       pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" required />
+
+                                               <div id="error-container-edit" class="error-container" 
+                                                       *ngIf="(applicationObj.isEnabled && applicationObj.url=='')">
+                                                       <small id="app-name-error-required" class="err-message">
+                                                               Application URL is required
+                                                       </small> 
+                                               </div>
+                                       </div>
+                                       
+                                       <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'"
+                                               [hidden] ="applicationObj.restrictedApp">
+                                               <div class="property-label">Rest API URL</div>  
+                                               <input id="input-app-rest-url" [(ngModel)]="applicationObj.restUrl"
+                                               name="restUrl" type="url" placeholder="https://"
+                                               pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" maxlength="256"
+                                               ng-required="!applicationObj.restrictedApp" />
+               
+                                               <div id="error-container-edit" class="error-container" 
+                                                       *ngIf="(applicationObj.isEnabled && applicationObj.restUrl=='')">
+                                                       <small id="app-name-error-required" class="err-message">
+                                                               Rest API URL is required
+                                                       </small> 
+                                               </div>
+                                       </div>  
+                                       
+                                       <div [ngClass]="(applicationObj.isEnabled || applicationObj.isCentralAuth) ? 'property required' : 'property'" 
+                                               [hidden] ="applicationObj.restrictedApp">
+                                               <div id="username-property-label" class="property-label">Username</div>                                 
+                                               <input type="text" id="input-username-property"  [(ngModel)]="applicationObj.username" name="username"
+                                               maxlength="256" ng-required="!appDetails.app.restrictedApp" />
+                                               
+                                               <div id="error-container-edit" class="error-container" 
+                                                       *ngIf="((applicationObj.isEnabled || applicationObj.isCentralAuth) && applicationObj.username =='')">
+                                                       <small id="app-name-error-required" class="err-message">
+                                                               App Username is required
+                                                       </small> 
+                                               </div>
+                                       </div>
+       
+                                       <div [ngClass]="(applicationObj.isEnabled && !applicationObj.isCentralAuth) ? 'property required' : 'property'"
+                                               [hidden] ="applicationObj.restrictedApp">
+                                               <div id="pwd-property-label" class="property-label">Password</div>
+                                               <input type="password" id="input-mylogins-password"
+                                                       [(ngModel)]="applicationObj.appPassword" autocomplete="new-password"
+                                               name="appPassword" maxlength="256"/>
+
+                                               <div id="error-container-edit" class="error-container" 
+                                                       *ngIf="(applicationObj.isEnabled && !applicationObj.isCentralAuth && applicationObj.appPassword =='')">
+                                                       <small id="app-name-error-required" class="err-message">
+                                                               Password is required
+                                                       </small> 
+                                               </div>
+                                       </div>
+                               </div>
+                               
+                               <!-- Right container-->
+                               <div class="right-container">
+                               <div class="property">
+                                       <div class="property-label">Upload Image</div>
+                                       <input type="file" id="input-app-image-upload"
+                                               class="input-file-field input-app-image-upload-ht"
+                                               accept="image/*" [(ngModel)]="applicationObj.originalImage"
+                                               name="appImage" image-upload="applicationObj.originalImage"
+                                               image-upload-resize-max-height="300"
+                                               image-upload-resize-max-width="360"
+                                               image-upload-resize-quality="0.7"
+                                               image-upload-api="appDetails.imageApi" 
+                                               (change)="appImageHandler($event)" />
+       
+                                       <div id="app-error-image-upload-type" class="error-container"
+                                               *ngIf="appImageTypeError" class="ng-hide">
+                                               <div class="error-container">
+                                                       <small id="error-app-invalid-image-size" class="err-message">File must be an image</small>
+                                               </div>
+                                       </div>
+       
+                                       <div id="app-error-image-upload" class="error-container"
+                                               *ngIf="(applicationObj.originalImage && applicationObj.originalImage.dirty)">
+                                               <div ng-messages="appForm.appImage.$error"
+                                               class="error-container">
+                                               <small id="error-app-invalid-image-size" class="err-message"
+                                                       ng-message="imageSize">Image file must be smaller than
+                                                       1MB</small>
+                                               </div>
+                                       </div>
+                                       
+                                       <div class="property-label preview">
+                                               <span  class="left-label">Preview</span>
+                                               <span  class="remove" (click)="removeImage()">Remove</span>
+                                       </div>
+                                       <img id="image-app-preview" class="image-preview"
+                                                               src="{{applicationObj.imageLink || applicationObj.thumbnail || emptyImgForPreview}}" />
+       
+                                       <br/>
+                                       <div id="property-active" class="property-active">
+                                               <mat-checkbox name="isEnabled" [(ngModel)]="applicationObj.isEnabled"
+                                                       [checked]="applicationObj.isEnabled"
+                                                       id="checkbox-app-is-enabled">Active
+                                               </mat-checkbox>
+                                       </div>
+                                       
+                                       <div id="property-guest-access" class="property-guest-access">
+                                               <mat-checkbox name="isOpen" [(ngModel)]="applicationObj.isOpen" id="checkbox-app-is-open"
+                                               [checked]="(applicationObj.isOpen || applicationObj.restrictedApp)"
+                                               [disabled]="applicationObj.restrictedApp">Allow guest access</mat-checkbox>
+                                       </div>
+                                               
+                                       <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
+                                               <div id="property-is-central-auth" class="property"     [hidden] ="applicationObj.restrictedApp">
+                                                       <mat-checkbox name="isCentralAuth" [(ngModel)]="applicationObj.isCentralAuth"
+                                                               id="checkbox-app-is-central-auth" [checked]="applicationObj.isCentralAuth">
+                                                               Centralized
+                                                       </mat-checkbox>
+                                               </div>
+                                       
+                                               <div class="centralized-key" aria-haspopup="true"  style="padding-left: 150px;"> 
+                                                       <div b2b-flyout-toggler class="notification-div" >
+                                                               <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
+                                                               b2b-accessibility-click="13,32" aria-label="notifications"
+                                                               aria-haspopup="true" 
+                                                               role="button"></div>
+                                                       </div>
+                                               
+                                                       <!--<div id="notification" align="left">
+                                                               <p class="uuid-text"
+                                                               style="font: normal 12px Omnes-ECOMP-W02, Arial;">
+                                                               To convert the non-centralized app to centralized app please
+                                                               follow below steps. <a href="https://wiki.web.att.com/display/ECops/BulkUpload" target="_blank">
+                                                                       https://wiki.web.att.com/display/ECops/BulkUpload</a>
+                                                               </p>
+                                                       </div>-->
+                                               </div>
+                                       </div>
+                                                                               
+                                       <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
+                                               <div id="property-communication-key" class="property"
+                                                       [hidden] ="applicationObj.restrictedApp" style="width: 250px;">
+                                                       <div id="property-communication-key-label" class="property-label">Application UUID</div>
+                                                       <input type="text" id="input-UEB-communication-key"
+                                                       [(ngModel)]="applicationObj.uebKey" name="uebKey" 
+                                                       readonly="readonly" [disabled]="true"/>
+                                               </div>
+
+                                               <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
+                                               <div b2b-flyout-toggler class="notification-div">
+                                                       <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
+                                                       b2b-accessibility-click="13,32" aria-label="notifications"
+                                                       aria-haspopup="true"
+                                                       role="button"></div>
+                                               </div>
+                                               <!--<div id="notification" align="left">
+                                                       <p class="uuid-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">Application UUID is used as a communication
+                                                       key between application and portal.Please place this value in
+                                                       portal.properties</p>
+                                               </div>-->
+                                               </div>      
+                                       </div>  
+       
+                                       <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
+                                               
+                                       <div [ngClass]="(applicationObj.isCentralAuth) ? 'property required' : 'property'"  
+                                               [hidden] ="applicationObj.restrictedApp" style="width: 250px;">
+                                               <div id="pwd-property-label" class="property-label" >Name Space</div>
+                                               <input type="text" id="input-mylogins-auth-namespace"
+                                                       [(ngModel)]="applicationObj.nameSpace" name="appAuthNameSpace"
+                                                       maxlength="256" [disabled]="!applicationObj.isCentralAuth" />
+                                       </div>
+                                       <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
+                                       
+                                               <div b2b-flyout-toggler class="notification-div">
+                                                       <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
+                                                       b2b-accessibility-click="13,32" aria-label="notifications"
+                                                       aria-haspopup="true"
+                                                       role="button"></div>
+                                               </div>    
+                                               <!--<div id="notification" align="left">
+                                                       <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>
+                                               </div>-->
+                                               </div>  
+                                       </div>  
+                               </div>
+                               </div>
+                       </form>
+                       </div>
+               </div>
+        </div>
+        <div class="modal-footer">
+               <button type="button" class="btn btn-primary" [disabled]="(!applicationObj.name ||  applicationObj.name.length == 0)" (click)="saveChanges()">Save</button> &nbsp;
+               <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
+       </div>
+</div>
\ No newline at end of file