forgot password

2 files changed, 74 insertions, 0 deletions

diff --git a/src/routes/(app)/forgot/+page.server.js b/src/routes/(app)/forgot/+page.server.js
new file mode 100644
index 00000000..db2005e7
--- /dev/null
+++ b/src/routes/(app)/forgot/+page.server.js
@@ -0,0 +1,16 @@
+import { fail, redirect } from "@sveltejs/kit";
+import { fd, post, login } from "$lib/utils";
+
+export const actions = {
+  default: async ({ request }) => {
+    let { email } = await fd(request);
+
+    try {
+      await post("/forgot", { email });
+      return { success: true };
+    } catch (e) {
+      console.log(e.message);
+      return fail(400, { error: e.message });
+    }
+  },
+};
diff --git a/src/routes/(app)/forgot/+page.svelte b/src/routes/(app)/forgot/+page.svelte
new file mode 100644
index 00000000..91c4290a
--- /dev/null
+++ b/src/routes/(app)/forgot/+page.svelte
@@ -0,0 +1,58 @@
+<script>
+  import { t } from "$lib/translations";
+  import Icon from "$comp/Icon.svelte";
+  import Spinner from "$comp/Spinner.svelte";
+  import { fly } from "svelte/transition";
+
+  export let form;
+  let email;
+  let loading;
+</script>
+
+<div class="pt-10">
+  <div class="w-[243px] mx-auto mb-10">
+    <a href="/">
+      <Icon icon="logo" />
+    </a>
+  </div>
+
+  <div class="flex justify-center items-center">
+    <div
+      class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"
+    >
+      <h1 class="text-2xl font-bold text-center">{$t("login.reset")}</h1>
+
+      {#if form?.error}
+        <div class="text-red-600 text-center" in:fly>
+          {form.error}
+        </div>
+      {/if}
+
+      <form class="space-y-5" method="POST">
+        <div>
+          <label for="email" class="font-semibold">{$t("login.email")}</label>
+          <input
+            name="email"
+            type="text"
+            required
+            class="bg-primary"
+            bind:value={email}
+            use:focus
+            autocapitalize="none"
+          />
+        </div>
+
+        <button
+          type="submit"
+          class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
+          disabled={loading}>
+          {#if loading}
+            <Spinner />
+          {:else}
+            {$t("login.submit")}
+          {/if}
+        </button>
+      </form>
+    </div>
+  </div>
+</div>