@protobase/ui 0.14.6 → 0.15.0

package/dist/auth/sign-up-details-form.js

@@ -0,0 +1,130 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { CodeInput } from "./code-input.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/sign-up-details-form.tsx
+/** The second step of making an account: the emailed code, the person's name and how they will sign in. */
+const SignUpDetailsForm = ({ email, onSubmit, onResend, onBack, methods, busy, error, notice }) => {
+	const [code, setCode] = useState("");
+	const [name, setName] = useState("");
+	const [password, setPassword] = useState("");
+	const passwordHint = useId();
+	const withPassword = methods.includes("password");
+	const passwordOptional = methods.includes("emailCode");
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Check your email",
+		description: "Enter the code we sent to create your account.",
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "mb-4 text-[13px] text-muted-foreground",
+				children: [
+					"A 6-digit code is on its way to ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-foreground",
+						children: email
+					}),
+					". It works for 5 minutes, once. If the address has an account already, the email says so instead."
+				]
+			}),
+			notice && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+				children: notice
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-4",
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit({
+						code: code.trim(),
+						name: name.trim(),
+						...withPassword && password && { password }
+					});
+				},
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						children: ["Code", /* @__PURE__ */ jsx(CodeInput, {
+							name: "code",
+							required: true,
+							autoFocus: true,
+							value: code,
+							invalid: Boolean(error),
+							onChange: (event) => setCode(event.target.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						children: ["Your name", /* @__PURE__ */ jsx(Input, {
+							name: "name",
+							autoComplete: "name",
+							required: true,
+							maxLength: 200,
+							value: name,
+							onChange: (event) => setName(event.target.value),
+							className: "min-h-6"
+						})]
+					}),
+					withPassword && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1.5",
+						children: [/* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1.5 text-[13px] font-medium",
+							children: [passwordOptional ? "Password (optional)" : "Password", /* @__PURE__ */ jsx(Input, {
+								type: "password",
+								name: "password",
+								autoComplete: "new-password",
+								"aria-describedby": passwordHint,
+								required: !passwordOptional,
+								minLength: 12,
+								maxLength: 128,
+								value: password,
+								onChange: (event) => setPassword(event.target.value),
+								className: "min-h-6"
+							})]
+						}), /* @__PURE__ */ jsxs("p", {
+							id: passwordHint,
+							className: "text-xs text-muted-foreground",
+							children: [
+								"At least ",
+								12,
+								" characters.",
+								passwordOptional && " Without one, you sign in with a code we email you."
+							]
+						})]
+					}),
+					error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-xs font-medium text-danger-text",
+						children: error
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						type: "submit",
+						loading: busy,
+						className: "min-h-10",
+						children: "Create account"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onClick: onBack,
+							className: "min-h-10",
+							children: "Use another address"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onClick: onResend,
+							disabled: busy,
+							className: "min-h-10",
+							children: "Send a new code"
+						})]
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { SignUpDetailsForm };

package/dist/auth/sign-up-email-form.js

@@ -0,0 +1,74 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { Mail } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/sign-up-email-form.tsx
+/** The first step of making an account: the address, which gets a code to prove it is theirs. */
+const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace }) => {
+	const [email, setEmail] = useState("");
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Create an account",
+		description: workspace,
+		children: [/* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSubmit(email.trim());
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Email", /* @__PURE__ */ jsx(Input, {
+						type: "email",
+						name: "email",
+						autoComplete: "email",
+						required: true,
+						autoFocus: true,
+						value: email,
+						invalid: Boolean(error),
+						onChange: (event) => setEmail(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: "We email you a code to make sure the address is yours."
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), "Email me a code"]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "text-center text-[13px] text-muted-foreground",
+					children: [
+						"Have an account?",
+						" ",
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onSignIn,
+							className: "font-medium text-primary-text hover:underline",
+							children: "Sign in"
+						})
+					]
+				})
+			]
+		}), onBrowse && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onBrowse,
+			className: "mt-4 w-full text-center text-[13px] font-medium text-muted-foreground hover:text-foreground hover:underline",
+			children: "Continue without an account"
+		})]
+	});
+};
+//#endregion
+export { SignUpEmailForm };

package/dist/auth/sign-up-page.js

@@ -0,0 +1,59 @@
+import { authMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { SignUpDetailsForm } from "./sign-up-details-form.js";
+import { SignUpEmailForm } from "./sign-up-email-form.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/sign-up-page.tsx
+/**
+* Makes an account on a server with open sign-up: the address, then the code emailed to it with the person's name and
+* password. The new account is signed in, and sets up what the sign-in policy requires as after any sign-in.
+*/
+const SignUpPage = ({ workspace, email, onCodeSent, onBack, onSignIn, onBrowse }) => {
+	const { signInMethods, sendSignUpCode, signUp } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [notice, setNotice] = useState();
+	const attempt = async (step) => {
+		setBusy(true);
+		setError(void 0);
+		setNotice(void 0);
+		try {
+			await step();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	if (email === void 0) return /* @__PURE__ */ jsx(SignUpEmailForm, {
+		workspace,
+		busy,
+		error,
+		onSignIn,
+		onBrowse,
+		onSubmit: (address) => void attempt(async () => {
+			await sendSignUpCode(address);
+			onCodeSent(address);
+		})
+	});
+	return /* @__PURE__ */ jsx(SignUpDetailsForm, {
+		email,
+		methods: signInMethods,
+		busy,
+		error,
+		notice,
+		onBack,
+		onResend: () => void attempt(async () => {
+			await sendSignUpCode(email);
+			setNotice("A new code is on its way. Only the newest one works.");
+		}),
+		onSubmit: (details) => void attempt(() => signUp({
+			email,
+			...details
+		}))
+	});
+};
+//#endregion
+export { SignUpPage };

package/dist/auth/use-sign-in-address.js

@@ -0,0 +1,27 @@
+import { withoutSignInLink } from "./provider-link.js";
+import { useRouter } from "../app/router.js";
+import { readSignInAddress, signInPath } from "./sign-in-address.js";
+import { useCallback, useMemo } from "react";
+//#region src/auth/use-sign-in-address.ts
+/**
+* The sign-in route as logical values, and the ways to move along it: `address` is the step it shows, or `undefined` on
+* any other page; `next` is the page to come back to; `open` shows a step, and `leave` goes back to `next` in place of
+* the route in the tab's history. Components read and write the sign-in route through this hook, never its query.
+*/
+const useSignInAddress = () => {
+	const { path, params, navigate } = useRouter();
+	const address = useMemo(() => readSignInAddress(path, params), [path, params]);
+	const here = withoutSignInLink(new URL(params.size > 0 ? `${path}?${params}` : path, "http://local").href);
+	const next = address ? address.next : here;
+	return {
+		address,
+		next,
+		open: useCallback((step = "sign-in", options) => navigate(signInPath({
+			step,
+			next
+		}), options), [navigate, next]),
+		leave: useCallback(() => navigate(next ?? "/", { replace: true }), [navigate, next])
+	};
+};
+//#endregion
+export { useSignInAddress };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.14.6";
+var version = "0.15.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };