@annalib/anna-cognito-lib 0.2.3 → 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

@@ -19,9 +19,8 @@ If using the library locally (library from your system locally not npm),then in
       },
       loginPageLogoImgUrl: ""
     } ```
-3. 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.
+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.

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.3",
-  "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>

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

@@ -0,0 +1,83 @@
+@import "../../scss/colors", "../../scss/fonts";
+input[type="password"],
+input[type="text"] {
+  width: 100%;
+  height: 30px;
+  padding: 10px 16px;
+  border: 1px solid $gray;
+  margin-bottom: 0.625rem;
+  border-radius: 0.375rem;
+}
+
+input[type="password"].ng-dirty.ng-invalid,
+.input-invalid {
+  border: 1px solid $redOrange4 !important;
+}
+
+input[type="password"]:focus {
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+  &::placeholder {
+    color: $darkGray2;
+  }
+}
+
+.password-policies {
+  margin-bottom: 1rem;
+  & p {
+    color: $charcoal;
+    @include fonts(Roboto, 1rem, normal, normal, normal, 1.31, normal);
+    margin-bottom: 0;
+  }
+}
+
+.span-text {
+  vertical-align: top;
+  @include fonts(Roboto, 1rem, normal, normal, normal, 1.31, normal);
+}
+
+#icon-div-msg {
+  display: inline;
+  margin-right: 0.3125rem;
+  & .material-icons {
+    margin-top: 1px;
+    font-size: 16px;
+  }
+}
+
+#alert-div {
+  padding: 4px 0 0 0;
+  margin-bottom: 0.75rem;
+  border-radius: 0.25rem;
+  border: solid 1px $roseBud;
+  background-color: $paleRed;
+
+  & #icon-div {
+    width: 18px;
+    margin-top: -5px;
+    display: inline-block;
+    & .material-icons {
+      color: $redOrange3;
+      font-size: 1.125rem;
+      margin-left: 0.5rem;
+    }
+  }
+
+  & p {
+    display: inline;
+    vertical-align: top;
+    margin-left: 0.5rem;
+    color: $charcoal;
+    @include fonts(Roboto, 0.7188rem, normal, normal, normal, normal, normal);
+  }
+}
+
+.error-color {
+  color: $redOrange4;
+}
+
+.success-color {
+  color: $fruitSalad;
+}