@everymatrix/general-player-login-form 0.0.208 → 0.0.213

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-login-form",
-  "version": "0.0.208",
+  "version": "0.0.213",
   "main": "dist/general-player-login-form.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "38199cc25098bd517d1f8b13d7607e97cce49af4"
+  "gitHead": "0b49e65f747ec6eaac6ca9d4a4e7ee9702980bfc"
 }

package/src/GeneralPlayerLoginForm.svelte

@@ -4,6 +4,12 @@
   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 = '';
 
@@ -25,60 +31,72 @@
   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 = {
     user: /^(?!(?:.*\d){9})(?=(?:.*[a-zA-Z]){2})^[a-zA-Z\d]*$/,
     email: /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
     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 {
@@ -86,7 +104,7 @@
     }
   }
 
-  const checkUserPassword = (password:string) => {
+  const checkUserPassword = (password:string):boolean => {
     if (regexValidators.password.test(password)) {
       return true;
     } else {
@@ -94,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;
       }
     }
   }
@@ -132,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);
     }
@@ -149,6 +186,7 @@
 </svelte:head>
 
 <div class="g-recaptcha" data-sitekey="{captchakey}" />
+
 {#if isLoading}
   <div class="ModalLoader"></div>
 {:else}