@everymatrix/player-profile-info 0.0.202 → 0.0.206

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "0.0.202",
+  "version": "0.0.206",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d4e45d04feaefeedf3a6530ff705136d3a49ed86"
+  "gitHead": "19b20a886db165955575009bd82cc36d837d74d0"
 }

package/src/PlayerProfileInfo.svelte

@@ -26,6 +26,10 @@
   let prefixesArray:Array<Object> = [];
   let countriesArray:Array<Object> = []
 
+  let invalidCity:string = '';
+  let invalidPostalCode:string = '';
+  let invalidAddress:string = '';
+
   let showConfirmSave:boolean = false;
 
   Object.keys(PlayerProfileTranslations).forEach((item:any) => {
@@ -159,7 +163,7 @@
   let isValid:Boolean = false;
 
   const checkIsValid = () => {
-    if (playerQuestion.length <= 0 || playerAnswer.length <= 0 ||  !playerCity.value ||  !playerAddress.value ||  !playerPostalCode.value ||  playerMobileNumber.length <= 0) {
+    if (playerQuestion.length <= 0 || playerAnswer.length <= 0 ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  playerMobileNumber.length <= 0) {
       isValid = false;
     }
     else {
@@ -167,6 +171,45 @@
     }
   }
 
+  const checkCity = () => {
+    if(playerCity.value && playerCity.value.length <= 50) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateCity = () => {
+    invalidCity = !checkCity();
+    checkIsValid();
+  }
+
+  const checkPostalCode = () => {
+    if(playerPostalCode.value && playerPostalCode.value.length <= 20) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validatePostalCode = () => {
+    invalidPostalCode = !checkPostalCode();
+    checkIsValid();
+  }
+
+  const checkAddress = () => {
+    if(playerAddress.value && playerAddress.value.length <= 100) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateAddress = () => {
+    invalidAddress = !checkAddress();
+    checkIsValid();
+  }
+
   const updatePlayerInfo = () => {
     if (differencesExist == true && isValid == true) {
       window.postMessage({ type: 'UpdatePlayerInfo', provisionalArray }, window.location.href);
@@ -318,17 +361,26 @@
       <label>{$_('playerProfile.userCountry')}</label>
       <input type="text" class="PlayerCountry FieldDisabled" placeholder={country} value={selectedCountry.Name} readonly />
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userCity')}</label>
-    <input bind:this={playerCity} type="text" on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
+      <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>
+      {/if}
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userAddress')}</label>
-    <input bind:this={playerAddress} placeholder={address1} type="text" on:keyup={() => checkForChanges()} value={noPlayerData ? '' : initialValuesArray.address} />
+    <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>
+      {/if}
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userPostalCode')}</label>
-      <input bind:this={playerPostalCode} type="number" on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
+      <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>
+      {/if}
     </div>
   </section>
 
@@ -447,6 +499,22 @@
         box-shadow: 0 0 0 1pt #D0046C;
       }
     }
+
+    &.InvalidField {
+      input {
+        border: 1px solid #FD2839;
+        background: #FFF1F1;
+        color: #FD2839;
+      }
+    }
+
+    .InvalidInput {
+      color: #FD2839;
+      font-size: 10px;
+      line-height: 10px;
+    }
+
+
     .FieldDisabled {
       opacity: 0.5;
     }