Merge pull request #406 from Madhuravas/develop

MOSIP-28550 added multi language for captcha
mosip · Jul 31, 2023 · b821b84 · b821b84
2 parents ac320a7 + 924778c
commit b821b84
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 10 deletions.
diff --git a/resident-ui/src/app/feature/getuin/getuin/getuin.component.html b/resident-ui/src/app/feature/getuin/getuin/getuin.component.html
@@ -21,7 +21,7 @@
         <input id="aidValue" class="input-text" type="text" ngModel name="AID" (blur)="getCaptchaToken($event.target.value)" placeholder="{{getUinData.enterHere}}"/>
         <br />
         <label class="label-text" >{{getUinData.description | translate}}</label>
-        <div *ngIf="siteKey && captchaEnable">
+        <div *ngIf="siteKey && captchaEnable" id="recaptcha-container">
           <app-captcha [captchaSiteKey]="siteKey" [resetCaptcha]="resetCaptcha"
             (captchaEvent)="getCaptchaToken($event)"></app-captcha>
         </div>

diff --git a/resident-ui/src/app/shared/captcha/captcha.component.html b/resident-ui/src/app/shared/captcha/captcha.component.html
@@ -1,4 +1,4 @@
-<div class="captcha">
+<div class="captcha" id="recaptcha-container">
   <re-captcha
     id="grecaptcha"
     class="g-recaptcha"

diff --git a/resident-ui/src/app/shared/captcha/captcha.component.ts b/resident-ui/src/app/shared/captcha/captcha.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, EventEmitter, Output } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
+import { TranslateService } from "@ngx-translate/core";
+
 @Component({
   selector: "app-captcha",
   templateUrl: "./captcha.component.html",
@@ -9,14 +11,30 @@ export class CaptchaComponent implements OnInit {
   @Input() captchaSiteKey: string;
   @Input() resetCaptcha: boolean;
   @Output() captchaEvent = new EventEmitter<string>();
-  langCode: string;
-  constructor(private activatedRoute: ActivatedRoute) {}
+  langCode: string = localStorage.getItem("langCode");
+  captchaLangCode:any;
+  constructor(private activatedRoute: ActivatedRoute,private translateService: TranslateService,) {}
 
   ngOnInit() {
-    this.langCode = localStorage.getItem("langCode");
-    /*this.activatedRoute.paramMap.subscribe((param) => {
-      this.langCode = param.get("lang").substr(0, 2);
-    });*/
+    this.translateService
+    .getTranslation('default')
+      .subscribe(response => {
+          this.captchaLangCode = response.keyboardMapping[this.langCode]
+      })
+
+    setTimeout(() => {
+      const iframeGoogleCaptcha = document.getElementById("recaptcha-container").querySelector('iframe');
+      // const currentLang = iframeGoogleCaptcha.getAttribute("src").match(/hl=(.*?)&/).pop();
+      // if (currentLang !== lang) {
+          iframeGoogleCaptcha.setAttribute(
+              "src",
+              iframeGoogleCaptcha.getAttribute("src").replace(
+                  /hl=(.*?)&/,
+                  'hl=' + this.captchaLangCode + '&'
+              )
+          );
+      // }
+    }, 180);
   }
 
   ngOnChanges(): void {

diff --git a/resident-ui/src/assets/i18n/default.json b/resident-ui/src/assets/i18n/default.json
@@ -43,6 +43,6 @@
     "hin": "hi",
     "tam": "ta",
     "kan": "kn",
-    "spa": "sp"
+    "spa": "es"
   }
 }
diff --git a/resident-ui/src/assets/i18n/eng.json b/resident-ui/src/assets/i18n/eng.json
@@ -89,7 +89,7 @@
             "rows": 1,
             "subMenus": [
                 {
-                    "displayName": "Click here for new enrolment",
+                    "displayName": "Click here for new enrollment",
                     "icon": "",
                     "route": "redirect",
                     "auditEventId": "ADM-004"