@everymatrix/general-player-register-form 1.0.15 → 1.1.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.
Files changed (4) hide show
  1. package/dist/general-player-register-form.js +1 -1
  2. package/dist/general-player-register-form.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/GeneralPlayerRegisterForm.svelte +92 -58
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/general-player-register-form",
3
- "version": "1.0.15",
3
+ "version": "1.1.0",
4
4
  "main": "dist/general-player-register-form.js",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -36,5 +36,5 @@
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "0ee1d4bccc4964628711251119148f0a04ba10df"
39
+ "gitHead": "62036ada223f2b4f7b64d99a81ab2229ecba3cf1"
40
40
  }
package/src/GeneralPlayerRegisterForm.svelte CHANGED
@@ -24,12 +24,18 @@
24
24
  export let lang:string = '';
25
25
  export let licenseyears:string = '';
26
26
  export let disabledfields:string = '';
27
+ export let defaultoptions:string = '';
27
28
  export let dummydata:string = '';
28
29
  export let smsverification = 'false';
29
30
  export let simplepasswordvalidation:string = 'false';
30
31
  export let userroles:string = '';
32
+ export let clientstyling:string = '';
33
+ export let clientstylingurl:string = '';
31
34
  export let translationUrl:string = '';
32
35
 
36
+ let customStylingContainer:HTMLElement;
37
+ let displayNone:boolean = false;
38
+
33
39
  let isLoading:boolean = false;
34
40
 
35
41
  let disabledFieldsList:Array<string> = [];
@@ -386,6 +392,28 @@
386
392
  setLocale(lang);
387
393
  }
388
394
 
395
+ const setClientStyling = ():void => {
396
+ let sheet = document.createElement('style');
397
+ sheet.innerHTML = clientstyling;
398
+ customStylingContainer.appendChild(sheet);
399
+ }
400
+
401
+ const setClientStylingURL = ():void => {
402
+ displayNone = true;
403
+
404
+ let url:URL = new URL(clientstylingurl);
405
+ let cssFile:HTMLElement = document.createElement('style');
406
+
407
+ fetch(url.href)
408
+ .then((res:any) => res.text())
409
+ .then((data:any) => {
410
+ cssFile.innerHTML = data
411
+
412
+ setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
413
+ setTimeout(() => { displayNone = false; }, 500);
414
+ });
415
+ }
416
+
389
417
  onMount(() => {
390
418
  window.addEventListener('message', messageHandler, false);
391
419
 
@@ -401,69 +429,75 @@ $: cmsendpoint && lang && env && userroles && getCmsData();
401
429
  $: playerid && session;
402
430
  $: lang && setActiveLanguage();
403
431
  $: disabledfields && formatDisabledFields();
432
+ $: clientstyling && customStylingContainer && setClientStyling();
433
+ $: clientstylingurl && customStylingContainer && setClientStylingURL();
404
434
  $: translationUrl && setTranslationUrl();
405
435
  </script>
406
-
407
- {#if isLoading}
408
- <div class="ModalLoader" part="ModalLoader"></div>
409
- {:else}
410
- <div class="RegisterFormWrapper" part="RegisterFormWrapper">
411
- {#if !isMobile}
412
- <div class="RegisterFormImage" part="RegisterFormImage" style="background-image: url('{imagedesktop}')"></div>
413
- {/if}
414
- <div class="RegisterFormContainer {isMobile ? 'RegisterFormContainerMobile' : ''}" part="RegisterFormContainer {isMobile ? 'RegisterFormContainerMobile' : ''}">
415
- {#if showRegisterStepOne || showRegisterStepTwo || showRegisterStepThree}
416
- <div class="RegisterSteps" part="RegisterSteps" bind:this={scrollSteps}>
417
- <div class="RegisterFirstStepDash {showRegisterStepOne || (!showRegisterStepOne && showRegisterStepTwo) || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"
418
- part="RegisterFirstStepDash {showRegisterStepOne || (!showRegisterStepOne && showRegisterStepTwo) || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"></div>
419
- <div class="RegisterSecondStepDash {showRegisterStepTwo || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"
420
- part="RegisterSecondStepDash {showRegisterStepTwo || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"></div>
421
- <div class="RegisterThirdStepDash {showRegisterStepThree ? 'RegisterStepDashColor' : ''}" part="RegisterThirdStepDash {showRegisterStepThree ? 'RegisterStepDashColor' : ''}"></div>
422
- </div>
436
+ <div bind:this={customStylingContainer}>
437
+ {#if isLoading}
438
+ <div class="ModalLoader" part="ModalLoader"></div>
439
+ {:else}
440
+ <div class="RegisterFormWrapper" part="RegisterFormWrapper">
441
+ {#if !isMobile}
442
+ <div class="RegisterFormImage" part="RegisterFormImage" style="background-image: url('{imagedesktop}')"></div>
423
443
  {/if}
424
- {#if showRegisterStepOne}
425
- <div class="RegisterFormStep1" part="RegisterFormStep1">
426
- <general-player-register-form-step1 {lang} {disabledfields} {dummydata} {simplepasswordvalidation} />
427
- </div>
428
- {/if}
429
- {#if showRegisterStepTwo}
430
- <div class="RegisterFormStep2" part="RegisterFormStep2">
431
- <general-player-register-form-step2 {endpoint} {lang} {licenseyears} {disabledfields} {dummydata} />
432
- </div>
433
- {/if}
434
- {#if showRegisterStepThree}
435
- <div class="RegisterFormStep3" part="RegisterFormStep3">
436
- <general-player-register-form-step3 {userconsentsexist} {termsconditions} {smsoffers} {emailmarketing} {endpoint} {captchakey} {lang} {disabledfields} {dummydata} />
437
- </div>
438
- {/if}
439
- {#if smsverification && showSmsVerification}
440
- {#if !smsSendApiFailed}
441
- <general-player-sms-verification-form
442
- {endpoint}
443
- {session}
444
- {number}
445
- {playerid}
446
- tokenid={smstokenid}>
447
- </general-player-sms-verification-form>
448
- {:else}
449
- <p>
450
- We encountered an issue sending the sms to your number,
451
- you can verify your number while loging in
452
- </p>
444
+ <div class="RegisterFormContainer {isMobile ? 'RegisterFormContainerMobile' : ''}" part="RegisterFormContainer {isMobile ? 'RegisterFormContainerMobile' : ''}">
445
+ {#if showRegisterStepOne || showRegisterStepTwo || showRegisterStepThree}
446
+ <div class="RegisterSteps" part="RegisterSteps" bind:this={scrollSteps}>
447
+ <div class="RegisterFirstStepDash {showRegisterStepOne || (!showRegisterStepOne && showRegisterStepTwo) || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"
448
+ part="RegisterFirstStepDash {showRegisterStepOne || (!showRegisterStepOne && showRegisterStepTwo) || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"></div>
449
+ <div class="RegisterSecondStepDash {showRegisterStepTwo || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"
450
+ part="RegisterSecondStepDash {showRegisterStepTwo || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"></div>
451
+ <div class="RegisterThirdStepDash {showRegisterStepThree ? 'RegisterStepDashColor' : ''}" part="RegisterThirdStepDash {showRegisterStepThree ? 'RegisterStepDashColor' : ''}"></div>
452
+ </div>
453
453
  {/if}
454
- {/if}
455
- {#if showConfirmation}
456
- <div class="RegisterConfirmation" part="RegisterConfirmation">
457
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.95 51"><defs><style>.a{fill:#16ce16;}</style></defs><path class="a" d="M29.325,51,0,21.675l5.95-5.95,23.375,22.95L68,0l5.95,5.95Z"/></svg>
458
- <h2 class="RegisterConfirmationTitle" part="RegisterConfirmationTitle">{accountCreationTitle}</h2>
459
- <p class="RegisterConfirmationSubtitle" part="RegisterConfirmationSubtitle">{accountCreationSubTitle}</p>
460
- <p class="RegisterConfirmationNote" part="RegisterConfirmationNote">{accountCreationMessage}</p>
461
- <button class="RegisterConfirmationGoToLogin" part="RegisterConfirmationGoToLogin" on:click={switchToLogin}>{$_('registerForm.goToLoginButton')}</button>
462
- </div>
463
- {/if}
454
+ {#if showRegisterStepOne}
455
+ <div class="RegisterFormStep1" part="RegisterFormStep1">
456
+ <general-player-register-form-step1 {lang} {disabledfields} {defaultoptions} {dummydata} {simplepasswordvalidation} {clientstyling} {clientstylingurl} />
457
+ </div>
458
+ {/if}
459
+ {#if showRegisterStepTwo}
460
+ <div class="RegisterFormStep2" part="RegisterFormStep2">
461
+ <general-player-register-form-step2 {endpoint} {lang} {licenseyears} {disabledfields} {defaultoptions} {dummydata} {clientstyling} {clientstylingurl}/>
462
+ </div>
463
+ {/if}
464
+ {#if showRegisterStepThree}
465
+ <div class="RegisterFormStep3" part="RegisterFormStep3">
466
+ <general-player-register-form-step3 {userconsentsexist} {termsconditions} {smsoffers} {emailmarketing} {endpoint} {captchakey} {lang} {defaultoptions} {disabledfields} {dummydata} {clientstyling} {clientstylingurl}/>
467
+ </div>
468
+ {/if}
469
+ {#if smsverification && showSmsVerification}
470
+ {#if !smsSendApiFailed}
471
+ <general-player-sms-verification-form
472
+ {endpoint}
473
+ {session}
474
+ {number}
475
+ {playerid}
476
+ tokenid={smstokenid}
477
+ {clientstyling}
478
+ {clientstylingurl}
479
+ >
480
+ </general-player-sms-verification-form>
481
+ {:else}
482
+ <p>
483
+ We encountered an issue sending the sms to your number,
484
+ you can verify your number while loging in
485
+ </p>
486
+ {/if}
487
+ {/if}
488
+ {#if showConfirmation}
489
+ <div class="RegisterConfirmation" part="RegisterConfirmation">
490
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.95 51"><defs><style>.a{fill:#16ce16;}</style></defs><path class="a" d="M29.325,51,0,21.675l5.95-5.95,23.375,22.95L68,0l5.95,5.95Z"/></svg>
491
+ <h2 class="RegisterConfirmationTitle" part="RegisterConfirmationTitle">{accountCreationTitle}</h2>
492
+ <p class="RegisterConfirmationSubtitle" part="RegisterConfirmationSubtitle">{accountCreationSubTitle}</p>
493
+ <p class="RegisterConfirmationNote" part="RegisterConfirmationNote">{accountCreationMessage}</p>
494
+ <button class="RegisterConfirmationGoToLogin" part="RegisterConfirmationGoToLogin" on:click={switchToLogin}>{$_('registerForm.goToLoginButton')}</button>
495
+ </div>
496
+ {/if}
497
+ </div>
464
498
  </div>
465
- </div>
466
- {/if}
499
+ {/if}
500
+ </div>
467
501
 
468
502
  <style lang="scss">
469
503