@everymatrix/general-player-register-form-step1 1.36.0 → 1.37.0
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-register-form-step1",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.37.0",
|
|
4
4
|
"main": "dist/general-player-register-form-step1.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": "
|
|
38
|
+
"gitHead": "23b14632ab842e43bf71843de47000e6dd141751"
|
|
39
39
|
}
|
|
@@ -380,9 +380,9 @@
|
|
|
380
380
|
<label for="Password">{$_('registerPassword')}:<span class="FormRequired">*</span></label>
|
|
381
381
|
<input bind:value={userPassword} on:keyup={validatePassword} on:focus={() => passwordFocus = true} on:blur={() => passwordFocus = false} name="new-password" type="password" id="new-password" autocomplete = {savecredentials ? "new-password" : "off" } bind:this={passwordVisibilityToggle} aria-describedby="password-constraints" />
|
|
382
382
|
{#if isPasswordVisible}
|
|
383
|
-
<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(--
|
|
383
|
+
<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>
|
|
384
384
|
{:else}
|
|
385
|
-
<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(--
|
|
385
|
+
<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>
|
|
386
386
|
{/if}
|
|
387
387
|
{#if invalidPassword && simplepasswordvalidation !== 'true'}
|
|
388
388
|
<p class="InvalidInput">{$_('registerPasswordError')}</p>
|
|
@@ -395,9 +395,9 @@
|
|
|
395
395
|
<label for="ConfirmPassword">{$_('registerConfirmPassword')}:<span class="FormRequired">*</span></label>
|
|
396
396
|
<input bind:value={confirmUserPassword} on:keyup={validateConfirmPassword} on:focus={() => confirmPasswordFocus = true} on:blur={() => confirmPasswordFocus = false} type="password" id="ConfirmPassword" bind:this={confirmPasswordVisibilityToggle} />
|
|
397
397
|
{#if isConfirmPasswordVisible}
|
|
398
|
-
<svg on:click={() => hideConfirmPassword()} class="ToggleConfirmPasswordVisibility" 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(--
|
|
398
|
+
<svg on:click={() => hideConfirmPassword()} class="ToggleConfirmPasswordVisibility" 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>
|
|
399
399
|
{:else}
|
|
400
|
-
<svg on:click={() => showConfirmPassword()} class="ToggleConfirmPasswordVisibility" 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(--
|
|
400
|
+
<svg on:click={() => showConfirmPassword()} class="ToggleConfirmPasswordVisibility" 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>
|
|
401
401
|
{/if}
|
|
402
402
|
{#if invalidConfirmPassword}
|
|
403
403
|
<p class="InvalidInput">{$_('registerConfirmPasswordError')}</p>
|
|
@@ -434,24 +434,28 @@
|
|
|
434
434
|
|
|
435
435
|
<style lang="scss">
|
|
436
436
|
|
|
437
|
+
input, select {
|
|
438
|
+
font-family: inherit;
|
|
439
|
+
}
|
|
440
|
+
|
|
437
441
|
.RegisterFormTitle {
|
|
438
|
-
font-size: 20px;
|
|
442
|
+
font-size: var(--emw--font-size-large, 20px);
|
|
439
443
|
text-transform: uppercase;
|
|
440
|
-
font-weight: 300;
|
|
444
|
+
font-weight: var(--emw--font-weight-light, 300);
|
|
441
445
|
margin: 0;
|
|
442
446
|
padding-bottom: 8px;
|
|
443
447
|
}
|
|
444
448
|
|
|
445
449
|
.RegisterFormSubtitle {
|
|
446
|
-
font-size: 14px;
|
|
450
|
+
font-size: var(--emw--font-size-small, 14px);
|
|
447
451
|
margin: 0;
|
|
448
452
|
padding-bottom: 20px;
|
|
449
453
|
}
|
|
450
454
|
|
|
451
455
|
.FormLoginCallToAction {
|
|
452
|
-
color: var(--
|
|
453
|
-
font-size: 14px;
|
|
454
|
-
font-weight: 400;
|
|
456
|
+
color: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
|
|
457
|
+
font-size: var(--emw--font-size-small, 14px);
|
|
458
|
+
font-weight: var(--emw--font-weight-normal, 400);
|
|
455
459
|
text-decoration: none;
|
|
456
460
|
cursor: pointer;
|
|
457
461
|
}
|
|
@@ -463,34 +467,39 @@
|
|
|
463
467
|
.PromoCodeContainer,
|
|
464
468
|
.SecurityQuestionContainer,
|
|
465
469
|
.SecurityAnswerContainer {
|
|
466
|
-
color: var(--
|
|
470
|
+
color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
|
|
467
471
|
display: flex;
|
|
468
472
|
flex-direction: column;
|
|
469
473
|
padding-bottom:40px;
|
|
470
474
|
position: relative;
|
|
471
475
|
|
|
472
476
|
label {
|
|
473
|
-
font-size: 14px;
|
|
474
|
-
font-weight: 300;
|
|
477
|
+
font-size: var(--emw--font-size-small, 14px);
|
|
478
|
+
font-weight: var(--emw--font-weight-light, 300);
|
|
475
479
|
padding-bottom: 5px;
|
|
476
480
|
}
|
|
477
481
|
|
|
478
482
|
input {
|
|
479
483
|
width: 100%;
|
|
480
484
|
height: 44px;
|
|
481
|
-
border:
|
|
482
|
-
border
|
|
485
|
+
border-radius: var(--emw--border-radius-medium, 15px);
|
|
486
|
+
border: 1px solid var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
|
|
483
487
|
box-sizing: border-box;
|
|
484
488
|
padding: 5px 15px;
|
|
485
|
-
font-size: 16px;
|
|
489
|
+
font-size: var(--emw--font-size-medium, 16px);
|
|
486
490
|
line-height: 18px;
|
|
491
|
+
|
|
492
|
+
&:focus {
|
|
493
|
+
border: 2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
|
|
494
|
+
outline: none;
|
|
495
|
+
}
|
|
487
496
|
}
|
|
488
497
|
|
|
489
498
|
&.InvalidField {
|
|
490
499
|
input {
|
|
491
|
-
border: 1px solid var(--
|
|
492
|
-
background: var(--
|
|
493
|
-
color: var(--
|
|
500
|
+
border: 1px solid var(--emw--color-error, #F5090A);
|
|
501
|
+
background: var(--emw--color-pale, #FBECF4);
|
|
502
|
+
color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
|
|
494
503
|
}
|
|
495
504
|
}
|
|
496
505
|
|
|
@@ -509,7 +518,7 @@
|
|
|
509
518
|
}
|
|
510
519
|
|
|
511
520
|
.FormRequired {
|
|
512
|
-
color: var(--
|
|
521
|
+
color: var(--emw--categories-color-secondary, var(--emw--color-secondary, #E1A749));
|
|
513
522
|
}
|
|
514
523
|
|
|
515
524
|
.TogglePasswordVisibility, .ToggleConfirmPasswordVisibility {
|
|
@@ -519,16 +528,16 @@
|
|
|
519
528
|
bottom: 55px;
|
|
520
529
|
&.InvalidToggle {
|
|
521
530
|
path, circle, rect {
|
|
522
|
-
fill: var(--
|
|
531
|
+
fill: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
|
|
523
532
|
}
|
|
524
533
|
}
|
|
525
534
|
path, circle, rect {
|
|
526
|
-
fill: var(--
|
|
535
|
+
fill: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
|
|
527
536
|
}
|
|
528
537
|
}
|
|
529
538
|
|
|
530
539
|
.InvalidInput {
|
|
531
|
-
color: var(--
|
|
540
|
+
color: var(--emw--color-error, var(--emw--color-error, #ed0909));
|
|
532
541
|
font-size: 10px;
|
|
533
542
|
position: absolute;
|
|
534
543
|
padding-top: 5px;
|
|
@@ -538,25 +547,25 @@
|
|
|
538
547
|
|
|
539
548
|
.ErrorMessage {
|
|
540
549
|
margin: 0 0 15px 0;
|
|
541
|
-
font-size: 12px;
|
|
542
|
-
color: var(--
|
|
550
|
+
font-size: var(--emw--font-size-x-small, 12px);
|
|
551
|
+
color: var(--emw--color-error, var(--emw--color-error, #ed0909));
|
|
543
552
|
}
|
|
544
553
|
|
|
545
554
|
.RegisterStepNext {
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
border:
|
|
549
|
-
|
|
555
|
+
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%));
|
|
556
|
+
border: 2px solid var(--emw--button-border-color, #0E5924);
|
|
557
|
+
border-radius: var(--emw--button-border-radius, 50px);
|
|
558
|
+
color: var(--emw--button-typography, var(--emw--button-text-color, #FFFFFF));
|
|
550
559
|
width: 100%;
|
|
551
560
|
height: 60px;
|
|
552
561
|
padding: 0;
|
|
553
562
|
text-transform: uppercase;
|
|
554
|
-
font-size:
|
|
563
|
+
font-size: var(--emw--font-size-medium, 16px);
|
|
555
564
|
cursor: pointer;
|
|
556
565
|
margin-top: 24px;
|
|
557
566
|
&[disabled] {
|
|
558
|
-
background: var(--
|
|
559
|
-
border: 1px solid var(--
|
|
567
|
+
background: var(--emw--color-gray-100, #E6E6E6);
|
|
568
|
+
border: 1px solid var(--emw--color-gray-150, #828282);
|
|
560
569
|
cursor: not-allowed;
|
|
561
570
|
}
|
|
562
571
|
}
|