{/* Reconnecting indicator */}
@@ -1210,5 +1226,6 @@ export default function InvoiceDetailPage({ params }: Props) {
onClose={() => setShowShareQRModal(false)}
/>
+
);
}
diff --git a/src/components/invoice/AccessCodeGate.tsx b/src/components/invoice/AccessCodeGate.tsx
new file mode 100644
index 0000000..50a9bfb
--- /dev/null
+++ b/src/components/invoice/AccessCodeGate.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import Link from "next/link";
+import { verifyAccessCode, hashAccessCode } from "@/lib/accessCode";
+
+export { verifyAccessCode, hashAccessCode };
+
+export interface AccessCodeGateProps {
+ invoiceId: string;
+ expectedHash?: string;
+ isPrivate?: boolean;
+ onUnlock?: () => void;
+ children: React.ReactNode;
+}
+
+export default function AccessCodeGate({
+ invoiceId,
+ expectedHash,
+ isPrivate = false,
+ onUnlock,
+ children,
+}: AccessCodeGateProps) {
+ const [isUnlocked, setIsUnlocked] = useState(false);
+ const [accessCode, setAccessCode] = useState("");
+ const [showCode, setShowCode] = useState(false);
+ const [error, setError] = useState(null);
+ const [isVerifying, setIsVerifying] = useState(false);
+ const [isShaking, setIsShaking] = useState(false);
+ const inputRef = useRef(null);
+
+ const storageKey = `invoice_unlocked_${invoiceId}`;
+
+ // Check sessionStorage on mount
+ useEffect(() => {
+ if (typeof window !== "undefined") {
+ const stored = sessionStorage.getItem(storageKey);
+ if (stored === "true") {
+ setIsUnlocked(true);
+ }
+ }
+ }, [storageKey]);
+
+ // Focus input when private and locked
+ useEffect(() => {
+ if (isPrivate && !isUnlocked) {
+ inputRef.current?.focus();
+ }
+ }, [isPrivate, isUnlocked]);
+
+ // If not private or already unlocked, render children directly
+ if (!isPrivate || isUnlocked) {
+ return <>{children};
+ }
+
+ const handleUnlock = async (e?: React.FormEvent) => {
+ if (e) e.preventDefault();
+ const trimmed = accessCode.trim();
+ if (!trimmed) {
+ setError("Please enter the access code");
+ triggerShake();
+ return;
+ }
+
+ setIsVerifying(true);
+ setError(null);
+
+ try {
+ // If expectedHash is specified, verify against it; otherwise check if non-empty
+ const isValid = expectedHash ? await verifyAccessCode(trimmed, expectedHash) : true;
+
+ if (isValid) {
+ if (typeof window !== "undefined") {
+ sessionStorage.setItem(storageKey, "true");
+ }
+ setIsUnlocked(true);
+ if (onUnlock) onUnlock();
+ } else {
+ setError("Incorrect access code");
+ triggerShake();
+ }
+ } catch (err) {
+ setError("Failed to verify access code");
+ triggerShake();
+ } finally {
+ setIsVerifying(false);
+ }
+ };
+
+ const triggerShake = () => {
+ setIsShaking(true);
+ setTimeout(() => setIsShaking(false), 500);
+ inputRef.current?.focus();
+ };
+
+ return (
+ {
+ const trimmed = code.trim();
+ if (typeof crypto !== "undefined" && crypto.subtle) {
+ const encoder = new TextEncoder();
+ const data = encoder.encode(trimmed);
+ const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+ return Array.from(new Uint8Array(hashBuffer))
+ .map((b) => b.toString(16).padStart(2, "0"))
+ .join("");
+ }
+ // Fallback for Node.js / test environments
+ try {
+ const nodeCrypto = await import("crypto");
+ return nodeCrypto.createHash("sha256").update(trimmed).digest("hex");
+ } catch {
+ throw new Error("Crypto API unavailable");
+ }
+}
+
+/**
+ * Verifies an access code against a stored SHA-256 hash.
+ */
+export async function verifyAccessCode(code: string, storedHash?: string): Promise {
+ if (!code || !storedHash) return false;
+ const computed = await hashAccessCode(code);
+ return computed.toLowerCase() === storedHash.trim().toLowerCase();
+}
+
+
+
+ );
+}
diff --git a/src/lib/accessCode.ts b/src/lib/accessCode.ts
new file mode 100644
index 0000000..0666c4d
--- /dev/null
+++ b/src/lib/accessCode.ts
@@ -0,0 +1,34 @@
+/**
+ * Client-side access code hashing and verification utilities.
+ */
+
+/**
+ * Hashes an access code using SHA-256.
+ */
+export async function hashAccessCode(code: string): Promise
+ {/* Lock Icon */}
+
+
+
+
+
+
+ Private Invoice #{invoiceId}
+
+
+ Access Code Required
++ This invoice is restricted. Please enter the access code to unlock invoice details and submit payments. +
+ + + +
+
+ ← Return to Dashboard
+
+
+