2 ============LICENSE_START==========================================
4 ===================================================================
5 Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
6 ===================================================================
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
13 http://www.apache.org/licenses/LICENSE-2.0
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.
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
26 https://creativecommons.org/licenses/by/4.0/
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.
34 ============LICENSE_END============================================
38 <div class="container">
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">×</span>
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
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" />
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">
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
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 />
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
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" />
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
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" />
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
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"/>
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">
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)" />
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>
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
171 <div class="property-label preview">
172 <span class="left-label">Preview</span>
173 <span class="remove" (click)="removeImage()">Remove</span>
175 <img id="image-app-preview" class="image-preview"
176 src="{{applicationObj.imageLink || applicationObj.thumbnail || emptyImgForPreview}}" />
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
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>
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">
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"
208 <!--<div id="notification" align="left">
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>
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"/>
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"
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>
243 <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
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" />
252 <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
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"
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>
271 <div class="modal-footer">
272 <button type="button" class="btn btn-primary" [disabled]="(!applicationObj.name || applicationObj.name.length == 0)" (click)="saveChanges()">Save</button>
273 <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>