@everymatrix/general-player-login-form 0.0.168 → 0.0.172

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-login-form",
-  "version": "0.0.168",
+  "version": "0.0.172",
   "main": "dist/general-player-login-form.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b469834fd49f47995c17424b33a59fabad03a2b6"
+  "gitHead": "604627a4babac0e9e23f37751bfc4062a279bc34"
 }

package/src/GeneralPlayerLoginForm.svelte

@@ -22,7 +22,8 @@
   let isLoading:boolean = false;
   let passwordVisibilityToggle:HTMLElement;
   let isPasswordVisible:boolean = false;
-
+  let isFormDataInvalid:boolean = true;
+  
   const captchaKey = '6Lc7w8YcAAAAAEMHc_VNN9bqfVnILoUOHSHyZ0yn';
 
   const regexValidators = {
@@ -64,7 +65,6 @@
   }
 
   const submitLoginForm = () => {
-    isLoading = true;
     doRecaptcha().then((token) => {
       if (checkUserIdentifier(userValue) && checkUserPassword(userPassword)) {
         loginFormData = {
@@ -72,6 +72,7 @@
           password: userPassword,
           token: token
         };
+        isLoading = true;
 
         window.postMessage({ type: "SubmitLoginForm", loginData: loginFormData }, window.location.href);
       }
@@ -96,10 +97,12 @@
 
   const validateUserName = () => {
     invalidName = !checkUserIdentifier(userValue);
+    isFormDataInvalid = (!invalidName && !invalidPassword && userPassword) ? false : true;
   }
 
   const validatePassword = () => {
     invalidPassword = !checkUserPassword(userPassword);
+    isFormDataInvalid = (!invalidName && !invalidPassword && userValue) ? false : true;
   }
 
   const messageHandler = (e:any) => {
@@ -177,17 +180,9 @@
         {#if errorMessage}
           <p class="ErrorMessage">{errorMessage}</p>
         {/if}
-        <button class="SingInButton" on:click={() => submitLoginForm()}>Sign In</button>
+        <button class="SignInButton" on:click={() => submitLoginForm()} disabled={isFormDataInvalid}>Sign In</button>
         <button class="ForgotPasswordButton" on:click={() => switchToForgotPassword()}>I forgot my password</button>
       </div>
-      <!-- TODO: move styling to password reset success widget -->
-      <!-- {:else}
-        <div class="SuccessMessageContainer">
-          <div class="CheckMarkIcon"></div>
-          <h4 class="SuccessTitle">Success!</h4>
-          <p class="SuccessText">The process has been completed successfully.</p>
-          <p class="SuccessText">Please follow the instructions in the emailwe just sent you.</p>
-        </div> -->
     </div>
     {#if !mobileView}
       <div class="FormRightSide" style="background-image: url('{imagedesktop}')"></div>
@@ -291,7 +286,7 @@
     right: ttp(0.5);
     bottom: 45px;
   }
-  .SingInButton {
+  .SignInButton {
     color: #fff;
     background: #D0046C;
     border: 1px solid #D0046C;
@@ -302,6 +297,11 @@
     text-transform: uppercase;
     font-size: ttp(1.125);
     cursor: pointer;
+    &[disabled] {
+      background: #c1c1c1;
+      border: 1px solid #c1c1c1;
+      cursor: not-allowed;
+    }
   }
   .ForgotPasswordButton {
     border: 0;
@@ -316,16 +316,12 @@
   .PasswordContainer, .UserContainer {
     padding-bottom: 30px;
   }
-  .UserContainer {
-    .InvalidInput {
-      bottom: -3px;
-    }
-  }
+
   .InvalidInput {
     color: #D0046C;
     font-size: ttp(0.625);
     position: absolute;
-    bottom: -3px;
+    top: 55px;
     line-height: ttp(0.625);
   }
   .ErrorMessage {
@@ -333,41 +329,12 @@
     font-size: 12px;
     color: #D0046C;
   }
-  // TODO: move styling to password reset success widget
-  // .SuccessMessageContainer {
-  //   margin: 20px;
-  //   padding: 30px;
-  //   background: #fff;
-  //   text-align: center;
-  // }
-  // .CheckMarkIcon {
-  //   width: 20px;
-  //   height: 42px;
-  //   border-bottom: 6px solid #16CE16;
-  //   border-right: 6px solid #16CE16;
-  //   display: inline-block;
-  //   position: relative;
-  //   transform: rotate(45deg);
-  // }
-  // .SuccessTitle {
-  //   color: #16CE16;
-  //   font-size: 20px;
-  //   font-weight: 400;
-  //   text-transform: uppercase;
-  //   margin: 14px 0;
-  // }
-  // .SuccessText {
-  //   color: #58586B;
-  //   font-size: 12px;
-  //   font-weight: 300;
-  //   margin: 0;
-  // }
   .FormMobileContainer {
     height:100%;
     .FormLeftSide {
       padding: ttp(2.5) ttp(1.25);
     }
-    .SingInButton,
+    .SignInButton,
     .UserContainer input,
     .PasswordContainer input,
     .CaptchaContainer {