autonomous.contact/public/signup_login_wall.html

<div id="signup-login-wall">
	<style>
		#signup-login-wall {
			display: flex;
			flex-direction: column;
			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;
		}

		#login-tab .tab-content {
			min-height: 17rem;
		}

		#signup-tab .tab-content {
			min-height: 21rem;
		}

		body[data-user] #signup-login-wall {
			visibility: hidden;
			opacity: 0;
		}

		#signup-login-wall .limiter {
			width: 95%;
			min-height: 24rem;
			position: relative;
			background: hsl(from var(--bg) h s 15);
			max-width: 40em;
			margin: 0 auto;
		}

		#signup-login-wall form {
			width: 100%;
			padding: 1.5rem 1.5rem 0 1.5rem;
		}
	</style>

	<!-- #include file="./signup_pitch.md" -->

	<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 data-smart="true" data-method="POST" id="login-form" action="/api/auth">
						<script>
							{
								const form = document.currentScript.closest("form");
								form.on_reply = (response) => {
									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>
						<div>
							<input id="login-username" type="text" name="username" required />
							<label class="placeholder" for="login-username">username</label>
						</div>
						<div>
							<input id="login-password" type="password" name="password" required />
							<label class="placeholder" 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 data-smart="true" data-method="POST" id="signup-form" action="/api/users">
						<script>
							{
								const form = document.currentScript.closest("form");
								form.on_reply = (response) => {
									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>
						<div>
							<input id="signup-username" type="text" name="username" required />
							<label class="placeholder" for="signup-username">username</label>
						</div>
						<div>
							<input id="signup-password" type="password" name="password" required />
							<label class="placeholder" for="signup-password">password</label>
						</div>
						<div>
							<input
								id="signup-invite-code"
								type="text"
								name="invite_code"
								required
							/>
							<label class="placeholder" for="signup-invite-code">invite code</label>
						</div>
						<button id="signup-submit" type="submit" class="primary">Sign Up</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>