@annalib/anna-cognito-lib 0.2.1 → 0.2.4

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/README.md

@@ -1,48 +1,42 @@
 # AnnaCognitoLib
 ## How to use the library in the consuming project ? 
-1. Install the package from npm - `npm install @annalib/anna-cognito-lib` (if not working use with --force flag).
 
-2. After installing the Library, you need to install it's peer dependancies.  
-  2. 1. You can find the peer-dependecies in package.json file of library. Install all the peer depedencies with respective version number mentioned. this is important step otherwise lbrary will throw error. 
-     2. ex: `npm install ngx-toastr@13.2.1`
+1. Install the package from npm 
+`npm install @annalib/anna-cognito-lib` (if not working use with --force flag).
+2. After installing the Library, you need to install it's peer dependancies. You can find the peer-dependecies in package.json file of library. Install all the peer depedencies with respective version number mentioned. this is important step otherwise library will throw error. 
+ex: ```npm install ngx-toastr@13.2.1```
+3. Also make sure to Install the Roboto font locally in assets folder of your consuming project.  
 
-3. Adding Configuration 
-  3. 1. import the `AnnaCognitoLibModule` module and pass the configuration to root `AnnaCognitoLibModule.forRoot(AnnaCognitoLibraryConfig)`
-     2. configuration const should be:  
-    <kbd>
-    const AnnaCognitoLibraryConfig = { 
+If using the library locally (library from your system locally not npm),then in angular json file you have to set `preserveSymlinks: true`.
+
+## Adding Configuration 
+1. import the `AnnaCognitoLibModule` module and pass the configuration to root `AnnaCognitoLibModule.forRoot(AnnaCognitoLibraryConfig)`
+2. configuration const should be:  
+   ``` const AnnaCognitoLibraryConfig = { 
       cognito : {
         userPoolId: "",
         clientId: "", 
       },
       loginPageLogoImgUrl: ""
-    }
-    </kbd>
-  3. c. Default loginPageLogoImgUrl is ANNA logo image. 
-        In case you want to add another Logo image, add the logo image file in library's asset folder and provide new loginPageLogoImgUrl.
-        Note: for better loading of logo image, provide logo image in minified format.
-
-
-4. Adding new custom function implemetation for any service file.
-    4.  1. Background Understanding - when we want to provide custom implemenetation - We write the custom implementation in a service file of consuming project and that is injected in the library. Injection is taken care by library itself. You just need to provide the definition and implementation of new function added. 
-    2. Ex: let's say we want to add a new function `onSuccessfulAuthenticatingUser() this function is called from library when user is succesfully authenticated and logged in. (Note: this function is already present in lib).
-    3. Then In library add the new function declaration `onSuccessfulAuthenticatingUser()` in interface file `IAuthService` of `auth-service.token.ts` file.
-    4. In consuming project, for `onSuccessfulAuthenticatingUser()` provide the implementation in the service file say `AuthService` of `auth.service.ts`.  
-    5. Then In consuming project, app.module.ts file add following in providers array.
-      `{ provide: AUTH_SERVICE_TOKEN, useExisting: AuthService }`
-      i.e. your consuming project's existing AuthService will be injected in Library's auth-service file with the help of AUTH_SERVICE_TOKEN. 
-    6. Now you're good to go!
+    } ```
+3. Keep the logo image in consuming project and provide the path for loginPageLogoImgUrl. ex: "assets/images/Anna-Logo.png"
+   Note: for better loading of logo image, provide logo image in minified format.
+
+
+## Adding new custom function implemetation for any service file.
+1. Background Understanding - when we want to provide custom implemenetation - We write the custom implementation in a service file of consuming project and that is injected in the library. Injection is taken care by library itself. You just need to provide the definition and implementation of new function added. 
+2. Ex: let's say we want to add a new function `onSuccessfulAuthenticatingUser() this function is called from library when user is succesfully authenticated and logged in. (Note: this function is already present in lib).
+3. Then In library add the new function declaration `onSuccessfulAuthenticatingUser()` in interface file `IAuthService` of `auth-service.token.ts` file.
+4. In consuming project, for `onSuccessfulAuthenticatingUser()` provide the implementation in the service file say `AuthService` of `auth.service.ts`.  
+5. Then In consuming project, app.module.ts file add following in providers array.
+  `{ provide: AUTH_SERVICE_TOKEN, useExisting: AuthService }`
+   i.e. your consuming project's existing AuthService will be injected in Library's auth-service file with the help of AUTH_SERVICE_TOKEN. 
+6. Now you're good to go!
         
-5. Also make sure to Install the Roboto font locally in assets folder of your consuming project.  
-
-If using the library locally (library from your system locally not npm),then in angular json file you have to set `preserveSymlinks: true`.
-
 
 ## List of function implementation we need to provide in consuming project. 
 1. `onSuccessfulAuthenticatingUser()` - provide the implementation of what happens when user is succefully logged in. (any API call or routing you need to provide).
-
 2. `isUsernameAvailable()` - in thie implementation call an backend API to find out if username is already present in Database or not. format of response should be `{"isUsernameAvailable":true}`. This is used in forgot-password page before calling forgot-password cognito sdk call, we need to check thorough backend db if the username is actually available.
-
 3. `isLoggingIn` - set this variable to false. this will stop the spinner on top on button.
 use case: after successful login i.e. when we are done with all API call we need to call post succesfull calling or when we have routed to home page. 
 

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/anna-cognito-lib'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/anna-cognito-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,37 +1,14 @@
-{
-  "name": "@annalib/anna-cognito-lib",
-  "version": "0.2.1",
-  "peerDependencies": {
-    "@angular/common": "^13.2.0",
-    "@angular/core": "^13.2.0",
-    "@mdi/font": "^5.1.45",
-    "@ng-bootstrap/ng-bootstrap": "^9.0.1",
-    "@types/node": "^12.11.1",
-    "amazon-cognito-identity-js": "^4.5.3",
-    "bootstrap": "^4.3.1",
-    "ngx-toastr": "^13.2.1"
-  },
-  "module": "fesm2015/annalib-anna-cognito-lib.mjs",
-  "es2020": "fesm2020/annalib-anna-cognito-lib.mjs",
-  "esm2020": "esm2020/annalib-anna-cognito-lib.mjs",
-  "fesm2020": "fesm2020/annalib-anna-cognito-lib.mjs",
-  "fesm2015": "fesm2015/annalib-anna-cognito-lib.mjs",
-  "typings": "annalib-anna-cognito-lib.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./annalib-anna-cognito-lib.d.ts",
-      "esm2020": "./esm2020/annalib-anna-cognito-lib.mjs",
-      "es2020": "./fesm2020/annalib-anna-cognito-lib.mjs",
-      "es2015": "./fesm2015/annalib-anna-cognito-lib.mjs",
-      "node": "./fesm2015/annalib-anna-cognito-lib.mjs",
-      "default": "./fesm2020/annalib-anna-cognito-lib.mjs"
-    }
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
+{
+  "name": "@annalib/anna-cognito-lib",
+  "version": "0.2.4",
+  "peerDependencies": {
+    "@angular/common": "^13.2.0",
+    "@angular/core": "^13.2.0",
+    "@mdi/font": "^5.1.45",
+    "@ng-bootstrap/ng-bootstrap": "^9.0.1",
+    "@types/node": "^12.11.1",
+    "amazon-cognito-identity-js": "^4.5.3",
+    "bootstrap": "^4.3.1",
+    "ngx-toastr": "^13.2.1"
+  }
+}

package/src/lib/anna-cognito-lib.module.ts

@@ -0,0 +1,51 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { LoginComponent } from './components/login/login.component';
+import { SpinnerButtonDirective } from './directives/spinner-button';
+import { LibraryConfig } from './config/library.config';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { SetNewPasswordComponent } from './components/set-new-password/set-new-password.component';
+import { PasswordMatchingComponent } from './components/password-matching/password-matching.component';
+import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
+import { VerifyAndSetNewPasswordComponent } from './components/verify-and-set-new-password/verify-and-set-new-password.component';
+
+
+
+@NgModule({
+  declarations: [
+    LoginComponent,
+    SetNewPasswordComponent,
+    PasswordMatchingComponent,
+    ForgotPasswordComponent,
+    VerifyAndSetNewPasswordComponent,
+    SpinnerButtonDirective,
+  ],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    CommonModule
+  ],
+  exports: [
+    LoginComponent,
+    SetNewPasswordComponent,
+    PasswordMatchingComponent,
+    ForgotPasswordComponent,
+    VerifyAndSetNewPasswordComponent,
+    SpinnerButtonDirective
+  ]
+})
+export class AnnaCognitoLibModule {
+  public static forRoot(configuration: LibraryConfig): ModuleWithProviders<AnnaCognitoLibModule> {
+    return {
+      ngModule: AnnaCognitoLibModule,
+      providers: [
+        {
+          provide: LibraryConfig, 
+          useValue: configuration
+        }
+      ]
+    };
+  }
+}

package/src/lib/components/forgot-password/forgot-password.component.html

@@ -0,0 +1,44 @@
+<div class="main">
+  <section>
+      <header>
+          <img src="assets/images/Anna-Logo-for-footer-min.png" alt="Anna Logo" />
+      </header>
+      <article>
+          <form [formGroup]="verifyRegisteredEmail">
+              <div id="heading">
+                  {{ constants.forgotPasswordHeading }}
+              </div>
+              <p>
+                  {{ constants.forgotPasswordMessage }}
+              </p>
+              <div id="alert-div" *ngIf="errorMessage">
+                  <span class="material-icons">report</span>
+                  <p id="alert-msg">{{ errorMessage }}</p>
+              </div>
+
+              <input
+                  type="text"
+                  tabindex="1"
+                  formControlName="email"
+                  [placeholder]="constants.enterEmail"
+                  [ngClass]="{
+                      'input-invalid': verifyRegisteredEmail.get('email')?.dirty && verifyRegisteredEmail.get('email')?.errors
+                  }"
+              />
+
+              <button
+                  tabindex="2"
+                  type="submit"
+                  class="login-btn"
+                  [disabled]="!isFormValid()"
+                  (click)="onVerifyRegisteredEmail()"
+              >
+                  {{ constants.forgotPasswordButton }}
+              </button>
+          </form>
+      </article>
+      <footer>
+          Powered by <span> <strong> SureWaves</strong></span>
+      </footer>
+  </section>
+</div>

package/src/lib/components/forgot-password/forgot-password.component.scss

@@ -0,0 +1,22 @@
+@import "../../scss/loginTemplate", "../../scss/fonts", "../../scss/colors";
+p {
+  color: $charcoal;
+  @include fonts(Roboto, 1rem, normal, normal, normal, normal, normal);
+}
+
+input[type="text"] {
+  margin-bottom: 16px;
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.back-btn {
+  font-size: 27px;
+  position: relative;
+  color: #268bff;
+  float: left;
+  top: -30px;
+  left: -15px;
+  font-weight: normal !important;
+}

package/src/lib/components/forgot-password/forgot-password.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForgotPasswordComponent } from './forgot-password.component';
+
+describe('ForgotPasswordComponent', () => {
+  let component: ForgotPasswordComponent;
+  let fixture: ComponentFixture<ForgotPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ForgotPasswordComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ForgotPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/forgot-password/forgot-password.component.ts

@@ -0,0 +1,75 @@
+// Angular import statements
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+
+// Third party import statements
+import { ToastrService } from "ngx-toastr";
+
+// User defined import statements
+import { UsernameInfo } from "../../models/auth.model";
+import { AnnaLibAuthService } from "../../services/auth.service";
+import { LoginConstant } from "../../constants/loginConstant";
+
+@Component({
+  selector: 'anna-cognito-lib-forgot-password',
+  templateUrl: './forgot-password.component.html',
+  styleUrls: ['./forgot-password.component.scss']
+})
+export class ForgotPasswordComponent implements OnInit {
+  errorMessage: string;
+    verifyRegisteredEmail: FormGroup;
+    passwordNotMatching = false;
+    constants: typeof LoginConstant;
+    password = { value: null, status: null };
+    confirmPassword = { value: null, status: null };
+
+    constructor(
+      private authService: AnnaLibAuthService,
+      private fb: FormBuilder,
+      private toastr: ToastrService
+    ) {}
+
+    ngOnInit() {
+        this.constants = LoginConstant;
+        this.onIntialiseForm();
+        if (this.authService.userName) {
+            this.onUpdateForm();
+        }
+    }
+
+    onIntialiseForm() {
+        this.verifyRegisteredEmail = this.fb.group({
+            email: [null, [Validators.required]],
+        });
+    }
+
+    onUpdateForm() {
+        this.verifyRegisteredEmail.patchValue({
+            email: this.authService.userName,
+        });
+    }
+
+    isFormValid() {
+        return this.verifyRegisteredEmail.valid;
+    }
+
+    onVerifyRegisteredEmail() {
+        let username = this.verifyRegisteredEmail.controls['email'].value;
+        this.authService.consumingProjectAuthService.isUsernameAvailable(username)
+        .subscribe(
+            {
+              next: (response) => {
+                let res = new UsernameInfo(response);
+                if (!res.isUsernameAvailable) {
+                    this.authService.onForgotPasswordGenerateOTP(username);
+                } else {
+                    this.errorMessage = this.constants.userNotFound;
+                }
+              },
+              error: any => {
+                  this.toastr.error(LoginConstant.apiFailErrorMessage);
+              }
+            }
+        );
+    }
+}

package/src/lib/components/login/login.component.html

@@ -0,0 +1,45 @@
+<div class="main">
+  <!-- Load login page when all constant variable are intiated otherwise it will show a glitch. that's why ngIf check of constants.forgotPassword -->
+  <section *ngIf="constants.forgotPassword">
+      <header>
+          <img [src]="libraryConfig.loginPageLogoImgUrl" loading="eager" alt="Anna Logo" />
+      </header>
+      <article>
+          <form [formGroup]="loginForm" (ngSubmit)="OnLogin()">
+              <div id="alert-div" *ngIf="authService.loginErrorMessage">
+                  <span class="material-icons">report</span>
+                  <p>{{ authService.loginErrorMessage }}</p>
+              </div>
+
+              <input
+                  type="text"
+                  tabindex="1"
+                  formControlName="username"
+                  [ngClass]="{ 'input-invalid': authService.loginErrorMessage }"
+                  [placeholder]="constants.enterEmail"
+                  autocomplete="username"
+                  autofocus
+              />
+
+              <input
+                  type="password"
+                  tabindex="2"
+                  formControlName="password"
+                  [ngClass]="{ 'input-invalid': authService.loginErrorMessage }"
+                  [placeholder]="constants.password"
+                  autocomplete="current-password"
+                  autofocus
+              />
+
+              <a tabindex="4" [routerLink]="constants.forgortPasswordPageUrl">{{ constants.forgotPassword }}</a>
+              <button
+                  tabindex="3"
+                  class="login-btn"
+                  [anna-cognito-lib-SpinnerButton]="authService.consumingProjectAuthService.isLoggingIn"
+                  [spinnerButtonText]="constants.login"
+              ></button>
+          </form>
+      </article>
+      <footer>Powered by <span>SureWaves</span></footer>
+  </section>
+</div>

package/src/lib/components/login/login.component.scss

@@ -0,0 +1,10 @@
+@import "../../scss/loginTemplate", "../../scss/fonts";
+a {
+  float: right;
+  color: #268bff;
+  @include fonts(Roboto, 0.875rem, normal, normal, normal, normal, normal);
+  text-decoration: underline;
+  &:hover {
+    cursor: pointer;
+  }
+}

package/src/lib/components/login/login.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/login/login.component.ts

@@ -0,0 +1,47 @@
+// Angular import statements
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+
+// User defined import statements
+import { LoginConstant } from "../../constants/loginConstant";
+import { AnnaLibAuthService } from '../../services/auth.service';
+import { LibraryConfig } from '../../config/library.config';
+
+@Component({
+    selector: "anna-cognito-lib-login",
+    templateUrl: "./login.component.html",
+    styleUrls: ["./login.component.scss"],
+})
+export class LoginComponent implements OnInit {
+    loginForm: FormGroup;
+    constants: typeof LoginConstant;
+    annaLogoUrl: string = "assets/images/Anna-Logo-for-footer-min.png";
+    logoUrl: string;
+    
+    constructor(
+        public authService: AnnaLibAuthService,
+        private fb: FormBuilder,
+        public libraryConfig: LibraryConfig
+    ) {}
+
+    ngOnInit() {
+        this.constants = LoginConstant;
+        this.onIntialiseForm();
+    }
+
+    onIntialiseForm() {
+        this.loginForm = this.fb.group({
+            username: [null],
+            password: [null],
+        });
+    }
+
+    OnLogin() {
+        this.authService.consumingProjectAuthService.isLoggingIn = true;
+        const username = this.loginForm.controls['username'].value;
+        const password = this.loginForm.controls['password'].value;
+        this.authService.authenticate(username, password);
+    }
+
+    
+}

package/src/lib/components/password-matching/password-matching.component.html

@@ -0,0 +1,84 @@
+<form [formGroup]="passwordForm">
+  <div id="alert-div" *ngIf="passwordNotMatching">
+      <div id="icon-div">
+          <span class="material-icons">report</span>
+      </div>
+      <p>{{ constants.passwordNotMatching }}</p>
+  </div>
+  <div class="password-policies">
+      <ng-container *ngIf="!passwordForm.get('password')?.dirty">
+          <p>
+              <b>{{ constants.passwordMustContain }} </b>
+          </p>
+          <p>{{ constants.minimumCharacter }}</p>
+          <p>{{ constants.oneUppercase }}</p>
+          <p>{{ constants.oneLowercase }}</p>
+          <p>{{ constants.oneNumber }}</p>
+          <p>{{ constants.specialCharacter }}</p>
+      </ng-container>
+
+      <ng-container *ngIf="passwordForm.get('password')?.dirty">
+          <p>
+              <b>{{ constants.passwordMustContain }}</b>
+          </p>
+
+          <div [ngClass]="passwordForm.get('password')?.hasError('minLength') ? 'error-color' : 'success-color'">
+              <div id="icon-div-msg">
+                  <span class="material-icons" *ngIf="passwordForm.get('password')?.hasError('minLength')"> cancel </span>
+                  <span class="material-icons" *ngIf="!passwordForm.get('password')?.hasError('minLength')"> check_circle </span>
+              </div>
+              <span class="span-text">{{ constants.minimumCharacter }}</span>
+          </div>
+
+          <div [ngClass]="passwordForm.get('password')?.hasError('uppercase') ? 'error-color' : 'success-color'">
+              <div id="icon-div-msg">
+                  <span class="material-icons" *ngIf="passwordForm.get('password')?.hasError('uppercase')"> cancel </span>
+                  <span class="material-icons" *ngIf="!passwordForm.get('password')?.hasError('uppercase')"> check_circle </span>
+              </div>
+              <span class="span-text">{{ constants.oneUppercase }}</span>
+          </div>
+
+          <div [ngClass]="passwordForm.get('password')?.hasError('lowercase') ? 'error-color' : 'success-color'">
+              <div id="icon-div-msg">
+                  <span class="material-icons" *ngIf="passwordForm.get('password')?.hasError('lowercase')"> cancel </span>
+                  <span class="material-icons" *ngIf="!passwordForm.get('password')?.hasError('lowercase')"> check_circle </span>
+              </div>
+              <span class="span-text">{{ constants.oneLowercase }}</span>
+          </div>
+
+          <div [ngClass]="passwordForm.get('password')?.hasError('number') ? 'error-color' : 'success-color'">
+              <div id="icon-div-msg">
+                  <span class="material-icons" *ngIf="passwordForm.get('password')?.hasError('number')"> cancel </span>
+                  <span class="material-icons" *ngIf="!passwordForm.get('password')?.hasError('number')"> check_circle </span>
+              </div>
+              <span class="span-text">{{ constants.oneNumber }}</span>
+          </div>
+
+          <div [ngClass]="passwordForm.get('password')?.hasError('specialCharacter') ? 'error-color' : 'success-color'">
+              <div id="icon-div-msg">
+                  <span class="material-icons" *ngIf="passwordForm.get('password')?.hasError('specialCharacter')"> cancel </span>
+                  <span class="material-icons" *ngIf="!passwordForm.get('password')?.hasError('specialCharacter')">
+                      check_circle
+                  </span>
+              </div>
+              <span class="span-text">{{ constants.specialCharacter }}</span>
+          </div>
+      </ng-container>
+  </div>
+
+  <input
+      type="password"
+      tabindex="2"
+      formControlName="password"
+      [placeholder]="constants.password"
+      [ngClass]="{ 'input-invalid': passwordNotMatching }"
+  />
+
+  <input
+      type="password"
+      tabindex="3"
+      formControlName="confirmPassword"
+      [placeholder]="constants.confirmPassword"
+      [ngClass]="{ 'input-invalid': passwordNotMatching }"
+  />
+</form>