(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document);
import { S as SvelteElement, i as init, a as attribute_to_object, b as insert_dev, t as flush, s as safe_not_equal, d as dispatch_dev, v as validate_slots, o as onMount, c as setContext, e as globals, f as element, h as space, B as text, n as noop, k as attr_dev, j as add_location, l as append_dev, m as listen_dev, p as detach_dev, r as run_all, q as binding_callbacks, H as is_function } from './index-998178c7.js';
import * as AuthTools from '../../../../../../../../../js/libraries/authTools.js';
import '../../../../../../../../../js/components/select-component.js';
import '../../../../../../../../../js/components/switch-component.js';

/* src\profile\profile-general.svelte generated by Svelte v3.52.0 */

const { Object: Object_1 } = globals;
const file = "src\\profile\\profile-general.svelte";

function create_fragment(ctx) {
	let section_1;
	let h2;
	let t1;
	let div4;
	let div0;
	let span0;
	let t3;
	let span1;
	let t4;
	let div3;
	let button0;
	let t6;
	let div2;
	let input0;
	let t7;
	let div1;
	let t8;
	let div9;
	let div7;
	let div5;
	let span2;
	let t10;
	let span3;
	let t11;
	let div6;
	let button1;
	let t12;
	let object0;
	let t13;
	let div8;
	let button2;
	let t15;
	let input1;
	let t16;
	let button3;
	let object1;
	let mounted;
	let dispose;

	const block = {
		c: function create() {
			section_1 = element("section");
			h2 = element("h2");
			h2.textContent = "General";
			t1 = space();
			div4 = element("div");
			div0 = element("div");
			span0 = element("span");
			span0.textContent = "Email:";
			t3 = space();
			span1 = element("span");
			t4 = space();
			div3 = element("div");
			button0 = element("button");
			button0.textContent = "save";
			t6 = space();
			div2 = element("div");
			input0 = element("input");
			t7 = space();
			div1 = element("div");
			t8 = space();
			div9 = element("div");
			div7 = element("div");
			div5 = element("div");
			span2 = element("span");
			span2.textContent = "Password:";
			t10 = space();
			span3 = element("span");
			t11 = space();
			div6 = element("div");
			button1 = element("button");
			t12 = text("change\r\n                    ");
			object0 = element("object");
			t13 = space();
			div8 = element("div");
			button2 = element("button");
			button2.textContent = "save";
			t15 = space();
			input1 = element("input");
			t16 = space();
			button3 = element("button");
			object1 = element("object");
			this.c = noop;
			attr_dev(h2, "class", "title-highlight");
			add_location(h2, file, 133, 4, 3608);
			add_location(span0, file, 136, 12, 3804);
			attr_dev(span1, "id", "signup-email-msg");
			add_location(span1, file, 137, 12, 3837);
			attr_dev(div0, "class", "title-msg");
			add_location(div0, file, 135, 8, 3767);
			attr_dev(button0, "id", "save-email");
			attr_dev(button0, "class", "save-button");
			add_location(button0, file, 140, 12, 3983);
			attr_dev(input0, "id", "emailInput");
			attr_dev(input0, "class", "text-input");
			attr_dev(input0, "type", "text");
			add_location(input0, file, 142, 16, 4148);
			attr_dev(div1, "class", "ghost-input");
			add_location(div1, file, 143, 16, 4334);
			attr_dev(div2, "class", "input-wrapper");
			add_location(div2, file, 141, 12, 4103);
			attr_dev(div3, "id", "emailInputDiv");
			add_location(div3, file, 139, 8, 3919);
			add_location(div4, file, 134, 4, 3654);
			add_location(span2, file, 150, 16, 4661);
			attr_dev(span3, "id", "signup-password-msg");
			add_location(span3, file, 151, 16, 4701);
			attr_dev(div5, "class", "title-msg");
			add_location(div5, file, 149, 12, 4620);
			attr_dev(object0, "type", "image/svg+xml");
			attr_dev(object0, "data", "/img/profile/icons/pencil.svg");
			attr_dev(object0, "title", "pencil-icon");
			add_location(object0, file, 156, 20, 4984);
			attr_dev(button1, "id", "change-password");
			add_location(button1, file, 155, 16, 4895);
			attr_dev(div6, "id", "change-password-div");
			add_location(div6, file, 154, 12, 4817);
			attr_dev(div7, "id", "change-password-line");
			add_location(div7, file, 148, 8, 4575);
			attr_dev(button2, "id", "save-password");
			attr_dev(button2, "class", "save-button");
			add_location(button2, file, 161, 12, 5237);
			attr_dev(input1, "id", "passwordInput");
			attr_dev(input1, "class", "text-input");
			attr_dev(input1, "type", "password");
			add_location(input1, file, 162, 12, 5366);
			attr_dev(object1, "type", "image/svg+xml");
			attr_dev(object1, "data", "/img/auth/eye_icon.svg");
			attr_dev(object1, "title", "eye icon");
			add_location(object1, file, 164, 16, 5627);
			attr_dev(button3, "class", "eye-icon");
			add_location(button3, file, 163, 12, 5467);
			attr_dev(div8, "id", "change-password-input-div");
			add_location(div8, file, 160, 8, 5152);
			attr_dev(div9, "id", "change-password-line-wrapper");
			add_location(div9, file, 147, 4, 4419);
			attr_dev(section_1, "id", "general-section");
			add_location(section_1, file, 132, 0, 3552);
		},
		l: function claim(nodes) {
			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
		},
		m: function mount(target, anchor) {
			insert_dev(target, section_1, anchor);
			append_dev(section_1, h2);
			append_dev(section_1, t1);
			append_dev(section_1, div4);
			append_dev(div4, div0);
			append_dev(div0, span0);
			append_dev(div0, t3);
			append_dev(div0, span1);
			/*span1_binding*/ ctx[18](span1);
			append_dev(div4, t4);
			append_dev(div4, div3);
			append_dev(div3, button0);
			/*button0_binding*/ ctx[19](button0);
			append_dev(div3, t6);
			append_dev(div3, div2);
			append_dev(div2, input0);
			/*input0_binding*/ ctx[20](input0);
			append_dev(div2, t7);
			append_dev(div2, div1);
			/*div3_binding*/ ctx[23](div3);
			/*div4_binding*/ ctx[24](div4);
			append_dev(section_1, t8);
			append_dev(section_1, div9);
			append_dev(div9, div7);
			append_dev(div7, div5);
			append_dev(div5, span2);
			append_dev(div5, t10);
			append_dev(div5, span3);
			/*span3_binding*/ ctx[25](span3);
			append_dev(div7, t11);
			append_dev(div7, div6);
			append_dev(div6, button1);
			append_dev(button1, t12);
			append_dev(button1, object0);
			/*div6_binding*/ ctx[26](div6);
			append_dev(div9, t13);
			append_dev(div9, div8);
			append_dev(div8, button2);
			/*button2_binding*/ ctx[27](button2);
			append_dev(div8, t15);
			append_dev(div8, input1);
			/*input1_binding*/ ctx[28](input1);
			append_dev(div8, t16);
			append_dev(div8, button3);
			append_dev(button3, object1);
			/*button3_binding*/ ctx[29](button3);
			/*div8_binding*/ ctx[31](div8);
			/*div9_binding*/ ctx[32](div9);
			/*section_1_binding*/ ctx[33](section_1);

			if (!mounted) {
				dispose = [
					listen_dev(button0, "click", /*saveEmail*/ ctx[14], false, false, false),
					listen_dev(input0, "click", /*click_handler*/ ctx[21], false, false, false),
					listen_dev(input0, "input", /*input_handler*/ ctx[22], false, false, false),
					listen_dev(
						div4,
						"mouseenter",
						function () {
							if (is_function(/*emailDiv*/ ctx[11].focused = true)) (/*emailDiv*/ ctx[11].focused = true).apply(this, arguments);
						},
						false,
						false,
						false
					),
					listen_dev(
						div4,
						"mouseleave",
						function () {
							if (is_function(/*emailDiv*/ ctx[11].focused = false)) (/*emailDiv*/ ctx[11].focused = false).apply(this, arguments);
						},
						false,
						false,
						false
					),
					listen_dev(button1, "click", /*launchChangePassword*/ ctx[15], false, false, false),
					listen_dev(button2, "click", /*savePassword*/ ctx[16], false, false, false),
					listen_dev(button3, "click", /*click_handler_1*/ ctx[30], false, false, false),
					listen_dev(
						div9,
						"mouseenter",
						function () {
							if (is_function(/*passwordDiv*/ ctx[10].focused = true)) (/*passwordDiv*/ ctx[10].focused = true).apply(this, arguments);
						},
						false,
						false,
						false
					),
					listen_dev(
						div9,
						"mouseleave",
						function () {
							if (is_function(/*passwordDiv*/ ctx[10].focused = false)) (/*passwordDiv*/ ctx[10].focused = false).apply(this, arguments);
						},
						false,
						false,
						false
					)
				];

				mounted = true;
			}
		},
		p: function update(new_ctx, dirty) {
			ctx = new_ctx;
		},
		i: noop,
		o: noop,
		d: function destroy(detaching) {
			if (detaching) detach_dev(section_1);
			/*span1_binding*/ ctx[18](null);
			/*button0_binding*/ ctx[19](null);
			/*input0_binding*/ ctx[20](null);
			/*div3_binding*/ ctx[23](null);
			/*div4_binding*/ ctx[24](null);
			/*span3_binding*/ ctx[25](null);
			/*div6_binding*/ ctx[26](null);
			/*button2_binding*/ ctx[27](null);
			/*input1_binding*/ ctx[28](null);
			/*button3_binding*/ ctx[29](null);
			/*div8_binding*/ ctx[31](null);
			/*div9_binding*/ ctx[32](null);
			/*section_1_binding*/ ctx[33](null);
			mounted = false;
			run_all(dispose);
		}
	};

	dispatch_dev("SvelteRegisterBlock", {
		block,
		id: create_fragment.name,
		type: "component",
		source: "",
		ctx
	});

	return block;
}

function resizeInput(el) {
	el.nextElementSibling.innerHTML = el.value;
}

function instance($$self, $$props, $$invalidate) {
	let { $$slots: slots = {}, $$scope } = $$props;
	validate_slots('profile-general', slots, []);
	let { user = null } = $$props;

	// Main code
	let emailInput;

	let section;
	let saveEmailButton;
	let changePasswordInputDiv;
	let changePasswordMsg;
	let savePasswordButton;
	let passwordInput;
	let changePasswordDiv;
	let passwordVisibilityButton;
	let emailMsg;
	let passwordDiv;
	let emailDiv;
	let emailInputDiv;
	let prevEmail;

	function showSaveButton(button) {
		prevEmail = emailInput.value;
		button.style.display = "initial";
		$$invalidate(9, emailMsg.style.display = "inline", emailMsg);
		let windowWidth = window.innerWidth;

		if (windowWidth < 1100) {
			$$invalidate(12, emailInputDiv.style.marginTop = "1rem", emailInputDiv);
			$$invalidate(11, emailDiv.style.flexDirection = "column", emailDiv);
		} //emailInput.style.width = "19rem"
	}

	function saveEmail() {
		let email = emailInput.value;

		if (AuthTools.checkEmail(email, emailMsg)) {
			if (email != user.email) {
				AuthTools.changeUser("email", email, user);
			}

			resetEmailField();
		}
	}

	function resetEmailField() {
		if (prevEmail != undefined) {
			$$invalidate(0, emailInput.value = prevEmail, emailInput);
		}

		$$invalidate(0, emailInput.style.width = "100%", emailInput);
		$$invalidate(9, emailMsg.style.display = "none", emailMsg);
		$$invalidate(11, emailDiv.style.flexDirection = "row", emailDiv);
		$$invalidate(12, emailInputDiv.style.marginTop = "0rem", emailInputDiv);
		$$invalidate(2, saveEmailButton.style.display = "none", saveEmailButton);
		$$invalidate(9, emailMsg.innerHTML = "", emailMsg);
	}

	function launchChangePassword() {
		let windowWidth = window.innerWidth;

		if (windowWidth < 1100) {
			$$invalidate(3, changePasswordInputDiv.style.display = "flex", changePasswordInputDiv);
		} else {
			$$invalidate(3, changePasswordInputDiv.style.display = "initial", changePasswordInputDiv);
		}

		$$invalidate(7, changePasswordDiv.style.display = "none", changePasswordDiv);
		passwordInput.focus();
	}

	function savePassword() {
		let password = passwordInput.value;

		if (AuthTools.checkPassword(password, changePasswordMsg)) {
			if (password != user.password) {
				AuthTools.changeUser("password", password, user);
			}

			$$invalidate(4, changePasswordMsg.innerHTML = "", changePasswordMsg);
			resetPasswordField();
		}
	}

	function resetPasswordField() {
		$$invalidate(3, changePasswordInputDiv.style.display = "none", changePasswordInputDiv);
		$$invalidate(7, changePasswordDiv.style.display = "initial", changePasswordDiv);
		$$invalidate(4, changePasswordMsg.innerHTML = "", changePasswordMsg);
	}

	function fillFields() {
		if (user != null && Object.keys(user).length != 0 && section != undefined) {
			$$invalidate(0, emailInput.value = user.email, emailInput);
		} else {
			setTimeout(fillFields, 10);
		}
	}

	onMount(() => {
		fillFields();

		document.addEventListener("click", function (event) {
			if (passwordDiv.focused) {
				resetEmailField();
			} else if (emailDiv.focused) {
				resetPasswordField();
			} else {
				resetEmailField();
				resetPasswordField();
			}
		});
	});

	const writable_props = ['user'];

	Object_1.keys($$props).forEach(key => {
		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<profile-general> was created with unknown prop '${key}'`);
	});

	function span1_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			emailMsg = $$value;
			$$invalidate(9, emailMsg);
		});
	}

	function button0_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			saveEmailButton = $$value;
			$$invalidate(2, saveEmailButton);
		});
	}

	function input0_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			emailInput = $$value;
			$$invalidate(0, emailInput);
		});
	}

	const click_handler = () => showSaveButton(saveEmailButton);
	const input_handler = () => resizeInput(emailInput);

	function div3_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			emailInputDiv = $$value;
			$$invalidate(12, emailInputDiv);
		});
	}

	function div4_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			emailDiv = $$value;
			$$invalidate(11, emailDiv);
		});
	}

	function span3_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			changePasswordMsg = $$value;
			$$invalidate(4, changePasswordMsg);
		});
	}

	function div6_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			changePasswordDiv = $$value;
			$$invalidate(7, changePasswordDiv);
		});
	}

	function button2_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			savePasswordButton = $$value;
			$$invalidate(5, savePasswordButton);
		});
	}

	function input1_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			passwordInput = $$value;
			$$invalidate(6, passwordInput);
		});
	}

	function button3_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			passwordVisibilityButton = $$value;
			$$invalidate(8, passwordVisibilityButton);
		});
	}

	const click_handler_1 = () => AuthTools.changePasswordVisibility(passwordVisibilityButton);

	function div8_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			changePasswordInputDiv = $$value;
			$$invalidate(3, changePasswordInputDiv);
		});
	}

	function div9_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			passwordDiv = $$value;
			$$invalidate(10, passwordDiv);
		});
	}

	function section_1_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			section = $$value;
			$$invalidate(1, section);
		});
	}

	$$self.$$set = $$props => {
		if ('user' in $$props) $$invalidate(17, user = $$props.user);
	};

	$$self.$capture_state = () => ({
		onMount,
		setContext,
		AuthTools,
		user,
		emailInput,
		section,
		saveEmailButton,
		changePasswordInputDiv,
		changePasswordMsg,
		savePasswordButton,
		passwordInput,
		changePasswordDiv,
		passwordVisibilityButton,
		emailMsg,
		passwordDiv,
		emailDiv,
		emailInputDiv,
		prevEmail,
		showSaveButton,
		saveEmail,
		resetEmailField,
		launchChangePassword,
		savePassword,
		resetPasswordField,
		fillFields,
		resizeInput
	});

	$$self.$inject_state = $$props => {
		if ('user' in $$props) $$invalidate(17, user = $$props.user);
		if ('emailInput' in $$props) $$invalidate(0, emailInput = $$props.emailInput);
		if ('section' in $$props) $$invalidate(1, section = $$props.section);
		if ('saveEmailButton' in $$props) $$invalidate(2, saveEmailButton = $$props.saveEmailButton);
		if ('changePasswordInputDiv' in $$props) $$invalidate(3, changePasswordInputDiv = $$props.changePasswordInputDiv);
		if ('changePasswordMsg' in $$props) $$invalidate(4, changePasswordMsg = $$props.changePasswordMsg);
		if ('savePasswordButton' in $$props) $$invalidate(5, savePasswordButton = $$props.savePasswordButton);
		if ('passwordInput' in $$props) $$invalidate(6, passwordInput = $$props.passwordInput);
		if ('changePasswordDiv' in $$props) $$invalidate(7, changePasswordDiv = $$props.changePasswordDiv);
		if ('passwordVisibilityButton' in $$props) $$invalidate(8, passwordVisibilityButton = $$props.passwordVisibilityButton);
		if ('emailMsg' in $$props) $$invalidate(9, emailMsg = $$props.emailMsg);
		if ('passwordDiv' in $$props) $$invalidate(10, passwordDiv = $$props.passwordDiv);
		if ('emailDiv' in $$props) $$invalidate(11, emailDiv = $$props.emailDiv);
		if ('emailInputDiv' in $$props) $$invalidate(12, emailInputDiv = $$props.emailInputDiv);
		if ('prevEmail' in $$props) prevEmail = $$props.prevEmail;
	};

	if ($$props && "$$inject" in $$props) {
		$$self.$inject_state($$props.$$inject);
	}

	return [
		emailInput,
		section,
		saveEmailButton,
		changePasswordInputDiv,
		changePasswordMsg,
		savePasswordButton,
		passwordInput,
		changePasswordDiv,
		passwordVisibilityButton,
		emailMsg,
		passwordDiv,
		emailDiv,
		emailInputDiv,
		showSaveButton,
		saveEmail,
		launchChangePassword,
		savePassword,
		user,
		span1_binding,
		button0_binding,
		input0_binding,
		click_handler,
		input_handler,
		div3_binding,
		div4_binding,
		span3_binding,
		div6_binding,
		button2_binding,
		input1_binding,
		button3_binding,
		click_handler_1,
		div8_binding,
		div9_binding,
		section_1_binding
	];
}

class Profile_general extends SvelteElement {
	constructor(options) {
		super();

		this.shadowRoot.innerHTML = `<style>@import '/css/common.css';.ghost-input{display:block;visibility:hidden;height:0;padding-left:0.5rem;padding-right:0.5rem}.input-wrapper{display:inline-block;max-width:calc(100% - 10rem);min-width:0rem;height:2.5rem;position:relative;right:0
    }span{font-family:var(--sans-serif,sans-serif);font-size:1.15rem}#general-section{display:flex;flex-direction:column}#general-section h2{margin:auto;margin-top:0;margin-bottom:0}#general-section>div{height:3.5rem;padding-bottom:0.75rem;padding-top:0.75rem;border-bottom:0.14rem solid;border-color:#cdcdcd}#general-section>div>:first-child{font-family:var(--sans-serif,sans-serif)}#general-section>div:last-child{padding-bottom:0.75rem;padding-top:0.75rem;border-bottom:0}#general-section>div div,#general-section>div input,#general-section>div :not(:first-child) input{font-weight:500;font-size:1.15rem;font-family:var(--sans-serif,sans-serif);color:#292222;border:0}#general-section>div>:last-child{padding-right:1.35rem}.text-input{position:relative;width:20.475rem;direction:rtl;border:0;outline:none;bottom:0.341rem}#emailInput{position:relative;right:0;top:0.1rem;width:100%}#save-email{display:none;margin-top:0.5rem}#signup-email-msg,#signup-password-msg{position:relative;display:inline-block;color:red;font-weight:400;white-space:nowrap}#signup-email-msg{display:none}#general-section>div:nth-child(2){display:flex;flex-direction:row}#emailInputDiv{display:flex;flex-direction:row;justify-content:right;align-items:center;height:2rem;width:100%}.title-msg{display:flex;gap:0.5rem}.title-msg *{text-align:left}#change-password-line{display:flex;justify-content:space-between}#change-password-div{width:9.3rem;left:0}#change-password{position:absolute;cursor:pointer;width:8rem;height:2.73rem;font-size:1.15rem;font-family:var(--sans-serif,sans-serif);font-weight:500;text-align:right;padding-right:2rem;margin-top:-0.55rem;background-color:transparent}#change-password>object{pointer-events:none;position:absolute;width:1.5rem;right:0.0rem}#change-password-input-div{display:none;float:right;position:relative;margin-top:-1.7rem}#passwordInput{width:15rem;right:0.65rem;margin-left:1.5rem}.save-button{position:relative;bottom:0.34rem;margin-right:0.6rem;height:2.73rem;width:4.778rem;font-family:var(--sans-serif,sans-serif);font-size:1.15rem;color:white;background-color:var(--red);border-color:var(--red);border-radius:0.512rem}#save-password{bottom:0.6rem
    }.eye-icon{display:inline-block;position:relative;cursor:pointer;opacity:0.25;height:2.2rem;width:1.7rem}.eye-icon *{pointer-events:none}@media only screen and (max-width: 1100px){#change-password-line-wrapper{display:flex;flex-direction:column;height:auto;min-height:4rem}#change-password-input-div{margin-top:1rem;justify-content:flex-end}#general-section>div:nth-child(2){height:auto;min-height:4rem;position:relative}#passwordInput{width:100%;bottom:0}#emailInput{width:100%}#save-password{bottom:0rem
        }}</style>`;

		init(
			this,
			{
				target: this.shadowRoot,
				props: attribute_to_object(this.attributes),
				customElement: true
			},
			instance,
			create_fragment,
			safe_not_equal,
			{ user: 17 },
			null,
			[-1, -1]
		);

		if (options) {
			if (options.target) {
				insert_dev(options.target, this, options.anchor);
			}

			if (options.props) {
				this.$set(options.props);
				flush();
			}
		}
	}

	static get observedAttributes() {
		return ["user"];
	}

	get user() {
		return this.$$.ctx[17];
	}

	set user(user) {
		this.$$set({ user });
		flush();
	}
}

customElements.define("profile-general", Profile_general);

export { Profile_general as default };