@everymatrix/general-player-sms-verification-form 0.0.353 → 0.0.356

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-sms-verification-form",
-  "version": "0.0.353",
+  "version": "0.0.356",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b66ff51fb21b14cba5ab2efa029995d4fe4ceed1"
+  "gitHead": "9da657647b6a922a9bb6688be682fbcba497df90"
 }

package/src/GeneralPlayerSmsVerificationForm.svelte

@@ -13,8 +13,9 @@
 
   let smsCode: number;
   let isSmsValid: boolean = true;
-  let resend: boolean = false;
-  let smsSendApiFailed = false;
+  let smsSendApiFailed:boolean = false;
+  let secondsLeft:number = 60;
+  let timer:any;
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -74,9 +75,10 @@
       if(res.ok) {
         tokenid = data.id;
         smsSendApiFailed = false;
-        resend = false;
+        timer = setInterval(() => {
+          timerCountdown();
+        }, 1000);
       } else {
-        resend = false;
         smsSendApiFailed = true;
         throw new Error("Failed to fetch");
       }
@@ -86,6 +88,16 @@
     }
   }
 
+  const timerCountdown = () => {
+    if (secondsLeft > 0 ) {
+      secondsLeft--;
+    } else {
+      clearInterval(timer);
+      timer = false;
+      secondsLeft = 60;
+    }
+  }
+
   $: tokenid && playerid && endpoint;
 </script>
 
@@ -110,6 +122,9 @@
     {/if}
   </div>
 
+  {#if timer}
+    <p class="SmsVerificationResendMessage" part="SmsVerificationResendMessage">{$_('smsVerification.resendMessage')}</p>
+  {/if}
 
   <button
     class="Button SmsVerificationValidate"
@@ -117,15 +132,13 @@
     on:click={activateUser}>
     {$_('smsVerification.activate')}
   </button>
-
-  {#if resend}
-    <button
-      class="Button SmsVerificationResend"
-      part="SmsVerificationResend"
-      on:click={resendCode}>
-      {$_('smsVerification.resend')}
-    </button>
-  {/if}
+  <button
+    class="Button SmsVerificationResend"
+    part="SmsVerificationResend"
+    on:click={resendCode}
+    disabled={timer}>
+    {$_('smsVerification.resend')} {#if timer}<span class="SmsVerificationResendTimer">(0:{secondsLeft < 10 ? '0' : ''}{secondsLeft})</span>{/if}
+  </button>
 </div>
 
 
@@ -217,5 +230,9 @@
       border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
       cursor: not-allowed;
     }
+    &.SmsVerificationResend {
+      background: var(--emfe-w-color-gray-50, #F9F8F8);
+      color: var(--emfe-w-color-black, #000000);
+    }
   }
 </style>

package/src/translations.js

@@ -4,7 +4,8 @@ export const SmsVerificationTranslations = {
       title: 'Please enter the verification code you received on your number',
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
-      smsCodeError: 'Invalid sms code, you ca resend the code',
+      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'
     }
@@ -14,7 +15,8 @@ export const SmsVerificationTranslations = {
       title: 'Please enter the verification code you received on your number',
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
-      smsCodeError: 'Invalid sms code, you ca resend the code',
+      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'
     }
@@ -24,7 +26,8 @@ export const SmsVerificationTranslations = {
       title: 'Please enter the verification code you received on your number',
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
-      smsCodeError: 'Invalid sms code, you ca resend the code',
+      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'
     }
@@ -34,7 +37,8 @@ export const SmsVerificationTranslations = {
       title: 'Please enter the verification code you received on your number',
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
-      smsCodeError: 'Invalid sms code, you ca resend the code',
+      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'
     }
@@ -44,7 +48,8 @@ export const SmsVerificationTranslations = {
       title: 'Please enter the verification code you received on your number',
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
-      smsCodeError: 'Invalid sms code, you ca resend the code',
+      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'
     }
@@ -54,7 +59,8 @@ export const SmsVerificationTranslations = {
       title: 'Please enter the verification code you received on your number',
       errorTitle: 'Your code was invalid, you can resend the code and try again',
       code: 'Sms code',
-      smsCodeError: 'Invalid sms code, you ca resend the code',
+      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'
     }