X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=portal-FE-os%2Fsrc%2Fapp%2Fpages%2Fapplication-onboarding%2Fapplication-details-dialog%2Fapplication-details-dialog.component.html;h=6d0c544692715caaae321007ba8bc6634794c6fb;hb=a36db1a18f3d5117517313ba035e2384e00cc0a7;hp=bef37b84f02866411b391e5e27bd32e1faed2e11;hpb=d856cbc5d725836a07776b0f20f06bbbda7b5412;p=portal.git

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
index bef37b84..6d0c5446 100644
--- 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
@@ -36,240 +36,305 @@
 -->
 
 <div class="container">
- 	<!--Modal Headers-->
+	<!--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-->
+	<!--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">
+			<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> -->
+
+						<div class="property required">
+							<div class="property-label" style="display: flex;">
+								<span style="flex: 9">Application Name</span>
+								<app-information-tooltip style="flex: 1;"
+									[textMessage]="'Application Name Information'">
+								</app-information-tooltip>
+							</div>
+							<input #applicationName id="input-app-name" type="text" [(ngModel)]="applicationObj.appName"
+								maxlength="100" name="name" pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required="true" />
 
-						<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 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>
-					</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 id="property-active" class="property-active" style="display: flex;
+						justify-content: flex-end;margin-right: 16px;">
+							<mat-checkbox name="isEnabled" [(ngModel)]="applicationObj.isEnabled"
+								[checked]="applicationObj.isEnabled" id="checkbox-app-is-enabled">Active
+							</mat-checkbox>
 						</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 class="property">
+							<div class="property-label" style="display: flex;">
+								<mat-label style="flex: 9">Application Type</mat-label>
+								<app-information-tooltip style="flex: 1;"
+									[textMessage]="'Application Type Information - Gui, Hyperlink or Non-gui'">
+								</app-information-tooltip>
+							</div>
+							<mat-select [disabled]="action === 'edit'" [(value)]="applicationObj.applicationType">
+								<mat-option *ngFor="let appType of applicationTypeArray" [value]="appType.value">
+									{{appType.name}}
+								</mat-option>
+							</mat-select>
 						</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 class="property" *ngIf="applicationObj.applicationType == '1'">
+							<div class="property-label" style="display: flex;">
+								<mat-label style="flex: 9">Mode of Integration</mat-label>
+								<app-information-tooltip style="flex: 1;"
+									[textMessage]="'Mode Of Integration. SDK or Framework'">
+								</app-information-tooltip>
+							</div>
+							<mat-select [(value)]="applicationObj.modeOfIntegration">
+								<mat-option *ngFor="let integrationType of modeOfIntegration"
+									[value]="integrationType.value">
+									{{integrationType.name}}
+								</mat-option>
+							</mat-select>
 						</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 class="property" *ngIf="!(applicationObj.applicationType == '2')">
+							<div class="property-label" style="display: flex;">
+								<mat-label style="flex: 9">Roles Management Type</mat-label>
+								<app-information-tooltip style="flex: 1;" [textMessage]="'Roles Management Type'">
+								</app-information-tooltip>
+							</div>
+							<mat-select [(value)]="applicationObj.rolesInAAF">
+								<mat-option *ngFor="let roleRepo of rolesManagementType" [value]="roleRepo.value">
+									{{roleRepo.name}}
+								</mat-option>
+							</mat-select>
 						</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 *ngIf="!((applicationObj.applicationType=='2') || (!applicationObj.rolesInAAF))"
+							class="property-active" style="display: flex;">
+							<mat-checkbox style="flex: 9" name="appAck" [(ngModel)]="applicationObj.appAck">
+								Notify App For AAF Operations
+							</mat-checkbox>
+							<app-information-tooltip style="flex: 1;"
+								[textMessage]="'Notify application for AAF operations'">
+							</app-information-tooltip>
 						</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
+
+						<div class="property-active" *ngIf="!(applicationObj.applicationType == '2' 
+						||(!applicationObj.rolesInAAF))">
+							<mat-checkbox name="usesCadi" [(ngModel)]="applicationObj.usesCadi"
+								[checked]="applicationObj.usesCadi">Is CADI Enabled?
 							</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 class="table-control" style="display: inline-flex;"
+							*ngIf="!(applicationObj.applicationType == '2' || !applicationObj.rolesInAAF)">
+
+							<div [ngClass]="(applicationObj.rolesInAAF) ? 'property required' : 'property'"
+								style="width: 250px;">
+								<div id="pwd-property-label" class="property-label">AAF Namespace</div>
+								<input type="text" id="input-mylogins-auth-namespace"
+									[(ngModel)]="applicationObj.nameSpace" name="appAuthNameSpace" maxlength="256"
+									[disabled]="!applicationObj.rolesInAAF" />
 							</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 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 *ngIf="!(applicationObj.applicationType == '3')"
+							[ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'">
+							<div class="property-label" style="display: flex;">
+								<span style="flex: 9">Landing Page</span>
+								<app-information-tooltip style="flex: 1;" [textMessage]="'Application URL Information'">
+								</app-information-tooltip>
+							</div>
+							<input id="input-app-url" [(ngModel)]="applicationObj.landingPage" 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.landingPage=='')">
+								<small id="app-name-error-required" class="err-message">
+									Landing Page URL is required
+								</small>
+							</div>
+						</div>
+
+						<div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'"
+							*ngIf="!(applicationObj.applicationType == '2' || applicationObj.applicationType == '3')">
+							<div class="property-label" style="display: flex;">
+								<span style="flex: 9">Rest API URL</span>
+								<app-information-tooltip style="flex: 1;" [textMessage]="'Rest Api URL Information'">
+								</app-information-tooltip>
+							</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.applicationType == '1'" />
+
+							<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.rolesInAAF) ? 'property required' : 'property'"
+							*ngIf="!(applicationObj.applicationType == '2')">
+							<div id="username-property-label" class="property-label" style="display: flex;">
+								<span style="flex: 9">Auth Configured User</span>
+								<app-information-tooltip style="flex: 1;"
+									[textMessage]="'Basic Authentication Username Information'">
+								</app-information-tooltip>
+							</div>
+							<input type="text" id="input-username-property"
+								[(ngModel)]="applicationObj.appBasicAuthUsername" name="username" maxlength="256"
+								ng-required="!appDetails.app.restrictedApp" />
+
+							<div id="error-container-edit" class="error-container"
+								*ngIf="((applicationObj.isEnabled || applicationObj.rolesInAAF) && applicationObj.appBasicAuthUsername =='')">
+								<small id="app-name-error-required" class="err-message">
+									App Username is required
+								</small>
+							</div>
+						</div>
+
+						<div [ngClass]="(applicationObj.isEnabled && !applicationObj.rolesInAAF) ? 'property required' : 'property'"
+							*ngIf="!(applicationObj.applicationType == '2' || (applicationObj.rolesInAAF && applicationObj.usesCadi))">
+							<div id="pwd-property-label" class="property-label" style="display: flex;">
+								<span style="flex: 9">Basic Auth Password</span>
+								<app-information-tooltip style="flex: 1;"
+									[textMessage]="'Basic Authentication Password Information'">
+								</app-information-tooltip>
+							</div>
+							<input type="password" id="input-mylogins-password"
+								[(ngModel)]="applicationObj.appBasicAuthPassword" autocomplete="new-password"
+								name="appPassword" maxlength="256" />
+
+							<div id="error-container-edit" class="error-container"
+								*ngIf="(applicationObj.isEnabled && !applicationObj.rolesInAAF && applicationObj.appBasicAuthPassword =='')">
+								<small id="app-name-error-required" class="err-message">
+									Password is required
+								</small>
+							</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"/>
+
+					<!-- Right container-->
+					<div class="right-container">
+
+						<div class="property" *ngIf="!(applicationObj.applicationType == '3')">
+							<div class="property-label" style="display: flex;">
+								<span style="flex: 9">Upload
+									Image</span>
+								<app-information-tooltip style="flex: 1;"
+									[textMessage]="'Image file must be smaller than 1MB'">
+								</app-information-tooltip>
+							</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>
+
+
+						<div class="property" *ngIf="!(applicationObj.applicationType == '3')">
+							<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}}" />
+						</div>
+
+						<div class="property" *ngIf="!(applicationObj.applicationType == '3')">
+							<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.applicationType == '2')"
+									[disabled]="applicationObj.applicationType == '2'">Allow guest access
+								</mat-checkbox>
+							</div>
 						</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 class="table-control" style="display: inline-flex;"
+							*ngIf="!(applicationObj.applicationType == '2')">
+							<div id="property-communication-key" class="property"
+								*ngIf="!(applicationObj.applicationType == '2' || applicationObj.applicationType == '3')"
+								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 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>
+				</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 class="modal-footer">
+			<button type="button" class="btn btn-primary"
+				[disabled]="(!applicationObj.appName ||  applicationObj.appName.length == 0)"
+				(click)="saveChanges()">Save</button> &nbsp;
+			<button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
+		</div>
+
 	</div>
 </div>
\ No newline at end of file