@everymatrix/player-profile-info 0.0.214 → 0.0.215

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "0.0.214",
+  "version": "0.0.215",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "504c889b442d1a70906bdb23ddaef68e256963b6"
+  "gitHead": "9c9f7a9e6a715010e0746e271e930d92e64e16d2"
 }

package/src/PlayerProfileInfo.svelte

@@ -1,6 +1,6 @@
 <svelte:options tag={null} />
 
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
   import { _, addNewMessages, setLocale } from './i18n';
@@ -26,9 +26,13 @@
   let prefixesArray:Array<Object> = [];
   let countriesArray:Array<Object> = []
 
+
   let invalidCity:string = '';
   let invalidPostalCode:string = '';
   let invalidAddress:string = '';
+  let invalidSecurityQuestion:Boolean = false;
+  let invalidSecurityAnswer:Boolean = false;
+  let invalidMobile:string = '';
 
   let showConfirmSave:boolean = false;
 
@@ -163,7 +167,7 @@
   let isValid:Boolean = false;
 
   const checkIsValid = () => {
-    if (playerQuestion.length <= 0 || playerAnswer.length <= 0 ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  playerMobileNumber.length <= 0) {
+    if (invalidSecurityQuestion || invalidSecurityAnswer ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  invalidMobile) {
       isValid = false;
     }
     else {
@@ -171,6 +175,45 @@
     }
   }
 
+  const checkMobile = () => {
+    if(playerMobileNumber && playerMobileNumber.length >= 5 && playerMobileNumber.length <= 30) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateMobile = () => {
+    invalidMobile = !checkMobile();
+    checkIsValid();
+  }
+
+  const checkSecurityQuestion = () => {
+    if (playerQuestion && playerQuestion.length <= 120) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateSecurityQuestion = () => {
+    invalidSecurityQuestion = !checkSecurityQuestion();
+    checkIsValid();
+  }
+
+  const checkSecurityAnswer = () => {
+    if (playerAnswer && playerAnswer.length <= 120) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateSecurityAnswer = () => {
+    invalidSecurityAnswer = !checkSecurityAnswer();
+    checkIsValid();
+  }
+
   const checkCity = () => {
     if(playerCity.value && playerCity.value.length <= 50) {
       return true;
@@ -304,7 +347,7 @@
       <label>{$_('playerProfile.userName')}</label>
       <input type="text" class="FieldDisabled" value={username} readonly />
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userPhone')}</label>
       <div class="PlayerPhoneNumber">
         <select bind:value={playerPrefix} on:change={() => checkForChanges()}>
@@ -316,41 +359,50 @@
             {/if}
           {/each}
         </select>
-      <input bind:value={playerMobileNumber} type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" placeholder={noPlayerData ? mobile.number : ''} on:keyup={() => checkForChanges()}/>
+      <input bind:value={playerMobileNumber} on:keyup={validateMobile} type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" placeholder={noPlayerData ? mobile.number : ''} on:keyup={() => checkForChanges()}/>
       </div>
+      {#if invalidMobile}
+        <p class="InvalidInput">{$_('playerProfile.userPhoneError')}</p>
+      {/if}
+    </div>
+    <div class="PlayerInfoBox  {invalidSecurityQuestion ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.securityQuestion')}</label>
+      <input type="text" bind:value={playerQuestion} on:keyup={() => checkForChanges()} on:blur={validateSecurityQuestion} placeholder={noPlayerData ? securityQuestion : ''} />
+      {#if invalidSecurityQuestion}
+        <p class="InvalidInput">{$_('playerProfile.securityQuestionError')}</p>
+      {/if}
+    </div>
+    <div class="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.securityAnswer')}</label>
+      <input type="text" bind:value={playerAnswer} on:keyup={() => checkForChanges()} on:blur={validateSecurityAnswer} placeholder={noPlayerData ? securityAnswer : ''} />
+      {#if invalidSecurityAnswer}
+        <p class="InvalidInput">{$_('playerProfile.securityAnswerError')}</p>
+      {/if}
     </div>
     <div class="PlayerInfoBox">
       <label>{$_('playerProfile.userEmail')}</label>
       <input type="email" class="FieldDisabled" value={email} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>{$_('playerProfile.securityQuestion')}</label>
-      <input type="text" bind:value={playerQuestion} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? securityQuestion : ''} />
+      <label>{$_('playerProfile.dateOfBirth')}</label>
+      <input type="text" class="FieldDisabled" value={birth} readonly />
     </div>
     <div class="PlayerInfoBox">
       <label>{$_('playerProfile.firstName')}</label>
       <input type="text" class="FieldDisabled" value={firstname} readonly />
     </div>
-    <div class="PlayerInfoBox">
-      <label>{$_('playerProfile.securityAnswer')}</label>
-      <input type="text" bind:value={playerAnswer} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? securityAnswer : ''} />
-    </div>
     <div class="PlayerInfoBox">
       <label>{$_('playerProfile.lastName')}</label>
       <input type="text" class="FieldDisabled" value={lastname} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>{$_('playerProfile.dateOfBirth')}</label>
-    <input type="text" class="FieldDisabled" value={birth} readonly />
+      <label>{$_('playerProfile.userTitle')}</label>
+      <input type="text" class="FieldDisabled" value={userTitles} readonly />
     </div>
     <div class="PlayerInfoBox">
       <label>{$_('playerProfile.currency')}</label>
       <input type="text" class="FieldDisabled" value={currency} readonly />
     </div>
-    <div class="PlayerInfoBox">
-      <label>{$_('playerProfile.userTitle')}</label>
-      <input type="text" class="FieldDisabled" value={userTitles} readonly />
-    </div>
   </section>
 
   <div class="PlayerLocationHeader">
@@ -365,21 +417,21 @@
       <label>{$_('playerProfile.userCity')}</label>
       <input bind:this={playerCity} type="text" on:blur={validateCity} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
       {#if invalidCity}
-        <p class="InvalidInput">City must be at least 1 character long and 50 characters maximum.</p>
+        <p class="InvalidInput">{$_('playerProfile.userCityError')}</p>
       {/if}
     </div>
     <div class="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userAddress')}</label>
     <input bind:this={playerAddress} placeholder={address1} type="text" on:blur={validateAddress} on:keyup={() => checkForChanges()} value={noPlayerData ? '' : initialValuesArray.address} />
       {#if invalidAddress}
-        <p class="InvalidInput">Address must be at least 1 character long and 100 characters maximum.</p>
+        <p class="InvalidInput">{$_('playerProfile.userAddressError')}</p>
       {/if}
     </div>
     <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userPostalCode')}</label>
       <input bind:this={playerPostalCode} type="number" on:blur={validatePostalCode} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
       {#if invalidPostalCode}
-        <p class="InvalidInput">Postal Code must be at least 1 character long and 20 characters maximum.</p>
+        <p class="InvalidInput">{$_('playerProfile.userPostalCodeError')}</p>
       {/if}
     </div>
   </section>

package/src/translations.js

@@ -5,10 +5,13 @@ export const PlayerProfileTranslations = {
       personalDetails: `Personal Details`,
       userName: `User name:`,
       userPhone: `Phone:`,
+      userPhoneError: 'Mobile must be at least 5 character long and 20 characters maximum.',
       userEmail: `Email:`,
       securityQuestion: `Security Question:`,
+      securityQuestionError: 'Security question must be at least 1 character long and maximum 120 characters.',
       firstName: `First name:`,
       securityAnswer: `Security Answer:`,
+      securityAnswerError: 'Security answer must be at least 1 character long and maximum 120 characters.',
       lastName: `Last Name:`,
       dateOfBirth: `Date of birth:`,
       currency: `Currency:`,
@@ -16,8 +19,11 @@ export const PlayerProfileTranslations = {
       locationDetails: `Location Details`,
       userCountry: `Country:`,
       userCity: `City:`,
+      userCityError: 'City must be at least 1 character long and 50 characters maximum.',
       userAddress: `Address:`,
+      userAddressError: 'Address must be at least 1 character long and 100 characters maximum.',
       userPostalCode: `Postal Code:`,
+      userPostalCodeError: 'Postal Code must be at least 1 character long and 20 characters maximum.',
       userNotifications: `Notifications`,
       userSMSNotification: `Enable SMS notifications`,
       userEmailNotification: `Enable Emails`,
@@ -31,24 +37,62 @@ export const PlayerProfileTranslations = {
       personalDetails: `Detalii Personale`,
       userName: `Nume utilizator:`,
       userPhone: `Telefon:`,
+      userPhoneError: 'Telefon-ul trebuie să aibă cel puțin 5 caractere și maximum 20 de caractere.',
       userEmail: `E-mail:`,
       securityQuestion: `Întrebare securitate:`,
+      securityQuestionError: 'Întrebarea de securitate trebuie să aibă cel puțin 1 caracter și maximum 120 de caractere.',
       firstName: `Prenume:`,
       securityAnswer: `Răspuns securitate:`,
+      securityAnswerError: 'Security answer must be at least 1 character long and maximum 120 characters.',
       lastName: `Nume:`,
       dateOfBirth: `Data nașterii:`,
       currency: `Monedă:`,
       userTitle: `Titlu:`,
       locationDetails: `Detalii de Localizare`,
       userCountry: `Țară:`,
+      userCityError: 'Orașul trebuie să aibă cel puțin 1 caracter și maximum 50 de caractere.',
       userCity: `Oraș:`,
       userAddress: `Adresă:`,
+      userAddressError: 'Address must be at least 1 character long and 100 characters maximum.',
       userPostalCode: `Cod poștal:`,
+      userPostalCodeError: 'Codul poștal trebuie să aibă cel puțin 1 caracter și maximum 20 de caractere.',
       userNotifications: `Notificări`,
       userSMSNotification: `Activează notificări prin SMS`,
       userEmailNotification: `Activează notificări prin E-mail`,
       userProfileSaveChanges: `Salvează`,
       userProfileConfirmationMessage: `Modificările au fost salvate!`
     }
+  },
+  tr: {
+    playerProfile: {
+      title: `Profil bilgisi`,
+      personalDetails: `Kişisel detaylar`,
+      userName: `Kullanıcı adı:`,
+      userPhone: `Telefon:`,
+      userPhoneError: 'Mobil en az 5 karakter uzunluğunda ve en fazla 20 karakter olmalıdır.',
+      userEmail: `E-posta:`,
+      securityQuestion: `Güvenlik Sorusu:`,
+      securityQuestionError: 'Güvenlik sorusu en az 1, en fazla 120 karakter uzunluğunda olmalıdır.',
+      firstName: `First name:`,
+      securityAnswer: `İlk adı:`,
+      securityAnswerError: 'Güvenlik cevabı en az 1 karakter uzunluğunda ve en fazla 120 karakter olmalıdır.',
+      lastName: `Soyadı:`,
+      dateOfBirth: `Doğum tarihi:`,
+      currency: `Para birimi:`,
+      userTitle: `Başlık:`,
+      locationDetails: `Konum Ayrıntıları`,
+      userCountry: `Ülke:`,
+      userCity: `Şehir:`,
+      userCityError: 'Şehir en az 1 karakter uzunluğunda ve en fazla 50 karakter olmalıdır.',
+      userAddress: `Adres:`,
+      userAddressError: 'Adres en az 1 karakter uzunluğunda ve en fazla 100 karakter olmalıdır.',
+      userPostalCode: `Posta kodu:`,
+      userPostalCodeError: 'Posta Kodu en az 1 karakter uzunluğunda ve en fazla 20 karakter olmalıdır.',
+      userNotifications: `Bildirimler`,
+      userSMSNotification: `SMS bildirimlerini etkinleştir`,
+      userEmailNotification: `E-postaları Etkinleştir`,
+      userProfileSaveChanges: `Değişiklikleri Kaydet`,
+      userProfileConfirmationMessage: `Değişiklikleriniz kaydedildi!`
+    }
   }
 };