@knotpad/app 0.1.5 → 0.1.6

package/components/auth/login-form.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import { useState, Suspense } from "react";
+import { signIn } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { AppLogo } from "@/components/branding/app-logo";
+import { PasswordInput } from "@/components/auth/password-input";
+import { TwoFactorInput } from "@/components/auth/two-factor-input";
+import { Shield, Loader2 } from "lucide-react";
+
+export function LoginSkeleton() {
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div className="h-8 w-48 animate-pulse rounded bg-zinc-800" />
+      <div className="h-4 w-64 animate-pulse rounded bg-zinc-800" />
+      <div className="space-y-4 pt-4">
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+      </div>
+    </div>
+  );
+}
+
+// `isCloud` reflects the runtime: desktop/NPX (false) offers a local, no-account
+// "Start writing" path; the browser/cloud build (true) has no local DB, so it
+// only offers Log in / Sign up.
+export function LoginForm({ isCloud }: { isCloud: boolean }) {
+  return (
+    <Suspense fallback={<LoginSkeleton />}>
+      <LoginFormInner isCloud={isCloud} />
+    </Suspense>
+  );
+}
+
+function LoginFormInner({ isCloud }: { isCloud: boolean }) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [needs2FA, setNeeds2FA] = useState(false);
+  const [twoFactorCode, setTwoFactorCode] = useState("");
+  const [credentials, setCredentials] = useState({ email: "", password: "" });
+
+  // Validate that ?next= is a same-origin relative path to prevent open redirect.
+  const rawNext = searchParams.get("next") ?? "";
+  const redirectTo =
+    rawNext.startsWith("/") && !rawNext.startsWith("//") ? rawNext : "/notes";
+  const justReset = searchParams.get("reset") === "1";
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    const form = e.currentTarget;
+    const email = (form.elements.namedItem("email") as HTMLInputElement).value;
+    const password = (form.elements.namedItem("password") as HTMLInputElement).value;
+
+    setCredentials({ email, password });
+
+    try {
+      // Check if 2FA is required first
+      const checkRes = await fetch("/api/auth/check-2fa", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+
+      const checkData = await checkRes.json();
+
+      if (checkData.requires2FA) {
+        setNeeds2FA(true);
+        setLoading(false);
+        return;
+      }
+
+      // No 2FA required, proceed with normal sign in
+      const result = await signIn("credentials", {
+        email,
+        password,
+        redirect: false,
+      });
+
+      if (result?.error) {
+        setError("Invalid email or password");
+        setLoading(false);
+      } else {
+        router.push(redirectTo);
+        router.refresh();
+      }
+    } catch {
+      setError("Something went wrong. Please try again.");
+      setLoading(false);
+    }
+  }
+
+  async function handle2FASubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    try {
+      // Verify 2FA code
+      const res = await fetch("/api/auth/verify-2fa", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: credentials.email,
+          password: credentials.password,
+          code: twoFactorCode,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || "Invalid 2FA code");
+        setLoading(false);
+        return;
+      }
+
+      // 2FA verified, now sign in
+      const result = await signIn("credentials", {
+        email: credentials.email,
+        password: credentials.password,
+        redirect: false,
+      });
+
+      if (result?.error) {
+        setError("Authentication failed");
+        setLoading(false);
+      } else {
+        router.push(redirectTo);
+        router.refresh();
+      }
+    } catch {
+      setError("Something went wrong. Please try again.");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div className="flex justify-end">
+        <Link href="/" className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">
+          back to home
+        </Link>
+      </div>
+      <div>
+        <AppLogo className="mb-4 h-8 w-auto" />
+        <h1 className="text-2xl font-semibold tracking-tight">Welcome to Knotpad</h1>
+        <p className="mt-1 text-sm text-zinc-400">
+          {isCloud
+            ? "Sign in, or create an account to get started."
+            : "Start writing instantly — or sign in to your account."}
+        </p>
+      </div>
+
+      {/* Desktop/local: the primary, no-account path. */}
+      {!isCloud && (
+        <div className="space-y-2">
+          <Link
+            href="/guest"
+            className="block w-full rounded-md bg-zinc-100 px-4 py-2.5 text-center text-sm font-medium text-zinc-900 hover:bg-zinc-200 transition-colors"
+          >
+            Start writing
+          </Link>
+          <p className="text-center text-xs text-zinc-600">
+            No account needed. Your notes stay on this device.
+          </p>
+        </div>
+      )}
+
+      {!isCloud && (
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-zinc-800" />
+          </div>
+          <div className="relative flex justify-center text-xs">
+            <span className="bg-zinc-950 px-3 text-zinc-600">or sign in</span>
+          </div>
+        </div>
+      )}
+
+      {justReset && (
+        <div className="rounded-md border border-emerald-800/40 bg-emerald-950/30 px-4 py-3">
+          <p className="text-sm text-emerald-300">Password updated. Sign in with your new password.</p>
+        </div>
+      )}
+
+      {needs2FA ? (
+        <form onSubmit={handle2FASubmit} className="space-y-4">
+          <div className="flex items-center gap-2 text-zinc-300">
+            <Shield size={18} />
+            <h2 className="text-sm font-medium">Two-Factor Authentication</h2>
+          </div>
+          <p className="text-xs text-zinc-400">
+            Enter the 6-digit code from your authenticator app.
+          </p>
+
+          <div className="space-y-1">
+            <label className="text-sm font-medium text-zinc-300">
+              2FA Code
+            </label>
+            <TwoFactorInput
+              value={twoFactorCode}
+              onChange={setTwoFactorCode}
+              length={6}
+              disabled={loading}
+              autoFocus
+            />
+          </div>
+
+          {error && <p className="text-sm text-red-400">{error}</p>}
+
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => {
+                setNeeds2FA(false);
+                setTwoFactorCode("");
+                setError("");
+              }}
+              className="flex-1 rounded-md border border-zinc-700 bg-zinc-900 px-4 py-2 text-sm font-medium text-zinc-100 hover:bg-zinc-800"
+            >
+              Back
+            </button>
+            <button
+              type="submit"
+              disabled={loading || twoFactorCode.length !== 6}
+              className="flex-1 rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-200 disabled:opacity-50"
+            >
+              {loading ? (
+                <span className="flex items-center justify-center gap-1">
+                  <Loader2 size={14} className="animate-spin" />
+                  Verifying…
+                </span>
+              ) : (
+                "Verify"
+              )}
+            </button>
+          </div>
+        </form>
+      ) : (
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-1">
+            <label htmlFor="email" className="text-sm font-medium text-zinc-300">
+              Email
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              autoComplete="email"
+              className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:border-zinc-500 focus:outline-none"
+              placeholder="you@example.com"
+            />
+          </div>
+
+          <div className="space-y-1">
+            <label htmlFor="password" className="text-sm font-medium text-zinc-300">
+              Password
+            </label>
+            <PasswordInput
+              id="password"
+              name="password"
+              required
+              autoComplete="current-password"
+              placeholder="••••••••"
+            />
+          </div>
+
+          {error && <p className="text-sm text-red-400">{error}</p>}
+
+          <div className="flex justify-end">
+            <Link href="/forgot-password" className="text-xs text-zinc-600 hover:text-zinc-400 transition-colors">
+              Forgot password?
+            </Link>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-4 py-2 text-sm font-medium text-zinc-100 hover:bg-zinc-800 disabled:opacity-50"
+          >
+            {loading ? "Signing in…" : "Sign in"}
+          </button>
+        </form>
+      )}
+
+      <p className="text-center text-sm text-zinc-500">
+        {isCloud ? "Want cloud sync and Pro? " : "Need cloud sync across devices? "}
+        <Link href="/register" className="text-zinc-300 underline underline-offset-2 hover:text-white">
+          Sign up
+        </Link>
+      </p>
+    </div>
+  );
+}

package/components/auth/password-checklist.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Check, X } from "lucide-react";
+
+const RULES: { label: string; test: (pw: string) => boolean }[] = [
+  { label: "At least 8 characters", test: (pw) => pw.length >= 8 },
+  { label: "One uppercase letter", test: (pw) => /[A-Z]/.test(pw) },
+  { label: "One lowercase letter", test: (pw) => /[a-z]/.test(pw) },
+  { label: "One number", test: (pw) => /[0-9]/.test(pw) },
+  { label: "One symbol (e.g. !?#$%)", test: (pw) => /[^A-Za-z0-9]/.test(pw) },
+];
+
+export function PasswordChecklist({ password }: { password: string }) {
+  return (
+    <ul className="space-y-1">
+      {RULES.map((rule) => {
+        const met = rule.test(password);
+        return (
+          <li key={rule.label} className="flex items-center gap-1.5 text-xs">
+            {met ? (
+              <Check className="h-3.5 w-3.5 text-emerald-500" />
+            ) : (
+              <X className="h-3.5 w-3.5 text-zinc-700" />
+            )}
+            <span className={met ? "text-zinc-400" : "text-zinc-600"}>{rule.label}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/components/auth/password-input.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState, forwardRef } from "react";
+import { Eye, EyeOff } from "lucide-react";
+
+type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">;
+
+export const PasswordInput = forwardRef<HTMLInputElement, Props>(function PasswordInput(
+  { className, ...props },
+  ref
+) {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div className="relative">
+      <input
+        {...props}
+        ref={ref}
+        type={visible ? "text" : "password"}
+        className={
+          className ??
+          "w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 pr-10 text-sm text-zinc-100 placeholder-zinc-500 focus:border-zinc-500 focus:outline-none ring-focus"
+        }
+      />
+      <button
+        type="button"
+        onClick={() => setVisible((v) => !v)}
+        tabIndex={-1}
+        aria-label={visible ? "Hide password" : "Show password"}
+        className="absolute inset-y-0 right-0 flex items-center px-3 text-zinc-500 hover:text-zinc-300 transition-colors"
+      >
+        {visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+      </button>
+    </div>
+  );
+});

package/components/auth/switch-account-button.test.tsx

@@ -0,0 +1,22 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { SwitchAccountButton } from "@/components/auth/switch-account-button";
+
+const signOut = vi.fn();
+
+vi.mock("next-auth/react", () => ({
+  signOut: (...args: unknown[]) => signOut(...args),
+}));
+
+describe("SwitchAccountButton", () => {
+  it("signs the user out to the login page when clicked", async () => {
+    const user = userEvent.setup();
+    render(<SwitchAccountButton />);
+
+    await user.click(screen.getByRole("button", { name: "Switch account" }));
+
+    expect(signOut).toHaveBeenCalledWith({ callbackUrl: "/login" });
+  });
+});

package/components/auth/switch-account-button.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { signOut } from "next-auth/react";
+
+type SwitchAccountButtonProps = {
+  className?: string;
+};
+
+export function SwitchAccountButton({ className }: SwitchAccountButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => signOut({ callbackUrl: "/login" })}
+      className={className}
+    >
+      Switch account
+    </button>
+  );
+}

package/components/auth/two-factor-input.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+
+interface TwoFactorInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  length?: number;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+
+export function TwoFactorInput({
+  value,
+  onChange,
+  length = 6,
+  disabled = false,
+  autoFocus = false,
+}: TwoFactorInputProps) {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const [focusedIndex, setFocusedIndex] = useState<number>(autoFocus ? 0 : -1);
+
+  useEffect(() => {
+    if (autoFocus) {
+      inputRefs.current[0]?.focus();
+    }
+  }, [autoFocus]);
+
+  const handleChange = (index: number, e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    
+    // Only allow digits
+    if (!/^\d*$/.test(newValue)) return;
+
+    const currentValue = value.split("");
+    currentValue[index] = newValue.slice(-1); // Take only last character
+    const newValueStr = currentValue.join("");
+
+    onChange(newValueStr);
+
+    // Auto-focus next input
+    if (newValue && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Handle backspace
+    if (e.key === "Backspace") {
+      if (!value[index] && index > 0) {
+        // If current is empty, go back and delete previous
+        const currentValue = value.split("");
+        currentValue[index - 1] = "";
+        onChange(currentValue.join(""));
+        inputRefs.current[index - 1]?.focus();
+      } else {
+        // Delete current
+        const currentValue = value.split("");
+        currentValue[index] = "";
+        onChange(currentValue.join(""));
+      }
+    }
+    // Handle left arrow
+    else if (e.key === "ArrowLeft" && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+    // Handle right arrow
+    else if (e.key === "ArrowRight" && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    onChange(pastedData);
+    
+    // Focus the next empty input or the last one
+    const nextIndex = Math.min(pastedData.length, length - 1);
+    inputRefs.current[nextIndex]?.focus();
+  };
+
+  const handleFocus = (index: number) => {
+    setFocusedIndex(index);
+  };
+
+  return (
+    <div className="flex gap-2">
+      {Array.from({ length }).map((_, index) => (
+        <input
+          key={index}
+          ref={(el) => {
+            inputRefs.current[index] = el;
+          }}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          maxLength={1}
+          value={value[index] || ""}
+          onChange={(e) => handleChange(index, e)}
+          onKeyDown={(e) => handleKeyDown(index, e)}
+          onPaste={handlePaste}
+          onFocus={() => handleFocus(index)}
+          disabled={disabled}
+          className={`w-12 h-14 rounded-lg border-2 text-center text-2xl font-semibold text-zinc-100 focus:outline-none transition-all
+            ${focusedIndex === index
+              ? "border-zinc-400 bg-zinc-800"
+              : "border-zinc-700 bg-zinc-900"
+            }
+            ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+          `}
+        />
+      ))}
+    </div>
+  );
+}