fix: make sure things load properly on login/signup

public/base.css

@@ -184,16 +184,15 @@ textarea:focus {
 form div {
 	position: relative;
 	display: flex;
-	margin-bottom: 1em;
+	margin-bottom: 1.5em;
 }
 
 form label {
 	position: absolute;
-	top: 10px;
-	font-size: 30px;
+	top: 0;
+	font-size: large;
 	margin: 10px;
 	padding: 0 10px;
-	background-color: var(--bg);
 	-webkit-transition:
 		top 0.2s ease-in-out,
 		font-size 0.2s ease-in-out;
@@ -204,8 +203,10 @@ form label {
 
 form input:focus ~ label,
 form input:valid ~ label {
-	top: -25px;
-	font-size: 20px;
+	top: -1.6rem;
+	font-size: small;
+	border: 1px solid rgba(128, 128, 128, 0.2);
+	border-bottom: 0;
 }
 
 form input:focus {

public/index.html

@@ -114,62 +114,71 @@
 			update_topics_timeout = undefined;
 		}
 
-		const topics_response = await api.fetch("/api/topics");
-		if (topics_response.ok) {
-			const topic_list = document.getElementById("topic-list");
-			topic_list.innerHTML = "";
+		try {
+			const topics_response = await api.fetch("/api/topics");
+			if (topics_response.ok) {
+				const topic_list = document.getElementById("topic-list");
+				topic_list.innerHTML = "";
 
-			const new_topics = await topics_response.json();
-			const has_differences = TOPICS.length !== new_topics.length || new_topics.some( (topic, index) => {
-				return ( TOPICS[ index ]?.id !== topic.id || TOPICS[ index ]?.name !== topic.name );
-			});
+				const new_topics = await topics_response.json();
+				const has_differences = TOPICS.length !== new_topics.length || new_topics.some( (topic, index) => {
+					return ( TOPICS[ index ]?.id !== topic.id || TOPICS[ index ]?.name !== topic.name );
+				});
 
-			if ( has_differences ) {
-				TOPICS = new_topics;
+				if ( has_differences ) {
+					TOPICS = new_topics;
 
-				document.dispatchEvent(new CustomEvent("topics_updated", { detail: { topics: TOPICS } }));
+					document.dispatchEvent(new CustomEvent("topics_updated", { detail: { topics: TOPICS } }));
+				}
+
+				last_topic_update = now;
 			}
-
-			last_topic_update = now;
+		}
+		catch( error ) {
+			console.error( error );
 		}
 
 		update_topics_timeout = setTimeout( update_topics, UPDATE_TOPICS_FREQUENCY);
+
+		// now that we have topics, make sure our url is all good
+		extract_url_hash_info();
 	}
 
 	document.addEventListener("DOMContentLoaded", async () => {
-			/* check if we are logged in */
-			(async () => {
-				try {
-					const session_response = await api.fetch("/api/users/me");
+		window.addEventListener("locationchange", update_topics);
+		document.addEventListener( 'user_logged_in', update_topics );
 
-					if (!session_response.ok) {
-						const error_body = await session_response.json();
-						const error = error_body?.error;
+		/* check if we are logged in */
+		(async () => {
+			try {
+				const session_response = await api.fetch("/api/users/me");
 
-						console.dir({
-							error_body,
-							error,
-						});
-						return;
-					}
+				if (!session_response.ok) {
+					const error_body = await session_response.json();
+					const error = error_body?.error;
 
-					const user = await session_response.json();
-
-					document.body.dataset.user = JSON.stringify( user );
-					document.body.dataset.perms = user.permissions.join(":");
-
-					document.dispatchEvent(new CustomEvent("user_logged_in", { detail: { user } }));
-
-				} catch (error) {
 					console.dir({
+						error_body,
 						error,
 					});
+					return;
 				}
-			})();
 
-			window.addEventListener("locationchange", update_topics);
-			await update_topics();
-			extract_url_hash_info();
+				const user = await session_response.json();
+
+				document.body.dataset.user = JSON.stringify( user );
+				document.body.dataset.perms = user.permissions.join(":");
+
+				document.dispatchEvent(new CustomEvent("user_logged_in", { detail: { user } }));
+
+			} catch (error) {
+				console.dir({
+					error,
+				});
+			}
+		})();
+
+		extract_url_hash_info();
 	});
 
 	</script>

public/sidebar/sidebar.html

@@ -299,6 +299,8 @@
 						delete document.body.dataset.user;
 						delete document.body.dataset.perms;
 						window.location = "/";
+
+						document.dispatchEvent(new CustomEvent("user_logged_out", { detail: {} }));
 					};
 				}
 			</script>

public/signup_login_wall.html

@@ -24,14 +24,15 @@
 		#signup-login-wall .limiter {
 			width: 95%;
 			position: relative;
-			background: rgba(128, 128, 128, 0.5);
+			background: hsl(from var(--bg) h s 15);
 			max-width: 40em;
 			min-height: 22rem;
+			margin: 0 auto;
 		}
 
 		#signup-login-wall form {
 			width: 100%;
-			padding: 1rem;
+			padding: 1.5rem;
 		}
 	</style>
 
@@ -54,10 +55,13 @@
 							{
 								const form = document.currentScript.closest("form");
 								form.on_reply = (response) => {
-									// TODO: we should hold the session secret only in memory, not the cookie?
-									document.body.dataset.user = JSON.stringify(response.user);
-									document.body.dataset.perms =
-										response.user.permissions.join(":");
+									const user = response.user;
+									document.body.dataset.user = JSON.stringify(user);
+									document.body.dataset.perms = user.permissions.join(":");
+
+									document.dispatchEvent(
+										new CustomEvent("user_logged_in", { detail: { user } }),
+									);
 								};
 							}
 						</script>
@@ -91,9 +95,13 @@
 							{
 								const form = document.currentScript.closest("form");
 								form.on_reply = (response) => {
-									document.body.dataset.user = JSON.stringify(response.user);
-									document.body.dataset.perms =
-										response.user.permissions.join(":");
+									const user = response.user;
+									document.body.dataset.user = JSON.stringify(user);
+									document.body.dataset.perms = user.permissions.join(":");
+
+									document.dispatchEvent(
+										new CustomEvent("user_logged_in", { detail: { user } }),
+									);
 								};
 							}
 						</script>