From f3ffbb325599debc88b2334d5ff02a661e5043bd Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Sun, 27 Oct 2024 09:23:53 -0400
Subject: [PATCH] add login form loading states

---
 src/components/ButtonLoading.astro | 44 ++++++++++++++++++++++++++++++
 src/pages/login.astro              | 22 +++++++++++++--
 2 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ButtonLoading.astro

diff --git a/src/components/ButtonLoading.astro b/src/components/ButtonLoading.astro
new file mode 100644
index 0000000..0423d9e
--- /dev/null
+++ b/src/components/ButtonLoading.astro
@@ -0,0 +1,44 @@
+---
+interface Props extends astroHTML.JSX.ButtonHTMLAttributes {}
+
+const { class: className } = Astro.props;
+---
+
+<button
+	class:list={['button-loading', className]}
+	data-loading="false"
+	{...Astro.props}
+>
+	<span class="content">
+		<slot />
+	</span>
+	<span class="spinner" aria-label="loading">Loading...</span>
+</button>
+
+<style>
+	.button-loading {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 80px;
+	}
+
+	.button-loading[disabled] {
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+
+	.spinner {
+		position: absolute;
+		display: none;
+	}
+
+	.button-loading[data-loading='true'] .content {
+		visibility: hidden;
+	}
+
+	.button-loading[data-loading='true'] .spinner {
+		display: block;
+	}
+</style>
diff --git a/src/pages/login.astro b/src/pages/login.astro
index 9c1fc2a..936880e 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import ButtonLoading from '../components/ButtonLoading.astro';
 ---
 
 <Layout title="Login">
@@ -11,8 +12,8 @@ import Layout from '../layouts/Layout.astro';
 		<input type="email" id="email" name="email" required />
 		<label for="password">Password</label>
 		<input type="password" id="password" name="password" required />
-		<button type="submit">Login</button>
-		<button id="reset">Reset Password</button>
+		<ButtonLoading type="submit">Login</ButtonLoading>
+		<ButtonLoading id="reset">Reset Password</ButtonLoading>
 	</form>
 </Layout>
 
@@ -21,7 +22,13 @@ import Layout from '../layouts/Layout.astro';
 
 	async function handleSubmit(event: Event) {
 		event.preventDefault();
-		const form = event.target as HTMLFormElement;
+		const form = document.querySelector('#login-form') as HTMLFormElement;
+		const submitButton = form.querySelector(
+			'button[type="submit"]'
+		) as HTMLButtonElement;
+		submitButton.dataset.loading = 'true';
+		submitButton.disabled = true;
+
 		const email = form.email.value;
 		const password = form.password.value;
 		const success = await login(email, password);
@@ -31,12 +38,17 @@ import Layout from '../layouts/Layout.astro';
 			window.location.href = prev || '/';
 		} else {
 			alert('Login failed');
+			submitButton.dataset.loading = 'false';
+			submitButton.disabled = false;
 		}
 	}
 
 	async function handleReset(event: Event) {
 		event.preventDefault();
 		const form = document.querySelector('#login-form') as HTMLFormElement;
+		const resetButton = form.querySelector('#reset') as HTMLButtonElement;
+		resetButton.dataset.loading = 'true';
+		resetButton.disabled = true;
 		const email = form.email.value;
 
 		if (!email) {
@@ -47,12 +59,16 @@ import Layout from '../layouts/Layout.astro';
 		try {
 			await requestResetEmail(email);
 			alert('Password reset email sent');
+			resetButton.dataset.loading = 'false';
+			resetButton.disabled = false;
 		} catch (error) {
 			if (error instanceof Error) {
 				alert(error.message);
 			} else {
 				alert('An error occurred');
 			}
+			resetButton.dataset.loading = 'false';
+			resetButton.disabled = false;
 		}
 	}