@drawnagency/primitives 0.1.33 → 0.1.35

package/dist/auth/types.d.ts

@@ -49,6 +49,8 @@ export interface AuthProvider {
     getPasswordEnabled(): Promise<boolean>;
     setPasswordEnabled?(enabled: boolean): Promise<void>;
     handleCallback?(request: Request, ctx: AuthContext): Promise<Response>;
+    updatePassword?(password: string, ctx: AuthContext): Promise<void>;
+    resetPassword?(email: string): Promise<void>;
 }
 export interface CookieLike {
     get(name: string): {

package/dist/auth/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/auth/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/auth/types.ts"],"names":[],"mappings":"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"}

package/dist/components/shell/EditorLoginForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorLoginForm.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorLoginForm.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,QAAQ,GAAG,QAAQ,CAAC,EAAE,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,wBAAgB,eAAe,CAAC,EAAE,YAAY,EAAE,cAAmB,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,2CA+G9F"}
+{"version":3,"file":"EditorLoginForm.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorLoginForm.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,QAAQ,GAAG,QAAQ,CAAC,EAAE,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,wBAAgB,eAAe,CAAC,EAAE,YAAY,EAAE,cAAmB,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,2CA0O9F"}

package/dist/components/shell/SetPasswordForm.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    reason?: "invite" | "recovery" | null;
+}
+export declare function SetPasswordForm({ reason }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SetPasswordForm.d.ts.map

package/dist/components/shell/SetPasswordForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SetPasswordForm.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SetPasswordForm.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC;CACvC;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,2CA2FhD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/auth/types.ts

@@ -47,6 +47,8 @@ export interface AuthProvider {
   setPasswordEnabled?(enabled: boolean): Promise<void>;
 
   handleCallback?(request: Request, ctx: AuthContext): Promise<Response>;
+  updatePassword?(password: string, ctx: AuthContext): Promise<void>;
+  resetPassword?(email: string): Promise<void>;
 }
 
 export interface CookieLike {

package/src/components/sections/SplitContent/SplitContent.tsx

@@ -32,7 +32,7 @@ export default function SplitContent({ imageId, src, srcset, alt, body, border,
   const handleBodyChange = (html: string) => {
     onChange?.({
       type: "split_content",
-      content: { imageId, body: html },
+      content: { imageId, body: html, src, srcset, alt },
       options: { border, imagePosition },
     });
   };

package/src/components/shell/EditorLoginForm.tsx

@@ -20,6 +20,8 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(serverError ?? null);
   const [loading, setLoading] = useState(false);
+  const [mode, setMode] = useState<"sign-in" | "forgot">("sign-in");
+  const [resetSent, setResetSent] = useState(false);
 
   async function handlePasswordSubmit(e: FormEvent) {
     e.preventDefault();
@@ -46,8 +48,36 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
 
       const data = await response.json().catch(() => ({}));
       window.location.assign(safeRedirect(data.redirectTo, "/edit"));
-    } catch {
-      setError("Network error");
+    } catch (err) {
+      console.error("sign-in request failed:", err);
+      setError("Unable to reach the server. Check your connection and try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleResetSubmit(e: FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch("/api/auth/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        setError(data.error || "Failed to send reset link");
+        return;
+      }
+
+      setResetSent(true);
+    } catch (err) {
+      console.error("reset-password request failed:", err);
+      setError("Unable to reach the server. Check your connection and try again.");
     } finally {
       setLoading(false);
     }
@@ -57,6 +87,87 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
     window.location.href = `/api/auth/oauth?provider=${provider}`;
   }
 
+  function switchToForgot() {
+    setMode("forgot");
+    setError(null);
+    setResetSent(false);
+  }
+
+  function switchToSignIn() {
+    setMode("sign-in");
+    setError(null);
+    setResetSent(false);
+  }
+
+  if (mode === "forgot") {
+    return (
+      <div className="mx-auto max-w-sm space-y-6">
+        <div className="space-y-2 text-center">
+          <h2 className="text-lg font-semibold text-base-contrast">Reset your password</h2>
+          <p className="text-sm text-base-contrast-light">
+            Enter your email and we'll send you a link to reset your password.
+          </p>
+        </div>
+
+        {resetSent ? (
+          <div className="space-y-4">
+            <p className="text-center text-sm text-base-contrast-light">
+              If an account exists for <strong className="text-base-contrast">{email}</strong>, you'll receive
+              a password reset link shortly.
+            </p>
+            <Button
+              type="button"
+              variant="secondary"
+              size="md"
+              onClick={switchToSignIn}
+              className="w-full"
+            >
+              Back to sign in
+            </Button>
+          </div>
+        ) : (
+          <form onSubmit={handleResetSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="reset-email" className="mb-1.5 block text-sm font-medium text-base-contrast">
+                Email
+              </label>
+              <input
+                id="reset-email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoComplete="email"
+                className="w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast"
+              />
+            </div>
+
+            {error && <p className="text-sm text-red-600">{error}</p>}
+
+            <Button
+              type="submit"
+              variant="primary"
+              size="md"
+              isLoading={loading}
+              loadingLabel="Sending..."
+              className="w-full"
+            >
+              Send reset link
+            </Button>
+
+            <button
+              type="button"
+              onClick={switchToSignIn}
+              className="block w-full text-center text-sm text-base-contrast-light hover:text-base-contrast"
+            >
+              Back to sign in
+            </button>
+          </form>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div className="mx-auto max-w-sm space-y-6">
       {capabilities.oauth && oauthProviders.length > 0 && (
@@ -109,6 +220,18 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
           autoComplete="current-password"
         />
 
+        {capabilities.emailPassword && (
+          <div className="flex justify-end">
+            <button
+              type="button"
+              onClick={switchToForgot}
+              className="text-sm text-base-contrast-light hover:text-base-contrast"
+            >
+              Forgot password?
+            </button>
+          </div>
+        )}
+
         {error && (
           <p className="text-sm text-red-600">{error}</p>
         )}

package/src/components/shell/SetPasswordForm.tsx

@@ -0,0 +1,100 @@
+import { useState, type FormEvent } from "react";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+
+interface Props {
+  reason?: "invite" | "recovery" | null;
+}
+
+export function SetPasswordForm({ reason }: Props) {
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const title = reason === "recovery" ? "Reset your password" : "Set your password";
+  const buttonLabel = reason === "recovery" ? "Reset Password" : "Set Password";
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+    if (password !== confirm) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await fetch("/api/auth/set-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ password }),
+      });
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          setError("Your session has expired. Please request a new link.");
+          return;
+        }
+        const data = await response.json().catch(() => ({}));
+        setError(data.error || "Failed to set password");
+        return;
+      }
+
+      window.location.assign("/edit");
+    } catch (err) {
+      console.error("set-password request failed:", err);
+      setError("Unable to reach the server. Check your connection and try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-sm space-y-6">
+      <div className="space-y-2 text-center">
+        <h1 className="text-2xl font-bold text-base-contrast">{title}</h1>
+        <p className="text-sm text-base-contrast-light">
+          {reason === "invite"
+            ? "Create a password to complete your account setup."
+            : "Enter a new password for your account."}
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <PasswordInput
+          label="New password"
+          value={password}
+          onChange={setPassword}
+          autoComplete="new-password"
+          showToggle
+        />
+
+        <PasswordInput
+          label="Confirm password"
+          value={confirm}
+          onChange={setConfirm}
+          autoComplete="new-password"
+        />
+
+        {error && <p className="text-sm text-red-600">{error}</p>}
+
+        <Button
+          type="submit"
+          variant="primary"
+          size="md"
+          isLoading={loading}
+          loadingLabel="Saving..."
+          className="w-full"
+        >
+          {buttonLabel}
+        </Button>
+      </form>
+    </div>
+  );
+}