From 9f0ba2e243be772a7677f8250893f5da7b2acbfe Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 17:42:02 -0500
Subject: Factor out the elements of the `/me` page, and style them a little.

---
 ui/lib/components/ChangePassword.svelte | 60 +++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 ui/lib/components/ChangePassword.svelte

(limited to 'ui/lib/components/ChangePassword.svelte')

diff --git a/ui/lib/components/ChangePassword.svelte b/ui/lib/components/ChangePassword.svelte
new file mode 100644
index 0000000..1e48bee
--- /dev/null
+++ b/ui/lib/components/ChangePassword.svelte
@@ -0,0 +1,60 @@
+<script>
+  import { changePassword } from '$lib/apiServer.js';
+
+  let currentPassword = $state(''),
+    newPassword = $state(''),
+    confirmPassword = $state(''),
+    pending = $state(false),
+    form;
+  let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword);
+  let disabled = $derived(pending || !valid);
+
+  async function onsubmit(event) {
+    event.preventDefault();
+    pending = true;
+    let response = await changePassword(currentPassword, newPassword);
+    switch (response.status) {
+      case 200:
+        form.reset();
+        break;
+    }
+    pending = false;
+  }
+</script>
+
+<form {onsubmit} bind:this={form}>
+  <label
+    >current password
+    <input
+      class="input"
+      name="currentPassword"
+      type="password"
+      placeholder="password"
+      bind:value={currentPassword}
+    />
+  </label>
+
+  <label
+    >new password
+    <input
+      class="input"
+      name="newPassword"
+      type="password"
+      placeholder="password"
+      bind:value={newPassword}
+    />
+  </label>
+
+  <label
+    >confirm new password
+    <input
+      class="input"
+      name="confirmPassword"
+      type="password"
+      placeholder="password"
+      bind:value={confirmPassword}
+    />
+  </label>
+
+  <button class="btn bg-orange-500 mt-4" type="submit" {disabled}>change password</button>
+</form>
-- 
cgit v1.2.3