src/routes/(static)/forgot/+page.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<script>
  import { focus } from "$lib/utils";
  import { enhance } from "$app/forms";
  import { t } from "$lib/translations";
  import Icon from "$comp/Icon.svelte";
  import Spinner from "$comp/Spinner.svelte";
  import { fly } from "svelte/transition";

  let { form } = $props();
  let email = $state();
  let loading;
</script>

<div
  class="mx-auto md:shadow-xl rounded-3xl max-w-xl w-full md:w-[480px] md:p-8 mb-20 space-y-5"
>
  <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}

  {#if form?.success}
    <div class="text-secondary">
      {$t("login.resetSent")}
    </div>

    <div class="flex w-full">
      <a href="/login" class="btn">
        {$t("login.continue")}
      </a>
    </div>
  {:else}
    <form class="space-y-5" method="POST" use:enhance>
      <div>
        <input
          placeholder={$t("login.email")}
          name="email"
          type="text"
          required
          class="bg-primary"
          bind:value={email}
          use:focus
          autocapitalize="none"
        />
      </div>

      <div class="text-secondary">
        {$t("login.resetDesc")}
        <a href="mailto:[email protected]" class="font-bold"
          >[email protected]</a
        >
      </div>

      <button type="submit" class="btn" disabled={loading}>
        {#if loading}
          <Spinner />
        {:else}
          {$t("login.submit")}
        {/if}
      </button>
    </form>
  {/if}
</div>