Added portal-FE-os components

Removed layout from portal-FE-os and added new components in
portal-fe-os

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

4 files changed, 194 insertions, 0 deletions

diff --git a/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.html b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.html
new file mode 100644
index 00000000..7fc35e44
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.html
@@ -0,0 +1,118 @@
+<div class="modal-body">
+  <form [formGroup]="addNewUserForm">
+    <div class="modal-body">
+      <div class="new-users-details-modal">
+        <div class="new-users-main">
+  
+          <!-- First Name -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*First Name</div>
+              <input class="form-control" formControlName="firstName" type="text"
+                [ngClass]="{ 'is-invalid': submitted && formValue.firstName.errors }" />
+              <div *ngIf="submitted && formValue.firstName.errors" class="invalid-feedback">
+                <div *ngIf="formValue.firstName.errors.required">
+                  First Name is required
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Middle Name -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>Middle Name</div>
+              <input class="form-control" formControlName="middleInitial" type="text" />
+            </div>
+          </div>
+  
+          <!-- Last Name -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Last Name</div>
+              <input class="form-control" formControlName="lastName" type="text"
+                [ngClass]="{ 'is-invalid': submitted && formValue.lastName.errors }" />
+              <div *ngIf="submitted && formValue.lastName.errors" class="invalid-feedback">
+                <div *ngIf="formValue.lastName.errors.required">
+                  Last Name is required
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Email Address ID -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Email Address ID</div>
+              <input class="form-control" formControlName="email" type="text"
+                [ngClass]="{ 'is-invalid': submitted && formValue.email.errors }" />
+              <div *ngIf="submitted && formValue.email.errors" class="invalid-feedback">
+                <div *ngIf="formValue.email.errors.required">
+                  Email Address is required
+                </div>
+                <div *ngIf="formValue.email.errors.email">
+                  Email Address is invalid
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Login ID -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Login ID</div>
+              <input class="form-control" formControlName="loginId" type="text"
+                [ngClass]="{ 'is-invalid': submitted && formValue.loginId.errors }" />
+              <div *ngIf="submitted && formValue.loginId.errors" class="invalid-feedback">
+                <div *ngIf="formValue.loginId.errors.required">
+                  Login ID is required
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Login Password -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Login Password</div>
+              <input class="form-control" formControlName="loginPwd" type="password"
+                [ngClass]="{ 'is-invalid': submitted && formValue.loginPwd.errors }" />
+              <div *ngIf="submitted && formValue.loginPwd.errors" class="invalid-feedback">
+                <div *ngIf="formValue.loginPwd.errors.required">
+                  Password is required
+                </div>
+                <div *ngIf="formValue.loginPwd.errors.minlength">
+                  Password must be at least 8 characters
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Confirm Login Password -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Confirm Password</div>
+              <input class="form-control" formControlName="confirmPassword" type="password"
+                [ngClass]="{ 'is-invalid': submitted && formValue.confirmPassword.errors }"
+                appEqualValidator="password" />
+              <div *ngIf="submitted && formValue.confirmPassword.errors" class="invalid-feedback">
+                <div *ngIf="formValue.confirmPassword.errors.required">
+                  Confirm Login password
+                </div>
+                <div *ngIf="formValue.confirmPassword.errors.mustMatch">
+                  Password Must Match
+                </div>
+              </div>
+            </div>
+          </div>
+  
+  
+        </div>
+      </div>
+    </div>
+  </form>  
+</div>
+<div class="modal-footer">
+  <button type="submit" class="btn btn-primary" (click)="addUser()" [disabled]="addNewUserForm.invalid">Next</button> &nbsp;
+    <button type="button" class="btn btn-primary" aria-label="Close" (click)="activeModal.dismiss('Cross')">Close</button>
+</div>
diff --git a/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.scss b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.scss
diff --git a/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.spec.ts b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.spec.ts
new file mode 100644
index 00000000..3262174f
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDetailsFormComponent } from './user-details-form.component';
+
+describe('UserDetailsFormComponent', () => {
+  let component: UserDetailsFormComponent;
+  let fixture: ComponentFixture<UserDetailsFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserDetailsFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserDetailsFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.ts b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.ts
new file mode 100644
index 00000000..bea0fcdb
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.ts
@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MustMatch } from 'src/app/shared/helpers/must-match-validator';
+import { UsersService } from 'src/app/shared/services';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-user-details-form',
+  templateUrl: './user-details-form.component.html',
+  styleUrls: ['./user-details-form.component.scss']
+})
+export class UserDetailsFormComponent implements OnInit {
+  addNewUserForm: FormGroup;
+  submitted = false;
+
+  constructor(private formBuilder: FormBuilder, 
+    private usersService: UsersService,
+    public activeModal: NgbActiveModal) { }
+
+  ngOnInit() {
+    this.addNewUserForm = this.formBuilder.group({
+      firstName: ['', Validators.required],
+      middleInitial: [''],
+      lastName: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      loginId: ['', Validators.required],
+      loginPwd: ['', [Validators.required, Validators.minLength(6)]],
+      confirmPassword: ['', Validators.required]
+    }, {
+        validator: MustMatch('loginPwd', 'confirmPassword')
+      });
+  }
+
+  get formValue() {
+    return this.addNewUserForm.controls;
+  }
+
+  addUser() {
+    this.submitted = true;
+    if (this.addNewUserForm.invalid) {
+      console.log("Invalid form!!");
+      return;
+    }
+    console.log("New user Json : " + JSON.stringify(this.addNewUserForm.value));
+    console.log("Get Raw value : " + this.addNewUserForm.getRawValue());
+    let newUserFormData = JSON.stringify(this.addNewUserForm.getRawValue());
+    this.usersService.addNewUser(newUserFormData);
+    this.activeModal.close();
+  }
+
+}