@protobase/ui 0.46.8 → 0.46.9

package/dist/account/change-email-dialog.js

@@ -2,9 +2,9 @@ import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
 import { Input } from "../primitives/input.js";
+import { OtpInput } from "../primitives/otp-input.js";
 import { SectionError } from "./account-section.js";
 import { authMessage } from "../auth/auth-messages.js";
-import { OtpInput } from "../primitives/otp-input.js";
 import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/account/two-factor-setup.js

@@ -2,8 +2,8 @@ import { text } from "./messages.js";
 import { cn } from "../lib/cn.js";
 import { Button } from "../primitives/button.js";
 import { Input } from "../primitives/input.js";
-import { authMessage } from "../auth/auth-messages.js";
 import { OtpInput } from "../primitives/otp-input.js";
+import { authMessage } from "../auth/auth-messages.js";
 import { BackupCodes } from "./backup-codes.js";
 import { TotpQr, totpKey } from "./totp-qr.js";
 import { useState } from "react";

package/dist/app/confirm-sign-in-messages.js

@@ -0,0 +1,22 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/app/confirm-sign-in-messages.ts
+const text = defineMessages({
+	en: {
+		confirmTitle: "Confirm it's you",
+		confirmWhy: (minutes) => `Showing this needs a passkey or your authenticator app in the last ${minutes} minutes.`,
+		usePasskey: "Use a passkey",
+		authenticatorCode: "Code from your authenticator app",
+		confirm: "Confirm",
+		nothingToConfirmWith: "Add a passkey or an authenticator app on your account page first."
+	},
+	nl: {
+		confirmTitle: "Bevestig dat jij het bent",
+		confirmWhy: (minutes) => `Dit tonen vraagt in de laatste ${minutes} minuten een passkey of je authenticator-app.`,
+		usePasskey: "Passkey gebruiken",
+		authenticatorCode: "Code uit je authenticator-app",
+		confirm: "Bevestigen",
+		nothingToConfirmWith: "Voeg eerst een passkey of een authenticator-app toe op je accountpagina."
+	}
+});
+//#endregion
+export { text };

package/dist/app/confirm-sign-in.js

@@ -0,0 +1,88 @@
+import { useOptionalAuth } from "../auth/auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { OtpInput } from "../primitives/otp-input.js";
+import { text } from "./confirm-sign-in-messages.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery } from "@tanstack/react-query";
+//#region src/app/confirm-sign-in.tsx
+/**
+* Asks the person to confirm it's them, with a passkey or their authenticator app, after the server refused something
+* that needs a recent strong sign-in (`strong-sign-in-required`). It offers only what the account has; a passkey signs
+* the browser in anew, a code confirms the session it has.
+*/
+const ConfirmSignIn = ({ minutes, onConfirmed }) => {
+	const auth = useOptionalAuth();
+	const [code, setCode] = useState("");
+	const methods = useQuery({
+		queryKey: ["account-sign-in-methods"],
+		queryFn: () => auth.session.account.signInMethods(),
+		enabled: Boolean(auth)
+	});
+	const passkey = useMutation({
+		mutationFn: () => auth.signInWithPasskey(),
+		onSuccess: onConfirmed
+	});
+	const authenticator = useMutation({
+		mutationFn: (entered) => auth.verifyTwoFactor({
+			method: "totp",
+			code: entered
+		}),
+		onSuccess: onConfirmed
+	});
+	const account = methods.data?.account;
+	const error = passkey.error ?? authenticator.error ?? methods.error;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": text("confirmTitle"),
+		className: "mt-2 flex flex-col gap-2 rounded-md border border-border bg-surface p-3",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "font-medium",
+				children: text("confirmTitle")
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: text("confirmWhy", minutes)
+			}),
+			account && account.passkeys > 0 && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				size: "sm",
+				className: "self-start",
+				loading: passkey.isPending,
+				onClick: () => passkey.mutate(),
+				children: text("usePasskey")
+			}),
+			account?.authenticatorApp && /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-wrap items-end gap-2",
+				onSubmit: (event) => {
+					event.preventDefault();
+					authenticator.mutate(code.trim());
+				},
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5",
+					children: [text("authenticatorCode"), /* @__PURE__ */ jsx(OtpInput, {
+						name: "code",
+						required: true,
+						value: code,
+						invalid: authenticator.isError,
+						onChange: setCode,
+						onComplete: (entered) => authenticator.mutate(entered)
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					size: "sm",
+					loading: authenticator.isPending,
+					children: text("confirm")
+				})]
+			}),
+			account && account.passkeys === 0 && !account.authenticatorApp && /* @__PURE__ */ jsx("p", { children: text("nothingToConfirmWith") }),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "font-medium text-danger-text",
+				children: error.message
+			})
+		]
+	});
+};
+//#endregion
+export { ConfirmSignIn };

package/dist/app/sensitive-field.js

@@ -6,15 +6,19 @@ import { displayValue } from "../live/display-value.js";
 import { text } from "./messages.js";
 import { toDraft } from "../live/field-values.js";
 import { ErrorBanner } from "./error-banner.js";
+import { ConfirmSignIn } from "./confirm-sign-in.js";
 import { useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
+import { isApiError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
 //#region src/app/sensitive-field.tsx
 const mask = "••••••••••";
+const strongSignInMinutes = (error) => isApiError(error) && error.slug === "strong-sign-in-required" ? error.problem.minutes ?? 15 : void 0;
 /**
 * A value hidden like a password. Showing a stored one asks the server for it, once per page visit; a write-only one has
-* none to show, so its eye only unmasks what was typed.
+* none to show, so its eye only unmasks what was typed. When the server wants a recent strong sign-in first, the field
+* asks the person to confirm it's them, then shows the value.
 */
 const SensitiveField = ({ field, hints, value, reveal, locked, invalid, placeholder, onChange }) => {
 	const [shown, setShown] = useState(false);
@@ -38,7 +42,11 @@ const SensitiveField = ({ field, hints, value, reveal, locked, invalid, placehol
 		onClick: toggle,
 		children: !stored.isPending && (shown ? /* @__PURE__ */ jsx(EyeOff, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "size-3.5" }))
 	});
-	const error = stored.error && /* @__PURE__ */ jsx("div", {
+	const minutes = strongSignInMinutes(stored.error);
+	const error = minutes !== void 0 ? /* @__PURE__ */ jsx(ConfirmSignIn, {
+		minutes,
+		onConfirmed: () => stored.mutate()
+	}) : stored.error && /* @__PURE__ */ jsx("div", {
 		className: "mt-2",
 		children: /* @__PURE__ */ jsx(ErrorBanner, {
 			title: text("couldNotShow", label),

package/dist/auth/auth-provider.js

@@ -12,6 +12,8 @@ const useAuth = () => {
 	if (!api) throw new Error("useAuth must be used inside AuthProvider");
 	return api;
 };
+/** The auth state and steps inside `AuthProvider`, `null` outside it, for a part that also works without one. */
+const useOptionalAuth = () => useContext(AuthContext);
 /**
 * Finds out whether the server has a login and who is signed in, and keeps that state for the app. Without a `session`,
 * it makes one on `origin`, the page's own by default; in the iOS or Android app, with its `nativeBridge`, the session
@@ -216,4 +218,4 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 	});
 };
 //#endregion
-export { AuthProvider, useAuth };
+export { AuthProvider, useAuth, useOptionalAuth };

package/dist/auth/code-form.js

@@ -1,7 +1,7 @@
 import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
-import { AuthLayout } from "./auth-layout.js";
 import { OtpInput } from "../primitives/otp-input.js";
+import { AuthLayout } from "./auth-layout.js";
 import { ResendCodeButton } from "./resend-code-button.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/auth/two-factor-form.js

@@ -1,9 +1,9 @@
 import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { Input } from "../primitives/input.js";
+import { OtpInput } from "../primitives/otp-input.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { AuthLayout } from "./auth-layout.js";
-import { OtpInput } from "../primitives/otp-input.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/two-factor-form.tsx

package/dist/index.js

@@ -12,6 +12,7 @@ import { AppLink, useAppAddress } from "./app/use-app-address.js";
 import { Segmented } from "./primitives/segmented.js";
 import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
+import { OtpInput } from "./primitives/otp-input.js";
 import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { Markdown } from "./markdown/markdown.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
@@ -22,7 +23,6 @@ import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { MenuSelect } from "./primitives/menu-select.js";
 import { AuthLayout } from "./auth/auth-layout.js";
-import { OtpInput } from "./primitives/otp-input.js";
 import { allowDelayMs, isFramed, useArmedAfterFocus, useGuardedPress } from "./connect/interaction-guard.js";
 import { ResendCodeButton } from "./auth/resend-code-button.js";
 import { CodeForm } from "./auth/code-form.js";

package/dist/package.js

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