@everymatrix/general-player-login-form 0.0.165 → 0.0.169

package/dist/general-player-login-form.js

@@ -354,6 +354,10 @@
         else
             dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
     }
+    function prop_dev(node, property, value) {
+        node[property] = value;
+        dispatch_dev('SvelteDOMSetProperty', { node, property, value });
+    }
     function set_data_dev(text, data) {
         data = '' + data;
         if (text.wholeText === data)
@@ -4425,7 +4429,7 @@
     /* src/GeneralPlayerLoginForm.svelte generated by Svelte v3.37.0 */
     const file = "src/GeneralPlayerLoginForm.svelte";
 
-    // (134:0) {:else}
+    // (137:0) {:else}
     function create_else_block(ctx) {
     	let div5;
     	let div4;
@@ -4458,6 +4462,7 @@
     	let t15;
     	let t16;
     	let button0;
+    	let t17;
     	let t18;
     	let button1;
     	let t20;
@@ -4516,48 +4521,49 @@
     			if (if_block3) if_block3.c();
     			t16 = space();
     			button0 = element("button");
-    			button0.textContent = "Sign In";
+    			t17 = text("Sign In");
     			t18 = space();
     			button1 = element("button");
     			button1.textContent = "I forgot my password";
     			t20 = space();
     			if (if_block4) if_block4.c();
     			attr_dev(h4, "class", "FormHeaderTitle");
-    			add_location(h4, file, 137, 8, 4492);
+    			add_location(h4, file, 140, 8, 4709);
     			attr_dev(span0, "class", "FormRegisterCallToAction");
-    			add_location(span0, file, 138, 65, 4598);
+    			add_location(span0, file, 141, 65, 4815);
     			attr_dev(p, "class", "FormHeaderSubtitle");
-    			add_location(p, file, 138, 8, 4541);
+    			add_location(p, file, 141, 8, 4758);
     			attr_dev(div0, "class", "FormHeader");
-    			add_location(div0, file, 136, 6, 4459);
+    			add_location(div0, file, 139, 6, 4676);
     			attr_dev(span1, "class", "FormRequired");
-    			add_location(span1, file, 142, 50, 4864);
+    			add_location(span1, file, 145, 50, 5081);
     			attr_dev(label0, "for", "UserName");
-    			add_location(label0, file, 142, 10, 4824);
+    			add_location(label0, file, 145, 10, 5041);
     			attr_dev(input0, "type", "text");
     			attr_dev(input0, "id", "UserName");
-    			add_location(input0, file, 143, 10, 4918);
+    			add_location(input0, file, 146, 10, 5135);
     			attr_dev(div1, "class", div1_class_value = "UserContainer " + (/*invalidName*/ ctx[4] ? "InvalidField" : ""));
-    			add_location(div1, file, 141, 8, 4750);
+    			add_location(div1, file, 144, 8, 4967);
     			attr_dev(span2, "class", "FormRequired");
-    			add_location(span2, file, 149, 41, 5355);
+    			add_location(span2, file, 152, 41, 5572);
     			attr_dev(label1, "for", "Password");
-    			add_location(label1, file, 149, 10, 5324);
+    			add_location(label1, file, 152, 10, 5541);
     			attr_dev(input1, "type", "password");
     			attr_dev(input1, "id", "Password");
-    			add_location(input1, file, 150, 10, 5409);
+    			add_location(input1, file, 153, 10, 5626);
     			attr_dev(div2, "class", div2_class_value = "PasswordContainer " + (/*invalidPassword*/ ctx[5] ? "InvalidField" : ""));
-    			add_location(div2, file, 148, 8, 5242);
-    			attr_dev(button0, "class", "SingInButton");
-    			add_location(button0, file, 163, 8, 8750);
+    			add_location(div2, file, 151, 8, 5459);
+    			attr_dev(button0, "class", "SignInButton");
+    			button0.disabled = /*isFormDataInvalid*/ ctx[10];
+    			add_location(button0, file, 166, 8, 8967);
     			attr_dev(button1, "class", "ForgotPasswordButton");
-    			add_location(button1, file, 164, 8, 8839);
+    			add_location(button1, file, 167, 8, 9085);
     			attr_dev(div3, "class", "FormContent");
-    			add_location(div3, file, 140, 6, 4716);
+    			add_location(div3, file, 143, 6, 4933);
     			attr_dev(div4, "class", "FormLeftSide");
-    			add_location(div4, file, 135, 4, 4426);
+    			add_location(div4, file, 138, 4, 4643);
     			attr_dev(div5, "class", div5_class_value = "FormContainer " + (/*mobileView*/ ctx[1] ? "FormMobileContainer" : ""));
-    			add_location(div5, file, 134, 2, 4352);
+    			add_location(div5, file, 137, 2, 4569);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div5, anchor);
@@ -4587,7 +4593,7 @@
     			append_dev(div2, t12);
     			append_dev(div2, input1);
     			set_input_value(input1, /*userPassword*/ ctx[3]);
-    			/*input1_binding*/ ctx[20](input1);
+    			/*input1_binding*/ ctx[21](input1);
     			append_dev(div2, t13);
     			if_block1.m(div2, null);
     			append_dev(div2, t14);
@@ -4596,6 +4602,7 @@
     			if (if_block3) if_block3.m(div3, null);
     			append_dev(div3, t16);
     			append_dev(div3, button0);
+    			append_dev(button0, t17);
     			append_dev(div3, t18);
     			append_dev(div3, button1);
     			append_dev(div5, t20);
@@ -4603,13 +4610,13 @@
 
     			if (!mounted) {
     				dispose = [
-    					listen_dev(span0, "click", /*click_handler*/ ctx[17], false, false, false),
-    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[18]),
-    					listen_dev(input0, "blur", /*validateUserName*/ ctx[15], false, false, false),
-    					listen_dev(input1, "input", /*input1_input_handler*/ ctx[19]),
-    					listen_dev(input1, "blur", /*validatePassword*/ ctx[16], false, false, false),
-    					listen_dev(button0, "click", /*click_handler_3*/ ctx[23], false, false, false),
-    					listen_dev(button1, "click", /*click_handler_4*/ ctx[24], false, false, false)
+    					listen_dev(span0, "click", /*click_handler*/ ctx[18], false, false, false),
+    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[19]),
+    					listen_dev(input0, "blur", /*validateUserName*/ ctx[16], false, false, false),
+    					listen_dev(input1, "input", /*input1_input_handler*/ ctx[20]),
+    					listen_dev(input1, "blur", /*validatePassword*/ ctx[17], false, false, false),
+    					listen_dev(button0, "click", /*click_handler_3*/ ctx[24], false, false, false),
+    					listen_dev(button1, "click", /*click_handler_4*/ ctx[25], false, false, false)
     				];
 
     				mounted = true;
@@ -4679,6 +4686,10 @@
     				if_block3 = null;
     			}
 
+    			if (dirty[0] & /*isFormDataInvalid*/ 1024) {
+    				prop_dev(button0, "disabled", /*isFormDataInvalid*/ ctx[10]);
+    			}
+
     			if (!/*mobileView*/ ctx[1]) {
     				if (if_block4) {
     					if_block4.p(ctx, dirty);
@@ -4699,7 +4710,7 @@
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(div5);
     			if (if_block0) if_block0.d();
-    			/*input1_binding*/ ctx[20](null);
+    			/*input1_binding*/ ctx[21](null);
     			if_block1.d();
     			if (if_block2) if_block2.d();
     			if (if_block3) if_block3.d();
@@ -4713,14 +4724,14 @@
     		block,
     		id: create_else_block.name,
     		type: "else",
-    		source: "(134:0) {:else}",
+    		source: "(137:0) {:else}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (132:0) {#if isLoading}
+    // (135:0) {#if isLoading}
     function create_if_block(ctx) {
     	let div;
 
@@ -4728,7 +4739,7 @@
     		c: function create() {
     			div = element("div");
     			attr_dev(div, "class", "ModalLoader");
-    			add_location(div, file, 132, 2, 4310);
+    			add_location(div, file, 135, 2, 4527);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div, anchor);
@@ -4743,14 +4754,14 @@
     		block,
     		id: create_if_block.name,
     		type: "if",
-    		source: "(132:0) {#if isLoading}",
+    		source: "(135:0) {#if isLoading}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (145:10) {#if invalidName}
+    // (148:10) {#if invalidName}
     function create_if_block_5(ctx) {
     	let p;
 
@@ -4759,7 +4770,7 @@
     			p = element("p");
     			p.textContent = "Name must be at least 2 characters long, and contain no special characters. Email should contain '@' and a 2-3 letter long domain.";
     			attr_dev(p, "class", "InvalidInput");
-    			add_location(p, file, 145, 12, 5044);
+    			add_location(p, file, 148, 12, 5261);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -4773,14 +4784,14 @@
     		block,
     		id: create_if_block_5.name,
     		type: "if",
-    		source: "(145:10) {#if invalidName}",
+    		source: "(148:10) {#if invalidName}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (154:10) {:else}
+    // (157:10) {:else}
     function create_else_block_1(ctx) {
     	let svg;
     	let defs;
@@ -4801,26 +4812,26 @@
     			g = svg_element("g");
     			path = svg_element("path");
     			circle = svg_element("circle");
-    			add_location(style, file, 154, 178, 7465);
-    			add_location(defs, file, 154, 172, 7459);
+    			add_location(style, file, 157, 178, 7682);
+    			add_location(defs, file, 157, 172, 7676);
     			attr_dev(path, "class", "a");
     			attr_dev(path, "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");
     			attr_dev(path, "transform", "translate(0)");
-    			add_location(path, file, 154, 259, 7546);
+    			add_location(path, file, 157, 259, 7763);
     			attr_dev(circle, "class", "a");
     			attr_dev(circle, "cx", "2.779");
     			attr_dev(circle, "cy", "2.779");
     			attr_dev(circle, "r", "2.779");
     			attr_dev(circle, "transform", "translate(20.827 30.303)");
-    			add_location(circle, file, 154, 1029, 8316);
+    			add_location(circle, file, 157, 1029, 8533);
     			attr_dev(g, "transform", "translate(-14.185 -27.832)");
-    			add_location(g, file, 154, 217, 7504);
+    			add_location(g, file, 157, 217, 7721);
     			attr_dev(svg, "class", "TogglePasswordVisibility");
     			attr_dev(svg, "xmlns", "http://www.w3.org/2000/svg");
     			attr_dev(svg, "width", "18.843");
     			attr_dev(svg, "height", "10.5");
     			attr_dev(svg, "viewBox", "0 0 18.843 10.5");
-    			add_location(svg, file, 154, 12, 7299);
+    			add_location(svg, file, 157, 12, 7516);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, svg, anchor);
@@ -4832,7 +4843,7 @@
     			append_dev(g, circle);
 
     			if (!mounted) {
-    				dispose = listen_dev(svg, "click", /*click_handler_2*/ ctx[22], false, false, false);
+    				dispose = listen_dev(svg, "click", /*click_handler_2*/ ctx[23], false, false, false);
     				mounted = true;
     			}
     		},
@@ -4848,14 +4859,14 @@
     		block,
     		id: create_else_block_1.name,
     		type: "else",
-    		source: "(154:10) {:else}",
+    		source: "(157:10) {:else}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (152:10) {#if isPasswordVisible}
+    // (155:10) {#if isPasswordVisible}
     function create_if_block_4(ctx) {
     	let svg;
     	let defs;
@@ -4888,48 +4899,48 @@
     			path2 = svg_element("path");
     			path3 = svg_element("path");
     			rect = svg_element("rect");
-    			add_location(style, file, 152, 182, 5755);
-    			add_location(defs, file, 152, 176, 5749);
+    			add_location(style, file, 155, 182, 5972);
+    			add_location(defs, file, 155, 176, 5966);
     			attr_dev(circle, "class", "a");
     			attr_dev(circle, "cx", "0.05");
     			attr_dev(circle, "cy", "0.05");
     			attr_dev(circle, "r", "0.05");
     			attr_dev(circle, "transform", "translate(121.017 31.148)");
-    			add_location(circle, file, 152, 264, 5837);
+    			add_location(circle, file, 155, 264, 6054);
     			attr_dev(path0, "class", "a");
     			attr_dev(path0, "d", "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z");
     			attr_dev(path0, "transform", "translate(-142.164 -39.123)");
-    			add_location(path0, file, 152, 390, 5963);
+    			add_location(path0, file, 155, 390, 6180);
     			attr_dev(path1, "class", "a");
     			attr_dev(path1, "d", "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z");
     			attr_dev(path1, "transform", "translate(-136.413 -42.068)");
-    			add_location(path1, file, 152, 498, 6071);
+    			add_location(path1, file, 155, 498, 6288);
     			attr_dev(g0, "transform", "translate(117.499 27.37)");
-    			add_location(g0, file, 152, 350, 5923);
+    			add_location(g0, file, 155, 350, 6140);
     			attr_dev(path2, "class", "a");
     			attr_dev(path2, "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");
     			attr_dev(path2, "transform", "translate(-110.856 -33.157)");
-    			add_location(path2, file, 152, 649, 6222);
+    			add_location(path2, file, 155, 649, 6439);
     			attr_dev(path3, "class", "a");
     			attr_dev(path3, "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");
     			attr_dev(path3, "transform", "translate(-130.743 -29.617)");
-    			add_location(path3, file, 152, 1108, 6681);
+    			add_location(path3, file, 155, 1108, 6898);
     			attr_dev(g1, "transform", "translate(110.856 24.899)");
-    			add_location(g1, file, 152, 608, 6181);
+    			add_location(g1, file, 155, 608, 6398);
     			attr_dev(rect, "class", "a");
     			attr_dev(rect, "width", "0.972");
     			attr_dev(rect, "height", "15.861");
     			attr_dev(rect, "rx", "0.486");
     			attr_dev(rect, "transform", "translate(114.827 23.858) rotate(-39.315)");
-    			add_location(rect, file, 152, 1573, 7146);
+    			add_location(rect, file, 155, 1573, 7363);
     			attr_dev(g2, "transform", "translate(-110.856 -23.242)");
-    			add_location(g2, file, 152, 221, 5794);
+    			add_location(g2, file, 155, 221, 6011);
     			attr_dev(svg, "class", "TogglePasswordVisibility");
     			attr_dev(svg, "xmlns", "http://www.w3.org/2000/svg");
     			attr_dev(svg, "width", "18.844");
     			attr_dev(svg, "height", "12.887");
     			attr_dev(svg, "viewBox", "0 0 18.844 12.887");
-    			add_location(svg, file, 152, 12, 5585);
+    			add_location(svg, file, 155, 12, 5802);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, svg, anchor);
@@ -4947,7 +4958,7 @@
     			append_dev(g2, rect);
 
     			if (!mounted) {
-    				dispose = listen_dev(svg, "click", /*click_handler_1*/ ctx[21], false, false, false);
+    				dispose = listen_dev(svg, "click", /*click_handler_1*/ ctx[22], false, false, false);
     				mounted = true;
     			}
     		},
@@ -4963,14 +4974,14 @@
     		block,
     		id: create_if_block_4.name,
     		type: "if",
-    		source: "(152:10) {#if isPasswordVisible}",
+    		source: "(155:10) {#if isPasswordVisible}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (157:10) {#if invalidPassword}
+    // (160:10) {#if invalidPassword}
     function create_if_block_3(ctx) {
     	let p;
 
@@ -4979,7 +4990,7 @@
     			p = element("p");
     			p.textContent = "Password must be 8-20 characters long, and contain at least 1 uppercase letter, 1 number and 1 special character.";
     			attr_dev(p, "class", "InvalidInput");
-    			add_location(p, file, 157, 12, 8475);
+    			add_location(p, file, 160, 12, 8692);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -4993,14 +5004,14 @@
     		block,
     		id: create_if_block_3.name,
     		type: "if",
-    		source: "(157:10) {#if invalidPassword}",
+    		source: "(160:10) {#if invalidPassword}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (161:8) {#if errorMessage}
+    // (164:8) {#if errorMessage}
     function create_if_block_2(ctx) {
     	let p;
     	let t;
@@ -5010,7 +5021,7 @@
     			p = element("p");
     			t = text(/*errorMessage*/ ctx[6]);
     			attr_dev(p, "class", "ErrorMessage");
-    			add_location(p, file, 161, 10, 8685);
+    			add_location(p, file, 164, 10, 8902);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -5028,14 +5039,14 @@
     		block,
     		id: create_if_block_2.name,
     		type: "if",
-    		source: "(161:8) {#if errorMessage}",
+    		source: "(164:8) {#if errorMessage}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (176:4) {#if !mobileView}
+    // (171:4) {#if !mobileView}
     function create_if_block_1(ctx) {
     	let div;
 
@@ -5044,7 +5055,7 @@
     			div = element("div");
     			attr_dev(div, "class", "FormRightSide");
     			set_style(div, "background-image", "url('" + /*imagedesktop*/ ctx[0] + "')");
-    			add_location(div, file, 176, 6, 9425);
+    			add_location(div, file, 171, 6, 9246);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div, anchor);
@@ -5063,7 +5074,7 @@
     		block,
     		id: create_if_block_1.name,
     		type: "if",
-    		source: "(176:4) {#if !mobileView}",
+    		source: "(171:4) {#if !mobileView}",
     		ctx
     	});
 
@@ -5098,10 +5109,10 @@
     			if (script.src !== (script_src_value = "//www.google.com/recaptcha/api.js?render=" + captchaKey)) attr_dev(script, "src", script_src_value);
     			script.async = true;
     			script.defer = true;
-    			add_location(script, file, 127, 2, 4130);
+    			add_location(script, file, 130, 2, 4347);
     			attr_dev(div, "class", "g-recaptcha");
     			attr_dev(div, "data-sitekey", captchaKey);
-    			add_location(div, file, 130, 0, 4236);
+    			add_location(div, file, 133, 0, 4453);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -5204,6 +5215,7 @@
     	let isLoading = false;
     	let passwordVisibilityToggle;
     	let isPasswordVisible = false;
+    	let isFormDataInvalid = true;
 
     	const regexValidators = {
     		user: /^(?!(?:.*\d){9})(?=(?:.*[a-zA-Z]){2})^[a-zA-Z\d]*$/,
@@ -5244,8 +5256,6 @@
     	};
 
     	const submitLoginForm = () => {
-    		$$invalidate(7, isLoading = true);
-
     		doRecaptcha().then(token => {
     			if (checkUserIdentifier(userValue) && checkUserPassword(userPassword)) {
     				loginFormData = {
@@ -5254,6 +5264,8 @@
     					token
     				};
 
+    				$$invalidate(7, isLoading = true);
+
     				window.postMessage(
     					{
     						type: "SubmitLoginForm",
@@ -5283,10 +5295,18 @@
 
     	const validateUserName = () => {
     		$$invalidate(4, invalidName = !checkUserIdentifier(userValue));
+
+    		$$invalidate(10, isFormDataInvalid = !invalidName && !invalidPassword && userPassword
+    		? false
+    		: true);
     	};
 
     	const validatePassword = () => {
     		$$invalidate(5, invalidPassword = !checkUserPassword(userPassword));
+
+    		$$invalidate(10, isFormDataInvalid = !invalidName && !invalidPassword && userValue
+    		? false
+    		: true);
     	};
 
     	const messageHandler = e => {
@@ -5369,6 +5389,7 @@
     		isLoading,
     		passwordVisibilityToggle,
     		isPasswordVisible,
+    		isFormDataInvalid,
     		captchaKey,
     		regexValidators,
     		doRecaptcha,
@@ -5399,6 +5420,7 @@
     		if ("isLoading" in $$props) $$invalidate(7, isLoading = $$props.isLoading);
     		if ("passwordVisibilityToggle" in $$props) $$invalidate(8, passwordVisibilityToggle = $$props.passwordVisibilityToggle);
     		if ("isPasswordVisible" in $$props) $$invalidate(9, isPasswordVisible = $$props.isPasswordVisible);
+    		if ("isFormDataInvalid" in $$props) $$invalidate(10, isFormDataInvalid = $$props.isFormDataInvalid);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -5416,6 +5438,7 @@
     		isLoading,
     		passwordVisibilityToggle,
     		isPasswordVisible,
+    		isFormDataInvalid,
     		showPassword,
     		hidePassword,
     		switchToRegister,
@@ -5437,7 +5460,7 @@
     class GeneralPlayerLoginForm extends SvelteElement {
     	constructor(options) {
     		super();
-    		this.shadowRoot.innerHTML = `<style>.FormContainer{display:inline-flex;width:100%}.FormLeftSide,.FormRightSide{flex:1 1 100%;padding:50px}.FormLeftSide{background:#F9F8F8}.FormRightSide{background-size:cover;background-position:center;background-repeat:no-repeat}.FormHeaderTitle{color:#000000;font-size:28px;font-weight:300;padding:0;text-transform:uppercase;margin:0}.PasswordContainer{position:relative}.FormRequired{color:#FD2839}.FormHeaderSubtitle{color:#58586B;font-size:14px;font-weight:300;margin:5px 0 0 0}.FormRegisterCallToAction{color:#D0046C;font-size:14px;font-weight:400;text-decoration:none;cursor:pointer}.FormContent{padding-top:20px}.UserContainer,.PasswordContainer{color:#58586B;display:flex;flex-direction:column;padding-bottom:20px;position:relative}.UserContainer label,.PasswordContainer label{font-size:14px;font-weight:300;padding-bottom:5px}.UserContainer input,.PasswordContainer input{width:100%;height:44px;border:1px solid #D1D1D1;border-radius:5px;padding:5px;font-size:14px;box-sizing:border-box;padding:5px 15px;font-size:16px;line-height:18px}.UserContainer.InvalidField input,.PasswordContainer.InvalidField input{border:1px solid #D0046C;background:#FBECF4;color:#D0046C}.PasswordContainer input{padding:5px 30px 5px 15px}.TogglePasswordVisibility{height:13px;position:absolute;right:8px;bottom:45px}.SingInButton{color:#fff;background:#D0046C;border:1px solid #D0046C;border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer}.ForgotPasswordButton{border:0;background:transparent;font-size:14px;font-weight:300;font-family:'Helvetica Neue', 'Helvetica', sans-serif;color:#D0046C;margin-top:15px;cursor:pointer}.PasswordContainer,.UserContainer{padding-bottom:30px}.UserContainer .InvalidInput{bottom:-3px}.InvalidInput{color:#D0046C;font-size:10px;position:absolute;bottom:-3px;line-height:10px}.ErrorMessage{margin:0 0 15px 0;font-size:12px;color:#D0046C}.FormMobileContainer{height:100%}.FormMobileContainer .FormLeftSide{padding:40px 20px}.FormMobileContainer .SingInButton,.FormMobileContainer .UserContainer input,.FormMobileContainer .PasswordContainer input{max-width:unset}.ModalLoader{display:block;width:80px;height:80px;margin:0 auto}.ModalLoader:after{content:" ";display:block;width:64px;height:64px;margin:8px;border-radius:50%;border:6px solid #D0046C;border-color:#D0046C transparent #D0046C transparent;animation:Loader 1.2s linear infinite}@keyframes Loader{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}</style>`;
+    		this.shadowRoot.innerHTML = `<style>.FormContainer{display:inline-flex;width:100%}.FormLeftSide,.FormRightSide{flex:1 1 100%;padding:50px}.FormLeftSide{background:#F9F8F8}.FormRightSide{background-size:cover;background-position:center;background-repeat:no-repeat}.FormHeaderTitle{color:#000000;font-size:28px;font-weight:300;padding:0;text-transform:uppercase;margin:0}.PasswordContainer{position:relative}.FormRequired{color:#FD2839}.FormHeaderSubtitle{color:#58586B;font-size:14px;font-weight:300;margin:5px 0 0 0}.FormRegisterCallToAction{color:#D0046C;font-size:14px;font-weight:400;text-decoration:none;cursor:pointer}.FormContent{padding-top:20px}.UserContainer,.PasswordContainer{color:#58586B;display:flex;flex-direction:column;padding-bottom:20px;position:relative}.UserContainer label,.PasswordContainer label{font-size:14px;font-weight:300;padding-bottom:5px}.UserContainer input,.PasswordContainer input{width:100%;height:44px;border:1px solid #D1D1D1;border-radius:5px;padding:5px;font-size:14px;box-sizing:border-box;padding:5px 15px;font-size:16px;line-height:18px}.UserContainer.InvalidField input,.PasswordContainer.InvalidField input{border:1px solid #D0046C;background:#FBECF4;color:#D0046C}.PasswordContainer input{padding:5px 30px 5px 15px}.TogglePasswordVisibility{height:13px;position:absolute;right:8px;bottom:45px}.SignInButton{color:#fff;background:#D0046C;border:1px solid #D0046C;border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer}.SignInButton[disabled]{background:#c1c1c1;border:1px solid #c1c1c1;cursor:not-allowed}.ForgotPasswordButton{border:0;background:transparent;font-size:14px;font-weight:300;font-family:'Helvetica Neue', 'Helvetica', sans-serif;color:#D0046C;margin-top:15px;cursor:pointer}.PasswordContainer,.UserContainer{padding-bottom:30px}.InvalidInput{color:#D0046C;font-size:10px;position:absolute;top:55px;line-height:10px}.ErrorMessage{margin:0 0 15px 0;font-size:12px;color:#D0046C}.FormMobileContainer{height:100%}.FormMobileContainer .FormLeftSide{padding:40px 20px}.FormMobileContainer .SignInButton,.FormMobileContainer .UserContainer input,.FormMobileContainer .PasswordContainer input{max-width:unset}.ModalLoader{display:block;width:80px;height:80px;margin:0 auto}.ModalLoader:after{content:" ";display:block;width:64px;height:64px;margin:8px;border-radius:50%;border:6px solid #D0046C;border-color:#D0046C transparent #D0046C transparent;animation:Loader 1.2s linear infinite}@keyframes Loader{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}</style>`;
 
     		init(
     			this,