Merge pull request #536 from aranaravi/develop

[MOSIP-25432][MOSIP-29786]Alignment captcha issue is fixed during font size change
mosip · Oct 19, 2023 · deab033 · deab033
2 parents 53c1102 + 1a025ec
commit deab033
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 4 deletions.
diff --git a/resident-ui/src/app/app.component.ts b/resident-ui/src/app/app.component.ts
@@ -2,7 +2,7 @@ import { Component, HostListener } from '@angular/core';
 import { AppConfigService } from './app-config.service';
 import { AutoLogoutService } from 'src/app/core/services/auto-logout.service';
 import { Subscription } from 'rxjs';
-import { Event as NavigationEvent, Router, NavigationStart } from '@angular/router';
+import { Event as NavigationEvent, Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { LogoutService } from 'src/app/core/services/logout.service';
 import { AuditService } from 'src/app/core/services/audit.service';
@@ -45,7 +45,8 @@ export class AppComponent {
   previousUrl: string;
   primaryLangCode: string = localStorage.getItem("langCode");
   sitealignment;
-
+  currentRoute: string;
+  agent:any = window.navigator.userAgent.toLowerCase();
 
   constructor(
     private appConfigService: AppConfigService,
@@ -57,6 +58,65 @@ export class AppComponent {
     private dataStorageService: DataStorageService,
     private dateAdapter: DateAdapter<Date>,
   ) {
+    this.currentRoute = "";
+    router.events.subscribe((val) => {
+        if (val instanceof NavigationStart) {
+          this.currentRoute = val.url;  
+          console.log("localStorage.getItem>>>"+localStorage.getItem("selectedfontsize"));
+          if(localStorage.getItem("selectedfontsize")){
+            if(localStorage.getItem("selectedfontsize") === "12"){
+              if(this.agent.indexOf('firefox') > -1 || (this.currentRoute === "/getuin" || this.currentRoute === "/verify")){
+                document.body.style["zoom"] = "100%";
+                document.body.style["transform"] = "scale(1, .9)";
+                document.body.style["transformOrigin "] = "0 0";
+                document.body.style["margin-top"] = "-2.5%";
+              }else{
+                document.body.style["zoom"] = "90%";
+                document.body.style["transform"] = "scale(1, 1)";
+                document.body.style["transformOrigin "] = "0 0";
+                document.body.style["margin-top"] = "0";
+              }
+            }else if(localStorage.getItem("selectedfontsize") === "14"){
+              if(this.agent.indexOf('firefox') > -1 || (this.currentRoute === "/getuin" || this.currentRoute === "/verify")){
+                document.body.style["zoom"] = "100%";
+                document.body.style["transform"] = "scale(1, 1.0)";
+                document.body.style["transformOrigin "] = "0 0";
+                document.body.style["margin-top"] = "0%";
+              }else{
+                document.body.style["zoom"] = "100%";
+                document.body.style["transform"] = "scale(1, 1)";
+                document.body.style["transformOrigin "] = "0 0";
+                document.body.style["margin-top"] = "0";
+              }
+            }else if(localStorage.getItem("selectedfontsize") === "16"){
+              if(this.agent.indexOf('firefox') > -1 || (this.currentRoute === "/getuin" || this.currentRoute === "/verify")){
+                document.body.style["zoom"] = "100%";
+                document.body.style["transform"] = "scale(1, 1.1)";
+                document.body.style["transformOrigin "] = "0 0";
+                document.body.style["margin-top"] = "2.1%";
+              }else{
+                document.body.style["zoom"] = "110%";
+                document.body.style["transform"] = "scale(1, 1)";
+                document.body.style["transformOrigin "] = "0 0";
+                document.body.style["margin-top"] = "0";
+              }
+            }else if(localStorage.getItem("selectedfontsize") === "18"){
+              if(this.agent.indexOf('firefox') > -1 || (this.currentRoute === "/getuin" || this.currentRoute === "/verify")){
+                document.body.style["zoom"] = "100%";
+                document.body.style["transform"] = "scale(1, 1.2)";
+                document.body.style["transformOrigin "] = "0 0";
+                document.body.style["margin-top"] = "4.5%";
+              }else{
+                document.body.style["zoom"] = "120%";
+                document.body.style["transform"] = "scale(1, 1)";
+                document.body.style["transformOrigin "] = "0 0";
+                document.body.style["margin-top"] = "0";
+              }
+            }
+          }
+        }
+    });
+
     this.appConfigService.getConfig();
     if (this.primaryLangCode === "ara") {
       localStorage.setItem('direction','rtl')
@@ -68,6 +128,7 @@ export class AppComponent {
   }
 
   ngOnInit() { 
+    localStorage.setItem("selectedfontsize", "14");
     this.dateAdapter.setLocale(defaultJson.keyboardMapping[this.primaryLangCode]);
     this.router.routeReuseStrategy.shouldReuseRoute = function(){
       return false;

diff --git a/resident-ui/src/app/shared/captcha/captcha.component.html b/resident-ui/src/app/shared/captcha/captcha.component.html
@@ -3,7 +3,7 @@
     id="grecaptcha"
     class="g-recaptcha"
     (resolved)="recaptcha($event)"
-    siteKey="{{ captchaSiteKey }}"
+    siteKey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
     data-error-callback="recaptchaError($event)"
   ></re-captcha>
 </div>
diff --git a/resident-ui/src/app/shared/header/header.component.ts b/resident-ui/src/app/shared/header/header.component.ts
@@ -195,17 +195,22 @@ export class HeaderComponent implements OnInit, OnDestroy {
   }
 
   zoom(item:any) {
-    console.log("this.router.url>>>"+this.router.url);
+    localStorage.setItem("selectedfontsize", item.fontSize);
     if(item.fontSize === "12"){
       if(this.agent.indexOf('firefox') > -1 || (this.router.url === "/getuin" || this.router.url === "/verify")){
+        document.body.style["zoom"] = "100%";
         document.body.style["transform"] = "scale(1, .9)";
         document.body.style["transformOrigin "] = "0 0";
         document.body.style["margin-top"] = "-2.5%";
       }else{
         document.body.style["zoom"]= "90%";
+        document.body.style["transform"] = "scale(1, 1)";
+        document.body.style["transformOrigin "] = "0 0";
+        document.body.style["margin-top"] = "0";
       }
     }else if(item.fontSize === "14"){
       if(this.agent.indexOf('firefox') > -1 || (this.router.url === "/getuin" || this.router.url === "/verify")){
+        document.body.style["zoom"] = "100%";
         document.body.style["transform"] = "scale(1, 1.0)";
         document.body.style["transformOrigin "] = "0 0";
         document.body.style["margin-top"] = "0%";
@@ -214,6 +219,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
       }
     }else if(item.fontSize === "16"){
       if(this.agent.indexOf('firefox') > -1 || (this.router.url === "/getuin" || this.router.url === "/verify")){
+        document.body.style["zoom"] = "100%";
         document.body.style["transform"] = "scale(1, 1.1)";
         document.body.style["transformOrigin "] = "0 0";
         document.body.style["margin-top"] = "2.1%";
@@ -222,6 +228,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
       }
     }else if(item.fontSize === "18"){
       if(this.agent.indexOf('firefox') > -1 || (this.router.url === "/getuin" || this.router.url === "/verify")){
+        document.body.style["zoom"] = "100%";
         document.body.style["transform"] = "scale(1, 1.2)";
         document.body.style["transformOrigin "] = "0 0";
         document.body.style["margin-top"] = "4.5%";