feature: the beginnings of chat working

public/signup_login_wall.html

@@ -0,0 +1,171 @@
+<div id="signup-login-wall">
+	<style>
+		#signup-login-wall {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 10000;
+			background: var(--bg);
+			visibility: visible;
+			opacity: 1;
+			transition: all 0.33s;
+		}
+
+		body[data-user] #signup-login-wall {
+			visibility: hidden;
+			opacity: 0;
+		}
+
+		#signup-login-wall .limiter {
+			width: 95%;
+			position: relative;
+			background: rgba(128, 128, 128, 0.5);
+			max-width: 40em;
+			min-height: 22rem;
+		}
+
+		#signup-login-wall form {
+			width: 100%;
+		}
+
+		form div {
+			position: relative;
+			display: flex;
+			margin-bottom: 1em;
+		}
+
+		form label {
+			position: absolute;
+			top: 10px;
+			font-size: 30px;
+			margin: 10px;
+			padding: 0 10px;
+			background-color: var(--bg);
+			-webkit-transition:
+				top 0.2s ease-in-out,
+				font-size 0.2s ease-in-out;
+			transition:
+				top 0.2s ease-in-out,
+				font-size 0.2s ease-in-out;
+		}
+
+		form input:focus ~ label,
+		form input:valid ~ label {
+			top: -25px;
+			font-size: 20px;
+		}
+
+		form input {
+			width: 100%;
+			padding: 20px;
+			border: 1px solid var(--text);
+			font-size: 20px;
+			background-color: var(--bg);
+			color: var(--text);
+		}
+
+		form input:focus {
+			outline: none;
+		}
+
+		form button {
+			width: 100%;
+			padding: 20px;
+			border: 1px solid var(--text);
+			font-size: 20px;
+			background-color: var(--bg);
+			color: var(--text);
+		}
+
+		form button.primary {
+			background-color: var(--accent);
+		}
+	</style>
+
+	<div class="limiter">
+		<div class="tabs">
+			<div id="login-tab" class="tab">
+				<input
+					type="radio"
+					name="signup-login-tabs"
+					id="login-tab-input"
+					class="tab-switch"
+					checked="checked"
+				/>
+				<label for="login-tab-input" class="tab-label">
+					<div class="label">Log In</div>
+				</label>
+				<div class="tab-content">
+					<form
+						id="login-form"
+						action="/api/auth"
+						onreply="(user)=>{ document.body.dataset.user = JSON.stringify( user ); }"
+					>
+						<script>
+							{
+								const form = document.currentScript.closest("form");
+								form.on_response = (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(":");
+								};
+							}
+						</script>
+						<div>
+							<input id="login-username" type="text" name="username" required />
+							<label for="login-username">username</label>
+						</div>
+						<div>
+							<input id="login-password" type="password" name="password" required />
+							<label for="login-password">password</label>
+						</div>
+						<div>
+							<button id="login-submit" type="submit" class="primary">Log In</button>
+						</div>
+					</form>
+				</div>
+			</div>
+			<div id="signup-tab" class="tab">
+				<input
+					type="radio"
+					name="signup-login-tabs"
+					id="signup-tab-input"
+					class="tab-switch"
+				/>
+				<label for="signup-tab-input" class="tab-label">
+					<div class="label">Sign Up</div>
+				</label>
+				<div class="tab-content">
+					<form id="signup-form" action="/api/users">
+						<script>
+							{
+								const form = document.currentScript.closest("form");
+								form.on_response = (response) => {
+									document.body.dataset.user = JSON.stringify(response.user);
+									document.body.dataset.perms =
+										response.user.permissions.join(":");
+									console.dir({ response });
+								};
+							}
+						</script>
+						<div>
+							<input id="signup-username" type="text" name="username" required />
+							<label for="signup-username">username</label>
+						</div>
+						<div>
+							<input id="signup-password" type="password" name="password" required />
+							<label for="signup-password">password</label>
+						</div>
+						<button id="signup-submit" type="submit" class="primary">Sign Up</button>
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>