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============================================
39 import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, Inject, PLATFORM_ID, Injector } from '@angular/core';
40 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
41 import { IApplications } from 'src/app/shared/model/applications-onboarding/applications';
42 import { ApplicationsService } from 'src/app/shared/services';
43 import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
44 import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
45 import { isPlatformBrowser } from '@angular/common';
48 selector: 'app-application-details-dialog',
49 templateUrl: './application-details-dialog.component.html',
50 styleUrls: ['./application-details-dialog.component.scss'],
52 export class ApplicationDetailsDialogComponent implements OnInit {
56 emptyImgForPreview:string;
57 conflictMessages = {};
59 isEditMode: boolean = false;
60 appImageTypeError: boolean = false;
61 isSaving: boolean = false;
63 ECOMP_URL_REGEX = "/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i";
64 private ngbModal:NgbModal;
66 constructor(public activeModal: NgbActiveModal,
67 public applicationsService : ApplicationsService,@Inject(PLATFORM_ID)private platformId:Object,private injector:Injector) {
68 if(isPlatformBrowser(this.platformId))
70 this.ngbModal = this.injector.get(NgbModal);
74 @Input() applicationObj: IApplications;
76 @Output() passEntry: EventEmitter<any> = new EventEmitter();
77 @ViewChild('applicationName') applicationNameElement: ElementRef;
78 @ViewChild('inputAppImageUpload') inputAppImageUpload: ElementRef;
84 'appDescription': null,
90 'appBasicAuthUsername': null,
91 'appBasicAuthPassword': null,
92 'thumbnail': this.emptyImg,
94 'applicationType': null,
102 'modeOfIntegration': null,
104 'restrictedApp': false
107 applicationTypeArray: any[] = [
108 { name: 'GUI Application', value: "1" },
109 { name: 'HyperLink Application', value: "2" },
110 { name: 'Non-GUI Application', value: "3" }
114 rolesManagementType: any[] = [
115 { name: 'Roles in Application (Non-Centralized)', value: false },
116 { name: 'Roles in AAF (Centralized)', value: true }
119 modeOfIntegration: any[] = [
120 { name: 'Portal SDK Based', value: 'sdk' },
121 { name: 'Framework Based', value: 'fw' }
126 this.addEditAction = this.action;
129 if (this.action === 'add') {
130 this.applicationObj.applicationType = "1";
131 if (this.applicationObj.applicationType == '1') {
132 this.applicationObj.modeOfIntegration = this.modeOfIntegration[0].value;
134 this.applicationObj.rolesInAAF = true;
135 this.applicationObj.usesCadi = true;
136 this.applicationObj.appAck = false;
137 console.log("Action : ", this.action);
138 console.log("Focus : ", this.applicationNameElement.nativeElement);
139 setTimeout(() => { // this will make the execution after the above boolean has changed
140 this.applicationNameElement.nativeElement.focus();
144 if (this.applicationObj.id) {
145 this.isEditMode = true;
147 this.isEditMode = false;
149 //console.log("isEditMode :: ",this.isEditMode);
150 this.originalImage = null
151 this.emptyImgForPreview = '../../../assets/images/default_app_image.gif';
154 appImageHandler(event: any){
155 var reader = new FileReader();
156 if(event.target.files && event.target.files[0]){
157 reader.readAsDataURL(event.target.files[0]); // read file as data url
158 var fileName = event.target.files[0].name;
159 var validFormats = ['jpg', 'jpeg', 'bmp', 'gif', 'png'];
161 var ext = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
162 //console.log("fileName::>>",fileName ,ext)
163 //console.log("fileExtetion::>>",ext)
164 //Check for valid format
165 if(validFormats.indexOf(ext) == -1){
166 this.newAppModel.thumbnail = this.emptyImg;
167 this.originalImage = null;
168 this.applicationObj.imageUrl = null;
169 this.applicationObj.imageLink = null;
170 this.applicationObj.thumbnail = null;
171 if(!this.isEditMode){
172 this.newAppModel.imageUrl = null;
173 this.newAppModel.imageLink = null;
174 this.newAppModel.thumbnail = null;
176 this.appImageTypeError=true;
178 reader.onload = (event: any) => { // called once readAsDataURL is completed
179 this.applicationObj.imageLink = event.target.result;
180 this.applicationObj.imageUrl = event.target.result;
181 this.applicationObj.thumbnail = event.target.result;
182 this.originalImage = event.target.result;
183 if(!this.isEditMode){
184 this.newAppModel.imageLink = event.target.result;
185 this.newAppModel.imageUrl = event.target.result;
186 this.newAppModel.thumbnail = event.target.result;
187 this.originalImage = event.target.result;
195 let confirmationMsg = 'Are you sure you want to remove the image?';
196 this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => {
197 if (result === 'Ok') {
198 //this.imageApi.clearFile();
199 this.applicationObj.thumbnail = this.emptyImg;
200 this.originalImage = null;
201 this.applicationObj.imageUrl = null;
202 this.applicationObj.imageLink = null;
203 this.emptyImgForPreview = '../../../assets/images/default_app_image.gif';
204 this.inputAppImageUpload.nativeElement.value = "";
211 /** Add/Edit Application Method*/
213 //console.log("addNewApplication getting called..");
214 if (this.applicationObj.rolesInAAF) {
216 if (this.applicationObj.applicationType == "1") {
217 console.log("Gui Application valodations");
219 if (!this.applicationObj.isEnabled) {
220 if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) || (this.applicationObj.nameSpace == 'undefined'
221 || !this.applicationObj.nameSpace) || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername))) {
222 this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized application');
226 if (this.applicationObj.isEnabled) {
227 if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)
228 || (this.applicationObj.landingPage == 'undefined' || !this.applicationObj.landingPage)
229 || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername) || (this.applicationObj.nameSpace == 'undefined'
230 || !this.applicationObj.nameSpace))) {
232 this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized active application');
236 } else if (this.applicationObj.applicationType == "3") {
237 console.log("Non-Gui Application valodations");
238 if (!this.applicationObj.isEnabled) {
239 if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) || (this.applicationObj.nameSpace == 'undefined'
240 || !this.applicationObj.nameSpace) || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername))) {
241 this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized application');
246 if (this.applicationObj.isEnabled) {
247 if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)
248 || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername) || (this.applicationObj.nameSpace == 'undefined'
249 || !this.applicationObj.nameSpace))) {
251 this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized active application');
257 console.log("Non-centralized applications validation");
258 this.applicationObj.appAck = null;
259 if (!this.applicationObj.isEnabled) {
260 if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)) {
261 this.openConfirmationModal('', 'Please fill in all required field(*) ApplicationName to Save the applictaion');
264 } else if (this.applicationObj.isEnabled && (this.applicationObj.applicationType == "1")) {
265 if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)
266 || (this.applicationObj.landingPage == 'undefined' || !this.applicationObj.landingPage)
267 || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername) ||
268 (this.applicationObj.appBasicAuthPassword == 'undefined' || !this.applicationObj.appBasicAuthPassword)) {
270 this.openConfirmationModal('', 'Please fill in all required fields(*) along with password as the app is not centralized');
273 } else if (this.applicationObj.isEnabled && (this.applicationObj.applicationType == "3")) {
274 console.log("Non gui validation");
275 if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)
276 || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername)) {
277 this.openConfirmationModal('', 'Please fill in all required fields(*)');
280 } else if (this.applicationObj.isEnabled && (this.applicationObj.applicationType == "2")) {
281 if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) || (this.applicationObj.landingPage == 'undefined'
282 || !this.applicationObj.landingPage)) {
283 this.openConfirmationModal('', 'Please fill in all required fields(*)');
290 if (this.applicationObj.isEnabled && this.applicationObj.applicationType == "1") {
291 if (this.applicationObj.landingPage && this.applicationObj.landingPage != 'undefined' && this.applicationObj.landingPage != '') {
292 let isValidURL = this.isUrlValid(this.applicationObj.landingPage);
294 this.openConfirmationModal('Error', 'Application URL must be a valid URL.');
298 this.openConfirmationModal('Error', 'Application URL is required.');
304 this.isSaving = true;
305 // For a restricted app, null out all irrelevant fields
306 if (this.applicationObj.applicationType == "2") {
307 console.log("Hyperlinka pplication validation");
308 this.newAppModel.restUrl = null;
309 this.newAppModel.isOpen = true;
310 this.newAppModel.appBasicAuthUsername = null;
311 this.newAppModel.appBasicAuthPassword = null;
312 this.newAppModel.uebTopicName = null;
313 this.newAppModel.uebKey = null;
314 this.newAppModel.uebSecret = null;
315 this.newAppModel.restrictedApp = true;
317 /**Need to set below fields values based on input provided in the dialog */
318 this.newAppModel.applicationType = this.applicationObj.applicationType;
319 this.newAppModel.appName = this.applicationObj.appName;
320 this.newAppModel.landingPage = this.applicationObj.landingPage;
321 this.newAppModel.usesCadi = this.applicationObj.usesCadi;
322 if (this.applicationObj.isEnabled) {
323 this.newAppModel.isEnabled = this.applicationObj.isEnabled;
325 this.newAppModel.isEnabled = false;
327 console.log("New Model : ", this.newAppModel);
330 /**Need to set below fields values based on input provided in the dialog */
331 this.newAppModel.applicationType = this.applicationObj.applicationType;
332 this.newAppModel.appName = this.applicationObj.appName;
333 this.newAppModel.landingPage = this.applicationObj.landingPage;
334 this.newAppModel.restUrl = this.applicationObj.restUrl;
335 this.newAppModel.appBasicAuthUsername = this.applicationObj.appBasicAuthUsername;
336 this.newAppModel.appBasicAuthPassword = this.applicationObj.appBasicAuthPassword;
337 this.newAppModel.modeOfIntegration = this.applicationObj.modeOfIntegration;
338 this.newAppModel.usesCadi = this.applicationObj.usesCadi;
339 this.newAppModel.appAck = this.applicationObj.appAck;
341 if(this.applicationObj.isEnabled){
342 this.newAppModel.isEnabled = this.applicationObj.isEnabled;
344 this.newAppModel.isEnabled = false;
347 if(this.applicationObj.isOpen){
348 this.newAppModel.isOpen = this.applicationObj.isOpen;
350 this.newAppModel.isOpen = false;
352 //console.log("this.applicationObj.isOpen",this.applicationObj.isOpen);
354 if (this.applicationObj.rolesInAAF) {
355 this.newAppModel.rolesInAAF = this.applicationObj.rolesInAAF;
357 this.newAppModel.rolesInAAF = false;
358 this.newAppModel.usesCadi = false;
363 if (this.applicationObj.nameSpace=="") {
364 this.newAppModel.nameSpace = null;
366 this.newAppModel.nameSpace = this.applicationObj.nameSpace;
369 if (this.applicationObj.applicationType == "2" || this.applicationObj.applicationType == "3") {
370 this.applicationObj.modeOfIntegration = null;
373 if (this.newAppModel.applicationType == "2" || this.newAppModel.applicationType == "3") {
374 this.newAppModel.modeOfIntegration = null;
377 if (this.isEditMode) {
378 console.log("Edit application Object : ", JSON.stringify(this.applicationObj));
379 console.log("Mode Of iNtegration : ", this.applicationObj.modeOfIntegration);
380 this.applicationsService.updateOnboardingApp(this.applicationObj)
381 .subscribe( _data => {
383 //console.log("update application response :: ",this.result);
384 if(this.result !=null && this.result.httpStatusCode ==200){
385 this.passEntry.emit(this.result);
386 this.ngbModal.dismissAll();
388 this.openConfirmationModal('Error','There was a problem updating the application changes. Please try again. If the problem persists, then try again later. Error: '+this.result);
393 if(error.status == 409){
394 this.openConfirmationModal('Error', 'There was a problem updating the application changes. ' +
395 'The Application Name and Namespace should be unique. Error: ' +
398 }else if(error.status == 500){
399 this.openConfirmationModal('Error', 'There was a problem updating the application information. ' +
400 'Please try again later. Error: ' +error.status);
402 }else if(error.status == 404 || error.status == 403){
403 this.openConfirmationModal('Error', 'There was a problem updating the application information. ' +
404 'Invalid namespace. Error: ' +error.status);
406 }else if(error.status == 401){
407 this.openConfirmationModal('Error', 'There was a problem updating the application information. ' +
408 'Portal Mechid is unauthorized to access the given namespace. Error: ' +error.status);
410 }else if(error.status == 400){
411 this.openConfirmationModal('Error','Bad Request Error: ' + error.status);
414 this.openConfirmationModal('Error', 'There was a problem updating the application changes. ' +
415 'Please try again. If the problem persists, then try again later. Error: ' +
422 //console.log("Coming inside add application",this.newAppModel);
424 this.applicationsService.addOnboardingApp(this.newAppModel)
425 .subscribe( _data => {
427 //console.log("Add application response :: ",this.result);
428 if(this.result !=null && this.result.httpStatusCode ==200){
429 this.passEntry.emit(this.result);
430 this.ngbModal.dismissAll();
432 this.openConfirmationModal('Error','There was a problem adding the application changes. Please try again. If the problem persists, then try again later. Error: '+this.result);
437 if(error.status == 409){
438 this.openConfirmationModal('Error', 'There was a problem adding the application changes. ' +
439 'The Application Name and URL should be unique. Error: ' +
442 } else if(error.status == 500){
443 this.openConfirmationModal('Error', 'There was a problem adding the application information. ' +
444 'Please try again later. Error: ' +error.status);
446 }else if(error.status == 400){
447 this.openConfirmationModal('Error','Bad Request Error: ' + error.status);
450 this.openConfirmationModal('Error', 'There was a problem adding the application changes. ' +
451 'Please try again. If the problem persists, then try again later. Error: ' +
459 isUrlValid(userInput){
460 //let regexQuery = "/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i";
461 let regexQuery = "https?://.+";
462 let res = userInput.match(regexQuery);
470 openConfirmationModal(_title: string, _message: string) {
471 const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
472 modalInfoRef.componentInstance.title = _title;
473 modalInfoRef.componentInstance.message = _message;
476 openInformationModal(_title: string, _message: string){
477 const modalInfoRef = this.ngbModal.open(InformationModalComponent);
478 modalInfoRef.componentInstance.title = _title;
479 modalInfoRef.componentInstance.message = _message;