@everymatrix/general-player-login-form 0.0.207 → 0.0.212

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-login-form",
-  "version": "0.0.207",
+  "version": "0.0.212",
   "main": "dist/general-player-login-form.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1769a90f32edd782f70c332e0834a59951c3be6d"
+  "gitHead": "899faeb0029947feb81828796644ba54ec467e1d"
 }

package/src/GeneralPlayerLoginForm.svelte

@@ -4,7 +4,14 @@
   import { onMount } from "svelte";
   import { isMobile } from 'rvhelper';
 
+  import {
+    isNative,
+    call as callNative,
+    registerEventListener as registerNativeEventListener,
+  } from 'js-native-bridge';
+
   export let imagedesktop:string = '';
+  export let captchakey:string = '';
 
   let mobileView:boolean = false;
   let userAgent:string = window.navigator.userAgent;
@@ -24,6 +31,11 @@
   let isPasswordVisible:boolean = false;
   let isFormDataInvalid:boolean = true;
 
+  let isOnNative:boolean = !!isNative(userAgent);
+  let waitingForCredentials:boolean = isOnNative;
+
+  let nativeCredentials:any = {};
+
   const captchaKey = '6Lc7w8YcAAAAAEMHc_VNN9bqfVnILoUOHSHyZ0yn';
 
   const regexValidators = {
@@ -32,54 +44,59 @@
     password: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,20}$/
   }
 
-  const doRecaptcha = () => {
+  const doRecaptcha = ():Promise<string> => {
     return new Promise((resolve, reject) => {
+      // @ts-ignore
       grecaptcha.ready(() => {
-        grecaptcha.execute(captchaKey, { action: "submit" }).then((token) => {
-          resolve(token);
-        });
+        // @ts-ignore
+        grecaptcha.execute(captchakey, { action: "submit" })
+          .then((token:string) => {
+            resolve(token);
+          });
       });
     });
   }
 
-  const showPassword = () => {
+  const showPassword = ():void => {
     isPasswordVisible = true;
     togglePasswordVisibility();
   }
 
-  const hidePassword = () => {
+  const hidePassword = ():void => {
     isPasswordVisible = false;
     togglePasswordVisibility();
   }
 
-  const togglePasswordVisibility = () => {
+  const togglePasswordVisibility = ():void => {
+    // @ts-ignore
     passwordVisibilityToggle.type = isPasswordVisible ? "text" : "password";
   }
 
-  const switchToRegister = () => {
+  const switchToRegister = ():void => {
     window.postMessage({ type: "ToRegister" }, window.location.href);
   }
 
-  const switchToForgotPassword = () => {
+  const switchToForgotPassword = ():void => {
     window.postMessage({ type: "NavForgotPassword" }, window.location.href);
   }
 
-  const submitLoginForm = () => {
-    doRecaptcha().then((token) => {
-      if (checkUserIdentifier(userValue) && checkUserPassword(userPassword)) {
-        loginFormData = {
-          username: userValue,
-          password: userPassword,
-          token: token
-        };
-        isLoading = true;
+  const submitLoginForm = ():void => {
+    doRecaptcha()
+      .then((token:string) => {
+        if (checkUserIdentifier(userValue) && checkUserPassword(userPassword)) {
+          loginFormData = {
+            username: userValue,
+            password: userPassword,
+            token: token
+          };
+          isLoading = true;
 
-        window.postMessage({ type: "SubmitLoginForm", loginData: loginFormData }, window.location.href);
-      }
-    });
+          window.postMessage({ type: "SubmitLoginForm", loginData: loginFormData }, window.location.href);
+        }
+      });
   }
 
-  const checkUserIdentifier = (user:string) => {
+  const checkUserIdentifier = (user:string):boolean => {
     if (regexValidators.user.test(user) || regexValidators.email.test(user)) {
       return true;
     } else {
@@ -87,7 +104,7 @@
     }
   }
 
-  const checkUserPassword = (password:string) => {
+  const checkUserPassword = (password:string):boolean => {
     if (regexValidators.password.test(password)) {
       return true;
     } else {
@@ -95,36 +112,31 @@
     }
   }
 
-  const validateUserName = () => {
+  const validateUserName = ():void => {
     invalidName = !checkUserIdentifier(userValue);
     isFormDataInvalid = (!invalidName && !invalidPassword && userPassword) ? false : true;
   }
 
-  const validatePassword = () => {
+  const validatePassword = ():void => {
     invalidPassword = !checkUserPassword(userPassword);
     isFormDataInvalid = (!invalidName && !invalidPassword && userValue) ? false : true;
   }
 
-  const messageHandler = (e:any) => {
+  const messageHandler = (e:MessageEvent):void => {
     if (e.data) {
-      switch(e.data.type) {
-
+      switch (e.data.type) {
         case 'ModalLoader':
           isLoading = false;
-        break;
+          break;
 
         case 'UserSessionID':
           isLoading = false;
-        break;
+          break;
 
         case 'HasError':
           errorMessage = e.data.error;
           isLoading = false;
-        break;
-
-        default:
-        // do nothing
-        break;
+          break;
       }
     }
   }
@@ -133,10 +145,34 @@
     window.addEventListener('message', messageHandler, false);
     window.postMessage({ type: "LoginRegisterModalActive" }, window.location.href);
 
-    if (isMobile(userAgent)) {
-      mobileView = true;
+    if (isOnNative) {
+      registerNativeEventListener(
+        'GET_CREDENTIALS',
+        (credentials:any):void => {
+          if (waitingForCredentials) {
+            if (credentials) {
+              const { username, password } = credentials;
+
+              userValue = username;
+              userPassword = password;
+
+              submitLoginForm();
+            } else {
+              waitingForCredentials = false;
+            }
+          }
+        }
+      );
+
+      const methodFound = callNative('GET_CREDENTIALS');
+
+      if (!methodFound) {
+        waitingForCredentials = false;
+      }
     }
 
+    mobileView = isMobile(userAgent);
+
     return () => {
       window.removeEventListener('message', messageHandler);
     }
@@ -144,10 +180,13 @@
 </script>
 
 <svelte:head>
-  <script src="//www.google.com/recaptcha/api.js?render={captchaKey}" async defer></script>
+  {#if captchakey}
+    <script src="//www.google.com/recaptcha/api.js?render={captchakey}" async defer></script>
+  {/if}
 </svelte:head>
 
-<div class="g-recaptcha" data-sitekey="{captchaKey}" />
+<div class="g-recaptcha" data-sitekey="{captchakey}" />
+
 {#if isLoading}
   <div class="ModalLoader"></div>
 {:else}