@everymatrix/general-player-login-form 1.37.3 → 1.37.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/general-player-login-form",
3
- "version": "1.37.3",
3
+ "version": "1.37.4",
4
4
  "main": "dist/general-player-login-form.js",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "df31cbe8e6b206c5aed27f8036ab50826359872e"
38
+ "gitHead": "863252ebf7c846696d9b388f0d288993dbd5065c"
39
39
  }
@@ -394,9 +394,9 @@
394
394
  <label for="current-password">{$_('loginPassword')}:<span class="FormRequired">*</span></label>
395
395
  <input bind:value={userPassword} on:input={validatePassword} type="password" name="current-password" id="current-password" bind:this={passwordVisibilityToggle} autocomplete={savecredentials ? "current-password" : "off"} aria-describedby="password-constraints" required/>
396
396
  {#if isPasswordVisible}
397
- <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:var(--emw--registration-typography, var(--emw--color-background, #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>
397
+ <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:var(--emfe-w-registration-typography, var(--emfe-w-color-background, #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>
398
398
  {:else}
399
- <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:var(--emw--registration-typography, var(--emw--color-background, #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>
399
+ <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:var(--emfe-w-registration-typography, var(--emfe-w-color-background, #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>
400
400
  {/if}
401
401
  {#if invalidPassword && simplepasswordvalidation !== 'true'}
402
402
  <p class="InvalidInput">{$_('loginPasswordError')}</p>
@@ -421,13 +421,8 @@
421
421
  <style lang="scss">
422
422
  .grecaptcha-badge { opacity:0;}
423
423
 
424
- input, select {
425
- font-family: inherit;
426
- }
427
-
428
424
  .PlayerLoginFormWrapper {
429
425
  height: 100%;
430
- border-radius: var(--emw--border-radius-medium, 15px);
431
426
  }
432
427
 
433
428
  .FormContainer {
@@ -435,13 +430,13 @@
435
430
  }
436
431
 
437
432
  .FormLogin {
438
- background: var(--emw--registration-color-bg, var(--emw--color-gray-50, #F9F8F8));
433
+ background: var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8));
439
434
  padding: 50px;
440
435
  }
441
436
  .FormHeaderTitle {
442
- color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
443
- font-size: var(--emw--font-size-large, 20px);
444
- font-weight: var(--emw--font-weight-light, 300);
437
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-contrast, #07072A));
438
+ font-size: 20px;
439
+ font-weight: 300;
445
440
  padding: 0;
446
441
  text-transform: uppercase;
447
442
  margin: 0;
@@ -450,18 +445,18 @@
450
445
  position: relative;
451
446
  }
452
447
  .FormRequired {
453
- color: var(--emw--color-error, var(--emw--color-error, #ed0909));
448
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
454
449
  }
455
450
  .FormHeaderSubtitle {
456
- color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
457
- font-size: var(--emw--font-size-small, 14px);
458
- font-weight: var(--emw--font-weight-light, 300);
451
+ color: var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));
452
+ font-size: 14px;
453
+ font-weight: 300;
459
454
  margin: 5px 0 0 0;
460
455
  }
461
456
  .FormRegisterCallToAction {
462
- color: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
463
- font-size: var(--emw--font-size-small, 14px);
464
- font-weight: var(--emw--font-weight-normal, 400);
457
+ color: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
458
+ font-size: 14px;
459
+ font-weight: 400;
465
460
  text-decoration: none;
466
461
  cursor: pointer;
467
462
  }
@@ -469,36 +464,30 @@
469
464
  padding-top: 20px;
470
465
  }
471
466
  .UserContainer, .PasswordContainer, .CaptchaContainer {
472
- color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
467
+ color: var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));
473
468
  display: flex;
474
469
  flex-direction: column;
475
470
  position: relative;
476
471
  label {
477
- font-size: var(--emw--font-size-small, 14px);
478
- font-weight: var(--emw--font-weight-light, 300);
472
+ font-size: 14px;
473
+ font-weight: 300;
479
474
  padding-bottom: 5px;
480
475
  }
481
476
  input {
482
477
  width: 100%;
483
478
  height: 44px;
484
- border-radius: 15px;
485
- border: 1px solid var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
486
- box-sizing: border-box;
479
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
480
+ border-radius: 5px;
481
+ box-sizing:border-box;
487
482
  padding: 5px 15px;
488
- font-size: var(--emw--font-size-medium, 16px);
483
+ font-size: 16px;
489
484
  line-height: 18px;
490
-
491
- &:focus {
492
- border: 2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
493
- outline: none;
494
- }
495
485
  }
496
486
  &.InvalidField {
497
487
  input {
498
- border: 1px solid var(--emw--color-error, var(--emw--color-error, #ed0909));
499
- background: var(--emw--color-pale, #FBECF4);
500
- outline: none;
501
- color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
488
+ border: 1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
489
+ background: var(--emfe-w-color-pale, #FBECF4);
490
+ color: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
502
491
  }
503
492
  }
504
493
  }
@@ -515,37 +504,36 @@
515
504
  bottom: 55px;
516
505
  &.InvalidToggle {
517
506
  path, circle, rect {
518
- fill: var(--emw--color-error, var(--emw--color-error, #ed0909));
507
+ fill: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
519
508
  }
520
509
  }
521
510
  path, circle, rect {
522
- fill: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
511
+ fill: var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));
523
512
  }
524
513
  }
525
514
  .SignInButton {
526
- background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));
527
- border: 2px solid var(--emw--button-border-color, #0E5924);
528
- border-radius: var(--emw--button-border-radius, 50px);
529
- color: var(--emw--button-typography, var(--emw--button-text-color, #FFFFFF));
530
- font-family: var(--emw--button-typography);
515
+ color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
516
+ background: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
517
+ border: 1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
518
+ border-radius: 5px;
531
519
  width: 100%;
532
520
  height: 60px;
533
521
  padding: 0;
534
522
  text-transform: uppercase;
535
- font-size: var(--emw--font-size-medium, 16px);
523
+ font-size: 18px;
536
524
  cursor: pointer;
537
525
  &[disabled] {
538
- background: var(--emw--color-gray-100, #E6E6E6);
539
- border: 1px solid var(--emw--color-gray-150, #828282);
526
+ background: var(--emfe-w-color-gray-100, #E6E6E6);
527
+ border: 1px solid var(--emfe-w-color-gray-150, #828282);
540
528
  cursor: not-allowed;
541
529
  }
542
530
  }
543
531
  .ForgotPasswordButton {
544
532
  border: 0;
545
533
  background: transparent;
546
- font-size: var(--emw--font-size-small, 14px);
547
- font-weight: var(--emw--font-weight-light, 300);
548
- color: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
534
+ font-size: 14px;
535
+ font-weight: 300;
536
+ color: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
549
537
  margin-top: 15px;
550
538
  cursor: pointer;
551
539
  }
@@ -554,7 +542,7 @@
554
542
  }
555
543
 
556
544
  .InvalidInput {
557
- color: var(--emw--color-error, var(--emw--color-error, #ed0909));
545
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
558
546
  font-size: 10px;
559
547
  position: absolute;
560
548
  top: 55px;
@@ -563,8 +551,8 @@
563
551
  }
564
552
  .ErrorMessage {
565
553
  margin: 0 0 15px 0;
566
- font-size: var(--emw--font-size-x-small, 12px);
567
- color: var(--emw--color-error, var(--emw--color-error, #ed0909));
554
+ font-size: 12px;
555
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
568
556
  }
569
557
  .FormMobileContainer {
570
558
  height:100%;
@@ -576,9 +564,11 @@
576
564
  .PasswordContainer input,
577
565
  .CaptchaContainer {
578
566
  max-width: unset;
579
- border-radius: var(--emw--border-radius-medium, 15px);
580
567
  }
581
-
568
+ // .SuccessMessageContainer {
569
+ // margin: 0;
570
+ // height: 100%;
571
+ // }
582
572
  }
583
573
 
584
574
  .ModalLoaderWrapper {
@@ -600,8 +590,8 @@
600
590
  height: 64px;
601
591
  margin: 8px;
602
592
  border-radius: 50%;
603
- border: 6px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
604
- border-color: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E)) transparent var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E)) transparent;
593
+ border: 6px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
594
+ border-color: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C)) transparent var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C)) transparent;
605
595
  animation: Loader 1.2s linear infinite;
606
596
  }
607
597