@everymatrix/general-player-sms-verification-form 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-sms-verification-form",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "de8b2a024255bd2ed76c13501c5a6dc858263dcb"
+  "gitHead": "02dbae5b4d167acdb57c72905b756343a318870a"
 }

package/src/GeneralPlayerSmsVerificationForm.svelte

@@ -1,7 +1,8 @@
 <svelte:options tag={null} />
 
 <script lang="ts">
-  import { onMount } from "svelte";
+import { onMount } from 'svelte';
+
   import { _, addNewMessages, setLocale, setupI18n } from './i18n';
   import { SmsVerificationTranslations } from './translations';
 
@@ -12,20 +13,26 @@
   export let number:string = '';
   export let clientstyling:string = '';
   export let clientstylingurl:string = '';
-  export let translationUrl:string = '';
+  export let translationurl:string = '';
 
   let smsCode: number;
   let isSmsValid: boolean = true;
   let smsSendApiFailed:boolean = false;
-  let secondsLeft:number = 60;
   let timer:any;
   let customStylingContainer:HTMLElement;
   let displayNone:boolean = false;
+  let setTimer = +localStorage.getItem('smsTimer') || 0;
+  let currentTimer = Date.now() / 1000 - setTimer;
+  let secondsLeft:number = 60 - Math.floor(currentTimer);
+
+  const regexValidators = {
+    numeric: /^[0-9]{0,6}$/,
+  }
 
   setupI18n({ withLocale: 'en', translations: {}});
 
   const setTranslationUrl = ():void => {
-    let url:string = translationUrl;
+    let url:string = translationurl;
 
     fetch(url).then((res:any) => res.json())
     .then((res) => {
@@ -72,6 +79,9 @@
   }
 
   const resendCode = async () => {
+    localStorage.setItem('smsTimer', JSON.stringify(Math.floor(Date.now() / 1000)));
+    checkSMSTimer();
+
     try {
       const res = await fetch(`${endpoint}/player/sms/token`,{
         method: 'POST',
@@ -93,9 +103,7 @@
       if(res.ok) {
         tokenid = data.id;
         smsSendApiFailed = false;
-        timer = setInterval(() => {
-          timerCountdown();
-        }, 1000);
+        timerCountdown();
       } else {
         smsSendApiFailed = true;
         throw new Error("Failed to fetch");
@@ -138,10 +146,34 @@
       });
   }
 
+  const checkSMSTimer = () => {
+    if(currentTimer < 60) {
+      timer = setInterval(() => {
+        timerCountdown();
+      }, 1000);
+    }
+  }
+
+  const checkNumeric = (event) => {
+    if(!regexValidators.numeric.test(event.key) && event.keyCode !== 8 && event.keyCode !== 9 && event.keyCode !== 46) {
+      event.preventDefault();
+    }
+  }
+
+  onMount(() => {
+    if(!playerid || !number) { /* fix for when trying to log in after registeration & mail confirmation (without sms confirmation),
+                                  upon switching between sms validation and register, the playerid and phone number would be lost */
+      let playerData = JSON.parse(localStorage.getItem('playerData'));
+      playerid = playerData.playerid;
+      number = playerData.number;
+    }
+    checkSMSTimer();
+  });
+
   $: tokenid && playerid && endpoint;
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: translationUrl && setTranslationUrl();
+  $: translationurl && setTranslationUrl();
 </script>
 
 
@@ -158,7 +190,7 @@
     <label for="SmsCode">
       {$_('smsVerification.code')}:<span class="FormRequired" part="FormRequired">*</span>
     </label>
-    <input bind:value={smsCode} type="number" id="SmsCode" />
+    <input bind:value={smsCode} type="text" id="SmsCode" on:keydown={(e) => checkNumeric(e)} inputmode="numeric" pattern="[0-9]*" maxlength="6"/>
 
     {#if !isSmsValid}
       <p class="InvalidInput" part="InvalidInput">{$_('smsVerification.smsCodeError')}</p>
@@ -244,6 +276,9 @@
     }
   }
 
+  .LoginSMSHint {
+    margin-top: 20px;
+  }
   .InvalidInput {
     color: var(--emfe-w-color-error, #FD2839);
     font-size: 10px;

package/src/translations.js

@@ -7,7 +7,8 @@ export const SmsVerificationTranslations = {
       smsCodeError: 'Invalid sms code, you can resend the code',
       resendMessage: 'A new verification code has been sent to your phone number.',
       activate: 'Activate Account',
-      resend: 'Resend'
+      resend: 'Resend',
+      loginSMSHint: 'A new verification code has been sent to your phone number'
     }
   },
   zh: {
@@ -16,9 +17,9 @@ export const SmsVerificationTranslations = {
       errorTitle: '您的代码无效，您可以重新发送代码并重试',
       code: '短信代码',
       smsCodeError: '短信验证码无效，请重新发送验证码',
-      resendMessage: '新的验证码已发送到您的电话号码。',
+      resendMessage: '新的验证码已发送至您的手机号码',
       activate: '激活账户',
-      resend: '重发'
+      resend: '重发',
     }
   },
   fr: {
@@ -29,7 +30,7 @@ export const SmsVerificationTranslations = {
       smsCodeError: 'Code sms invalide, vous pouvez renvoyer le code',
       resendMessage: 'Un nouveau code de vérification a été envoyé à votre numéro de téléphone.',
       activate: 'Activer le compte',
-      resend: 'Renvoyer'
+      resend: 'Renvoyer',
     }
   },
   tr: {
@@ -38,9 +39,9 @@ export const SmsVerificationTranslations = {
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
       smsCodeError: 'Invalid sms code, you can resend the code',
-      resendMessage: 'A new verification code has been sent to your phone number.',
+      resendMessage: 'Telefon numaranıza yeni bir doğrulama kodu gönderildi.',
       activate: 'Activate Account',
-      resend: 'Resend'
+      resend: 'Resend',
     }
   },
   ro: {
@@ -49,9 +50,9 @@ export const SmsVerificationTranslations = {
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
       smsCodeError: 'Invalid sms code, you can resend the code',
-      resendMessage: 'A new verification code has been sent to your phone number.',
+      resendMessage: 'Un nou cod de verificare a fost trimis catre numarul dumneavoastra.',
       activate: 'Activate Account',
-      resend: 'Resend'
+      resend: 'Resend',
     }
   },
   es: {
@@ -60,9 +61,9 @@ export const SmsVerificationTranslations = {
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
       smsCodeError: 'Invalid sms code, you can resend the code',
-      resendMessage: 'A new verification code has been sent to your phone number.',
+      resendMessage: 'Se ha enviado un nuevo código de verificación a su número de teléfono.',
       activate: 'Activate Account',
-      resend: 'Resend'
+      resend: 'Resend',
     }
   },
   pt: {
@@ -71,9 +72,9 @@ export const SmsVerificationTranslations = {
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
       smsCodeError: 'Invalid sms code, you can resend the code',
-      resendMessage: 'A new verification code has been sent to your phone number.',
+      resendMessage: 'Um novo código de verificação foi enviado para o seu número de telefone.',
       activate: 'Activate Account',
-      resend: 'Resend'
+      resend: 'Resend',
     }
   },
 };