@everymatrix/general-player-login-form 1.0.16 → 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-login-form.js +1 -1
  2. package/dist/general-player-login-form.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/GeneralPlayerLoginForm.svelte +89 -56
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/general-player-login-form",
3
- "version": "1.0.16",
3
+ "version": "1.1.0",
4
4
  "main": "dist/general-player-login-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": "526e9d4877d11a6372af0e39b2c9db7c8b640737"
39
+ "gitHead": "62036ada223f2b4f7b64d99a81ab2229ecba3cf1"
40
40
  }
package/src/GeneralPlayerLoginForm.svelte CHANGED
@@ -18,6 +18,8 @@
18
18
  export let lang:string = '';
19
19
  export let smsverification = 'false';
20
20
  export let simplepasswordvalidation:string = 'false';
21
+ export let clientstyling:string = '';
22
+ export let clientstylingurl:string = '';
21
23
  export let translationUrl:string = '';
22
24
 
23
25
  let playerId;
@@ -51,6 +53,9 @@
51
53
 
52
54
  let nativeCredentials:any = {};
53
55
 
56
+ let customStylingContainer:HTMLElement;
57
+ let displayNone:boolean = false;
58
+
54
59
  let regexValidators = {
55
60
  user: /^(?!(?:.*\d){9})(?=(?:.*[a-zA-Z]){4})^[a-zA-Z\d]*$/,
56
61
  email: /^[^<>()*{}=/|?`~[\]\\,;:\%#^\s@\"$&!@]+@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z0-9]+\.)+[a-zA-Z]{2,}))$/i,
@@ -227,6 +232,28 @@
227
232
  setLocale(lang);
228
233
  }
229
234
 
235
+ const setClientStyling = ():void => {
236
+ let sheet = document.createElement('style');
237
+ sheet.innerHTML = clientstyling;
238
+ customStylingContainer.appendChild(sheet);
239
+ }
240
+
241
+ const setClientStylingURL = ():void => {
242
+ displayNone = true;
243
+
244
+ let url:URL = new URL(clientstylingurl);
245
+ let cssFile:HTMLElement = document.createElement('style');
246
+
247
+ fetch(url.href)
248
+ .then((res:any) => res.text())
249
+ .then((data:any) => {
250
+ cssFile.innerHTML = data
251
+
252
+ setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
253
+ setTimeout(() => { displayNone = false; }, 500);
254
+ });
255
+ }
256
+
230
257
  onMount(async () => {
231
258
  window.addEventListener("message", messageHandler, false);
232
259
  window.postMessage({ type: "LoginRegisterModalActive" }, window.location.href);
@@ -269,6 +296,8 @@
269
296
 
270
297
  $: endpoint && lang && initialLoad();
271
298
  $: simplepasswordvalidation && verifyTypeOfPassword();
299
+ $: clientstyling && customStylingContainer && setClientStyling();
300
+ $: clientstylingurl && customStylingContainer && setClientStylingURL();
272
301
  $: translationUrl && setTranslationUrl();
273
302
  </script>
274
303
 
@@ -280,67 +309,71 @@
280
309
 
281
310
  <div class="g-recaptcha" data-sitekey="{captchakey}" />
282
311
 
283
- {#if isLoading}
284
- <div class="ModalLoaderWrapper" part="ModalLoaderWrapper">
285
- <div class="ModalLoader" part="ModalLoader"></div>
286
- </div>
287
- {:else}
288
- <div class="FormContainer {mobileView ? 'FormMobileContainer' : ''}" part="FormContainer {mobileView ? 'FormMobileContainer' : ''}">
289
- <div class="FormLeftSide" part="FormLeftSide">
290
- {#if startSmsValidation}
291
- <general-player-sms-verification-form
292
- {endpoint}
293
- {number}
294
- playerid={playerId}
295
- tokenid={smsTokenId}>
296
- </general-player-sms-verification-form>
297
- {:else}
298
- <div class="FormHeader" part="FormHeader">
299
- <h4 class="FormHeaderTitle" part="FormHeaderTitle">{$_('loginForm.loginTitle')}</h4>
300
- <p class="FormHeaderSubtitle" part="FormHeaderSubtitle">{$_('loginForm.loginSubtitle')} <span class="FormRegisterCallToAction" on:click={() => switchToRegister()}>{$_('loginForm.loginSubtitleRegister')}</span></p>
301
- </div>
302
- {#if waitingForCredentials}
303
- <p>Waiting for credentials</p>
312
+ <div bind:this={customStylingContainer}>
313
+ {#if isLoading}
314
+ <div class="ModalLoaderWrapper" part="ModalLoaderWrapper">
315
+ <div class="ModalLoader" part="ModalLoader"></div>
316
+ </div>
317
+ {:else}
318
+ <div class="FormContainer {mobileView ? 'FormMobileContainer' : ''}" part="FormContainer {mobileView ? 'FormMobileContainer' : ''}">
319
+ <div class="FormLeftSide" part="FormLeftSide">
320
+ {#if startSmsValidation}
321
+ <general-player-sms-verification-form
322
+ {endpoint}
323
+ {number}
324
+ {clientstyling}
325
+ {clientstylingurl}
326
+ playerid={playerId}
327
+ tokenid={smsTokenId}>
328
+ </general-player-sms-verification-form>
304
329
  {:else}
305
- <div class="FormContent" part="FormContent">
306
- <form id="signin" >
307
- <div class="UserContainer {invalidName ? 'InvalidField' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
308
- <label for="username">{$_('loginForm.loginUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
309
- <input bind:value={userValue} on:keyup={validateUserName} type="text" id="email" name="email" autocomplete="username email" required/>
310
- {#if invalidName}
311
- <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginUsernameError')}</p>
312
- {/if}
313
- </div>
314
- <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}">
315
- <label for="current-password">{$_('loginForm.loginPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
316
- <input bind:value={userPassword} on:keyup={validatePassword} type="password" name="current-password" id="current-password" bind:this={passwordVisibilityToggle} autocomplete="current-password" aria-describedby="password-constraints" required/>
317
- {#if isPasswordVisible}
318
- <svg on:click={() => hidePassword()} class="TogglePasswordVisibility" part="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-color-contrast, #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>
319
- {:else}
320
- <svg on:click={() => showPassword()} class="TogglePasswordVisibility" part="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-color-contrast, #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>
321
- {/if}
322
- {#if invalidPassword && simplepasswordvalidation !== 'true'}
323
- <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginPasswordError')}</p>
324
- {/if}
325
- {#if invalidPassword && simplepasswordvalidation === 'true'}
326
- <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginSimplePasswordError')}</p>
327
- {/if}
328
- </div>
329
- {#if errorMessage}
330
- <p class="ErrorMessage" part="ErrorMessage">{errorMessage}</p>
331
- {/if}
332
- <button class="SignInButton" part="SignInButton" on:click={(e) => submitLoginForm(e)} disabled={isFormDataInvalid} id="signin-button">{$_('loginForm.loginButton')}</button>
333
- <button class="ForgotPasswordButton" part="ForgotPasswordButton" on:click={() => switchToForgotPassword()}>{$_('loginForm.loginForgotPassword')}</button>
334
- </form>
330
+ <div class="FormHeader" part="FormHeader">
331
+ <h4 class="FormHeaderTitle" part="FormHeaderTitle">{$_('loginForm.loginTitle')}</h4>
332
+ <p class="FormHeaderSubtitle" part="FormHeaderSubtitle">{$_('loginForm.loginSubtitle')} <span class="FormRegisterCallToAction" on:click={() => switchToRegister()}>{$_('loginForm.loginSubtitleRegister')}</span></p>
335
333
  </div>
334
+ {#if waitingForCredentials}
335
+ <p>Waiting for credentials</p>
336
+ {:else}
337
+ <div class="FormContent" part="FormContent">
338
+ <form id="signin" >
339
+ <div class="UserContainer {invalidName ? 'InvalidField' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
340
+ <label for="username">{$_('loginForm.loginUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
341
+ <input bind:value={userValue} on:keyup={validateUserName} type="text" id="email" name="email" autocomplete="username email" required/>
342
+ {#if invalidName}
343
+ <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginUsernameError')}</p>
344
+ {/if}
345
+ </div>
346
+ <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}">
347
+ <label for="current-password">{$_('loginForm.loginPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
348
+ <input bind:value={userPassword} on:keyup={validatePassword} type="password" name="current-password" id="current-password" bind:this={passwordVisibilityToggle} autocomplete="current-password" aria-describedby="password-constraints" required/>
349
+ {#if isPasswordVisible}
350
+ <svg on:click={() => hidePassword()} class="TogglePasswordVisibility" part="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-color-contrast, #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>
351
+ {:else}
352
+ <svg on:click={() => showPassword()} class="TogglePasswordVisibility" part="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-color-contrast, #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>
353
+ {/if}
354
+ {#if invalidPassword && simplepasswordvalidation !== 'true'}
355
+ <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginPasswordError')}</p>
356
+ {/if}
357
+ {#if invalidPassword && simplepasswordvalidation === 'true'}
358
+ <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginSimplePasswordError')}</p>
359
+ {/if}
360
+ </div>
361
+ {#if errorMessage}
362
+ <p class="ErrorMessage" part="ErrorMessage">{errorMessage}</p>
363
+ {/if}
364
+ <button class="SignInButton" part="SignInButton" on:click={(e) => submitLoginForm(e)} disabled={isFormDataInvalid} id="signin-button">{$_('loginForm.loginButton')}</button>
365
+ <button class="ForgotPasswordButton" part="ForgotPasswordButton" on:click={() => switchToForgotPassword()}>{$_('loginForm.loginForgotPassword')}</button>
366
+ </form>
367
+ </div>
368
+ {/if}
336
369
  {/if}
370
+ </div>
371
+ {#if !mobileView}
372
+ <div class="FormRightSide" part="FormRightSide" style="background-image: url('{imagedesktop}')"></div>
337
373
  {/if}
338
374
  </div>
339
- {#if !mobileView}
340
- <div class="FormRightSide" part="FormRightSide" style="background-image: url('{imagedesktop}')"></div>
341
- {/if}
342
- </div>
343
- {/if}
375
+ {/if}
376
+ </div>
344
377
 
345
378
  <style lang="scss">
346
379