Using Community Box with Squarespace Member Areas

Add the code below, to the code that you embed in the Squarespace site header as part of the Squarespace installation instructions:

<script>
let g_iframe_observer = null;


function get_input_field( login_root ) {
	return login_root.contentWindow.document.body.querySelector(`[data-test="login-email"]`)
}


function get_signup_field( login_root ) {
	return login_root.contentWindow.document.body.querySelector(`[data-test="create-account-email"]`)
}


function install_input_field_event_listener( login_root ) {
	const input_field = get_input_field( login_root )
	if (input_field !== null) {
		input_field.addEventListener("change", function () {
			console.log("login value:", input_field.value);
			document.cookie = `logged_in_maybe=${input_field.value}`;
		})
	}
}


function install_signup_field_event_listener( login_root ) {
	const signup_field = get_signup_field( login_root )
	if( signup_field !== null ) {
		signup_field.addEventListener("change", function () {
			console.log("signup value:", signup_field.value);
			document.cookie = `logged_in_maybe=${signup_field.value}`;
		})
	}
}


function install_iframe_observer( login_root ) {
	g_iframe_observer = new MutationObserver(function () {
		if (get_input_field( login_root ) !== null) {
			install_input_field_event_listener( login_root )
		}


		if (get_signup_field( login_root ) !== null) {
			install_signup_field_event_listener( login_root )
		}


	})
	const iframe_config = { subtree: true, childList: true };
	const iframe_body_list = login_root.contentWindow.document.body;


	console.log("Installing iframe observer on", iframe_body_list, "and", iframe_config)
	g_iframe_observer.observe(iframe_body_list, iframe_config);


}


window.addEventListener('DOMContentLoaded', (event) => {
	let installed_listener = false;


	const observer = new MutationObserver(function (mutations) {
		mutations.forEach(function () {
			const login_root = document.body.querySelector(`iframe[id="accountFrame"]`);
			if (login_root !== null && installed_listener === false) {
				login_root.contentWindow.addEventListener("load", function () {
					console.log("iframe fully loaded");


					const iframe_body = login_root.contentWindow.document.body;
					console.log("account login root", iframe_body.querySelector("#user-account-login-root"));
					console.log("input field", iframe_body.querySelector("input[data-test='login-email']"));


					if (get_input_field( login_root ) !== null || get_signup_field( login_root ) !== null) {
						install_input_field_event_listener( login_root )
						install_signup_field_event_listener( login_root )
					} else {
						install_iframe_observer( login_root )
					}


				})


				installed_listener = true;
			}
		});
	});


	const config = { subtree: true, childList: true };
	const body_list = document.body;


	console.log("Installing observer on", body_list, "and", config)
	observer.observe(body_list, config);
});</script>