android,appstore qr

src/app/global.service.ts

@@ -14,6 +14,12 @@ export class GlobalService {
   getQr(){
     return this.http.get(this.getsecret);
   }
+  getAndroidQr(){
+    return 'https://play.google.com/store/apps/details?id=com.azure.authenticator&referrer=+adjust_reftag%3Dc6f1p4ErudH2C%26utm_source%3DLanding%2BPage%2BOrganic%2B-%2Bapp%2Bstore%2Bbadges%26utm_campaign%3Dappstore_android&pli=1';
+  }
+  getAppleQr(){
+    return 'https://apps.apple.com/app/microsoft-authenticator/id983156458';
+  }
   getOtp(email : any){
     return this.http.post(this.sendotp,email)
   }

src/app/login/login.component.css

-.container{
+.container1{
   margin:auto;
   justify-content: center;
   align-items: center;
@@ -17,6 +17,41 @@
   padding:2rem;
 
 }
+.android{
+  width: 100px;
+  height:80px;
+  /* transform: scale(0.6); */
+  padding-left: 30px;
+  padding-top: 5px;
+  
+}
+.ios{
+  width:100px;
+  height:80px;
+  /* transform: scale(0.6); */
+  /* padding-right: 30px; */
+  padding-left: 35px;
+  padding-top: 5px;
+}
+.container2{
+  margin:auto;
+  justify-content: center;
+  align-items: center;
+  width: 28rem;
+  height:23rem;
+  margin-left: 5rem;
+  margin-right: auto;
+  margin-top: 8rem;
+  background-color: rgb(255, 255, 255);
+  box-shadow: rgb(46 56 64 / 12%) 0px 4px 16px;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 24px;
+  display: inline;
+  /* padding:2rem; */
+  padding-left: 20px;
+}
 .centered{
   display:flex;
   justify-content: center;

src/app/login/login.component.html

-<div class="container">
+<div class="Rootcontainer" style="display: flex;">
+<div class="container1">
   <div class="row">
     <div class="col"><h4 class="centered tekblue">Time and Expense</h4>
     </div>
@@ -36,10 +37,21 @@
     <button class="ctn-btn" (click)="appLogin()">Login</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>
 </div>
+<div class="container2">
+  <div class="row">
+    <div class="col pl-5">
+      <img src="./assets/android-logo.png"  class="android">
+      <ngx-qrcode [value]="androidStore" [width]=140></ngx-qrcode>
+    </div>
+    <div class="col">
+      <img src="./assets/appstore-logo.png" class="ios">
+      <ngx-qrcode [value]="appleStore" [width]=140></ngx-qrcode>
+    </div>
+    <div class="col">
+        <p><b>Google Android</b>. On your Android device, go to Google Play to download and install the Authenticator app.<br></p>
+        <p><b>Apple iOS</b>. On your Apple iOS device, go to the App Store to download and install the Authenticator app.</p>
+
+    </div>
+  </div>
 </div>
\ No newline at end of file

src/app/login/login.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { GlobalService } from '../global.service';
+import Swal from 'sweetalert2';
 
 
 @Component({
@@ -14,12 +15,19 @@ export class LoginComponent implements OnInit {
     email : '',
     otp : ''
   }
+  androidStore: string = '';
+  appleStore: string = '';
+  
 
   constructor(private router: Router, public globals : GlobalService) { }
 
   ngOnInit(): void {
-
+    this.androidStore = this.globals.getAndroidQr();
+    console.log(this.androidStore);
+    this.appleStore = this.globals.getAppleQr();
+    console.log(this.appleStore);
   }
+
   onSubmit() {
     localStorage.setItem('email',this.login.email)
     this.globals.getOtp(this.login.email).subscribe((res : any)=>{

src/app/scanqr/scanqr.component.css

@@ -35,6 +35,26 @@
     border : 0.5px solid #d7eafd; 
     border-radius : 5px;
     margin-left: 4rem !important;
+    cursor: pointer;
    }
+   .container2{
+    margin:auto;
+    justify-content: center;
+    align-items: center;
+    width: 25rem;
+    height:24.8rem;
+    margin-left: 5rem;
+    margin-right: auto;
+    margin-top: 8rem;
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgb(46 56 64 / 12%) 0px 4px 16px;
+    border-radius: 8px;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 24px;
+    /* display: inline; */
+    /* padding:2rem; */
+    padding-left: 20px;
+  }
   
   
\ 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 OTP:</h6>
+<div class="row">
+    <div class="col">
+    <div class="container2">
+      <b><h5 class="pt-4">  Set up the Authenticator app</h5></b>
+      <p>After you install the Authenticator app, follow the steps below to add your account:</p>
+      <li>Open the Authenticator app.</li><br>
+      <li>Select (+) in the upper right corner.</li><br>
+      <li>Point your camera at the QR code and follow below instructions.</li> <br>
+      <li>select Add account, and then select Work or school account, followed by Scan a QR Code.</li>
+    </div>
+    </div>
+    <div class="col">
+      <div class="container main-div">
+        <div class="row" >
+          <div class="col">
+          <ngx-qrcode [value]="uniqueId" class="qr"></ngx-qrcode>
         </div>
-        <div class="col">
-          <input type="text" class="text-field" placeholder=" Enter value " [(ngModel)]="genOtp">
         </div>
-      </div>
-
-      <div class="row mb-3">
-        <div class="col">
-          <h6>Enter your Phonenumber:</h6>
+        <div class="row mb-3">
+          <div class="col">
+            <h6>Enter your OTP:</h6>
+          </div>
+          <div class="col">
+            <input type="text" class="text-field" placeholder=" Enter value " [(ngModel)]="genOtp">
+          </div>
+        </div>
+  
+        <div class="row mb-3">
+          <div class="col">
+            <h6>Enter your Phonenumber:</h6>
+          </div>
+          <div class="col">
+            <input type="text" class="text-field" placeholder="Enter Phonenumber" [(ngModel)]="phnNumber">
+          </div>
+        </div>
+        <div class="row mb-3">
+          <div class="col">
+          <button class="ctn-btn" (click)="validate()">Validate</button>
         </div>
-        <div class="col">
-          <input type="text" class="text-field" placeholder="Enter Phonenumber" [(ngModel)]="phnNumber">
         </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col">
-        <button class="ctn-btn" (click)="validate()">Validate</button>
       </div>
       </div>
-    </div>
\ No newline at end of file
+    </div>
+    
\ No newline at end of file