@protobase/ui 0.14.6 → 0.14.7

package/dist/auth/auth-gate.js

@@ -11,6 +11,7 @@ import { ProviderSignInPage } from "./provider-sign-in-page.js";
 import { ResetPasswordPage } from "./reset-password-page.js";
 import { SetupRequiredPage } from "./setup-required-page.js";
 import { SignInPage } from "./sign-in-page.js";
+import { SignUpPage } from "./sign-up-page.js";
 import { readStaffLink, withoutStaffLink } from "./staff-link.js";
 import { StaffSignInPage } from "./staff-sign-in-page.js";
 import { TwoFactorPage } from "./two-factor-page.js";
@@ -58,7 +59,7 @@ const forgetInvitationLink = () => window.history.replaceState(window.history.st
 * staff link opened. An invited person with an account signs in first and comes back to the invitation.
 */
 const AuthGate = ({ workspace, children }) => {
-	const { state, recheck, passwordReset, signOut, signInProviders, showSignIn, browse } = useAuth();
+	const { state, recheck, passwordReset, signOut, signInProviders, showSignIn, canSignUp, entry, showSignUp, browse } = useAuth();
 	const [page, setPage] = useState(firstPage);
 	useEffect(() => {
 		if (state.kind === "signed-in" || state.kind === "two-factor" || state.kind === "setup-required") setPage((current) => {
@@ -150,6 +151,7 @@ const AuthGate = ({ workspace, children }) => {
 		email: page.email,
 		onBack: () => setPage({ kind: "sign-in" })
 	});
+	if (canSignUp && entry === "sign-up" && page.kind === "sign-in") return /* @__PURE__ */ jsx(SignUpPage, { workspace });
 	const signIn = page.kind === "sign-in" ? page : { kind: "sign-in" };
 	const providerError = signIn.providerError && providerMessage(signIn.providerError, signInProviders.length === 1 ? signInProviders[0].name : "the provider");
 	const error = signIn.error ?? providerError;
@@ -162,6 +164,7 @@ const AuthGate = ({ workspace, children }) => {
 			kind: "email-code",
 			email
 		}),
+		onSignUp: canSignUp ? showSignUp : void 0,
 		onBrowse: browse
 	}, error);
 };

package/dist/auth/auth-provider.js

@@ -14,6 +14,8 @@ const AuthProvider = ({ session: given, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
+	const [canSignUp, setCanSignUp] = useState(false);
+	const [entry, setEntry] = useState("sign-in");
 	const [passkeyDomains, setPasskeyDomains] = useState([]);
 	const [socialProviders, setSocialProviders] = useState([]);
 	const [platformSignIn, setPlatformSignIn] = useState();
@@ -27,6 +29,7 @@ const AuthProvider = ({ session: given, children }) => {
 	const session = useMemo(() => given ?? createAuthSession({ onSignedOut: () => signedOut.current() }), [given]);
 	const enter = useCallback(async (user) => {
 		const [{ missing }, staff] = await Promise.all([session.account.signInMethods(), session.staff.current()]);
+		setEntry("sign-in");
 		setState(missing.length > 0 ? {
 			kind: "setup-required",
 			user,
@@ -46,6 +49,7 @@ const AuthProvider = ({ session: given, children }) => {
 		session.status().then(async (status) => {
 			setSignInMethods(status.signInMethods);
 			setPasswordReset(status.passwordReset);
+			setCanSignUp(Boolean(status.signUp));
 			setPasskeyDomains(status.passkeyDomains ?? []);
 			setSocialProviders(status.socialProviders);
 			setPlatformSignIn(status.platformSignIn);
@@ -66,6 +70,8 @@ const AuthProvider = ({ session: given, children }) => {
 		session,
 		signInMethods,
 		passwordReset,
+		canSignUp,
+		entry,
 		passkeyDomains,
 		socialProviders,
 		signInProviders: socialProviders.map((id) => ({
@@ -76,11 +82,23 @@ const AuthProvider = ({ session: given, children }) => {
 		...organizations && { organizations },
 		markSignedOut,
 		recheck,
-		showSignIn: () => setState((current) => current.kind === "visitor" ? { kind: "signed-out" } : current),
-		...anonymous && { browse: () => setState((current) => current.kind === "signed-out" ? { kind: "visitor" } : current) },
+		showSignIn: () => {
+			setEntry("sign-in");
+			setState((current) => current.kind === "visitor" ? { kind: "signed-out" } : current);
+		},
+		showSignUp: () => {
+			setEntry("sign-up");
+			setState((current) => current.kind === "visitor" ? { kind: "signed-out" } : current);
+		},
+		...anonymous && { browse: () => {
+			setEntry("sign-in");
+			setState((current) => current.kind === "signed-out" ? { kind: "visitor" } : current);
+		} },
 		signIn: async (email, password) => finish(await session.signIn(email, password)),
 		sendSignInCode: (email) => session.sendSignInCode(email),
 		signInWithCode: async (email, code) => finish(await session.signInWithCode(email, code)),
+		sendSignUpCode: (email) => session.sendSignUpCode(email),
+		signUp: async (input) => enter(await session.signUp(input)),
 		signInWithPasskey: async (domain) => enter(await session.signInWithPasskey(domain)),
 		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),
 		signInSocial: async (provider) => {
@@ -102,6 +120,8 @@ const AuthProvider = ({ session: given, children }) => {
 		session,
 		signInMethods,
 		passwordReset,
+		canSignUp,
+		entry,
 		passkeyDomains,
 		socialProviders,
 		platformSignIn,

package/dist/auth/sign-in-form.js

@@ -14,7 +14,7 @@ const Divider = () => /* @__PURE__ */ jsxs("div", {
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
 	]
 });
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, passkeyDomains = [], onForgotPassword, providers = [], onContinueWith, onBrowse }) => {
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, passkeyDomains = [], onForgotPassword, providers = [], onContinueWith, onSignUp, onBrowse }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const emailInput = useRef(null);
@@ -133,6 +133,19 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 					})
 				]
 			}),
+			onSignUp && /* @__PURE__ */ jsxs("p", {
+				className: "mt-4 text-center text-[13px] text-muted-foreground",
+				children: [
+					"New here?",
+					" ",
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onSignUp,
+						className: "font-medium text-primary-text hover:underline",
+						children: "Create an account"
+					})
+				]
+			}),
 			onBrowse && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: onBrowse,

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

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-in-page.tsx
-const SignInPage = ({ workspace, notice, onForgotPassword, onBrowse, onCodeSent, error: initialError }) => {
+const SignInPage = ({ workspace, notice, onForgotPassword, onSignUp, onBrowse, onCodeSent, error: initialError }) => {
 	const { signIn, signInSocial, signInProviders, signInMethods, passkeyDomains, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState(initialError);
@@ -27,6 +27,7 @@ const SignInPage = ({ workspace, notice, onForgotPassword, onBrowse, onCodeSent,
 		notice,
 		methods: signInMethods,
 		onForgotPassword,
+		onSignUp,
 		onBrowse,
 		providers: signInProviders,
 		onContinueWith: (provider) => void attempt(() => signInSocial(provider), signInMessage),

package/dist/auth/sign-in-prompt.d.ts

@@ -15,7 +15,8 @@ export type SignInPromptProps = {
 });
 /**
  * What a visitor who is not signed in is told about something they could use once signed in: the prompt's title, what
- * signing in gives and its benefits, with "Sign in" and, when the prompt names one, a page to make an account. As a page
+ * signing in gives and its benefits, with "Sign in" and a way to make an account: the page the prompt names, or the
+ * app's own sign-up when the server has it. As a page
  * it stands in for a list the visitor cannot see; as a dialog it answers a press on a button that needs an account.
  */
 export declare const SignInPrompt: (props: SignInPromptProps) => import("react").JSX.Element;

package/dist/auth/sign-in-prompt.js

@@ -17,13 +17,16 @@ const Benefits = ({ benefits }) => benefits && benefits.length > 0 ? /* @__PURE_
 	}, benefit))
 }) : null;
 const Actions = ({ prompt }) => {
-	const { showSignIn } = useAuth();
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [prompt.signUp && /* @__PURE__ */ jsx("a", {
+	const { showSignIn, canSignUp, showSignUp } = useAuth();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [prompt.signUp ? /* @__PURE__ */ jsx("a", {
 		href: prompt.signUp.href,
 		target: "_blank",
 		rel: "noreferrer",
 		className: buttonClass(),
 		children: prompt.signUp.label
+	}) : canSignUp && /* @__PURE__ */ jsx(Button, {
+		onClick: showSignUp,
+		children: "Create an account"
 	}), /* @__PURE__ */ jsx(Button, {
 		variant: "primary",
 		onClick: showSignIn,
@@ -32,7 +35,8 @@ const Actions = ({ prompt }) => {
 };
 /**
 * What a visitor who is not signed in is told about something they could use once signed in: the prompt's title, what
-* signing in gives and its benefits, with "Sign in" and, when the prompt names one, a page to make an account. As a page
+* signing in gives and its benefits, with "Sign in" and a way to make an account: the page the prompt names, or the
+* app's own sign-up when the server has it. As a page
 * it stands in for a list the visitor cannot see; as a dialog it answers a press on a button that needs an account.
 */
 const SignInPrompt = (props) => {

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,63 @@
+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 }) => {
+	const { signInMethods, sendSignUpCode, signUp, showSignIn, browse } = useAuth();
+	const [email, setEmail] = useState();
+	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: showSignIn,
+		onBrowse: browse,
+		onSubmit: (address) => void attempt(async () => {
+			await sendSignUpCode(address);
+			setEmail(address);
+		})
+	});
+	return /* @__PURE__ */ jsx(SignUpDetailsForm, {
+		email,
+		methods: signInMethods,
+		busy,
+		error,
+		notice,
+		onBack: () => {
+			setError(void 0);
+			setEmail(void 0);
+		},
+		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/package.js

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