@stnd/account 0.1.1

package/views/LoginView.svelte

@@ -0,0 +1,233 @@
+<script>
+  import { accountClient } from "@stnd/account/client";
+  import { setUser } from "@stnd/account/models/User.js";
+
+  // Props
+  let { close, back } = $props();
+
+  // State
+  let email = $state("");
+  let otp = $state("");
+  let loading = $state(false);
+  let step = $state("email"); // "email" | "otp"
+
+  // Show passkey button only if user has previously set one up on this device
+  const hasPasskey = $state(
+    typeof localStorage !== "undefined" &&
+      !!localStorage.getItem("stnd:hasPasskey"),
+  );
+
+  async function hydrateUserStore() {
+    try {
+      const { data } = await accountClient.getSession();
+      if (data?.user) {
+        setUser({ ...data.user, isAuthenticated: true }, data.session);
+      }
+    } catch {
+      // silently ignore — page reload will fix it
+    }
+  }
+
+  async function suggestPasskeyIfNone() {
+    try {
+      const { data } = await accountClient.passkey.listPasskeys();
+      if (!data || data.length === 0) {
+        setTimeout(() => {
+          window.toast(
+            "Tip: Set up a passkey (FaceID / TouchID) for instant login next time.",
+            "info",
+            8000,
+            { label: "Set up", view: "::account-settings" },
+          );
+        }, 1500);
+      } else {
+        localStorage.setItem("stnd:hasPasskey", "1");
+      }
+    } catch {
+      // silently ignore
+    }
+  }
+
+  async function handleEmailLogin() {
+    if (!email.includes("@")) {
+      window.toast("Please enter a valid email address.", "error");
+      return;
+    }
+
+    loading = true;
+    try {
+      const { data, error } = await accountClient.emailOtp.sendVerificationOtp({
+        email,
+        type: "sign-in",
+      });
+
+      if (error) {
+        window.toast(error.message || "Failed to send login link.", "error");
+      } else {
+        window.toast("Check your email for the code!", "success");
+        step = "otp";
+      }
+    } catch (e) {
+      window.toast("Network error. Please try again.", "error");
+      console.error(e);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleVerifyOTP() {
+    if (otp.length !== 6) {
+      window.toast("Please enter the 6-digit code.", "error");
+      return;
+    }
+
+    loading = true;
+    try {
+      const { data, error } = await accountClient.signIn.emailOtp({
+        email,
+        otp,
+        type: "sign-in",
+        callbackURL: window.location.href,
+      });
+
+      if (error) {
+        window.toast(error.message || "Invalid code.", "error");
+      } else {
+        window.toast("Login successful!", "success");
+        hydrateUserStore();
+        suggestPasskeyIfNone();
+        setTimeout(() => close(), 1000);
+      }
+    } catch (e) {
+      window.toast("Network error. Please try again.", "error");
+      console.error(e);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleSocialLogin(provider) {
+    loading = true;
+    try {
+      const { data, error } = await accountClient.signIn.social({
+        provider,
+        callbackURL: window.location.href,
+      });
+
+      if (error) {
+        window.toast(error.message || `Failed to initiate ${provider} login`, "error");
+        loading = false;
+      }
+      // Social providers redirect — passkey suggestion handled on page reload
+    } catch (e) {
+      window.toast("Network error. Please try again.", "error");
+      console.error(e);
+      loading = false;
+    }
+  }
+
+  async function handlePasskeyLogin() {
+    loading = true;
+    try {
+      const { data, error } = await accountClient.signIn.passkey({
+        fetchOptions: {
+          onSuccess: () => {
+            localStorage.setItem("stnd:hasPasskey", "1");
+            window.toast("Passkey verification successful!", "success");
+            hydrateUserStore();
+            setTimeout(() => {
+              close();
+            }, 1000);
+          },
+        },
+      });
+
+      if (error) {
+        window.toast("Passkey login failed.", "error");
+      }
+    } catch (e) {
+      window.toast("Network error. Please try again.", "error");
+      console.error(e);
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleKey(e) {
+    if (e.key === "Enter") {
+      if (step === "email") {
+        handleEmailLogin();
+      } else {
+        handleVerifyOTP();
+      }
+    }
+  }
+</script>
+
+<div class="p pt-2">
+  {#if step === "email"}
+    <div class="text-center">
+      <h3 class="text-center">Log in to your account</h3>
+
+      <div class="flex justify-center no-rhythm">
+        <button onclick={() => handleSocialLogin("google")} disabled={loading} class="h-2 px">
+          Sign in with Google
+        </button>
+{#if hasPasskey}
+          <button onclick={handlePasskeyLogin} disabled={loading} class="h-2 px">
+            Passkey (FaceID / TouchID)
+          </button>
+        {/if}
+      </div>
+      <hr class="my" />
+
+      <div class="flex justify-center no-rhythm">
+        <input
+          type="email"
+          bind:value={email}
+          placeholder="name@example.com"
+          onkeydown={handleKey}
+          disabled={loading}
+          class="mb-0 w-12"
+        />
+        <button onclick={handleEmailLogin} disabled={loading}>
+          {loading ? "Sending..." : "Continue with Email"}
+        </button>
+      </div>
+    </div>
+  {:else}
+    <div class="text-center flex-col">
+      <h3>Enter verification code</h3>
+      <p class="text-sm text-muted">
+        We sent a 6-digit code to {email}
+      </p>
+      <input
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        maxlength="6"
+        bind:value={otp}
+        placeholder="000000"
+        onkeydown={handleKey}
+        disabled={loading}
+        class="m-auto text-center w-10"
+        style="letter-spacing: 0.5rem; font-size: 1.5rem; font-weight: bold;"
+      />
+
+      <button
+        onclick={handleVerifyOTP}
+        disabled={loading || otp.length !== 6}
+        class="mx-auto secondary"
+      >
+        {loading ? "Verifying..." : "Verify Code"}
+      </button>
+      <button
+        class="ghost small text-subtle"
+        onclick={() => (step = "email")}
+        disabled={loading}
+      >
+        Use a different email
+      </button>
+    </div>
+  {/if}
+</div>