From 194938fc1df6257f97bf7f1da94615b8d6e561e0 Mon Sep 17 00:00:00 2001
From: Lennart Kloock <lennart.kloock@protonmail.com>
Date: Sun, 29 Oct 2023 00:58:55 +0200
Subject: [PATCH] feat: new field component

This is much better than before.
Closes [Feature]: refactor auth dialog #132
---
 .../src/components/auth/auth-dialog.svelte    | 303 ++++-----------
 .../website/src/components/auth/field.svelte  | 344 ------------------
 .../auth/solve-two-fa-dialog.svelte           |  63 ++--
 .../website/src/components/form/field.svelte  | 234 ++++++++++++
 .../src/components/form/password-field.svelte |  38 ++
 5 files changed, 375 insertions(+), 607 deletions(-)
 delete mode 100644 platform/website/src/components/auth/field.svelte
 create mode 100644 platform/website/src/components/form/field.svelte
 create mode 100644 platform/website/src/components/form/password-field.svelte

diff --git a/platform/website/src/components/auth/auth-dialog.svelte b/platform/website/src/components/auth/auth-dialog.svelte
index ae213bb47..9d6b3e96b 100644
--- a/platform/website/src/components/auth/auth-dialog.svelte
+++ b/platform/website/src/components/auth/auth-dialog.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
-	import { onDestroy } from "svelte";
 	import { Turnstile } from "svelte-turnstile";
 	import { AuthDialog, authDialog, session } from "$/store/auth";
-	import LoginField, { newField } from "$/components/auth/field.svelte";
 	import { z } from "zod";
 	import { getContextClient } from "@urql/svelte";
 	import { graphql } from "$gql";
 	import { PUBLIC_CF_TURNSTILE_KEY } from "$env/static/public";
 	import Dialog from "../dialog.svelte";
 	import SolveTwoFaDialog from "./solve-two-fa-dialog.svelte";
+	import { FieldStatusType, type FieldStatus, resetAllFields } from "../form/field.svelte";
+	import Field from "$/components/form/field.svelte";
+	import { faEye } from "@fortawesome/free-solid-svg-icons";
+	import Fa from "svelte-fa";
+	import PasswordField from "../form/password-field.svelte";
 
 	const client = getContextClient();
 
@@ -48,56 +51,35 @@
 	let turnstileToken = "";
 	let loggingIn = false;
 
-	let username = newField({
-		id: "username",
-		type: "text",
-		label: "Username",
-		autoComplete: "username",
-		extra: {
-			timeout: undefined as NodeJS.Timeout | undefined,
-		},
-		reload() {
-			username.touched = username.value.length > 0;
+	$: $authDialog, resetAllFields();
 
+	let usernameValue: string;
+	let usernameStatus: FieldStatus;
+	let usernameValidationTimeout: number | NodeJS.Timeout;
+	function usernameValidate(v: string): Promise<FieldStatus> {
+		return new Promise((resolve) => {
+			globalMessage = "";
 			if ($authDialog === AuthDialog.Login) {
-				username.message = "";
-				username.status = "";
-			}
-
-			if (username.touched) {
-				username.update(username.value);
-			}
-		},
-		update(value) {
-			username.value = value;
-
-			// We clear the timeout so that we dont send a request to the server on every character change.
-			clearTimeout(username.extra.timeout);
-
-			// When we are in login mode, we dont need to validate the username.
-			if ($authDialog !== AuthDialog.Register) {
+				resolve({ type: FieldStatusType.Success });
 				return;
 			}
 
+			clearTimeout(usernameValidationTimeout);
+
 			const valid = z
-				.string()
-				.min(3, "Minimum of 3 characters")
-				.max(20, "Maximum of 20 characters")
-				.regex(/^[a-zA-Z0-9_]*$/, "Username can only contain letters, numbers, and underscores")
-				.safeParse(username.value);
+					.string()
+					.min(3, "Minimum of 3 characters")
+					.max(20, "Maximum of 20 characters")
+					.regex(/^[a-zA-Z0-9_]*$/, "Username can only contain letters, numbers, and underscores")
+					.safeParse(v);
 			if (!valid.success) {
-				username.status = "error";
-				username.message = valid.error.issues[0].message;
+				resolve({ type: FieldStatusType.Error, message: valid.error.issues[0].message });
 				return;
 			}
 
-			username.message = "Hold on while we check if this username is available...";
-			username.status = "loading";
+			usernameStatus = { type: FieldStatusType.Loading, message: "Hold on while we check if this username is available..." };
 
-			// This is known as a debouncer.
-			// We dont want to send a request to the server on every character change.
-			// Instead we wait 200ms after the user stops typing before sending the request.
-			username.extra.timeout = setTimeout(async () => {
+			usernameValidationTimeout = setTimeout(async () => {
 				const result = await client
 					.query(
 						graphql(`
@@ -109,7 +91,7 @@
 								}
 							}
 						`),
-						{ username: username.value },
+						{ username: v },
 						{
 							requestPolicy: "network-only",
 						},
@@ -117,104 +99,33 @@
 					.toPromise();
 
 				if (result.error) {
-					username.status = "error";
-					username.message = "Something went wrong.";
-					return;
+					resolve({ type: FieldStatusType.Error, message: "Something went wrong." });
 				}
 
 				if (result.data?.user.user?.id) {
-					username.status = "error";
-					username.message = "This username is already taken";
-					return;
+					resolve({ type: FieldStatusType.Error, message: "This username is already taken" });
 				}
 
-				username.status = "success";
-				username.message = "";
+				resolve({ type: FieldStatusType.Success });
 			}, 200);
-		},
-		valid() {
-			// We cannot refer to the value stored at `username.value` directly here since we are using it to return a value.
-			// This causes typescript to complain that the value is referenced in the value definition.
-			// To get around this we need to unfortunately cast the value to a string so that typescript knows it is a string before the value `username` value is defined.
-			// This is safe since we know that the value is a string.
-			const value = username.value as string;
-			const status = username.status as string;
-
-			if ($authDialog === AuthDialog.Login) {
-				return value.length > 0;
-			}
-
-			return status === "success";
-		},
-		validate(value) {
-			// This is on character change validation (not on submit)
-			return z
-				.string()
-				.regex(/^[a-zA-Z0-9_]*$/, "Username can only contain letters, numbers, and underscores")
-				.safeParse(value).success;
-		},
-	});
-
-	let email = newField({
-		id: "email",
-		type: "email",
-		label: "Email",
-		autoComplete: "email",
-		reload() {
-			email.touched = email.value.length > 0;
-			if (email.touched) {
-				email.update(email.value);
-			}
-		},
-		update(value) {
-			email.value = value;
-
-			if ($authDialog !== AuthDialog.Register) {
-				return;
-			}
-
-			const valid = z.string().email("Please enter a valid email").safeParse(email.value);
-			if (!valid.success) {
-				email.status = "error";
-				email.message = valid.error.issues[0].message;
-				return;
-			}
-
-			email.status = "success";
-			email.message = "";
-		},
-		valid() {
-			const status = email.status as string;
-			return status === "success";
-		},
-	});
-
-	let password = newField({
-		id: "password",
-		type: "password",
-		label: "Password",
-		reload() {
-			password.touched = password.value.length > 0;
-			password.status = "";
-			password.message = "";
-
-			password.autoComplete =
-				$authDialog === AuthDialog.Login ? "current-password" : "new-password";
-
-			password.update(password.value);
-		},
-		update(value) {
-			password.value = value;
-
-			// When we are in login mode, we dont need to validate the password.
-			if ($authDialog !== AuthDialog.Register) {
-				return;
-			}
+		});
+	}
 
-			// Since the validity of confirm password depends on the password, we need to cause a re-render of the confirm password field.
-			confirmPassword.update(confirmPassword.value);
+	let emailStatus: FieldStatus;
+	let emailValue: string;
+	async function emailValidate(v: string): Promise<FieldStatus> {
+		globalMessage = "";
+		const valid = z.string().email("Please enter a valid email").safeParse(v);
+		return valid.success ?
+			{ type: FieldStatusType.Success } : 
+			{ type: FieldStatusType.Error, message: valid.error.issues[0].message };
+	}
 
-			const valid = z
+	let passwordStatus: FieldStatus;
+	let passwordValue: string;
+	async function passwordValidate(v: string): Promise<FieldStatus> {
+		globalMessage = "";
+		const valid = z
 				.string()
 				.min(8, "At least 8 characters")
 				.max(100, "Maximum of 100 characters")
@@ -222,88 +133,37 @@
 				.regex(/.*[a-z].*/, "At least one lowercase character")
 				.regex(/.*\d.*/, "At least one number")
 				.regex(/.*[`~<>?,./!@#$%^&*()\-_+="'|{}[\];:].*/, "At least one special character")
-				.safeParse(value);
+				.safeParse(v);
 
-			if (!valid.success) {
-				password.status = "error";
-				password.message = valid.error.issues[0].message;
-				return;
-			}
-
-			password.status = "success";
-			password.message = "";
-		},
-		valid() {
-			const value = password.value as string;
-			const status = password.status as string;
+		if (!valid.success) {
+			return { type: FieldStatusType.Error, message: valid.error.issues[0].message };
+		}
 
-			if ($authDialog === AuthDialog.Login) {
-				return value.length > 0;
-			}
+		return { type: FieldStatusType.Success };
+	}
 
-			return status === "success";
-		},
-	});
-
-	let confirmPassword = newField({
-		id: "confirmPassword",
-		type: "password",
-		label: "Confirm Password",
-		autoComplete: "new-password",
-		reload() {
-			confirmPassword.touched = confirmPassword.value.length > 0;
-			confirmPassword.status = "";
-			confirmPassword.message = "";
-		},
-		update(value) {
-			confirmPassword.value = value;
-
-			if ($authDialog !== AuthDialog.Register) {
-				return;
-			}
+	let confirmPasswordStatus: FieldStatus;
+	async function confirmPasswordValidate(v: string): Promise<FieldStatus> {
+		globalMessage = "";
+		if (passwordValue !== v) {
+			return { type: FieldStatusType.Error, message: "Passwords do not match" };
+		}
 
-			if (password.value !== confirmPassword.value) {
-				confirmPassword.status = "error";
-				confirmPassword.message = "Passwords do not match";
-				return;
-			}
+		return { type: FieldStatusType.Success };
+	}
 
-			if (confirmPassword.value.length === 0) {
-				confirmPassword.status = "";
-				confirmPassword.message = "";
-				return;
+	function calcFormValid(status: (FieldStatus | undefined)[]) {
+		for (let s of status) {
+			if (!s || s.type !== FieldStatusType.Success) {
+				return false;
 			}
-
-			confirmPassword.status = "success";
-			confirmPassword.message = "";
-		},
-		valid() {
-			const status = confirmPassword.status as string;
-
-			return status === "success";
-		},
-	});
-
-	$: formValid =
-		($authDialog === AuthDialog.Login
-			? username.valid() && password.valid()
-			: username.valid() && email.valid() && password.valid() && confirmPassword.valid()) &&
-		turnstileToken.length > 0;
-
-	// When the login mode changes we need to reload the fields.
-	// This is because the fields have specific logic for each mode.
-	let unsubscribe = authDialog.subscribe((m) => {
-		if (m === AuthDialog.Closed) {
-			return;
 		}
-
-		username.reload();
-		email.reload();
-		password.reload();
-		confirmPassword.reload();
-	});
-
-	onDestroy(unsubscribe);
+		return true;
+	}
+	$: formValid = turnstileToken.length > 0 &&
+		($authDialog === AuthDialog.Login
+			? calcFormValid([usernameStatus, passwordStatus])
+			: calcFormValid([usernameStatus, emailStatus, passwordStatus, confirmPasswordStatus]));
 
 	function closeDialog() {
 		$authDialog = AuthDialog.Closed;
@@ -332,17 +192,17 @@
 				? {
 						query: loginQuery,
 						variables: {
-							username: username.value,
-							password: password.value,
+							username: usernameValue,
+							password: passwordValue,
 							captchaToken: turnstileToken,
 						},
 				  }
 				: {
 						query: registerQuery,
 						variables: {
-							username: username.value,
-							password: password.value,
-							email: email.value,
+							username: usernameValue,
+							password: passwordValue,
+							email: emailValue,
 							captchaToken: turnstileToken,
 						},
 				  };
@@ -361,14 +221,11 @@
 				globalMessage = `${error.extensions.reason || error.message}`;
 				for (const field of fields) {
 					if (field === "username") {
-						username.status = "error";
-						username.message = "";
+						usernameStatus = { type: FieldStatusType.Error };
 					} else if (field === "password") {
-						password.status = "error";
-						password.message = "";
+						passwordStatus = { type: FieldStatusType.Error };
 					} else if (field === "email") {
-						email.status = "error";
-						email.message = "";
+						emailStatus = { type: FieldStatusType.Error };
 					} else if (field == "captchaToken") {
 						turnstileToken = "";
 					}
@@ -446,15 +303,15 @@
 			</h2>
 		</div>
 		<form on:submit|preventDefault={onSubmit}>
-			<LoginField field={username} />
+			<Field type="text" autocomplete="username" required label="Username" bind:status={usernameStatus} bind:value={usernameValue} validate={usernameValidate} />
 			{#if $authDialog === AuthDialog.Register}
-				<LoginField field={email} />
+				<Field type="email" autocomplete="email" required label="Email" bind:status={emailStatus} bind:value={emailValue} validate={emailValidate} />
 			{/if}
-			<LoginField field={password} />
+			<PasswordField autocomplete={$authDialog === AuthDialog.Login ? "current-password" : "new-password"} required label="Password" bind:status={passwordStatus} bind:value={passwordValue} validate={passwordValidate} />
 			{#if $authDialog === AuthDialog.Register}
-				<LoginField field={confirmPassword} />
+				<PasswordField autocomplete="new-password" required label="Confirm Password" bind:status={confirmPasswordStatus} validate={confirmPasswordValidate} />
 			{/if}
-			{#if globalMessage !== ""}
+			{#if globalMessage}
 				<div class="message-holder" class:error={globalIsError}>
 					<span>{globalMessage}</span>
 				</div>
diff --git a/platform/website/src/components/auth/field.svelte b/platform/website/src/components/auth/field.svelte
deleted file mode 100644
index 61c42904e..000000000
--- a/platform/website/src/components/auth/field.svelte
+++ /dev/null
@@ -1,344 +0,0 @@
-<script context="module" lang="ts">
-	export type StatusType = "success" | "error" | "warning" | "loading" | "";
-
-	//
-	// Field behavior
-	// 	Inside functions on the fields we cannot use `this` to refer to the field object.
-	// 	This is because the svelte compiler does not know that `this` refers to the field object,
-	//  Thus it does not detect changes to the field object and does not update the UI.
-	//  Even though we actually do mutate the same object, svelte does not detect it.
-	//  You can learn more about how svelte works here: https://svelte.dev/tutorial/updating-arrays-and-objects
-	//
-
-	export interface LoginFieldOptions<T = Record<string, never>> {
-		id?: string;
-		type?: string;
-		label?: string;
-		placeholder?: string;
-		value?: string;
-		message?: string;
-		status?: StatusType;
-		touched?: boolean;
-		extra?: T;
-		required?: boolean;
-		autoComplete?: string;
-		validate?: (this: unknown, value: string) => boolean;
-		valid?: (this: unknown) => boolean;
-		update?: (this: unknown, value: string) => void;
-		reload?: (this: unknown) => void;
-	}
-
-	export interface LoginFieldType<T = Record<string, never>> extends LoginFieldOptions<T> {
-		id: string;
-		type: string;
-		label: string;
-		required: boolean;
-		autoComplete: string;
-		placeholder: string;
-		value: string;
-		message: string;
-		status: StatusType;
-		touched: boolean;
-		extra: T;
-		// Defining `this: unknown` causes typescript to get mad when we use `this` inside the function.
-		// This is because `this` is not actually `unknown` but is the field object. However we should discourage the use of `this` inside the functions,
-		// Since it creates undefined behavior as explained above.
-		validate: (this: unknown, value: string) => boolean;
-		valid: (this: unknown) => boolean;
-		update: (this: unknown, value: string) => void;
-		reload: (this: unknown) => void;
-	}
-
-	export function newField<T = Record<string, never>>(
-		props: LoginFieldOptions<T>,
-	): LoginFieldType<T> {
-		return {
-			id: props.id || "",
-			type: props.type || "text",
-			label: props.label || "",
-			autoComplete: props.autoComplete || "off",
-			required: props.required || false,
-			placeholder: props.placeholder || "",
-			value: props.value || "",
-			message: props.message || "",
-			status: props.status || "",
-			touched: props.touched || false,
-			extra: props.extra || ({} as T),
-			validate: props.validate || (() => true),
-			valid: props.valid || (() => true),
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-			update: props.update || (() => {}),
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-			reload: props.reload || (() => {}),
-		};
-	}
-</script>
-
-<script lang="ts">
-	import Fa from "svelte-fa";
-	import {
-		faCircleNotch,
-		faCheck,
-		faTriangleExclamation,
-		faXmark,
-		faEyeSlash,
-		faEye,
-	} from "@fortawesome/free-solid-svg-icons";
-
-	// This is safe becasuse we never access the extra field to which the type is templated.
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let field: LoginFieldType<any>;
-
-	let oldValue = "";
-	let value = field.value;
-	let passwordVisible = false;
-	let inputEl: HTMLInputElement;
-
-	$: {
-		// This branch is true when the user enters data into the field.
-		if (oldValue !== value) {
-			let invalidFirstTouch = false;
-
-			if (!field.validate(value)) {
-				value = oldValue;
-				invalidFirstTouch = !field.touched;
-				field.touched = true;
-			}
-
-			if (value.length > 0) {
-				field.touched = true;
-			}
-
-			if ((field.touched && value !== oldValue) || invalidFirstTouch) {
-				field.update(value);
-				oldValue = value;
-			}
-		} else if (field.value !== value) {
-			// This branch is true when the field is updated from the outside.
-			value = field.value;
-		}
-	}
-
-	// Svelte does not allow 2 way binding on input type, so we have to do it manually.
-	function useType(node: HTMLInputElement) {
-		node.type = field.type === "password" ? (passwordVisible ? "text" : "password") : field.type;
-	}
-
-	// When the user clicks the password visibility toggle, we toggle the password visibility.
-	// Only called when type is password.
-	function togglePasswordVisible() {
-		passwordVisible = !passwordVisible;
-		useType(inputEl);
-	}
-</script>
-
-<div class={"form-group " + (field.touched ? field.status : "")}>
-	<label for={field.id}>{field.label}</label>
-	<!-- This wrapper allows for relative CSS positioning -->
-	<div class="input-group">
-		<input
-			id={field.id}
-			placeholder={field.placeholder}
-			autocomplete={field.autoComplete}
-			required={field.required}
-			bind:value
-			use:useType
-			bind:this={inputEl}
-			aria-invalid={field.touched && field.status === "error"}
-			aria-errormessage="{field.id}-message"
-		/>
-		<!-- This wrapper is absolute and relative to the input field and it makes it easy to do CSS positioning -->
-		<div class="field-inliner">
-			<!-- Only render the password visibility toggle if the type is password -->
-			{#if field.type === "password"}
-				<button
-					class="password-visible"
-					on:click={togglePasswordVisible}
-					tabindex="-1"
-					type="button"
-				>
-					{#if passwordVisible}
-						<Fa icon={faEyeSlash} />
-					{:else}
-						<Fa icon={faEye} />
-					{/if}
-				</button>
-			{/if}
-			<!-- Only render the status icon if the field has been touched, otherwise on first load everything will be of type "error" -->
-			<!-- Touched only happens when the value has been modified once -->
-			{#if field.touched}
-				{#if field.status === "loading"}
-					<div class="input-status">
-						<Fa icon={faCircleNotch} spin />
-					</div>
-				{:else if field.status === "success"}
-					<div class="input-status">
-						<Fa icon={faCheck} />
-					</div>
-				{:else if field.status === "error"}
-					<div class="input-status">
-						<Fa icon={faXmark} />
-					</div>
-				{:else if field.status === "warning"}
-					<div class="input-status">
-						<Fa icon={faTriangleExclamation} />
-					</div>
-				{/if}
-			{/if}
-		</div>
-	</div>
-	<!-- We don't conditionally render here because we want smooth animations, so we just toggle visibility with some "hidden" text -->
-	<span id="{field.id}-message" class="message" class:visible={!!field.message && field.touched}
-		>{field.touched && (field.message || "hidden")}</span
-	>
-</div>
-
-<style lang="scss">
-	@import "../../assets/styles/variables.scss";
-
-	.form-group {
-		font-family: inherit;
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		margin-bottom: 1rem;
-		text-align: left;
-
-		label {
-			margin-bottom: 0.5rem;
-			opacity: 85%;
-		}
-
-		&.success {
-			input {
-				border-color: $successColor !important;
-				background-color: black;
-			}
-
-			.message {
-				color: $successColorDark;
-			}
-
-			.input-status {
-				color: $successColor;
-			}
-		}
-
-		&.error {
-			input {
-				border-color: $errorColor !important;
-				background-color: black;
-			}
-
-			.message {
-				color: $errorColorDark;
-			}
-
-			.input-status {
-				color: $errorColor;
-			}
-		}
-
-		&.warning {
-			input {
-				border-color: $warningColor !important;
-				background-color: black;
-			}
-
-			.message {
-				color: $warningColorDark;
-			}
-
-			.input-status {
-				color: $warningColor;
-			}
-		}
-
-		&.loading {
-			input {
-				border-color: $loadingColor !important;
-				background-color: black;
-			}
-
-			.message {
-				color: $loadingColor;
-			}
-
-			.input-status {
-				color: $loadingColor;
-			}
-		}
-
-		input {
-			font-family: inherit;
-			padding: 0.5rem;
-			border-radius: 0.25rem;
-			outline: 1px solid $borderColor;
-			background-color: $bgColor2;
-			border: 2px solid transparent;
-			box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.15);
-			transition: border-color 0.25s ease-in-out;
-			width: 100%;
-
-			color: $textColor;
-
-			&:hover,
-			&:focus-visible {
-				border-color: $borderColor;
-			}
-
-			&:focus {
-				background-color: black;
-				border-color: $primaryColor;
-				box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-			}
-		}
-
-		.message {
-			margin-top: 0.1rem;
-			font-size: 0.9rem;
-			color: $textColorLight;
-			max-height: 0;
-			overflow: hidden;
-			transition: max-height 0.25s ease;
-			visibility: hidden;
-			&.visible {
-				visibility: visible;
-				max-height: 1rem;
-			}
-		}
-
-		.input-group {
-			position: relative;
-			width: 100%;
-		}
-
-		.field-inliner {
-			position: absolute;
-			right: 0;
-			top: 0;
-			z-index: 1;
-			display: flex;
-			font-size: 1rem;
-			padding: 0 0.5rem;
-		}
-
-		.input-status {
-			font-size: 1.25em;
-			padding: 0.25rem 0;
-			margin-top: 0.1em;
-			margin-left: 0.25rem;
-		}
-
-		.password-visible {
-			background-color: transparent;
-			padding: 0.5rem 0;
-			color: rgba(255, 255, 255, 0.35);
-			border: 0;
-			z-index: 1;
-			font: inherit;
-			margin: 0;
-			width: 1.5rem;
-		}
-	}
-</style>
diff --git a/platform/website/src/components/auth/solve-two-fa-dialog.svelte b/platform/website/src/components/auth/solve-two-fa-dialog.svelte
index 7eb4b9646..4ef3a02de 100644
--- a/platform/website/src/components/auth/solve-two-fa-dialog.svelte
+++ b/platform/website/src/components/auth/solve-two-fa-dialog.svelte
@@ -1,46 +1,31 @@
 <script lang="ts">
 	import { getContextClient } from "@urql/svelte";
-	import Field, { newField } from "./field.svelte";
 	import { graphql } from "$/gql";
 	import { authDialog, session, AuthDialog } from "$/store/auth";
 	import { z } from "zod";
+	import Field, { FieldStatusType, type FieldStatus } from "../form/field.svelte";
 
 	const client = getContextClient();
 
-	const code = newField({
-		id: "code",
-		type: "text",
-		label: "Code",
-		autoComplete: "one-time-code",
-		update(value) {
-			code.value = value;
+	let codeStatus: FieldStatus;
+	let codeLabel = "Code";
+	let code: string;
+	async function codeValidate(v: string): Promise<FieldStatus> {
+		const valid = z
+			.string()
+			.regex(/^(\d{6}|[0-9a-fA-F]{8})$/, "Invalid code")
+			.safeParse(v);
 
-			const valid = z
-				.string()
-				.regex(/^(\d{6}|[0-9a-fA-F]{8})$/, "Invalid code")
-				.safeParse(code.value);
-
-			code.label = "Code";
-			if (valid.success) {
-				code.status = "";
-				code.message = "";
-				// If it is a backup code
-				if (/^[0-9a-fA-F]{8}$/.test(code.value)) {
-					code.label = "Backup Code";
-				}
-			} else {
-				code.status = "error";
-				code.message = valid.error.issues[0].message;
-			}
-		},
-		valid() {
-			const status = code.status as string;
-			return status === "success";
-		},
-		validate(value) {
-			return /^[0-9a-fA-F]*$/.test(value);
-		},
-	});
+		codeLabel = "Code";
+		if (!valid.success) {
+			return { type: FieldStatusType.Error, message: valid.error.issues[0].message };
+		}
+		// If it is a backup code
+		if (/^[0-9a-fA-F]{8}$/.test(v)) {
+			codeLabel = "Backup Code";
+		}
+		return { type: FieldStatusType.None };
+	}
 
 	async function onSubmit() {
 		const res = await client
@@ -55,15 +40,14 @@
 						}
 					}
 				`),
-				{ code: code.value },
+				{ code: code },
 				{
 					requestPolicy: "network-only",
 				},
 			)
 			.toPromise();
 		if (res.data) {
-			code.status = "success";
-			code.message = "";
+			codeStatus = { type: FieldStatusType.Success };
 			$session = res.data.auth.resp;
 			$authDialog = AuthDialog.Closed;
 		} else if (res.error) {
@@ -72,8 +56,7 @@
 				res.error.graphQLErrors[0].extensions.fields.includes("code") &&
 				typeof res.error.graphQLErrors[0].extensions.reason === "string"
 			) {
-				code.status = "error";
-				code.message = res.error.graphQLErrors[0].extensions.reason;
+				codeStatus = { type: FieldStatusType.Error, message: res.error.graphQLErrors[0].extensions.reason };
 			}
 		}
 	}
@@ -85,7 +68,7 @@
 	anymore, please enter a backup code.
 </p>
 <form on:submit|preventDefault={onSubmit}>
-	<Field field={code} />
+	<Field label={codeLabel} autocomplete="one-time-code" bind:value={code} validate={codeValidate} bind:status={codeStatus} />
 	<div class="button-group">
 		<input class="button-submit" type="submit" value="Submit" />
 	</div>
diff --git a/platform/website/src/components/form/field.svelte b/platform/website/src/components/form/field.svelte
new file mode 100644
index 000000000..5633118c7
--- /dev/null
+++ b/platform/website/src/components/form/field.svelte
@@ -0,0 +1,234 @@
+<script context="module" lang="ts">
+    let fieldCounter = 0;
+
+    export enum FieldStatusType {
+        None = "",
+        Success = "success",
+        Error = "error",
+        Warning = "warning",
+        Loading = "loading",
+    };
+
+    export type FieldStatus = { type: FieldStatusType, message?: string };
+
+    let resetFns: {[key: number]: () => void} = {};
+
+    export function resetAllFields() {
+        for (let reset of Object.values(resetFns)) {
+            reset();
+        }
+    }
+</script>
+
+<script lang="ts">
+    import Fa from "svelte-fa";
+	import { faCheck, faTriangleExclamation, faXmark } from "@fortawesome/free-solid-svg-icons";
+	import Spinner from "../spinner.svelte";
+	import { onMount } from "svelte";
+
+    export let type: string = "text";
+    export let label: string;
+    export let autocomplete: string | undefined = undefined;
+    export let required: boolean = false;
+    export let placeholder: string | undefined = undefined;
+    export let value: string = "";
+    export let validate: (v: string) => Promise<FieldStatus> = () => new Promise((resolve) => resolve({ type: FieldStatusType.None }));
+    export let status: FieldStatus = { type: FieldStatusType.None };
+
+    let touched = false;
+
+    let id = fieldCounter++;
+
+    onMount(() => {
+        resetFns[id] = () => {
+            touched = false;
+            value = "";
+            status = { type: FieldStatusType.None };
+        };
+        return () => {
+            delete resetFns[id];
+        };
+    });
+
+    $: if (value.length > 0) {
+        touched = true;
+    }
+
+    $: if (touched) {
+        status = { type: FieldStatusType.Loading };
+        validate(value).then((s) => status = s);
+    }
+</script>
+
+<div class="field-outer {status.type}">
+    <label for="field-{id}">{label}</label>
+    <div class="field">
+        <!-- https://stackoverflow.com/a/75298645/10772729 -->
+        <input
+            id="field-{id}"
+            {placeholder}
+            {autocomplete}
+            {required}
+            bind:value={value}
+            {...{type}}
+        />
+        <div class="input-inner">
+            <slot />
+            {#if status.type === FieldStatusType.Loading}
+				<div class="input-status">
+                    <Spinner />
+				</div>
+			{:else if status.type === FieldStatusType.Success}
+				<div class="input-status">
+					<Fa icon={faCheck} />
+				</div>
+			{:else if status.type === FieldStatusType.Error}
+				<div class="input-status">
+					<Fa icon={faXmark} />
+				</div>
+			{:else if status.type === FieldStatusType.Warning}
+				<div class="input-status">
+					<Fa icon={faTriangleExclamation} />
+				</div>
+			{/if}
+        </div>
+    </div>
+    <!-- We don't conditionally render here because we want smooth animations, so we just toggle visibility with some "hidden" text -->
+	<span id="field-{id}-message" class="message" class:visible={status.message}>{status.message}</span>
+</div>
+
+<style lang="scss">
+    @import "../../assets/styles/variables.scss";
+
+    .field-outer {
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 1rem;
+        text-align: left;
+
+        &.success {
+            input {
+                border-color: $successColor !important;
+                background-color: black;
+            }
+
+            .message {
+				color: $successColorDark;
+			}
+
+			.input-status {
+				color: $successColor;
+			}
+        }
+
+        &.error {
+			input {
+				border-color: $errorColor !important;
+				background-color: black;
+			}
+
+			.message {
+				color: $errorColorDark;
+			}
+
+			.input-status {
+				color: $errorColor;
+			}
+		}
+
+		&.warning {
+			input {
+				border-color: $warningColor !important;
+				background-color: black;
+			}
+
+			.message {
+				color: $warningColorDark;
+			}
+
+			.input-status {
+				color: $warningColor;
+			}
+		}
+
+		&.loading {
+			input {
+				border-color: $loadingColor !important;
+				background-color: black;
+			}
+
+			.message {
+				color: $loadingColor;
+			}
+
+			.input-status {
+				color: $loadingColor;
+			}
+		}
+    }
+
+    label {
+        margin-bottom: 0.5rem;
+		color: $textColorLighter;
+	}
+
+    .field {
+        position: relative;
+
+        input {
+			padding: 0.5rem;
+			border-radius: 0.25rem;
+			outline: 1px solid $borderColor;
+			background-color: $bgColor2;
+			border: 2px solid transparent;
+			box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.15);
+			transition: border-color 0.25s ease-in-out;
+			width: 100%;
+
+			color: $textColor;
+
+			&:hover,
+			&:focus-visible {
+				border-color: $borderColor;
+			}
+
+			&:focus {
+				background-color: black;
+				border-color: $primaryColor;
+				box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+			}
+		}
+    }
+
+    .message {
+		margin-top: 0.1rem;
+		font-size: 0.9rem;
+		max-height: 0;
+        color: $textColorLight;
+		overflow: hidden;
+		transition: max-height 0.25s ease;
+		visibility: hidden;
+
+		&.visible {
+			visibility: visible;
+			max-height: 1rem;
+		}
+	}
+
+    .input-status {
+		font-size: 1.25em;
+		padding: 0.25rem 0;
+		margin-top: 0.1em;
+		margin-left: 0.25rem;
+	}
+
+    .input-inner {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        display: flex;
+		font-size: 1rem;
+		padding: 0 0.5rem;
+    }
+</style>
diff --git a/platform/website/src/components/form/password-field.svelte b/platform/website/src/components/form/password-field.svelte
new file mode 100644
index 000000000..3a632e817
--- /dev/null
+++ b/platform/website/src/components/form/password-field.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import Fa from "svelte-fa";
+	import Field, { type FieldStatus } from "./field.svelte";
+	import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+
+    export let status: FieldStatus;
+    export let label: string;
+    export let autocomplete: string | undefined = undefined;
+    export let required: boolean = false;
+    export let placeholder: string | undefined = undefined;
+    export let value: string = "";
+    export let validate: ((v: string) => Promise<FieldStatus>) | undefined;
+
+    let type = "password";
+    $: revealed = type === "text";
+
+    function clickReveal() {
+        if (revealed) {
+            type = "password";
+        } else {
+            type = "text";
+        }
+    }
+</script>
+
+<Field {type} {label} {autocomplete} {required} {placeholder} bind:value {validate} bind:status>
+    <button on:click={clickReveal} class="reveal-button" tabindex="-1" type="button">
+        <Fa icon={revealed ? faEyeSlash : faEye} fw />
+    </button>
+</Field>
+
+<style lang="scss">
+    @import "../../assets/styles/variables.scss";
+
+    .reveal-button {
+        color: $textColorLight;
+    }
+</style>