src/components/Password.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

<script lang="ts">
  import { t } from "$lib/translations";
  import PasswordInput from "$comp/PasswordInput.svelte";

  import { focus, fail, post } from "$lib/utils";
  import { password as pw, passwordPrompt } from "$lib/store";

  let { user } = $props();
  let password = $state();

  let cancel = () => ($passwordPrompt = false);

  let submit = async (e) => {
    console.log("submitting");
    e.preventDefault();
    try {
      console.log("res?");
      let res = await post("/password", { password });
      console.log(res);
      $passwordPrompt = false;
      $pw = password;
    } catch (e) {
      console.log(e);
      fail("Invalid password, try again");
    }
  };
</script>

<div
  class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
>
  <div
    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-base-100 space-y-5"
  >
    <h1 class="text-center text-2xl font-semibold">
      {$t("user.settings.pleaseEnterYourPassword")}
    </h1>
    <form onsubmit={submit} class="space-y-2">
      <PasswordInput bind:value={password} {focus} />
      <div class="w-full flex gap-2">
        <button
          type="button"
          class="btn !w-auto grow"
          onclick={cancel}
          onkeydown={cancel}>{$t("payments.cancel")}</button
        >
        <button type="submit" class="btn btn-accent !w-auto grow"
          >{$t("payments.submit")}</button
        >
      </div>
    </form>
  </div>
</div>