UI changes

package-lock.json

@@ -19,6 +19,7 @@
         "@techiediaries/ngx-qrcode": "^9.1.0",
         "bootstrap": "^5.2.3",
         "rxjs": "~7.5.0",
+        "swal": "^0.1.0",
         "sweetalert2": "^11.7.3",
         "tslib": "^2.3.0",
         "zone.js": "~0.12.0"
@@ -1190,7 +1191,6 @@
       "version": "7.21.3",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.3.tgz",
       "integrity": "sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -3437,6 +3437,24 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -4910,6 +4928,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "node_modules/custom-event": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
@@ -8140,7 +8163,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -9286,8 +9308,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -9349,7 +9370,6 @@
       "version": "8.4.21",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
       "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10648,7 +10668,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10881,6 +10900,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swal": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/swal/-/swal-0.1.0.tgz",
+      "integrity": "sha512-uJP65BJyHjZ1dAsWSeiVG7JKDOcvaDOqLBCPHOZ0y2xlVwqZHqAungxtOwirM5hPoovBaJ05W7F+wF+azVjhbg==",
+      "dependencies": {
+        "vue": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/sweetalert2": {
       "version": "11.7.3",
       "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.3.tgz",
@@ -11460,6 +11491,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vue": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
+      "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.14",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "@techiediaries/ngx-qrcode": "^9.1.0",
     "bootstrap": "^5.2.3",
     "rxjs": "~7.5.0",
+    "swal": "^0.1.0",
     "sweetalert2": "^11.7.3",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

src/app/login/login.component.css

@@ -3,9 +3,10 @@
   justify-content: center;
   align-items: center;
   width: 25rem;
-  margin-left: auto;
+  height:23rem;
+  margin-left: 5rem;
   margin-right: auto;
-  margin-top: 5rem;
+  margin-top: 8rem;
   background-color: rgb(255, 255, 255);
   box-shadow: rgb(46 56 64 / 12%) 0px 4px 16px;
   border-radius: 8px;
@@ -21,12 +22,12 @@
   justify-content: center;
 }
 .ctn-btn{
- width : 60%;
- color : #021a32;
- background-color: #c1d82f;
+ width : 50%;
+ color : whitesmoke;
+ background-color: #2b3c6b;
  border : 0.5px solid #d7eafd; 
  border-radius : 5px;
- margin-left: 4rem !important;
+ margin-left: 5.8rem !important;
 }
 
 

src/app/scanqr/scanqr.component.css

@@ -2,10 +2,11 @@
   margin:auto;
   justify-content: center;
   align-items: center;
-  width: 43rem;
-  margin-left: auto;
+  width: 25rem;
+  height: auto;
+  margin-left: 5rem;
   margin-right: auto;
-  margin-top: 5rem;
+  margin-top: 8rem;
   background-color: rgb(255, 255, 255);
   border-radius: 8px;
   justify-content: center;
@@ -17,21 +18,20 @@
   .submit{
     width:50%;
     margin-left: 5rem !important;
-    color : #021a32;
- background-color: #c1d82f;
+    color : whitesmoke;
+    background-color: #2b3c6b;
     border : 0.5px solid #d7eafd; 
     border-radius : 5px;
-
   }
   .qr{
     display: flex;
     width:50%;
-    margin-left: 8rem !important;
+    margin-left: 5rem !important;
   }
   .ctn-btn{
     width : 60%;
-    color : #021a32;
-    background-color: #c1d82f;
+    color : whitesmoke;
+    background-color: #2b3c6b;
     border : 0.5px solid #d7eafd; 
     border-radius : 5px;
     margin-left: 4rem !important;

src/app/scanqr/scanqr.component.html

@@ -8,7 +8,7 @@
       </div>
       <div class="row mb-3">
         <div class="col">
-          <h6>Enter your Unique Id:</h6>
+          <h6>Enter your OTP:</h6>
         </div>
         <div class="col">
           <input type="text" class="text-field" placeholder=" Enter value " [(ngModel)]="genOtp">

src/app/scanqr/scanqr.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';
 import { GlobalService } from '../global.service';
 import Swal from 'sweetalert2';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-scanqr',
@@ -14,18 +15,20 @@ export class ScanqrComponent implements OnInit {
   genOtp : any = '';
   phnNumber : any = '';
   
-  constructor(public globals:GlobalService) {}
+
+  constructor(public globals:GlobalService,private router: Router) {}
 
   ngOnInit(): void {
 
-    this.globals.getQr().subscribe((res : any)=>{
+    this.globals.getQr().subscribe({
+      next:(res : any)=>{
       console.log(res);
       this.qrDetails = res;
       this.uniqueId = res.secret.otpauth_url;
       console.log(this.uniqueId);
-    })
-    
+    },error: (err) => {Swal.fire("Error","Unable to load QR code","error")}
   }
+)}
   validate(){
     let postObj = {
       totp : this.genOtp,
@@ -33,12 +36,18 @@ export class ScanqrComponent implements OnInit {
       secret : this.qrDetails.secret.base32,
       phone_number : this.phnNumber
     }
-    this.globals.validateQr(postObj).subscribe((res : any)=>{
+    this.globals.validateQr(postObj).subscribe({
+      next:(res : any)=>{
       console.log(res);
       if(res.insert_to_db == 'True' && res.validated == true){
         Swal.fire("success", "App validated Successfully","success")
+        this.router.navigateByUrl('/login')
+      }
+      else{
+        Swal.fire("Error","Enter Valid Details","error")
       }
-    })
+    },error: (err) => {Swal.fire("Error","Error in validating QR","error")}
   }
+)}
   
 }

src/index.html

@@ -15,7 +15,7 @@
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </head>
-<body>
+<body style="background-image: url('./assets/bg.png'); background-size: 100%; background-repeat: no-repeat;">
   <app-root></app-root>
 </body>
 </html>

src/styles.css

@@ -6,7 +6,7 @@
     color: #4b9dee;
   }
   .tekgreen{
-    color:#c1d82f;
+    color:#2b3c6b;
   }
   .text-field{
     height :30px;