@declarion/react 0.66.1 → 0.80.0

package/dist-lib/components/pages/auth/SignUp.impl.js

@@ -10,34 +10,49 @@ import { usePublicParams as u } from "../../../hooks/useParams.js";
 import { useAuth as d } from "../../../hooks/useAuth.js";
 import { AuthShell as f } from "./AuthShell.js";
 import { BlankScreen as p } from "../../shared/BlankScreen.js";
-import { useEffect as m, useState as h } from "react";
-import { useQuery as g } from "@tanstack/react-query";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { Link as y, useNavigate as b } from "react-router";
+import { SignUpCode as m } from "./SignUpCode.js";
+import { useEffect as h, useState as g } from "react";
+import { useQuery as _ } from "@tanstack/react-query";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Link as b, useNavigate as x } from "react-router";
 //#region src/components/pages/auth/SignUp.impl.tsx
-function x() {
-	let t = b(), { signup: x, isSignupPending: C, isAuthenticated: w } = d(), T = a(), E = i(), [D, O] = h(""), [k, A] = h(""), [j, M] = h(""), [N, P] = h(""), [F, I] = h(""), [L, R] = h(""), [z, B] = h(!1), { data: V } = u(), H = l(V), U = H?.workspace_domain ?? "", W = H?.legal_links?.terms_url ?? "", G = H?.legal_links?.privacy_url ?? "", K = T.isPhone, { data: q, isPending: J } = g({
+function S() {
+	let t = x(), { signup: S, isSignupPending: w, isAuthenticated: T } = d(), [E, D] = g(null), O = a(), k = i(), [A, j] = g(""), [M, N] = g(""), [P, F] = g(""), [I, L] = g(""), [R, z] = g(!1), { data: B } = u(), V = l(B), H = V?.legal_links?.terms_url ?? "", U = V?.legal_links?.privacy_url ?? "", W = O.isPhone, { data: G, isPending: K } = _({
 		queryKey: ["check-setup"],
 		queryFn: e
+	}), q = G?.needs_setup || G?.signup_enabled;
+	if (h(() => {
+		G && !q && t("/login", { replace: !0 });
+	}, [
+		G,
+		q,
+		t
+	]), h(() => {
+		T && t("/", { replace: !0 });
+	}, [T, t]), K || !q) return /* @__PURE__ */ v(p, {});
+	if (E) return /* @__PURE__ */ v(m, {
+		email: E.email,
+		retryAfterSeconds: E.retryAfterSeconds,
+		onUseAnotherEmail: () => D(null)
 	});
-	if (m(() => {
-		q && !q.needs_setup && t("/login", { replace: !0 });
-	}, [q, t]), m(() => {
-		w && t("/", { replace: !0 });
-	}, [w, t]), J || q?.needs_setup === !1) return /* @__PURE__ */ _(p, {});
-	function Y(e) {
-		if (e.preventDefault(), !z) return;
-		let t = [D, k].filter(Boolean).join(" ") || j;
-		x({
-			email: j,
-			password: L,
+	function J(e) {
+		if (e.preventDefault(), !R) return;
+		let t = [A, M].filter(Boolean).join(" ");
+		S({
+			email: P,
+			password: I,
 			displayName: t
-		});
+		}, { onSuccess: (e) => {
+			e.verification_required && D({
+				email: P,
+				retryAfterSeconds: e.retry_after_seconds
+			});
+		} });
 	}
-	return /* @__PURE__ */ _(f, { children: /* @__PURE__ */ v("form", {
-		onSubmit: Y,
+	return /* @__PURE__ */ v(f, { children: /* @__PURE__ */ y("form", {
+		onSubmit: J,
 		children: [
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ v("div", {
 				style: {
 					fontSize: 10.5,
 					fontWeight: 700,
@@ -45,99 +60,61 @@ function x() {
 					letterSpacing: "0.1em",
 					textTransform: "uppercase"
 				},
-				children: E("auth.signup.eyebrow", "Request access")
+				children: k("auth.signup.eyebrow", "Sign up")
 			}),
-			/* @__PURE__ */ _("h2", {
+			/* @__PURE__ */ v("h2", {
 				style: {
 					margin: "6px 0 4px",
 					fontSize: 24,
 					fontWeight: 600,
 					letterSpacing: "-0.018em"
 				},
-				children: E("auth.signup.title", "Create your workspace")
+				children: k("auth.signup.title", "Create your workspace")
 			}),
-			/* @__PURE__ */ _("p", {
+			/* @__PURE__ */ v("p", {
 				style: {
 					margin: "0 0 20px",
 					fontSize: 13,
 					color: "var(--text-3)"
 				},
-				children: E("auth.signup.subtitle", "We'll provision a tenant and invite your team. Takes under a minute.")
+				children: k("auth.signup.subtitle", "Enter your name, email and a password.")
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					gap: 12
 				},
 				children: [
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ y("div", {
 						"data-testid": "signup-name-grid",
 						style: {
 							display: "grid",
-							gridTemplateColumns: K ? "minmax(0, 1fr)" : "1fr 1fr",
+							gridTemplateColumns: W ? "minmax(0, 1fr)" : "1fr 1fr",
 							gap: 10
 						},
-						children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _(o, { children: E("auth.signup.first_name", "First name") }), /* @__PURE__ */ _(c, {
-							value: D,
-							onChange: O
-						})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _(o, { children: E("auth.signup.last_name", "Last name") }), /* @__PURE__ */ _(c, {
-							value: k,
-							onChange: A
+						children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v(o, { children: k("auth.signup.first_name", "First name") }), /* @__PURE__ */ v(c, {
+							value: A,
+							onChange: j
+						})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v(o, { children: k("auth.signup.last_name", "Last name") }), /* @__PURE__ */ v(c, {
+							value: M,
+							onChange: N
 						})] })]
 					}),
-					/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _(o, { children: E("auth.signup.work_email", "Work email") }), /* @__PURE__ */ _(c, {
-						value: j,
-						onChange: M,
-						prefix: /* @__PURE__ */ _(n.email, { size: 13 }),
-						placeholder: E("auth.signup.work_email_placeholder", "name@company.com"),
+					/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v(o, { children: k("auth.signup.work_email", "Work email") }), /* @__PURE__ */ v(c, {
+						value: P,
+						onChange: F,
+						prefix: /* @__PURE__ */ v(n.email, { size: 13 }),
+						placeholder: k("auth.signup.work_email_placeholder", "name@company.com"),
 						required: !0
 					})] }),
-					/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _(o, { children: E("auth.signup.company", "Company") }), /* @__PURE__ */ _(c, {
-						value: N,
-						onChange: P,
-						prefix: /* @__PURE__ */ _(n.building, { size: 13 })
-					})] }),
-					/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _(o, { children: E("auth.signup.workspace_url", "Workspace URL") }), /* @__PURE__ */ v("div", {
-						style: {
-							display: "flex",
-							flexDirection: K ? "column" : "row",
-							alignItems: "stretch",
-							border: "1px solid var(--border)",
-							borderRadius: "var(--radius-md)",
-							overflow: "hidden",
-							minWidth: 0
-						},
-						children: [/* @__PURE__ */ _(c, {
-							value: F,
-							onChange: I,
-							style: {
-								border: 0,
-								borderRadius: 0
-							}
-						}), U && /* @__PURE__ */ v("span", {
-							className: "mono",
-							style: {
-								display: "flex",
-								alignItems: "center",
-								padding: K ? "8px 10px" : "0 10px",
-								background: "var(--surface-2)",
-								borderLeft: K ? 0 : "1px solid var(--border)",
-								borderTop: K ? "1px solid var(--border)" : 0,
-								fontSize: 12,
-								color: "var(--text-3)",
-								overflowWrap: "anywhere"
-							},
-							children: [".", U]
-						})]
-					})] }),
-					/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _(o, { children: E("auth.field.password", "Password") }), /* @__PURE__ */ _(s, {
-						value: L,
-						onChange: R,
-						placeholder: E("auth.signup.password_placeholder", "At least 12 characters"),
+					/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v(o, { children: k("auth.field.password", "Password") }), /* @__PURE__ */ v(s, {
+						value: I,
+						onChange: L,
+						placeholder: k("auth.signup.password_placeholder", "At least 8 characters"),
 						showStrength: !0
 					})] }),
-					/* @__PURE__ */ v("label", {
+					/* @__PURE__ */ y("label", {
 						style: {
 							display: "flex",
 							alignItems: "flex-start",
@@ -146,18 +123,18 @@ function x() {
 							color: "var(--text-3)",
 							lineHeight: 1.5
 						},
-						children: [/* @__PURE__ */ _("input", {
+						children: [/* @__PURE__ */ v("input", {
 							type: "checkbox",
 							style: { marginTop: 2 },
-							checked: z,
-							onChange: (e) => B(e.target.checked)
-						}), /* @__PURE__ */ _(S, {
-							termsUrl: W,
-							privacyUrl: G,
-							t: E
+							checked: R,
+							onChange: (e) => z(e.target.checked)
+						}), /* @__PURE__ */ v(C, {
+							termsUrl: H,
+							privacyUrl: U,
+							t: k
 						})]
 					}),
-					/* @__PURE__ */ _(r, {
+					/* @__PURE__ */ v(r, {
 						type: "submit",
 						size: "md",
 						kind: "primary",
@@ -165,26 +142,26 @@ function x() {
 							justifyContent: "center",
 							width: "100%"
 						},
-						disabled: C || !z,
-						children: C ? E("auth.signup.submitting", "Creating…") : E("auth.signup.submit", "Create workspace")
+						disabled: w || !R,
+						children: w ? k("auth.signup.submitting", "Creating…") : k("auth.signup.submit", "Create workspace")
 					}),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ y("div", {
 						style: {
 							fontSize: 12,
 							color: "var(--text-3)",
 							textAlign: "center"
 						},
 						children: [
-							E("auth.signup.have_account", "Already have an account?"),
+							k("auth.signup.have_account", "Already have an account?"),
 							" ",
-							/* @__PURE__ */ _(y, {
+							/* @__PURE__ */ v(b, {
 								to: "/login",
 								style: {
 									color: "var(--accent-text)",
 									fontWeight: 500,
 									textDecoration: "none"
 								},
-								children: E("auth.signin.title", "Sign in")
+								children: k("auth.signin.title", "Sign in")
 							})
 						]
 					})
@@ -193,24 +170,24 @@ function x() {
 		]
 	}) });
 }
-function S({ termsUrl: e, privacyUrl: n, t: r }) {
-	let i = r("auth.signup.terms", "Terms"), a = r("auth.signup.privacy", "Privacy"), o = e ? /* @__PURE__ */ _("a", {
+function C({ termsUrl: e, privacyUrl: n, t: r }) {
+	let i = r("auth.signup.terms", "Terms"), a = r("auth.signup.privacy", "Privacy"), o = e ? /* @__PURE__ */ v("a", {
 		href: e,
 		target: "_blank",
 		rel: "noopener noreferrer",
 		style: { color: "var(--accent-text)" },
 		children: i
-	}) : /* @__PURE__ */ _("span", { children: i }), s = n ? /* @__PURE__ */ _("a", {
+	}) : /* @__PURE__ */ v("span", { children: i }), s = n ? /* @__PURE__ */ v("a", {
 		href: n,
 		target: "_blank",
 		rel: "noopener noreferrer",
 		style: { color: "var(--accent-text)" },
 		children: a
-	}) : /* @__PURE__ */ _("span", { children: a });
-	return /* @__PURE__ */ _("span", { children: t(r("auth.signup.agreement", "I agree to the {terms} and {privacy}."), {
+	}) : /* @__PURE__ */ v("span", { children: a });
+	return /* @__PURE__ */ v("span", { children: t(r("auth.signup.agreement", "I agree to the {terms} and {privacy}."), {
 		terms: o,
 		privacy: s
 	}) });
 }
 //#endregion
-export { x as SignUp };
+export { S as SignUp };

package/dist-lib/components/pages/auth/SignUpCode.js

@@ -0,0 +1,122 @@
+import { resendSignupCode as e } from "../../../api/auth.js";
+import { Btn as t } from "../../primitives/Btn.js";
+import { useText as n } from "../../../hooks/useText.js";
+import { failureTitle as r } from "../../../lib/failure.js";
+import { useAuth as i } from "../../../hooks/useAuth.js";
+import { AuthShell as a } from "./AuthShell.js";
+import { CodeInput as o } from "./CodeInput.js";
+import { useEffect as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/pages/auth/SignUpCode.tsx
+function d({ email: d, retryAfterSeconds: f, onUseAnotherEmail: p }) {
+	let m = n(), h = n("errors"), { confirmSignup: g, isConfirmSignupPending: _ } = i(), [v, y] = c(""), [b, x] = c(""), [S, C] = c(f), [w, T] = c(!1);
+	s(() => {
+		if (S <= 0) return;
+		let e = window.setTimeout(() => C((e) => e - 1), 1e3);
+		return () => window.clearTimeout(e);
+	}, [S]);
+	function E(e) {
+		e.preventDefault(), x(""), g({
+			email: d,
+			code: v
+		}, { onError: (e) => x(r(h, e)) });
+	}
+	async function D() {
+		T(!0), x("");
+		try {
+			let t = await e(d);
+			y(""), C(t.retry_after_seconds);
+		} catch (e) {
+			x(r(h, e));
+		} finally {
+			T(!1);
+		}
+	}
+	return /* @__PURE__ */ l(a, { children: /* @__PURE__ */ u("form", {
+		onSubmit: E,
+		children: [
+			/* @__PURE__ */ l("div", {
+				style: {
+					fontSize: 10.5,
+					fontWeight: 700,
+					color: "var(--accent-text)",
+					letterSpacing: "0.1em",
+					textTransform: "uppercase"
+				},
+				children: m("auth.signup.eyebrow", "Sign up")
+			}),
+			/* @__PURE__ */ l("h2", {
+				style: {
+					margin: "6px 0 4px",
+					fontSize: 24,
+					fontWeight: 600,
+					letterSpacing: "-0.018em"
+				},
+				children: m("auth.signup_code.title", "Check your email")
+			}),
+			/* @__PURE__ */ l("p", {
+				style: {
+					margin: "0 0 4px",
+					fontSize: 13,
+					color: "var(--text-3)"
+				},
+				children: m("auth.signup_code.subtitle", "We sent a 6-digit code to {email}. Enter it here, in this browser.", { email: d })
+			}),
+			/* @__PURE__ */ l(o, {
+				value: v,
+				onChange: y,
+				label: m("auth.signup_code.code", "Code")
+			}),
+			b && /* @__PURE__ */ l("div", {
+				"data-testid": "signup-code-error",
+				role: "alert",
+				className: "bg-destructive-soft text-destructive",
+				style: {
+					margin: "0 0 12px",
+					padding: 12,
+					borderRadius: "var(--radius-md)",
+					fontSize: 12.5
+				},
+				children: b
+			}),
+			/* @__PURE__ */ l(t, {
+				type: "submit",
+				size: "md",
+				kind: "primary",
+				style: {
+					justifyContent: "center",
+					width: "100%"
+				},
+				disabled: _ || v.length !== 6,
+				children: _ ? m("auth.signup_code.submitting", "Checking…") : m("auth.signup_code.submit", "Confirm")
+			}),
+			/* @__PURE__ */ u("div", {
+				style: {
+					marginTop: 12,
+					display: "flex",
+					justifyContent: "space-between",
+					gap: 12,
+					fontSize: 12
+				},
+				children: [/* @__PURE__ */ l(t, {
+					size: "sm",
+					kind: "ghost",
+					disabled: S > 0 || w,
+					onClick: (e) => {
+						e.preventDefault(), D();
+					},
+					children: S > 0 ? m("auth.signup_code.resend_in", "Send again in {seconds} s", { seconds: S }) : m("auth.signup_code.resend", "Send again")
+				}), /* @__PURE__ */ l(t, {
+					size: "sm",
+					kind: "ghost",
+					onClick: (e) => {
+						e.preventDefault(), p();
+					},
+					children: m("auth.signup_code.another_email", "Use another email")
+				})]
+			})
+		]
+	}) });
+}
+//#endregion
+export { d as SignUpCode };

package/dist-lib/components/pages/auth/TwoFA.impl.js

@@ -1,24 +1,14 @@
 import { Btn as e } from "../../primitives/Btn.js";
 import { useText as t } from "../../../hooks/useText.js";
-import { useResponsiveMode as n } from "../../../hooks/useResponsiveMode.js";
-import { AuthShell as r } from "./AuthShell.js";
-import { useRef as i } from "react";
+import { AuthShell as n } from "./AuthShell.js";
+import { CodeInput as r } from "./CodeInput.js";
+import { useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Link as s, useNavigate as c } from "react-router";
 //#region src/components/pages/auth/TwoFA.impl.tsx
 function l() {
-	let l = t(), u = c(), d = i([]), f = n().isPhone;
-	function p(e) {
-		d.current[e]?.focus(), d.current[e]?.select();
-	}
-	function m(e, t) {
-		let n = t.target.value.replace(/\D/g, "").slice(0, 1);
-		t.target.value = n, n && e < 5 && p(e + 1);
-	}
-	function h(e, t) {
-		t.key === "Backspace" && !t.target.value && e > 0 && p(e - 1);
-	}
-	return /* @__PURE__ */ a(r, { children: /* @__PURE__ */ o("div", { children: [
+	let l = t(), u = c(), [d, f] = i("");
+	return /* @__PURE__ */ a(n, { children: /* @__PURE__ */ o("div", { children: [
 		/* @__PURE__ */ a("div", {
 			style: {
 				fontSize: 10.5,
@@ -46,46 +36,10 @@ function l() {
 			},
 			children: l("auth.twofa.subtitle", "Open your authenticator app and enter the 6-digit code.")
 		}),
-		/* @__PURE__ */ a("div", {
-			style: {
-				display: "grid",
-				gridTemplateColumns: "repeat(6, minmax(0, 44px))",
-				gap: f ? 6 : 8,
-				justifyContent: "center",
-				margin: "20px 0",
-				width: "100%",
-				maxWidth: "100%"
-			},
-			children: [
-				0,
-				1,
-				2,
-				3,
-				4,
-				5
-			].map((e) => /* @__PURE__ */ a("input", {
-				ref: (t) => {
-					d.current[e] = t;
-				},
-				maxLength: 1,
-				inputMode: "numeric",
-				onChange: (t) => m(e, t),
-				onKeyDown: (t) => h(e, t),
-				style: {
-					width: "100%",
-					minWidth: 0,
-					height: f ? 48 : 52,
-					textAlign: "center",
-					fontSize: f ? 20 : 22,
-					fontWeight: 600,
-					background: "var(--surface-2)",
-					border: "1px solid var(--border)",
-					borderRadius: "var(--radius-md)",
-					outline: "none",
-					color: "var(--text)",
-					fontFamily: "var(--font-mono)"
-				}
-			}, e))
+		/* @__PURE__ */ a(r, {
+			value: d,
+			onChange: f,
+			label: l("auth.twofa.title", "Enter your code")
 		}),
 		/* @__PURE__ */ a(e, {
 			size: "md",