Added portal-FE-common - angular upgrade code

Added Layout Component- Footeter, global-search, header, header-menu, search-user, sidebar, tabbar, userbar and also added Account Onbaording changes

Issue-ID: PORTAL-795
Change-Id: I815add150ba12c868c1b0f80f3dfcdf4ea804d70
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>

8 files changed, 770 insertions, 0 deletions

diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.html b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.html
new file mode 100644
index 00000000..31f28615
--- /dev/null
+++ b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.html
@@ -0,0 +1,132 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2017 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">Account 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">
+      <!-- Add Account Popup code goes here-->
+      <div class="account-properties-main">
+        <form id="account-details-form" name="accountDetailsForm" novalidate  autocomplete="off" method="post">  
+          <div class="item required">         
+            <div class="item-label">Account Name</div>
+            <input id="account-onboarding-details-input-name" class="table-search-field"
+                type="text" ng-change="accountAddDetails.updateAccountName()" name="accountname"
+                [(ngModel)]="accountOnboarding.applicationName"
+                ng-pattern="/^[\w -]*$/" maxlength="100" required />
+          </div>
+
+          <div class="item required">  
+            <div class="item-label">Username</div>
+            <input id="account-onboarding-details-input-username" class="table-search-field"
+                type="text"
+                ng-change="accountAddDetails.updateUsername()" name="username"
+                [(ngModel)]="accountOnboarding.username"/>
+          </div>      
+
+          <div class="item">
+            <div class="item-label">Password</div>
+            <input id="account-onboarding-details-input-password" class="table-search-field"
+                type="password" name="password" [(ngModel)]="accountOnboarding.password" 
+                maxlength="100" autocomplete="off"/>
+          </div>
+
+          <div class="item">
+            <div class="item-label">Retype Password</div>
+            <input id="account-onboarding-details-input-repassword" class="table-search-field"
+                type="password" name="repassword"
+                [(ngModel)]="accountOnboarding.repassword" maxlength="100"/>
+          </div>
+
+          <div class="add-endpoint-item">
+            <div class="item-label add-label-left">Add Endpoint</div>
+            <div class="add-label-right" id="accountAddDetails-button-accordion"
+              (click)="addEndpoint()"><i class="icon ion-ios-add-circle-outline"></i>
+            </div>
+          </div>
+          
+          <div class="item">
+              <div class="item-label" *ngIf="accountOnboarding.endpointList && accountOnboarding.endpointList.length > 0">
+                Account endpoint
+              </div>
+    
+              <div id="account-details-user-paramters"  *ngFor="let endpoint of accountOnboarding.endpointList">
+                <div class="endpoint-item-left">
+                  <input id="account-details-input-endpoint-name"
+                    type="text" name="endpointName"
+                    maxlength="200" ng-model="endpoint.name" 
+                    ng-change="accountAddDetails.updateAccountEndpoint(endpoint)"/>
+                </div>
+    
+                <div class="icon-circle-action-remove endpoint-item-middle"
+                  (click)="removeEndpointItem(endpoint)"><span><i class="icon ion-ios-remove-circle-outline"></i></span>
+                </div>
+                  
+                <div class="error-container endpoint-item-right"
+                    *ngIf="endpoint.valid == false">
+                    <small id="accounts-details-input-invalid-endpoint"
+                      class="err-message">Invalid end point format
+                    </small>
+                </div>     
+              </div>
+
+              <div class="account-property">
+                <div class="property-label checkbox-label">
+                  <mat-checkbox name="isActive" type="checkbox" [(ngModel)]="accountOnboarding.isActive"
+                      id="accounts-checkbox-app-is-enabled" [checked]="accountOnboarding.isActive">
+                      Active
+                  </mat-checkbox> 
+                </div>	
+            </div>
+          </div>
+        </form>
+        </div>
+    </div>
+    <!--Modal Footer goes Here-->
+    <div class="modal-footer">
+      <button type="button" class="btn btn-primary" (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
diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.scss b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.scss
new file mode 100644
index 00000000..4a490b1c
--- /dev/null
+++ b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.scss
@@ -0,0 +1,77 @@
+/*-
+ * ============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============================================
+ *
+ * 
+ */
+
+.account-properties-main {
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 50px;
+    height: 320px;
+    width: 100%;
+    overflow-x: auto;
+}
+
+.required:before {
+    color: #cf2a2a;
+    margin-right: 2px;
+    content: "* ";
+    position: absolute;
+    top: 45px;
+    left: 28px;
+}
+
+.account-properties-main input[type="text"] {
+    width: 20em;
+    margin-bottom: 10px;
+}
+
+.account-properties-main input[type="password"] {
+    width: 20em;
+    margin-bottom: 10px;
+}
+
+.add-endpoint-item .add-label-right{
+    margin-left: 13em;
+}
+
+.add-endpoint-item{
+    display: inline-flex;
+}
+
+.account-property{
+    margin-top: 8px;
+}
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.spec.ts b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.spec.ts
new file mode 100644
index 00000000..fd568194
--- /dev/null
+++ b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.spec.ts
@@ -0,0 +1,62 @@
+/*-
+ * ============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============================================
+ *
+ * 
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountAddDetailsComponent } from './account-add-details.component';
+
+describe('AccountAddDetailsComponent', () => {
+  let component: AccountAddDetailsComponent;
+  let fixture: ComponentFixture<AccountAddDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountAddDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountAddDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.ts b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.ts
new file mode 100644
index 00000000..e2c408a1
--- /dev/null
+++ b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.ts
@@ -0,0 +1,159 @@
+/*-
+ * ============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============================================
+ *
+ * 
+ */
+
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BasicAuthAccountService } from 'src/app/shared/services';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+
+@Component({
+  selector: 'app-account-add-details',
+  templateUrl: './account-add-details.component.html',
+  styleUrls: ['./account-add-details.component.scss']
+})
+export class AccountAddDetailsComponent implements OnInit {
+
+  result: any;
+  isEditMode: boolean = false;
+  dupliateName: boolean = false;
+  emptyAccountName: boolean = false;
+  emptyAccountUsername: boolean = false;
+  passwordMatched: boolean = false;
+
+  @Input() accountOnboarding: any;
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+
+  constructor(public basicAuthAccountService: BasicAuthAccountService, public activeModal: NgbActiveModal, public ngbModal: NgbModal) { }
+
+  ngOnInit() {
+    this.passwordMatched = true;
+    this.dupliateName = false;
+    this.emptyAccountName = false;
+    this.emptyAccountUsername = false;
+  
+    if(this.accountOnboarding.applicationName){
+      this.isEditMode = true;
+    }else{
+      this.isEditMode = false;
+      this.accountOnboarding.isActive = true;
+      this.accountOnboarding.endpointList = [];
+    }
+    //console.log("IsEditMode in Add account Dialog :: ",this.isEditMode)
+
+  }
+
+  addEndpoint(){
+    const modalRef = this.ngbModal.open(ConfirmationModalComponent);
+    modalRef.componentInstance.title = "";
+    modalRef.componentInstance.message = 'Please add the roles to this Username/MechId through AAF Screen';
+    modalRef.result.then((result) => { }, (resut) => {return;});
+
+    /*this.accountOnboarding.endpointList.push({
+      valid: true
+    });*/
+  }
+
+  //Add Or Update Account.
+  saveChanges(){
+    var isValid = true;
+    //console.log("saveChanges called Account Onboarding");
+
+    if(this.accountOnboarding.applicationName == ''
+      || this.accountOnboarding.applicationName == undefined){
+      this.emptyAccountName = true;
+        isValid = false;
+      }
+    
+    if(this.accountOnboarding.username == ''
+      || this.accountOnboarding.username == undefined){
+      this.emptyAccountUsername = true;
+          isValid = false;
+    }
+    
+    if(this.dupliateName == true){
+          isValid = false;
+    }
+
+    if(this.dupliateName == true){
+      isValid = false;
+    }
+ 
+    if(this.accountOnboarding.password != this.accountOnboarding.repassword){
+        this.passwordMatched =  false;
+        isValid = false;
+    }
+    //console.log("isValid....",isValid)
+    if(!isValid)
+      return;
+    
+    var active = 'N';
+    if(this.accountOnboarding.isActive == true)
+      active = 'Y';
+
+    var newAccount = {
+      applicationName: this.accountOnboarding.applicationName,
+      username: this.accountOnboarding.username,
+      password: this.accountOnboarding.password,
+      endpoints: this.accountOnboarding.endpoints,
+      isActive: active
+    };
+
+    if(this.isEditMode){
+      var message = "Are you sure you want to change '" + this.accountOnboarding.applicationName + "'?"
+      this.basicAuthAccountService.updateAccount(this.accountOnboarding.id, newAccount)
+        .subscribe( _data => {
+          this.result = _data;
+          //console.log("updateAccount response :: ",this.result);
+          this.passEntry.emit(this.result);
+          this.ngbModal.dismissAll();
+        }, error => {
+          console.log(error);
+      });
+    }else{
+      this.basicAuthAccountService.createAccount(newAccount)
+        .subscribe( _data => {
+          this.result = _data;
+          //console.log("createAccount response :: ",this.result);
+          this.passEntry.emit(this.result);
+          this.ngbModal.dismissAll();
+        }, error => {
+          console.log(error);
+      });
+    }
+  }
+}
diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.html b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.html
new file mode 100644
index 00000000..31f631eb
--- /dev/null
+++ b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.html
@@ -0,0 +1,78 @@
+<!--
+  ============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">
+  <div class="ecomp-main-view-title">
+      <h1 class="heading-page">App Account Management</h1>
+  </div>
+  <button type="button" style="float: right;" class="btn btn-primary" (click)="openAddNewAccountModal('')">
+      <i class="icon ion-md-person-add"></i>Add Account
+  </button>
+  <div>
+    <table mat-table [dataSource]="dataSource" matSort>
+        <!-- Account Name Column -->
+        <ng-container matColumnDef="accountName">
+          <th id="col1" mat-header-cell *matHeaderCellDef> Account Name  </th>
+          <td (click)="openAddNewAccountModal(element)" id="rowheader_t1_{{i}}-accountName" 
+            mat-cell *matCellDef="let element; let i = index;"> {{element.applicationName}}
+          </td>
+        </ng-container>
+    
+        <!-- 	Username  Column -->
+        <ng-container matColumnDef="userName">
+          <th id="col2" mat-header-cell *matHeaderCellDef> Username </th>
+          <td (click)="openAddNewAccountModal(element)" id="rowheader_t1_{{i}}-userName" 
+            mat-cell *matCellDef="let element; let i=index;"> {{element.username}} </td>
+        </ng-container>
+
+        <!-- Delete Column -->
+        <ng-container matColumnDef="delete">
+          <th id="col4" mat-header-cell *matHeaderCellDef> Delete </th>
+          <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let element; let i=index;">
+            <span class="icon-trash" id="{{i}}-button-portal-admin-remove" (click)="deleteAccount(element)">
+              <i class="icon ion-md-trash"></i>
+            </span>
+          </td>
+        </ng-container>
+    
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
+  </div>
+</div>
diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.scss b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.scss
new file mode 100644
index 00000000..05d0cd22
--- /dev/null
+++ b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.scss
@@ -0,0 +1,46 @@
+/*-
+ * ============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============================================
+ *
+ * 
+ */
+
+ .container th{
+    padding-bottom: 15px;
+    font-weight: bold;
+}
+
+.ion-md-trash{
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.spec.ts b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.spec.ts
new file mode 100644
index 00000000..8e6e79ea
--- /dev/null
+++ b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.spec.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============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============================================
+ *
+ * 
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountOnboardingComponent } from './account-onboarding.component';
+
+describe('AccountOnboardingComponent', () => {
+  let component: AccountOnboardingComponent;
+  let fixture: ComponentFixture<AccountOnboardingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountOnboardingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountOnboardingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.ts b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.ts
new file mode 100644
index 00000000..9ed4f9da
--- /dev/null
+++ b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.ts
@@ -0,0 +1,153 @@
+/*-
+ * ============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============================================
+ *
+ * 
+ */
+
+import { Component, OnInit, ViewChild, Input} from '@angular/core';
+import { MatTableDataSource } from '@angular/material';
+import { MatSort, MatPaginator } from '@angular/material';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BasicAuthAccountService } from '../../shared/services/index';
+import { IAccountOnboarding } from 'src/app/shared/model/account-onboarding/accountOnboarding';
+import { AccountAddDetailsComponent } from './account-add-details/account-add-details.component';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+
+@Component({
+  selector: 'app-account-onboarding',
+  templateUrl: './account-onboarding.component.html',
+  styleUrls: ['./account-onboarding.component.scss']
+})
+export class AccountOnboardingComponent implements OnInit {
+
+  accountList: Array<IAccountOnboarding> = [];
+  result: any;
+  isEditMode: boolean = false;
+  displayedColumns: string[] = ['accountName', 'userName','delete'];
+  dataSource = new MatTableDataSource(this.accountList);
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  constructor(public basicAuthAccountService: BasicAuthAccountService, public ngbModal: NgbModal) { }
+
+  ngOnInit() {
+    this.getOnboardingAccounts();
+  }
+
+  populateTableData(wigetList: Array<IAccountOnboarding>){
+    this.dataSource = new MatTableDataSource(wigetList);
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  };
+
+  getOnboardingAccounts(){
+    //console.log("getOnboardingAccounts called");
+    this.basicAuthAccountService.getAccountList()
+      .subscribe(_data => {
+          this.result = _data;
+          //console.log("getOnboardingAccounts Data :: ", _data);
+          if (this.result == null || this.result == 'undefined') {
+              //console.log('BasicAuthAccountService::getOnboardingAccounts Failed: Result or result.data is null');
+          }else {
+            this.accountList = this.result.response;
+            this.populateTableData(this.accountList);
+          }
+      }, error =>{
+        console.log(error);
+      });
+
+  };
+
+  openAddNewAccountModal(rowData: any){
+    //console.log("openAddNewAccountModal getting called...");
+    const modalRef = this.ngbModal.open(AccountAddDetailsComponent, { size: 'lg' });
+    modalRef.componentInstance.title = 'Account Details';
+    if(rowData != 'undefined' && rowData){
+      rowData.repassword = rowData.password;
+      modalRef.componentInstance.accountOnboarding = rowData;
+      this.isEditMode = true;
+    }else{
+      modalRef.componentInstance.accountOnboarding  = {};
+      this.isEditMode = false;
+    }
+    modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
+      //console.log("receivedEntry >>> ",receivedEntry);
+      if(receivedEntry){
+        this.accountList = [];
+        this.getOnboardingAccounts();
+      }
+    });
+  }
+
+  deleteAccount(selectedAccount : any){
+    let confirmationMsg = 'You are about to delete this account : ' + selectedAccount.applicationName + '. Click OK to continue.';
+    this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => {
+      if (result === 'Ok') {
+        //console.log("deleteAccount called Account Onboarding");
+        if(!selectedAccount || selectedAccount == null || selectedAccount =='undefined'){
+          console.log('AccountOnboardingCtrl::deleteAccount: No Account or ID... cannot delete');
+          return;
+        }
+        //console.log("deleteAccount>>id",selectedAccount.id)
+        this.basicAuthAccountService.deleteAccount(selectedAccount.id)
+          .subscribe( _data => {
+            this.result = _data;
+            //console.log("deleteAccount response :: ",this.result);
+            this.accountList.splice(this.accountList.indexOf(selectedAccount), 1);
+            this.getOnboardingAccounts();
+          }, error => {
+            console.log(error);
+        });
+      }
+    }, (resut) => {
+      return;
+    })
+  }
+
+  openConfirmationModal(_title: string, _message: string) {
+    const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+  }
+
+  openInformationModal(_title: string, _message: string){
+    const modalInfoRef = this.ngbModal.open(InformationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+    return modalInfoRef;
+  }
+
+}