@everymatrix/general-player-login-form 0.0.214 → 0.0.218

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-login-form",
-  "version": "0.0.214",
+  "version": "0.0.218",
   "main": "dist/general-player-login-form.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "504c889b442d1a70906bdb23ddaef68e256963b6"
+  "gitHead": "ae78406d20c106f1d3c352c0e97189a7bdffacfb"
 }

package/src/GeneralPlayerLoginForm.svelte

@@ -1,22 +1,24 @@
 <svelte:options tag={null} />
 
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from "svelte";
   import { isMobile } from 'rvhelper';
 
-  import {
-    isNative,
-    call as callNative,
-    registerEventListener as registerNativeEventListener,
-  } from 'js-native-bridge';
+  // 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 imagedesktop:string = '';
   export let captchakey:string = '';
+  export let lang:string = '';
 
   let mobileView:boolean = false;
   let userAgent:string = window.navigator.userAgent;
   let userValue:string = '';
   let userPassword:string = '';
+  // @TODO Typescript type model for loginFormData
   let loginFormData:any = {
     username: '',
     password: ''
@@ -31,12 +33,17 @@
   let isPasswordVisible:boolean = false;
   let isFormDataInvalid:boolean = true;
 
-  let isOnNative:boolean = !!isNative(userAgent);
-  let waitingForCredentials:boolean = isOnNative;
+  // Native bridge
+  let isOnNative:boolean = false;
+  let waitingForCredentials:boolean = false;
 
   let nativeCredentials:any = {};
 
-  const captchaKey = '6Lc7w8YcAAAAAEMHc_VNN9bqfVnILoUOHSHyZ0yn';
+  // setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(LoginForm).forEach((item:any) => {
+    addNewMessages(item, LoginForm[item]);
+  });
 
   const regexValidators = {
     user: /^(?!(?:.*\d){9})(?=(?:.*[a-zA-Z]){2})^[a-zA-Z\d]*$/,
@@ -141,10 +148,17 @@
     }
   }
 
+  const initialLoad = ():void => {
+    setLocale(lang);
+  }
+
   onMount(async () => {
-    window.addEventListener('message', messageHandler, false);
+    window.addEventListener("message", messageHandler, false);
     window.postMessage({ type: "LoginRegisterModalActive" }, window.location.href);
 
+    isOnNative = !!isNative(userAgent);
+    waitingForCredentials = isOnNative;
+
     if (isOnNative) {
       registerNativeEventListener(
         'GET_CREDENTIALS',
@@ -177,6 +191,8 @@
       window.removeEventListener('message', messageHandler);
     }
   });
+
+  $: lang && initialLoad();
 </script>
 
 <svelte:head>
@@ -193,35 +209,39 @@
   <div class="FormContainer {mobileView ? 'FormMobileContainer' : ''}">
     <div class="FormLeftSide">
       <div class="FormHeader">
-        <h4 class="FormHeaderTitle">Welcome</h4>
-        <p class="FormHeaderSubtitle">Don't have an account yet? <span class="FormRegisterCallToAction" on:click={() => switchToRegister()}>Register now</span></p>
+        <h4 class="FormHeaderTitle">{$_('loginForm.loginTitle')}</h4>
+        <p class="FormHeaderSubtitle">{$_('loginForm.loginSubtitle')} <span class="FormRegisterCallToAction" on:click={() => switchToRegister()}>{$_('loginForm.loginSubtitleRegister')}</span></p>
       </div>
-      <div class="FormContent">
-        <div class="UserContainer {invalidName ? 'InvalidField' : ''}">
-          <label for="UserName">Username or Email:<span class="FormRequired">*</span></label>
-          <input bind:value={userValue} on:keyup={validateUserName} type="text" id="UserName" />
-          {#if invalidName}
-            <p class="InvalidInput">Name must be at least 2 characters long, and contain no special characters. Email should contain '@' and a 2-3 letter long domain.</p>
+      {#if waitingForCredentials}
+        <p>Waiting for credentials</p>
+      {:else}
+        <div class="FormContent">
+          <div class="UserContainer {invalidName ? 'InvalidField' : ''}">
+            <label for="UserName">{$_('loginForm.loginUsername')}:<span class="FormRequired">*</span></label>
+            <input bind:value={userValue} on:keyup={validateUserName} type="text" id="UserName" />
+            {#if invalidName}
+              <p class="InvalidInput">{$_('loginForm.loginUsernameError')}</p>
+            {/if}
+          </div>
+          <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}">
+            <label for="Password">{$_('loginForm.loginPassword')}:<span class="FormRequired">*</span></label>
+            <input bind:value={userPassword} on:keyup={validatePassword} type="password" id="Password" bind:this={passwordVisibilityToggle} />
+            {#if isPasswordVisible}
+              <svg on:click={() => hidePassword()} class="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:#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" xmlns="http://www.w3.org/2000/svg" width="18.843" height="10.5" viewBox="0 0 18.843 10.5"><defs><style>.a{fill:#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">{$_('loginForm.loginPasswordError')}</p>
+            {/if}
+          </div>
+          {#if errorMessage}
+            <p class="ErrorMessage">{errorMessage}</p>
           {/if}
+          <button class="SignInButton" on:click={() => submitLoginForm()} disabled={isFormDataInvalid}>{$_('loginForm.loginButton')}</button>
+          <button class="ForgotPasswordButton" on:click={() => switchToForgotPassword()}>{$_('loginForm.loginForgotPassword')}</button>
         </div>
-        <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}">
-          <label for="Password">Password:<span class="FormRequired">*</span></label>
-          <input bind:value={userPassword} on:keyup={validatePassword} type="password" id="Password" bind:this={passwordVisibilityToggle} />
-          {#if isPasswordVisible}
-            <svg on:click={() => hidePassword()} class="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:#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" xmlns="http://www.w3.org/2000/svg" width="18.843" height="10.5" viewBox="0 0 18.843 10.5"><defs><style>.a{fill:#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">Password must be 8-20 characters long, and contain at least 1 uppercase letter, 1 number and 1 special character.</p>
-          {/if}
-        </div>
-        {#if errorMessage}
-          <p class="ErrorMessage">{errorMessage}</p>
-        {/if}
-        <button class="SignInButton" on:click={() => submitLoginForm()} disabled={isFormDataInvalid}>Sign In</button>
-        <button class="ForgotPasswordButton" on:click={() => switchToForgotPassword()}>I forgot my password</button>
-      </div>
+      {/if}
     </div>
     {#if !mobileView}
       <div class="FormRightSide" style="background-image: url('{imagedesktop}')"></div>
@@ -261,7 +281,7 @@
   }
   .FormHeaderTitle {
     color: #000000;
-    font-size: ttp(1.75);
+    font-size: 20px;
     font-weight: 300;
     padding: 0;
     text-transform: uppercase;

package/src/i18n.js

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/translations.js

@@ -0,0 +1,41 @@
+export const LoginForm = {
+  en: {
+    loginForm: {
+      loginTitle: 'Welcome',
+      loginSubtitle: 'Don\'t have an account yet?',
+      loginSubtitleRegister: 'Register now',
+      loginUsername: 'Username or Email',
+      loginUsernameError: 'Name must be at least 2 characters long and contain no special characters. Email should contain \'@\' and a 2-3 letter long domain.',
+      loginPassword: 'Password',
+      loginPasswordError: 'Password must be 8-20 characters long and contain at least 1 uppercase letter, 1 number and 1 special character.',
+      loginButton: 'Login',
+      loginForgotPassword: 'I forgot my password'
+    }
+  },
+  tr: {
+    loginForm: {
+      loginTitle: 'Hoş geldin',
+      loginSubtitle: 'Henüz bir hesabınız yok mu?',
+      loginSubtitleRegister: 'Şimdi üye Ol',
+      loginUsername: 'Kullanıcı adı ya da email',
+      loginUsernameError: 'Ad en az 2 karakter uzunluğunda olmalı ve özel karakter içermemelidir. E-posta \'@\' ve 2-3 harf uzunluğunda bir etki alanı içermelidir.',
+      loginPassword: 'Parola',
+      loginPasswordError: 'Şifre 8-20 karakter uzunluğunda olmalı ve en az 1 büyük harf, 1 rakam ve 1 özel karakter içermelidir.',
+      loginButton: 'Giriş yapmak',
+      loginForgotPassword: 'I forgot my password'
+    }
+  },
+  ro: {
+    loginForm: {
+      loginTitle: 'Bine ai venit',
+      loginSubtitle: 'Nu ai cont?',
+      loginSubtitleRegister: 'Inregistreaza-te acum',
+      loginUsername: 'Utilizator sau Email',
+      loginUsernameError: 'Utilizatorul trebuie sa aiba minim 2 litere si sa nu contina caractere speciale. Email-ul trebuie sa contina \'@\' si domeniul sa aiba 2-3 litere lungime.',
+      loginPassword: 'Parola',
+      loginPasswordError: 'Parola trebuie sa aiba o lungime de 8-20 de caractere, sa contina cel putin o litera mare, o cifra si un caracter special.',
+      loginButton: 'Autentificare',
+      loginForgotPassword: 'Mi-am uitat parola'
+    }
+  },
+};