site-libsoc/Server/public/js/components/profile-general.js

662 lines
21 KiB
JavaScript

(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 };