@everymatrix/general-player-register-form-step1 1.0.16 → 1.1.1
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.1.1",
|
|
4
4
|
"main": "dist/general-player-register-form-step1.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": "
|
|
39
|
+
"gitHead": "4324ea4b38266eb153f1ab89685cdf0f9bcade16"
|
|
40
40
|
}
|
|
@@ -8,7 +8,10 @@
|
|
|
8
8
|
export let lang:string = '';
|
|
9
9
|
// Possible disabled fields: ['email', 'username', 'name', 'password', 'confirmPassword', 'securityQuestion', 'securityAnswer']
|
|
10
10
|
export let disabledfields:string = '';
|
|
11
|
+
export let defaultoptions:string = '';
|
|
11
12
|
export let simplepasswordvalidation:string = 'false';
|
|
13
|
+
export let clientstyling:string = '';
|
|
14
|
+
export let clientstylingurl:string = '';
|
|
12
15
|
export let translationUrl:string = '';
|
|
13
16
|
|
|
14
17
|
let invalidEmail:boolean = false;
|
|
@@ -35,6 +38,9 @@
|
|
|
35
38
|
|
|
36
39
|
let isValid:boolean = false;
|
|
37
40
|
|
|
41
|
+
let customStylingContainer:HTMLElement;
|
|
42
|
+
let displayNone:boolean = false;
|
|
43
|
+
|
|
38
44
|
let regexValidators:any = {
|
|
39
45
|
user: /^(?!(?:.*\d){9})(?=(?:.*[a-zA-Z]){4})^[a-zA-Z\d]*$/,
|
|
40
46
|
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,
|
|
@@ -259,6 +265,28 @@
|
|
|
259
265
|
setLocale(lang);
|
|
260
266
|
}
|
|
261
267
|
|
|
268
|
+
const setClientStyling = ():void => {
|
|
269
|
+
let sheet = document.createElement('style');
|
|
270
|
+
sheet.innerHTML = clientstyling;
|
|
271
|
+
customStylingContainer.appendChild(sheet);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
const setClientStylingURL = ():void => {
|
|
275
|
+
displayNone = true;
|
|
276
|
+
|
|
277
|
+
let url:URL = new URL(clientstylingurl);
|
|
278
|
+
let cssFile:HTMLElement = document.createElement('style');
|
|
279
|
+
|
|
280
|
+
fetch(url.href)
|
|
281
|
+
.then((res:any) => res.text())
|
|
282
|
+
.then((data:any) => {
|
|
283
|
+
cssFile.innerHTML = data
|
|
284
|
+
|
|
285
|
+
setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
|
|
286
|
+
setTimeout(() => { displayNone = false; }, 500);
|
|
287
|
+
});
|
|
288
|
+
}
|
|
289
|
+
|
|
262
290
|
onMount(() => {
|
|
263
291
|
window.addEventListener('message', messageHandler, false);
|
|
264
292
|
|
|
@@ -270,72 +298,75 @@
|
|
|
270
298
|
$: lang && setActiveLanguage();
|
|
271
299
|
$: disabledfields && formatDisabledFields();
|
|
272
300
|
$: simplepasswordvalidation && verifyTypeOfPassword();
|
|
301
|
+
$: clientstyling && customStylingContainer && setClientStyling();
|
|
302
|
+
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
273
303
|
$: translationUrl && setTranslationUrl();
|
|
274
304
|
</script>
|
|
275
305
|
|
|
276
|
-
<div
|
|
277
|
-
<
|
|
278
|
-
|
|
279
|
-
</
|
|
280
|
-
<form class="RegisterFormContent" part="RegisterFormContent">
|
|
281
|
-
<div class="EmailContainer {invalidEmail ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('email') >= 0 ? 'Hidden' : ''}" part="EmailContainer {invalidEmail ? 'InvalidField' : ''}" >
|
|
282
|
-
<label for="Email">{$_('registerFormStep1.registerEmail')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
283
|
-
<input bind:value={userEmail} on:blur={validateEmail} type="text" id="Email" />
|
|
284
|
-
{#if invalidEmail}
|
|
285
|
-
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerEmailError')}</p>
|
|
286
|
-
{/if}
|
|
287
|
-
</div>
|
|
288
|
-
<div class="UserContainer {invalidName ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('username') >= 0 ? 'Hidden' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
|
|
289
|
-
<label for="UserName">{$_('registerFormStep1.registerUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
290
|
-
<input bind:value={userValue} on:blur={validateUserName} type="text" id="UserName" autocomplete="username"/>
|
|
291
|
-
{#if invalidName}
|
|
292
|
-
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerUsernameError')}</p>
|
|
293
|
-
{/if}
|
|
294
|
-
</div>
|
|
295
|
-
<div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('password') >= 0 ? 'Hidden' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" hidden={disabledFieldsList?.indexOf('password') >= 0}>
|
|
296
|
-
<label for="Password">{$_('registerFormStep1.registerPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
297
|
-
<input bind:value={userPassword} on:blur={validatePassword} name="new-password" type="password" id="new-password" autocomplete="new-password" bind:this={passwordVisibilityToggle} aria-describedby="password-constraints" />
|
|
298
|
-
{#if isPasswordVisible}
|
|
299
|
-
<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>
|
|
300
|
-
{:else}
|
|
301
|
-
<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>
|
|
302
|
-
{/if}
|
|
303
|
-
{#if invalidPassword && simplepasswordvalidation !== 'true'}
|
|
304
|
-
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerPasswordError')}</p>
|
|
305
|
-
{/if}
|
|
306
|
-
{#if invalidPassword && simplepasswordvalidation === 'true'}
|
|
307
|
-
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSimplePasswordError')}</p>
|
|
308
|
-
{/if}
|
|
309
|
-
</div>
|
|
310
|
-
<div class="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('confirmPassword') >= 0 ? 'Hidden' : ''}" part="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}">
|
|
311
|
-
<label for="ConfirmPassword">{$_('registerFormStep1.registerConfirmPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
312
|
-
<input bind:value={confirmUserPassword} on:blur={validateConfirmPassword} type="password" id="ConfirmPassword" bind:this={confirmPasswordVisibilityToggle} />
|
|
313
|
-
{#if isConfirmPasswordVisible}
|
|
314
|
-
<svg on:click={() => hideConfirmPassword()} class="ToggleConfirmPasswordVisibility" part="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(--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>
|
|
315
|
-
{:else}
|
|
316
|
-
<svg on:click={() => showConfirmPassword()} class="ToggleConfirmPasswordVisibility" part="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(--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>
|
|
317
|
-
{/if}
|
|
318
|
-
{#if invalidConfirmPassword}
|
|
319
|
-
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerConfirmPasswordError')}</p>
|
|
320
|
-
{/if}
|
|
306
|
+
<div bind:this={customStylingContainer}>
|
|
307
|
+
<div class="RegisterFormHeader" part="RegisterFormHeader">
|
|
308
|
+
<h2 class="RegisterFormTitle" part="RegisterFormTitle">{$_('registerFormStep1.registerTitle')}</h2>
|
|
309
|
+
<p class="RegisterFormSubtitle" part="RegisterFormSubtitle">{$_('registerFormStep1.registerSubtitle')} <span class="FormLoginCallToAction" on:click={() => switchToLogin()}>{$_('registerFormStep1.registerSubtitleLogin')}</span></p>
|
|
321
310
|
</div>
|
|
322
|
-
<
|
|
323
|
-
<
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
<
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
311
|
+
<form class="RegisterFormContent" part="RegisterFormContent">
|
|
312
|
+
<div class="EmailContainer {invalidEmail ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('email') >= 0 ? 'Hidden' : ''}" part="EmailContainer {invalidEmail ? 'InvalidField' : ''}" >
|
|
313
|
+
<label for="Email">{$_('registerFormStep1.registerEmail')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
314
|
+
<input bind:value={userEmail} on:blur={validateEmail} type="text" id="Email" />
|
|
315
|
+
{#if invalidEmail}
|
|
316
|
+
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerEmailError')}</p>
|
|
317
|
+
{/if}
|
|
318
|
+
</div>
|
|
319
|
+
<div class="UserContainer {invalidName ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('username') >= 0 ? 'Hidden' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
|
|
320
|
+
<label for="UserName">{$_('registerFormStep1.registerUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
321
|
+
<input bind:value={userValue} on:blur={validateUserName} type="text" id="UserName" autocomplete="username"/>
|
|
322
|
+
{#if invalidName}
|
|
323
|
+
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerUsernameError')}</p>
|
|
324
|
+
{/if}
|
|
325
|
+
</div>
|
|
326
|
+
<div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('password') >= 0 ? 'Hidden' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" hidden={disabledFieldsList?.indexOf('password') >= 0}>
|
|
327
|
+
<label for="Password">{$_('registerFormStep1.registerPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
328
|
+
<input bind:value={userPassword} on:blur={validatePassword} name="new-password" type="password" id="new-password" autocomplete="new-password" bind:this={passwordVisibilityToggle} aria-describedby="password-constraints" />
|
|
329
|
+
{#if isPasswordVisible}
|
|
330
|
+
<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>
|
|
331
|
+
{:else}
|
|
332
|
+
<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>
|
|
333
|
+
{/if}
|
|
334
|
+
{#if invalidPassword && simplepasswordvalidation !== 'true'}
|
|
335
|
+
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerPasswordError')}</p>
|
|
336
|
+
{/if}
|
|
337
|
+
{#if invalidPassword && simplepasswordvalidation === 'true'}
|
|
338
|
+
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSimplePasswordError')}</p>
|
|
339
|
+
{/if}
|
|
340
|
+
</div>
|
|
341
|
+
<div class="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('confirmPassword') >= 0 ? 'Hidden' : ''}" part="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}">
|
|
342
|
+
<label for="ConfirmPassword">{$_('registerFormStep1.registerConfirmPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
343
|
+
<input bind:value={confirmUserPassword} on:blur={validateConfirmPassword} type="password" id="ConfirmPassword" bind:this={confirmPasswordVisibilityToggle} />
|
|
344
|
+
{#if isConfirmPasswordVisible}
|
|
345
|
+
<svg on:click={() => hideConfirmPassword()} class="ToggleConfirmPasswordVisibility" part="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(--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>
|
|
346
|
+
{:else}
|
|
347
|
+
<svg on:click={() => showConfirmPassword()} class="ToggleConfirmPasswordVisibility" part="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(--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>
|
|
348
|
+
{/if}
|
|
349
|
+
{#if invalidConfirmPassword}
|
|
350
|
+
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerConfirmPasswordError')}</p>
|
|
351
|
+
{/if}
|
|
352
|
+
</div>
|
|
353
|
+
<div class="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('securityQuestion') >= 0 ? 'Hidden' : ''}" part="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}">
|
|
354
|
+
<label for="SecurityQuestion">{$_('registerFormStep1.registerSecurityQuestion')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
355
|
+
<input bind:value={securityQuestion} on:blur={validateSecurityQuestion} type="text" id="SecurityQuestion" />
|
|
356
|
+
{#if invalidSecurityQuestion}
|
|
357
|
+
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSecurityQuestionError')}</p>
|
|
358
|
+
{/if}
|
|
359
|
+
</div>
|
|
360
|
+
<div class="SecurityAnswerContainer {invalidSecurityAnswer ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('securityAnswer') >= 0 ? 'Hidden' : ''}" part="SecurityAnswerContainer {invalidSecurityAnswer ? 'InvalidField' : ''}">
|
|
361
|
+
<label for="SecurityAnswer">{$_('registerFormStep1.registerSecurityAnswer')}:<span class="FormRequired" part="FormRequired">*</span></label>
|
|
362
|
+
<input bind:value={securityAnswer} on:keyup={validateSecurityAnswer} type="text" id="SecurityAnswer" />
|
|
363
|
+
{#if invalidSecurityAnswer}
|
|
364
|
+
<p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSecurityAnswerError')}</p>
|
|
365
|
+
{/if}
|
|
366
|
+
</div>
|
|
367
|
+
<button class="RegisterStepNext" part="RegisterStepNext" disabled={!isValid} on:click={(e) => goNext(e)}>{$_('registerFormStep1.registerNext')}</button>
|
|
368
|
+
</form>
|
|
369
|
+
</div>
|
|
339
370
|
|
|
340
371
|
<style lang="scss">
|
|
341
372
|
|