@everymatrix/general-player-login-form 0.0.317 → 0.0.320

package/index.html

@@ -15,7 +15,7 @@
 
 
   <div class="webcomponent">
-    <general-player-login-form endpoint="https://demo-api.stage.norway.everymatrix.com/v1"></general-player-login-form>
+    <general-player-login-form endpoint="https://demo-api.stage.norway.everymatrix.com/v1" smsverification="true"></general-player-login-form>
   </div>
 
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-login-form",
-  "version": "0.0.317",
+  "version": "0.0.320",
   "main": "dist/general-player-login-form.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "139223d43ca6ea4e7ffdceebc7214ab30335762a"
+  "gitHead": "94830a853e3e1b7a9268ddd59c3f4f4abfbbf7ea"
 }

package/src/GeneralPlayerLoginForm.svelte

@@ -4,16 +4,26 @@
   import { onMount } from "svelte";
   import { isMobile } from 'rvhelper';
 
+  import '@everymatrix/general-player-sms-verification-form';
+
   // Native bridge
   import { isNative, call as callNative, registerEventListener as registerNativeEventListener } from 'js-native-bridge';
 
   import { _, addNewMessages, setLocale, setupI18n } from './i18n';
   import { LoginForm } from './translations';
 
+  export let endpoint;
   export let imagedesktop:string = '';
   export let captchakey:string = '';
   export let lang:string = '';
-
+  export let smsverification = 'false';
+
+  let playerId;
+  let smsTokenId;
+  let startSmsValidation = false;
+  let smsTemplate: string = 'Please use this code {0} to activate your accout';
+  let smsSendApiFailed = false;
+  let number;
   let mobileView:boolean = false;
   let userAgent:string = window.navigator.userAgent;
   let userValue:string = '';
@@ -144,10 +154,53 @@
           errorMessage = e.data.error;
           isLoading = false;
           break;
+
+        case 'SmsVerification':
+          playerId = e.data.userid;
+          number = e.data.number;
+          startSmsValidation = e.data.startSmsValidation;
+          sendSmsToken(number, playerId);
+          break;
+        case 'SmsHasBeenValidated':
+          submitLoginForm();
+          break;
       }
     }
   }
 
+  const sendSmsToken = async (number, playerId) => {
+    try {
+      const res = await fetch(`${endpoint}/player/sms/token`,{
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          accept: 'application/json',
+        },
+        body: JSON.stringify(
+          {
+            userId: playerId,
+            messageTemplate: smsTemplate,
+            destination: number,
+          }
+        ),
+      });
+
+      const data = await res.json();
+
+      if(res.ok) {
+        smsTokenId = data.id;
+        let smsMaxValidations = data.maxValidationAttempts;
+        smsSendApiFailed = false;
+      } else {
+        smsSendApiFailed = true;
+        throw new Error("Failed to fetch");
+      }
+    } catch(err) {
+      smsSendApiFailed = true;
+      console.error(err);
+    }
+  }
+
   const initialLoad = ():void => {
     setLocale(lang);
   }
@@ -192,7 +245,7 @@
     }
   });
 
-  $: lang && initialLoad();
+  $: endpoint && lang && initialLoad();
 </script>
 
 <svelte:head>
@@ -210,41 +263,50 @@
 {:else}
   <div class="FormContainer {mobileView ? 'FormMobileContainer' : ''}" part="FormContainer {mobileView ? 'FormMobileContainer' : ''}">
     <div class="FormLeftSide" part="FormLeftSide">
-      <div class="FormHeader" part="FormHeader">
-        <h4 class="FormHeaderTitle" part="FormHeaderTitle">{$_('loginForm.loginTitle')}</h4>
-        <p class="FormHeaderSubtitle" part="FormHeaderSubtitle">{$_('loginForm.loginSubtitle')} <span class="FormRegisterCallToAction" on:click={() => switchToRegister()}>{$_('loginForm.loginSubtitleRegister')}</span></p>
-      </div>
-      {#if waitingForCredentials}
-        <p>Waiting for credentials</p>
+      {#if startSmsValidation}
+        <general-player-sms-verification-form 
+          {endpoint}
+          {number}
+          playerid={playerId}
+          tokenid={smsTokenId}>
+        </general-player-sms-verification-form>
       {:else}
-        <div class="FormContent" part="FormContent">
-          <form id="signin" >
-            <div class="UserContainer {invalidName ? 'InvalidField' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
-              <label for="username">{$_('loginForm.loginUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
-              <input bind:value={userValue} on:keyup={validateUserName} type="text" id="email" name="email" autocomplete="username email" required/>
-              {#if invalidName}
-                <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginUsernameError')}</p>
-              {/if}
-            </div>
-            <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}">
-              <label for="current-password">{$_('loginForm.loginPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
-              <input bind:value={userPassword} on:keyup={validatePassword} type="password" name="current-password" id="current-password" bind:this={passwordVisibilityToggle} autocomplete="current-password" aria-describedby="password-constraints" required/>
-              {#if isPasswordVisible}
-                <svg on:click={() => hidePassword()} class="TogglePasswordVisibility" part="TogglePasswordVisibility" xmlns="http://www.w3.org/2000/svg" width="18.844" height="12.887" viewBox="0 0 18.844 12.887"><defs><style>.a{fill:var(--emfe-w-color-contrast, #07072A);}</style></defs><g transform="translate(-110.856 -23.242)"><circle class="a" cx="0.05" cy="0.05" r="0.05" transform="translate(121.017 31.148)"/><g transform="translate(117.499 27.37)"><path class="a" d="M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z" transform="translate(-142.164 -39.123)"/><path class="a" d="M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z" transform="translate(-136.413 -42.068)"/></g><g transform="translate(110.856 24.899)"><path class="a" d="M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z" transform="translate(-110.856 -33.157)"/><path class="a" d="M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z" transform="translate(-130.743 -29.617)"/></g><rect class="a" width="0.972" height="15.861" rx="0.486" transform="translate(114.827 23.858) rotate(-39.315)"/></g></svg>
-              {:else}
-                <svg on:click={() => showPassword()} class="TogglePasswordVisibility" part="TogglePasswordVisibility" xmlns="http://www.w3.org/2000/svg" width="18.843" height="10.5" viewBox="0 0 18.843 10.5"><defs><style>.a{fill:var(--emfe-w-color-contrast, #07072A);}</style></defs><g transform="translate(-14.185 -27.832)"><path class="a" d="M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z" transform="translate(0)"/><circle class="a" cx="2.779" cy="2.779" r="2.779" transform="translate(20.827 30.303)"/></g></svg>
-              {/if}
-              {#if invalidPassword}
-                <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginPasswordError')}</p>
-              {/if}
-            </div>
-            {#if errorMessage}
-              <p class="ErrorMessage" part="ErrorMessage">{errorMessage}</p>
-            {/if}
-          </form>
-          <button class="SignInButton" part="SignInButton" on:click={() => submitLoginForm()} disabled={isFormDataInvalid} id="signin-button">{$_('loginForm.loginButton')}</button>
-          <button class="ForgotPasswordButton" part="ForgotPasswordButton" on:click={() => switchToForgotPassword()}>{$_('loginForm.loginForgotPassword')}</button>
+        <div class="FormHeader" part="FormHeader">
+          <h4 class="FormHeaderTitle" part="FormHeaderTitle">{$_('loginForm.loginTitle')}</h4>
+          <p class="FormHeaderSubtitle" part="FormHeaderSubtitle">{$_('loginForm.loginSubtitle')} <span class="FormRegisterCallToAction" on:click={() => switchToRegister()}>{$_('loginForm.loginSubtitleRegister')}</span></p>
         </div>
+        {#if waitingForCredentials}
+          <p>Waiting for credentials</p>
+        {:else}
+          <div class="FormContent" part="FormContent">
+            <form id="signin" >
+              <div class="UserContainer {invalidName ? 'InvalidField' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
+                <label for="username">{$_('loginForm.loginUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
+                <input bind:value={userValue} on:keyup={validateUserName} type="text" id="email" name="email" autocomplete="username email" required/>
+                {#if invalidName}
+                  <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginUsernameError')}</p>
+                {/if}
+              </div>
+              <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}">
+                <label for="current-password">{$_('loginForm.loginPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
+                <input bind:value={userPassword} on:keyup={validatePassword} type="password" name="current-password" id="current-password" bind:this={passwordVisibilityToggle} autocomplete="current-password" aria-describedby="password-constraints" required/>
+                {#if isPasswordVisible}
+                  <svg on:click={() => hidePassword()} class="TogglePasswordVisibility" part="TogglePasswordVisibility" xmlns="http://www.w3.org/2000/svg" width="18.844" height="12.887" viewBox="0 0 18.844 12.887"><defs><style>.a{fill:var(--emfe-w-color-contrast, #07072A);}</style></defs><g transform="translate(-110.856 -23.242)"><circle class="a" cx="0.05" cy="0.05" r="0.05" transform="translate(121.017 31.148)"/><g transform="translate(117.499 27.37)"><path class="a" d="M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z" transform="translate(-142.164 -39.123)"/><path class="a" d="M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z" transform="translate(-136.413 -42.068)"/></g><g transform="translate(110.856 24.899)"><path class="a" d="M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z" transform="translate(-110.856 -33.157)"/><path class="a" d="M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z" transform="translate(-130.743 -29.617)"/></g><rect class="a" width="0.972" height="15.861" rx="0.486" transform="translate(114.827 23.858) rotate(-39.315)"/></g></svg>
+                {:else}
+                  <svg on:click={() => showPassword()} class="TogglePasswordVisibility" part="TogglePasswordVisibility" xmlns="http://www.w3.org/2000/svg" width="18.843" height="10.5" viewBox="0 0 18.843 10.5"><defs><style>.a{fill:var(--emfe-w-color-contrast, #07072A);}</style></defs><g transform="translate(-14.185 -27.832)"><path class="a" d="M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z" transform="translate(0)"/><circle class="a" cx="2.779" cy="2.779" r="2.779" transform="translate(20.827 30.303)"/></g></svg>
+                {/if}
+                {#if invalidPassword}
+                  <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginPasswordError')}</p>
+                {/if}
+              </div>
+              {#if errorMessage}
+                <p class="ErrorMessage" part="ErrorMessage">{errorMessage}</p>
+              {/if}
+            </form>
+            <button class="SignInButton" part="SignInButton" on:click={() => submitLoginForm()} disabled={isFormDataInvalid} id="signin-button">{$_('loginForm.loginButton')}</button>
+            <button class="ForgotPasswordButton" part="ForgotPasswordButton" on:click={() => switchToForgotPassword()}>{$_('loginForm.loginForgotPassword')}</button>
+          </div>
+        {/if}
       {/if}
     </div>
     {#if !mobileView}