@everymatrix/general-player-login-form 0.0.118 → 0.0.122

package/index.html

@@ -30,8 +30,8 @@
   </header>
 
   <div class="webcomponent">
-    <general-player-login-form></general-player-login-form>
+    <general-player-login-form endpoint="https://demo-api.stage.norway.everymatrix.com/v1"></general-player-login-form>
   </div>
-  
+
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-login-form",
-  "version": "0.0.118",
+  "version": "0.0.122",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2b3a5975cb7b7356688a245141561f45cc075eaa"
+  "gitHead": "974bc1c7b1767d96828ec1b85d35e27a622c9a63"
 }

package/src/GeneralPlayerLoginForm.svelte

@@ -14,27 +14,32 @@
   }
   let invalidName:boolean = false;
   let invalidPassword:boolean = false;
+
+  let errorMessage:string = '';
+
+  const captchaKey = '6Lc7w8YcAAAAAEMHc_VNN9bqfVnILoUOHSHyZ0yn';
+
   const regexValidators = {
     user: /^(?!(?:.*\d){9})(?=(?:.*[a-zA-Z]){2})^[a-zA-Z\d]*$/,
     email: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]{2,3}$/,
     password: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,20}$/
   }
 
-  let captcha;
-  let Recaptcha;
-  let errorMessage:string = '';
-
-  const onloadCallback = () => {
-    window.grecaptcha.render(Recaptcha, {
-      'sitekey' : '6Lej4KgUAAAAAPcsWUuf7xJ1N002JecrLXyC_U56'
+  const doRecaptcha = () => {
+    return new Promise((resolve, reject) => {
+      grecaptcha.ready(() => {
+        grecaptcha.execute(captchaKey, { action: "submit" }).then((token) => {
+          resolve(token);
+        });
+      });
     });
   }
 
   onMount(async () => {
-    window.onloadCallback = onloadCallback;
     window.addEventListener('message', messageHandler, false);
     window.postMessage({ type: "LoginRegisterModalActive" }, window.location.href);
-    if(isMobile(userAgent)) {
+
+    if (isMobile(userAgent)) {
       mobileView = true;
     }
 
@@ -95,17 +100,21 @@
 
   const submitLoginForm = () => {
     isLoading = true;
-    if(checkUserIdentifier(userValue) && checkUserPassword(userPassword)) {
-      loginFormData = {
-        username: userValue,
-        password: userPassword
+    doRecaptcha().then((token) => {
+      if (checkUserIdentifier(userValue) && checkUserPassword(userPassword)) {
+        loginFormData = {
+          username: userValue,
+          password: userPassword,
+          token: token
+        };
+
+        window.postMessage({ type: "SubmitLoginForm", loginData: loginFormData }, window.location.href);
       }
-      window.postMessage({ type: "SubmitLoginForm", loginData: loginFormData }, window.location.href);
-    }
+    });
   }
 
   const checkUserIdentifier = (user:string) => {
-    if(regexValidators.user.test(user) || regexValidators.email.test(user)) {
+    if (regexValidators.user.test(user) || regexValidators.email.test(user)) {
       return true;
     } else {
       return false;
@@ -113,7 +122,7 @@
   }
 
   const checkUserPassword = (password:string) => {
-    if(regexValidators.password.test(password)) {
+    if (regexValidators.password.test(password)) {
       return true;
     } else {
       return false;
@@ -130,13 +139,13 @@
 </script>
 
 <svelte:head>
-  <script src="//www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
+  <script src="//www.google.com/recaptcha/api.js?render={captchaKey}" async defer></script>
 </svelte:head>
 
+<div class="g-recaptcha" data-sitekey="{captchaKey}" />
 {#if isLoading}
   <div class="ModalLoader"></div>
 {:else}
-
   <div class="FormContainer {mobileView ? 'FormMobileContainer' : ''}">
     <div class="FormLeftSide">
       <div class="FormHeader">
@@ -163,9 +172,6 @@
             <p class="InvalidInput">Password must be 8-20 characters long, and contain at least 1 uppercase letter, 1 number and 1 special character.</p>
           {/if}
         </div>
-        <div class="CaptchaContainer">
-          <div bind:this={Recaptcha} id="Recaptcha" class="g-recaptcha"></div>
-        </div>
         {#if errorMessage}
           <p class="ErrorMessage">{errorMessage}</p>
         {/if}