autonomous.contact/public/signup_login_wall.html

<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>