feat(login): Add registration and password recovery to LoginModal

src/lib/components/LoginModal.svelte

@@ -5,57 +5,126 @@
 	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
 	import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
-import Logo from "./icons/Logo.svelte";
-import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+	import Logo from "./icons/Logo.svelte";
+	import CarbonCopy from "~icons/carbon/copy";
+	import CarbonCheckmark from "~icons/carbon/checkmark";
+	import CarbonView from "~icons/carbon/view";
+	import CarbonViewOff from "~icons/carbon/view-off";
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
 
-const publicConfig = usePublicConfig();
+	const publicConfig = usePublicConfig();
 
-interface Props {
-	onclose?: () => void;
-}
+	interface Props {
+		onclose?: () => void;
+	}
 
-let { onclose }: Props = $props();
+	let { onclose }: Props = $props();
 
-let showPasswordForm = $state(false);
-let passwordErrorMessage = $state(false);
-let isSubmitting = $state(false);
+	let showPasswordForm = $state(false);
+	let isRegistering = $state(false);
+	let isRecovering = $state(false);
+	let passwordErrorMessage = $state("");
+	let passwordSuccessMessage = $state("");
+	let isSubmitting = $state(false);
+	
+	let recoveryKey = $state("");
+	let recoveryKeyCopied = $state(false);
+	let passwordVisible = $state(false);
+	let passwordInput = $state("");
 
-async function handlePasswordSubmit(event: SubmitEvent) {
-	event.preventDefault();
-	if (isSubmitting) return;
+	let usernameInput = $state("");
 
-	if (!cookiesAreEnabled()) {
-		window.open(window.location.href, "_blank");
-		return;
-	}
+	async function handlePasswordSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		if (isSubmitting) return;
 
-	isSubmitting = true;
-	passwordErrorMessage = false;
+		if (!cookiesAreEnabled()) {
+			window.open(window.location.href, "_blank");
+			return;
+		}
 
-	const formData = new FormData(event.target as HTMLFormElement);
-	const body = Object.fromEntries(formData.entries());
+		isSubmitting = true;
+		passwordErrorMessage = "";
+		passwordSuccessMessage = "";
 
-	try {
-		const response = await fetch(`${base}/login/password`, {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify(body),
-		});
+		const formData = new FormData(event.target as HTMLFormElement);
+		const body = Object.fromEntries(formData.entries());
 
-		if (response.ok) {
-			window.location.href = `${base}/`;
+		try {
+			if (isRecovering) {
+				const response = await fetch(`${base}/login/recover`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(body),
+				});
+
+				if (response.ok) {
+					const data = await response.json();
+					if (data.newRecoveryKey) {
+						isRecovering = false;
+						recoveryKey = data.newRecoveryKey;
+						passwordSuccessMessage = "Password reset successfully. Please save your NEW recovery key.";
+					} else {
+						isRecovering = false;
+						isRegistering = false;
+						passwordSuccessMessage = "Password reset successfully. Please sign in.";
+					}
+				} else {
+					const result = await response.json();
+					passwordErrorMessage = result.message || "Recovery failed";
+				}
+			} else if (isRegistering) {
+				const response = await fetch(`${base}/login/register`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(body),
+				});
+
+				if (response.ok) {
+					const data = await response.json();
+					recoveryKey = data.recoveryKey;
+				} else {
+					const result = await response.json();
+					passwordErrorMessage = result.message || "Registration failed";
+				}
+			} else {
+				const response = await fetch(`${base}/login/password`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(body),
+				});
+
+				if (response.ok) {
+					window.location.href = `${base}/`;
+				} else {
+					const result = await response.json();
+					passwordErrorMessage = result.message || "Invalid username or password";
+				}
+			}
+		} catch (e) {
+			console.error(e);
+			passwordErrorMessage = "An error occurred. Please try again.";
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	function handleCopyRecoveryKey() {
+		navigator.clipboard.writeText(recoveryKey);
+		recoveryKeyCopied = true;
+	}
+
+	function handleCloseRecoveryModal() {
+		if (passwordSuccessMessage && passwordSuccessMessage.includes("NEW recovery key")) {
+			recoveryKey = "";
+			recoveryKeyCopied = false;
+			isRecovering = false;
+			isRegistering = false;
+			passwordSuccessMessage = "Password updated successfully. Please sign in with your new password.";
 		} else {
-			const result = await response.json();
-			console.error(result.message);
-			passwordErrorMessage = true;
+			window.location.href = `${base}/`;
 		}
-	} catch (e) {
-		console.error(e);
-		passwordErrorMessage = true;
-	} finally {
-		isSubmitting = false;
 	}
-}
 </script>
 
 <Modal onclose={() => onclose?.()} width="!max-w-[400px] !m-4">
@@ -66,89 +135,249 @@ async function handlePasswordSubmit(event: SubmitEvent) {
 			<Logo classNames="mr-1" />
 			{publicConfig.PUBLIC_APP_NAME}
 		</h2>
-		<!-- <p class="text-balance text-lg font-semibold leading-snug text-gray-800">
-			{publicConfig.PUBLIC_APP_DESCRIPTION}
-		</p>
-		<p class="text-balance rounded-xl border bg-white/80 p-2 text-base text-gray-800">
-			{publicConfig.PUBLIC_APP_GUEST_MESSAGE}
-		</p> -->
-
-		<div class="flex w-full flex-col items-center gap-3">
-			{#if page.data.loginRequired}
-				<a
-					href="{base}/login"
-					class="flex w-full flex-wrap items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-				>
-					Sign in with
-					<span class="flex items-center">
-						&nbsp;<LogoHuggingFaceBorderless classNames="text-xl mr-1" /> Hugging Face
-					</span>
-				</a>
-
-			<button
-				type="button"
-				onclick={() => {
-					showPasswordForm = !showPasswordForm;
-					if (!showPasswordForm) {
-						passwordErrorMessage = false;
-					}
-				}}
-					class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-white px-5 py-2 text-lg font-semibold text-gray-800 transition-colors hover:bg-gray-100"
-				>
-					Sign in with username/password
-				</button>
 
-			{#if showPasswordForm}
-				<form
-					onsubmit={handlePasswordSubmit}
-					class="flex w-full flex-col gap-2 rounded-xl border border-gray-200 bg-white/80 p-3 text-left shadow-sm"
-				>
-					<label class="text-sm font-medium text-gray-700">
-						Username or email
-						<input
-							type="text"
-							name="username"
-							autocomplete="username"
-							required
-							class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-base text-gray-900 focus:border-black focus:outline-none focus:ring-2 focus:ring-black/50"
-						/>
-					</label>
-					<label class="text-sm font-medium text-gray-700">
-						Password
-						<input
-							type="password"
-							name="password"
-							autocomplete="current-password"
-							required
-							class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-base text-gray-900 focus:border-black focus:outline-none focus:ring-2 focus:ring-black/50"
-						/>
-					</label>
-					{#if passwordErrorMessage}
-						<p class="text-sm text-red-600">Invalid username or password. Please try again.</p>
+		{#if recoveryKey}
+			<div class="flex w-full flex-col items-center gap-4">
+				<h3 class="text-xl font-semibold text-gray-800">
+					{#if passwordSuccessMessage && passwordSuccessMessage.includes("NEW recovery key")}
+						Password Updated!
+					{:else}
+						Account Created!
 					{/if}
+				</h3>
+				<p class="text-sm text-gray-600 text-balance">
+					{#if passwordSuccessMessage && passwordSuccessMessage.includes("NEW recovery key")}
+						Your password has been updated.
+						<br/><br/>
+						Your old recovery key has been invalidated. <strong>Save this NEW key safely.</strong> It is now the ONLY way to recover your account.
+					{:else}
+						Save this Recovery Key safely. <strong>It is the ONLY way to recover your account</strong> if you forget your password.
+					{/if}
+				</p>
+
+				<div class="flex w-full items-center gap-2 rounded-md border border-gray-200 bg-gray-50 p-2">
+					<code class="flex-1 break-all font-mono text-sm text-gray-800">
+						{recoveryKey}
+					</code>
 					<button
-						type="submit"
-						disabled={isSubmitting}
-						class="mt-1 flex w-full items-center justify-center whitespace-nowrap rounded-full bg-black px-4 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900 disabled:cursor-not-allowed disabled:bg-gray-500"
+						onclick={handleCopyRecoveryKey}
+						class="flex h-8 w-8 flex-none items-center justify-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-black transition-colors"
+						title="Copy Recovery Key"
 					>
-						{#if isSubmitting}Submitting...{:else}Continue{/if}
+						{#if recoveryKeyCopied}
+							<CarbonCheckmark class="text-green-600" />
+						{:else}
+							<CarbonCopy />
+						{/if}
 					</button>
-				</form>
-			{/if}
-			{:else}
+				</div>
+
 				<button
-					class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-					onclick={(e) => {
-						if (!cookiesAreEnabled()) {
-							e.preventDefault();
-							window.open(window.location.href, "_blank");
-						}
-						onclose?.();
-					}}
+					onclick={handleCloseRecoveryModal}
+					disabled={!recoveryKeyCopied}
+					class="mt-2 w-full rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900 disabled:cursor-not-allowed disabled:opacity-50"
 				>
-					Start chatting
+					I have saved my key
 				</button>
-			{/if}
-		</div>
+			</div>
+		{:else}
+			<div class="flex w-full flex-col items-center gap-3">
+				{#if page.data.loginRequired}
+					<a
+						href="{base}/login"
+						class="flex w-full flex-wrap items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+					>
+						Sign in with
+						<span class="flex items-center">
+							&nbsp;<LogoHuggingFaceBorderless classNames="text-xl mr-1" /> Hugging Face
+						</span>
+					</a>
+
+					{#if !showPasswordForm}
+						<button
+							type="button"
+							onclick={() => {
+								showPasswordForm = true;
+								isRegistering = false;
+								isRecovering = false;
+								passwordInput = "";
+								passwordErrorMessage = "";
+								passwordSuccessMessage = "";
+							}}
+							class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-white px-5 py-2 text-lg font-semibold text-gray-800 transition-colors hover:bg-gray-100"
+						>
+							Sign in with username/password
+						</button>
+					{/if}
+
+					{#if showPasswordForm}
+						<form
+							onsubmit={handlePasswordSubmit}
+							class="flex w-full flex-col gap-2 rounded-xl border border-gray-200 bg-white/80 p-3 text-left shadow-sm"
+						>
+							<div class="mb-2 text-center">
+								<h3 class="text-lg font-semibold">
+									{#if isRecovering}
+										Reset Password
+									{:else if isRegistering}
+										Create Account
+									{:else}
+										Sign In
+									{/if}
+								</h3>
+							</div>
+
+							<label class="text-sm font-medium text-gray-700">
+								Username
+								<input
+									type="text"
+									name="username"
+									autocomplete="username"
+									required
+									bind:value={usernameInput}
+									class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-base text-gray-900 focus:border-black focus:outline-none focus:ring-2 focus:ring-black/50"
+								/>
+							</label>
+
+							{#if isRecovering}
+								<label class="text-sm font-medium text-gray-700">
+									Recovery Key
+									<input
+										type="text"
+										name="recoveryKey"
+										autocomplete="off"
+										required
+										class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-base text-gray-900 focus:border-black focus:outline-none focus:ring-2 focus:ring-black/50"
+									/>
+								</label>
+								<label class="text-sm font-medium text-gray-700">
+									New Password
+									<div class="relative mt-1">
+										<input
+											type={passwordVisible ? "text" : "password"}
+											name="newPassword"
+											autocomplete="new-password"
+											required
+											minlength="8"
+											bind:value={passwordInput}
+											class="w-full rounded-md border border-gray-300 pl-3 pr-20 py-2 text-base text-gray-900 focus:border-black focus:outline-none focus:ring-2 focus:ring-black/50"
+										/>
+										<div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+											<button
+												type="button"
+												class="p-1 text-gray-500 hover:text-black"
+												onclick={() => (passwordVisible = !passwordVisible)}
+												title={passwordVisible ? "Hide password" : "Show password"}
+											>
+												{#if passwordVisible}
+													<CarbonViewOff />
+												{:else}
+													<CarbonView />
+												{/if}
+											</button>
+										</div>
+									</div>
+								</label>
+							{:else}
+								{#if isRegistering}
+									<label class="text-sm font-medium text-gray-700">
+										Email (Optional)
+										<input
+											type="email"
+											name="email"
+											autocomplete="email"
+											class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-base text-gray-900 focus:border-black focus:outline-none focus:ring-2 focus:ring-black/50"
+										/>
+									</label>
+								{/if}
+
+								<label class="text-sm font-medium text-gray-700">
+									Password
+									<div class="relative mt-1">
+										<input
+											type={passwordVisible ? "text" : "password"}
+											name="password"
+											autocomplete={isRegistering ? "new-password" : "current-password"}
+											required
+											minlength="8"
+											bind:value={passwordInput}
+											class="w-full rounded-md border border-gray-300 pl-3 pr-20 py-2 text-base text-gray-900 focus:border-black focus:outline-none focus:ring-2 focus:ring-black/50"
+										/>
+										<div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+											<button
+												type="button"
+												class="p-1 text-gray-500 hover:text-black"
+												onclick={() => (passwordVisible = !passwordVisible)}
+												title={passwordVisible ? "Hide password" : "Show password"}
+											>
+												{#if passwordVisible}
+													<CarbonViewOff />
+												{:else}
+													<CarbonView />
+												{/if}
+											</button>
+										</div>
+									</div>
+								</label>
+							{/if}
+
+							{#if passwordErrorMessage}
+								<p class="text-sm text-red-600">{passwordErrorMessage}</p>
+							{/if}
+							{#if passwordSuccessMessage}
+								<p class="text-sm text-green-600">{passwordSuccessMessage}</p>
+							{/if}
+
+							<button
+								type="submit"
+								disabled={isSubmitting}
+								class="mt-1 flex w-full items-center justify-center whitespace-nowrap rounded-full bg-black px-4 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900 disabled:cursor-not-allowed disabled:bg-gray-500"
+							>
+								{#if isSubmitting}
+									Submitting...
+								{:else}
+									{#if isRecovering}
+										Reset Password
+									{:else if isRegistering}
+										Create Account
+									{:else}
+										Sign In
+									{/if}
+								{/if}
+							</button>
+
+							{#if !isRecovering && !isRegistering}
+								<div class="mt-1 text-center">
+									<button type="button" onclick={() => { isRecovering = true; isRegistering = false; passwordInput = ""; passwordErrorMessage = ""; passwordSuccessMessage = ""; }} class="text-sm text-gray-500 hover:underline">Forgot Password?</button>
+								</div>
+							{/if}
+
+							<div class="mt-2 text-center text-sm text-gray-600">
+								{#if isRecovering}
+									Remember it? <button type="button" onclick={() => { isRecovering = false; passwordInput = ""; passwordErrorMessage = ""; passwordSuccessMessage = ""; }} class="font-semibold underline">Sign in</button>
+								{:else if isRegistering}
+									Already have an account? <button type="button" onclick={() => { isRegistering = false; passwordInput = ""; passwordErrorMessage = ""; passwordSuccessMessage = ""; }} class="font-semibold underline">Sign in</button>
+								{:else}
+									Don't have an account? <button type="button" onclick={() => { isRegistering = true; passwordInput = ""; passwordErrorMessage = ""; passwordSuccessMessage = ""; }} class="font-semibold underline">Create one</button>
+								{/if}
+							</div>
+						</form>
+					{/if}
+				{:else}
+					<button
+						class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+						onclick={(e) => {
+							if (!cookiesAreEnabled()) {
+								e.preventDefault();
+								window.open(window.location.href, "_blank");
+							}
+							onclose?.();
+						}}
+					>
+						Start chatting
+					</button>
+				{/if}
+			</div>
+		{/if}
 	</div>
 </Modal>