added scanqr

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormsModule } from '@angular/forms';
@@ -20,7 +20,8 @@ import { ScanqrComponent } from './scanqr/scanqr.component';
     BrowserModule,
     AppRoutingModule,
     NgxQRCodeModule, 
-    FormsModule
+    FormsModule,
+    HttpClientModule,
     
   ],
   providers: [],

src/app/global.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { GlobalService } from './global.service';
+
+describe('GlobalService', () => {
+  let service: GlobalService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GlobalService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/global.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GlobalService {
+
+  base_url : string = 'https://authenticator-registration-dot-tgs-dws-saigeautoforsd-dev-001.wn.r.appspot.com/';
+  getsecret : string = this.base_url+'generateSecret'
+  sendotp : string = this.base_url+'sendotp';
+  validate : string = this.base_url+'validateOTP_and_RegisterUser'
+  constructor(public http: HttpClient) { }
+  getQr(){
+    return this.http.get(this.getsecret);
+  }
+  getOtp(email : any){
+    return this.http.post(this.sendotp,email)
+  }
+  validateQr(postObj : any){
+    return this.http.post(this.validate,postObj)
+  }
+}

src/app/login/login.component.html

@@ -9,25 +9,29 @@
     </div>
   <div class="row mb-2">
     <div class="col">
-      <label><i class="fa fa-user" aria-hidden="true"></i> Username : </label>
+      <label><i class="fa fa-user" aria-hidden="true"></i> Email : </label>
     </div>
     <div class="col">
-      <input class="text-field" id="username" name="username" placeholder="Username" [(ngModel)]="login.username">
+      <input class="text-field" id="email" name="email" placeholder="email" [(ngModel)]="login.email">
     </div>
   </div>
+
+  <div class="row mb-3">
+    <div class="col">
+    <button class="ctn-btn" (click)="onSubmit()">Get Otp</button>
+  </div>
+  </div>
+ 
   <div class="row mb-2">
     <div class="col">
-      <label><i class="fa fa-key" aria-hidden="true"></i> Password : </label>
+      <label><i class="fa fa-key" aria-hidden="true"></i> Otp : </label>
     </div>
     <div class="col">
-      <input type="password" class="text-field" id="password" name="password" placeholder="Password"[(ngModel)]="login.password">
+      <input type="password" class="text-field" id="otp" name="otp" placeholder="Otp"[(ngModel)]="login.otp">
     </div>
   </div>
-  <div class="row mb-3">
-    <div class="col">
-    <button class="ctn-btn" (click)="onSubmit()">Continue</button>
-  </div>
-  </div>
+
+ 
 <div class="row">
   <div class="col-8"> Don't have an account? </div>
   <div class="col-4 tekgreen" routerLink="/register">SignUp</div>

src/app/login/login.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { GlobalService } from '../global.service';
 
 
 @Component({
@@ -10,17 +11,19 @@ import { Router } from '@angular/router';
 export class LoginComponent implements OnInit {
 
   login : any ={
-    username : '',
-    password : ''
+    email : '',
+    otp : ''
   }
 
-  constructor(private router: Router) { }
+  constructor(private router: Router, public globals : GlobalService) { }
 
   ngOnInit(): void {
 
   }
   onSubmit() {
-    console.log(this.login);
-    this.router.navigateByUrl('/scanqr');
+    localStorage.setItem('email',this.login.email)
+    this.globals.getOtp(this.login.email).subscribe((res : any)=>{
+      console.log(res);  
+    })
   }
 }

src/app/scanqr/scanqr.component.css

@@ -28,5 +28,13 @@
     width:50%;
     margin-left: 8rem !important;
   }
+  .ctn-btn{
+    width : 60%;
+    color : #021a32;
+    background-color: #c1d82f;
+    border : 0.5px solid #d7eafd; 
+    border-radius : 5px;
+    margin-left: 4rem !important;
+   }
   
   
\ No newline at end of file

src/app/scanqr/scanqr.component.html

 
     <div class="container main-div">
+      
+      <div class="row" >
+        <div class="col">
+        <ngx-qrcode [value]="uniqueId" class="qr"></ngx-qrcode>
+      </div>
+      </div>
       <div class="row mb-3">
         <div class="col">
           <h6>Enter your Unique Id:</h6>
         </div>
         <div class="col">
-          <input type="text" class="text-field" placeholder=" Enter value " [(ngModel)]="uniqueId">
+          <input type="text" class="text-field" placeholder=" Enter value " [(ngModel)]="genOtp">
         </div>
       </div>
-      <div class="row">
+
+      <div class="row mb-3">
+        <div class="col">
+          <h6>Enter your Phonenumber:</h6>
+        </div>
         <div class="col">
-          <button class="submit ml-5 pointer" (click)="generateQr()">Generate QR</button>
+          <input type="text" class="text-field" placeholder="Enter Phonenumber" [(ngModel)]="phnNumber">
         </div>
       </div>
-      <div class="row" *ngIf="gotId">
+      <div class="row mb-3">
         <div class="col">
-        <ngx-qrcode [value]="uniqueId" class="qr"></ngx-qrcode>
+        <button class="ctn-btn" (click)="validate()">Validate</button>
       </div>
       </div>
     </div>
\ No newline at end of file

src/app/scanqr/scanqr.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';
+import { GlobalService } from '../global.service';
 
 @Component({
   selector: 'app-scanqr',
@@ -8,15 +9,32 @@ import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiedi
 })
 export class ScanqrComponent implements OnInit {
   uniqueId: string ='';
-  gotId : boolean = false;
+  qrDetails : any = '';
+  genOtp : any = '';
+  phnNumber : any = '';
 
-  constructor() {}
+  constructor(public globals:GlobalService) {}
 
   ngOnInit(): void {
+
+    this.globals.getQr().subscribe((res : any)=>{
+      console.log(res);
+      this.qrDetails = res;
+      this.uniqueId = res.secret.otpauth_url;
+      console.log(this.uniqueId);
+    })
     
   }
-  generateQr(){
-    this.gotId =true;
-   console.log(this.uniqueId);
+  validate(){
+    let postObj = {
+      totp : this.genOtp,
+      email : localStorage.getItem('email'),
+      secret : this.qrDetails.secret
+    }
+    console.log(postObj)
+    this.globals.validateQr(postObj).subscribe((res : any)=>{
+      console.log(res);
+    })
   }
+  
 }