@everymatrix/general-player-sms-verification-form 1.0.15 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-sms-verification-form",
-  "version": "1.0.15",
+  "version": "1.1.0",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0ee1d4bccc4964628711251119148f0a04ba10df"
+  "gitHead": "62036ada223f2b4f7b64d99a81ab2229ecba3cf1"
 }

package/src/GeneralPlayerSmsVerificationForm.svelte

@@ -10,6 +10,8 @@
   export let playerid:string = '';
   export let smstemplate:string = 'Please use this code {0} to activate your accout';
   export let number:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
   export let translationUrl:string = '';
 
   let smsCode: number;
@@ -17,6 +19,8 @@
   let smsSendApiFailed:boolean = false;
   let secondsLeft:number = 60;
   let timer:any;
+  let customStylingContainer:HTMLElement;
+  let displayNone:boolean = false;
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -112,12 +116,36 @@
     }
   }
 
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    displayNone = true;
+
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+        setTimeout(() => { displayNone = false; }, 500);
+      });
+  }
+
   $: tokenid && playerid && endpoint;
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: translationUrl && setTranslationUrl();
 </script>
 
 
-<div class="Container SmsVerificationContainer" part="SmsVerificationContainer">
+<div class="Container SmsVerificationContainer" bind:this={customStylingContainer} part="SmsVerificationContainer">
   <h3 class="Title" part="Title">
     {#if isSmsValid}
       {$_('smsVerification.title')}