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" style="display: flex;">
61 <span style="flex: 9">Application Name</span>
62 <app-information-tooltip style="flex: 1;"
63 [textMessage]="'Application Name Information'">
64 </app-information-tooltip>
66 <input #applicationName id="input-app-name" type="text" [(ngModel)]="applicationObj.appName"
67 maxlength="100" name="name" pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required="true" />
69 <div id="error-container-conflict" class="error-container"
70 ng-show="appDetails.conflictMessages.name" id="conflictMessages-name">
71 <small id="app-name-error-conflict" class="err-message"
72 ng-bind="appDetails.conflictMessages.name">
77 <div id="property-active" class="property-active" style="display: flex;
78 justify-content: flex-end;margin-right: 16px;">
79 <mat-checkbox name="isEnabled" [(ngModel)]="applicationObj.isEnabled"
80 [checked]="applicationObj.isEnabled" id="checkbox-app-is-enabled">Active
84 <div class="property">
85 <div class="property-label" style="display: flex;">
86 <mat-label style="flex: 9">Application Type</mat-label>
87 <app-information-tooltip style="flex: 1;"
88 [textMessage]="'Application Type Information - Gui, Hyperlink or Non-gui'">
89 </app-information-tooltip>
91 <mat-select [disabled]="action === 'edit'" [(value)]="applicationObj.applicationType">
92 <mat-option *ngFor="let appType of applicationTypeArray" [value]="appType.value">
98 <div class="property" *ngIf="applicationObj.applicationType == '1'">
99 <div class="property-label" style="display: flex;">
100 <mat-label style="flex: 9">Mode of Integration</mat-label>
101 <app-information-tooltip style="flex: 1;"
102 [textMessage]="'Mode Of Integration. SDK or Framework'">
103 </app-information-tooltip>
105 <mat-select [(value)]="applicationObj.modeOfIntegration">
106 <mat-option *ngFor="let integrationType of modeOfIntegration"
107 [value]="integrationType.value">
108 {{integrationType.name}}
113 <div class="property" *ngIf="!(applicationObj.applicationType == '2')">
114 <div class="property-label" style="display: flex;">
115 <mat-label style="flex: 9">Roles Management Type</mat-label>
116 <app-information-tooltip style="flex: 1;" [textMessage]="'Roles Management Type'">
117 </app-information-tooltip>
119 <mat-select [(value)]="applicationObj.rolesInAAF">
120 <mat-option *ngFor="let roleRepo of rolesManagementType" [value]="roleRepo.value">
126 <div *ngIf="!((applicationObj.applicationType=='2') || (!applicationObj.rolesInAAF))"
127 class="property-active" style="display: flex;">
128 <mat-checkbox style="flex: 9" name="appAck" [(ngModel)]="applicationObj.appAck">
129 Notify App For AAF Operations
131 <app-information-tooltip style="flex: 1;"
132 [textMessage]="'Notify application for AAF operations'">
133 </app-information-tooltip>
136 <div class="property-active" *ngIf="!(applicationObj.applicationType == '2'
137 ||(!applicationObj.rolesInAAF))">
138 <mat-checkbox name="usesCadi" [(ngModel)]="applicationObj.usesCadi"
139 [checked]="applicationObj.usesCadi">Is CADI Enabled?
143 <div class="table-control" style="display: inline-flex;"
144 *ngIf="!(applicationObj.applicationType == '2' || !applicationObj.rolesInAAF)">
146 <div [ngClass]="(applicationObj.rolesInAAF) ? 'property required' : 'property'"
147 style="width: 250px;">
148 <div id="pwd-property-label" class="property-label">AAF Namespace</div>
149 <input type="text" id="input-mylogins-auth-namespace"
150 [(ngModel)]="applicationObj.nameSpace" name="appAuthNameSpace" maxlength="256"
151 [disabled]="!applicationObj.rolesInAAF" />
153 <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
155 <div b2b-flyout-toggler class="notification-div">
156 <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
157 b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true"
160 <!--<div id="notification" align="left">
161 <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>
166 <div *ngIf="!(applicationObj.applicationType == '3')"
167 [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'">
168 <div class="property-label" style="display: flex;">
169 <span style="flex: 9">Landing Page</span>
170 <app-information-tooltip style="flex: 1;" [textMessage]="'Application URL Information'">
171 </app-information-tooltip>
173 <input id="input-app-url" [(ngModel)]="applicationObj.landingPage" maxlength="256"
174 name="url" type="url" placeholder="https://"
175 pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i"
178 <div id="error-container-edit" class="error-container"
179 *ngIf="(applicationObj.isEnabled && applicationObj.landingPage=='')">
180 <small id="app-name-error-required" class="err-message">
181 Landing Page URL is required
186 <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'"
187 *ngIf="!(applicationObj.applicationType == '2' || applicationObj.applicationType == '3')">
188 <div class="property-label" style="display: flex;">
189 <span style="flex: 9">Rest API URL</span>
190 <app-information-tooltip style="flex: 1;" [textMessage]="'Rest Api URL Information'">
191 </app-information-tooltip>
193 <input id="input-app-rest-url" [(ngModel)]="applicationObj.restUrl" name="restUrl"
194 type="url" placeholder="https://"
195 pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i"
196 maxlength="256" ng-required="applicationObj.applicationType == '1'" />
198 <div id="error-container-edit" class="error-container"
199 *ngIf="(applicationObj.isEnabled && applicationObj.restUrl=='')">
200 <small id="app-name-error-required" class="err-message">
201 Rest API URL is required
206 <div [ngClass]="(applicationObj.isEnabled || applicationObj.rolesInAAF) ? 'property required' : 'property'"
207 *ngIf="!(applicationObj.applicationType == '2')">
208 <div id="username-property-label" class="property-label" style="display: flex;">
209 <span style="flex: 9">Auth Configured User</span>
210 <app-information-tooltip style="flex: 1;"
211 [textMessage]="'Basic Authentication Username Information'">
212 </app-information-tooltip>
214 <input type="text" id="input-username-property"
215 [(ngModel)]="applicationObj.appBasicAuthUsername" name="username" maxlength="256"
216 ng-required="!appDetails.app.restrictedApp" />
218 <div id="error-container-edit" class="error-container"
219 *ngIf="((applicationObj.isEnabled || applicationObj.rolesInAAF) && applicationObj.appBasicAuthUsername =='')">
220 <small id="app-name-error-required" class="err-message">
221 App Username is required
226 <div [ngClass]="(applicationObj.isEnabled && !applicationObj.rolesInAAF) ? 'property required' : 'property'"
227 *ngIf="!(applicationObj.applicationType == '2' || (applicationObj.rolesInAAF && applicationObj.usesCadi))">
228 <div id="pwd-property-label" class="property-label" style="display: flex;">
229 <span style="flex: 9">Basic Auth Password</span>
230 <app-information-tooltip style="flex: 1;"
231 [textMessage]="'Basic Authentication Password Information'">
232 </app-information-tooltip>
234 <input type="password" id="input-mylogins-password"
235 [(ngModel)]="applicationObj.appBasicAuthPassword" autocomplete="new-password"
236 name="appPassword" maxlength="256" />
238 <div id="error-container-edit" class="error-container"
239 *ngIf="(applicationObj.isEnabled && !applicationObj.rolesInAAF && applicationObj.appBasicAuthPassword =='')">
240 <small id="app-name-error-required" class="err-message">
247 <!-- Right container-->
248 <div class="right-container">
250 <div class="property" *ngIf="!(applicationObj.applicationType == '3')">
251 <div class="property-label" style="display: flex;">
252 <span style="flex: 9">Upload
254 <app-information-tooltip style="flex: 1;"
255 [textMessage]="'Image file must be smaller than 1MB'">
256 </app-information-tooltip>
258 <input type="file" id="input-app-image-upload"
259 class="input-file-field input-app-image-upload-ht" accept="image/*"
260 [(ngModel)]="applicationObj.originalImage" name="appImage"
261 image-upload="applicationObj.originalImage" image-upload-resize-max-height="300"
262 image-upload-resize-max-width="360" image-upload-resize-quality="0.7"
263 image-upload-api="appDetails.imageApi" (change)="appImageHandler($event)" />
265 <div id="app-error-image-upload-type" class="error-container" *ngIf="appImageTypeError"
267 <div class="error-container">
268 <small id="error-app-invalid-image-size" class="err-message">File must be an
273 <div id="app-error-image-upload" class="error-container"
274 *ngIf="(applicationObj.originalImage && applicationObj.originalImage.dirty)">
275 <div ng-messages="appForm.appImage.$error" class="error-container">
276 <small id="error-app-invalid-image-size" class="err-message"
277 ng-message="imageSize">Image file must be smaller than
284 <div class="property" *ngIf="!(applicationObj.applicationType == '3')">
285 <div class="property-label preview">
286 <span class="left-label">Preview</span>
287 <span class="remove" (click)="removeImage()">Remove</span>
289 <img id="image-app-preview" class="image-preview"
290 src="{{applicationObj.imageLink || applicationObj.thumbnail || emptyImgForPreview}}" />
293 <div class="property" *ngIf="!(applicationObj.applicationType == '3')">
294 <div id="property-guest-access" class="property-guest-access">
295 <mat-checkbox name="isOpen" [(ngModel)]="applicationObj.isOpen"
296 id="checkbox-app-is-open"
297 [checked]="(applicationObj.isOpen || applicationObj.applicationType == '2')"
298 [disabled]="applicationObj.applicationType == '2'">Allow guest access
303 <div class="table-control" style="display: inline-flex;"
304 *ngIf="!(applicationObj.applicationType == '2')">
305 <div id="property-communication-key" class="property"
306 *ngIf="!(applicationObj.applicationType == '2' || applicationObj.applicationType == '3')"
307 style="width: 250px;">
308 <div id="property-communication-key-label" class="property-label">Application
310 <input type="text" id="input-UEB-communication-key" [(ngModel)]="applicationObj.uebKey"
311 name="uebKey" readonly="readonly" [disabled]="true" />
314 <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
315 <div b2b-flyout-toggler class="notification-div">
316 <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
317 b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true"
320 <!--<div id="notification" align="left">
321 <p class="uuid-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">Application UUID is used as a communication
322 key between application and portal.Please place this value in
323 portal.properties</p>
332 <div class="modal-footer">
333 <button type="button" class="btn btn-primary"
334 [disabled]="(!applicationObj.appName || applicationObj.appName.length == 0)"
335 (click)="saveChanges()">Save</button>
336 <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>