@carlonicora/nextjs-jsonapi 1.40.0 → 1.41.0

package/src/features/auth/components/two-factor/PasskeyList.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { Edit, Key, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { errorToast } from "../../../../components/errors/errorToast";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+} from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { PasskeyInterface } from "../../data/passkey.interface";
+import { TwoFactorService } from "../../data/two-factor.service";
+
+interface PasskeyListProps {
+  passkeys: PasskeyInterface[];
+  onRefresh: () => void;
+}
+
+export function PasskeyList({ passkeys, onRefresh }: PasskeyListProps) {
+  const t = useTranslations();
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [selectedPasskey, setSelectedPasskey] = useState<PasskeyInterface | null>(null);
+  const [newName, setNewName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleDelete = async (passkey: PasskeyInterface) => {
+    setIsLoading(true);
+    try {
+      await TwoFactorService.deletePasskey({ id: passkey.id });
+
+      showToast(t("common.success"), {
+        description: t("auth.two_factor.passkey_deleted"),
+      });
+      onRefresh();
+    } catch (error) {
+      errorToast({
+        title: t("common.errors.error"),
+        error,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRename = async () => {
+    if (!selectedPasskey || !newName.trim()) return;
+
+    setIsLoading(true);
+    try {
+      await TwoFactorService.renamePasskey({
+        id: selectedPasskey.id,
+        name: newName.trim(),
+      });
+
+      showToast(t("common.success"), {
+        description: t("auth.two_factor.passkey_renamed"),
+      });
+      setRenameDialogOpen(false);
+      setSelectedPasskey(null);
+      setNewName("");
+      onRefresh();
+    } catch (error) {
+      errorToast({
+        title: t("common.errors.error"),
+        error,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const openRenameDialog = (passkey: PasskeyInterface) => {
+    setSelectedPasskey(passkey);
+    setNewName(passkey.name);
+    setRenameDialogOpen(true);
+  };
+
+  if (passkeys.length === 0) {
+    return <p className="text-sm text-muted-foreground text-center py-4">{t("auth.two_factor.no_passkeys")}</p>;
+  }
+
+  return (
+    <>
+      <div className="space-y-2">
+        {passkeys.map((passkey) => (
+          <div key={passkey.id} className="flex items-center justify-between p-3 border rounded-lg">
+            <div className="flex items-center gap-3">
+              <Key className="h-5 w-5 text-muted-foreground" />
+              <div>
+                <p className="font-medium">{passkey.name}</p>
+                <p className="text-sm text-muted-foreground">
+                  {passkey.backedUp && "☁️ "}
+                  {passkey.lastUsedAt
+                    ? `${t("auth.two_factor.last_used")}: ${new Date(passkey.lastUsedAt).toLocaleDateString()}`
+                    : t("auth.two_factor.never_used")}
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button variant="ghost" size="icon" onClick={() => openRenameDialog(passkey)} disabled={isLoading}>
+                <Edit className="h-4 w-4" />
+              </Button>
+              <AlertDialog>
+                <AlertDialogTrigger
+                  render={
+                    <Button variant="ghost" size="icon" disabled={isLoading}>
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  }
+                />
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>{t("auth.two_factor.remove_passkey")}</AlertDialogTitle>
+                    <AlertDialogDescription>{t("auth.two_factor.confirm_delete_passkey")}</AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>{t("common.buttons.cancel")}</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={() => handleDelete(passkey)}
+                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    >
+                      {t("common.buttons.delete")}
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("auth.two_factor.rename_passkey")}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Input
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              placeholder={t("auth.two_factor.passkey_name")}
+              disabled={isLoading}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRenameDialogOpen(false)}>
+              {t("common.cancel")}
+            </Button>
+            <Button onClick={handleRename} disabled={!newName.trim() || isLoading}>
+              {t("common.save")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/features/auth/components/two-factor/PasskeySetupDialog.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { startRegistration } from "@simplewebauthn/browser";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { v4 } from "uuid";
+import { errorToast } from "../../../../components/errors/errorToast";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+} from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { useCurrentUserContext } from "../../../user/contexts/CurrentUserContext";
+import { TwoFactorService } from "../../data/two-factor.service";
+
+interface PasskeySetupDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+}
+
+export function PasskeySetupDialog({ open, onOpenChange, onSuccess }: PasskeySetupDialogProps) {
+  const t = useTranslations();
+  const { currentUser } = useCurrentUserContext();
+  const [name, setName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleRegister = async () => {
+    if (!name.trim()) return;
+
+    setIsLoading(true);
+    try {
+      // 1. Get registration options from backend
+      const registrationData = await TwoFactorService.getPasskeyRegistrationOptions({
+        id: v4(),
+        userName: currentUser?.email ?? "",
+        userDisplayName: currentUser?.name,
+      });
+
+      // 2. Trigger browser WebAuthn dialog
+      const credential = await startRegistration({ optionsJSON: registrationData.options });
+
+      // 3. Verify with backend
+      await TwoFactorService.verifyPasskeyRegistration({
+        id: v4(),
+        pendingId: registrationData.pendingId,
+        name: name.trim(),
+        response: credential,
+      });
+
+      // Auto-enable 2FA if not already enabled
+      const status = await TwoFactorService.getStatus();
+      if (!status.isEnabled) {
+        await TwoFactorService.enable({ id: v4(), preferredMethod: "passkey" });
+      }
+
+      showToast(t("common.success"), {
+        description: t("auth.two_factor.passkey_registered"),
+      });
+
+      setName("");
+      onOpenChange(false);
+      onSuccess();
+    } catch (error) {
+      errorToast({
+        title: t("common.errors.error"),
+        error,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("auth.two_factor.setup_passkey")}</DialogTitle>
+          <DialogDescription>{t("auth.two_factor.passkey_setup_description")}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="passkey-name">{t("auth.two_factor.passkey_name")}</Label>
+            <Input
+              id="passkey-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="MacBook Pro Touch ID"
+              disabled={isLoading}
+            />
+          </div>
+          <Button onClick={handleRegister} disabled={!name.trim() || isLoading} className="w-full">
+            {isLoading ? t("common.loading") : t("auth.two_factor.register_passkey")}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/auth/components/two-factor/TotpAuthenticatorList.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { Smartphone, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { errorToast } from "../../../../components/errors/errorToast";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+  Card,
+  CardContent,
+} from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { TotpAuthenticatorInterface } from "../../data/totp-authenticator.interface";
+import { TwoFactorService } from "../../data/two-factor.service";
+
+interface TotpAuthenticatorListProps {
+  authenticators: TotpAuthenticatorInterface[];
+  onDelete: () => void;
+}
+
+export function TotpAuthenticatorList({ authenticators, onDelete }: TotpAuthenticatorListProps) {
+  const t = useTranslations();
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const handleDelete = async (id: string) => {
+    setDeletingId(id);
+    try {
+      await TwoFactorService.deleteTotpAuthenticator({ id });
+
+      showToast(t("common.success"), {
+        description: t("auth.two_factor.authenticator_removed"),
+      });
+      onDelete();
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  if (authenticators.length === 0) {
+    return <p className="text-sm text-muted-foreground">{t("auth.two_factor.no_authenticators")}</p>;
+  }
+
+  return (
+    <div className="space-y-2">
+      {authenticators.map((auth) => (
+        <Card key={auth.id} data-testid={`authenticator-${auth.id}`}>
+          <CardContent className="flex items-center justify-between p-4">
+            <div className="flex items-center gap-3">
+              <Smartphone className="h-5 w-5 text-muted-foreground" />
+              <div>
+                <p className="font-medium">{auth.name}</p>
+                {auth.lastUsedAt && (
+                  <p className="text-xs text-muted-foreground">
+                    {t("auth.two_factor.last_used")}: {auth.lastUsedAt.toLocaleDateString()}
+                  </p>
+                )}
+              </div>
+            </div>
+            <AlertDialog>
+              <AlertDialogTrigger
+                render={
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    disabled={deletingId === auth.id}
+                    data-testid={`delete-auth-${auth.id}`}
+                  >
+                    <Trash2 className="h-4 w-4 text-destructive" />
+                  </Button>
+                }
+              />
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t("auth.two_factor.remove_authenticator")}</AlertDialogTitle>
+                  <AlertDialogDescription>{t("auth.two_factor.remove_authenticator_confirm")}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t("common.buttons.cancel")}</AlertDialogCancel>
+                  <AlertDialogAction
+                    onClick={() => handleDelete(auth.id)}
+                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                  >
+                    {t("common.buttons.remove")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/src/features/auth/components/two-factor/TotpInput.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Input } from "../../../../shadcnui";
+
+interface TotpInputProps {
+  onComplete: (code: string) => void;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  error?: string;
+}
+
+export function TotpInput({ onComplete, disabled = false, autoFocus = true, error }: TotpInputProps) {
+  const [digits, setDigits] = useState<string[]>(["", "", "", "", "", ""]);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  useEffect(() => {
+    if (autoFocus && inputRefs.current[0]) {
+      inputRefs.current[0].focus();
+    }
+  }, [autoFocus]);
+
+  const handleChange = (index: number, value: string) => {
+    // Only allow digits
+    const digit = value.replace(/\D/g, "").slice(-1);
+
+    const newDigits = [...digits];
+    newDigits[index] = digit;
+    setDigits(newDigits);
+
+    // Move to next input
+    if (digit && index < 5) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    // Check if complete
+    const code = newDigits.join("");
+    if (code.length === 6 && newDigits.every((d) => d !== "")) {
+      onComplete(code);
+    }
+  };
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
+    if (e.key === "Backspace" && !digits[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
+
+    if (pastedData.length === 6) {
+      const newDigits = pastedData.split("");
+      setDigits(newDigits);
+      inputRefs.current[5]?.focus();
+      onComplete(pastedData);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <div className="flex gap-2">
+        {digits.map((digit, index) => (
+          <Input
+            key={index}
+            ref={(el) => {
+              inputRefs.current[index] = el;
+            }}
+            type="text"
+            inputMode="numeric"
+            maxLength={1}
+            value={digit}
+            onChange={(e) => handleChange(index, e.target.value)}
+            onKeyDown={(e) => handleKeyDown(index, e)}
+            onPaste={handlePaste}
+            disabled={disabled}
+            className={`w-12 h-14 text-center text-2xl font-mono ${error ? "border-destructive" : ""}`}
+            data-testid={`totp-input-${index}`}
+          />
+        ))}
+      </div>
+      {error && (
+        <p className="text-sm text-destructive" data-testid="totp-error">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/features/auth/components/two-factor/TotpSetupDialog.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { QRCodeSVG } from "qrcode.react";
+import { useState } from "react";
+import { v4 } from "uuid";
+import { errorToast } from "../../../../components/errors/errorToast";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Label,
+} from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { useCurrentUserContext } from "../../../user/contexts/CurrentUserContext";
+import { TwoFactorService } from "../../data/two-factor.service";
+import { TotpInput } from "./TotpInput";
+
+interface TotpSetupDialogProps {
+  onSuccess: () => void;
+  trigger?: React.ReactElement;
+}
+
+export function TotpSetupDialog({ onSuccess, trigger }: TotpSetupDialogProps) {
+  const t = useTranslations();
+  const { currentUser } = useCurrentUserContext();
+  const [open, setOpen] = useState(false);
+  const [step, setStep] = useState<"name" | "scan" | "verify">("name");
+  const [name, setName] = useState("");
+  const [qrCodeUri, setQrCodeUri] = useState("");
+  const [authenticatorId, setAuthenticatorId] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [verifyError, setVerifyError] = useState<string | undefined>();
+
+  const handleStartSetup = async () => {
+    if (!name.trim()) return;
+
+    setIsLoading(true);
+    try {
+      const setup = await TwoFactorService.setupTotp({
+        id: v4(),
+        name: name.trim(),
+        accountName: currentUser?.email ?? "",
+      });
+
+      setQrCodeUri(setup.qrCodeUri);
+      setAuthenticatorId(setup.authenticatorId);
+      setStep("scan");
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleVerify = async (code: string) => {
+    setIsLoading(true);
+    setVerifyError(undefined);
+
+    try {
+      await TwoFactorService.verifyTotpSetup({
+        id: v4(),
+        authenticatorId,
+        code,
+      });
+
+      // Auto-enable 2FA if not already enabled
+      const status = await TwoFactorService.getStatus();
+      if (!status.isEnabled) {
+        await TwoFactorService.enable({ id: v4(), preferredMethod: "totp" });
+      }
+
+      showToast(t("common.success"), {
+        description: t("auth.two_factor.authenticator_added"),
+      });
+
+      setOpen(false);
+      resetState();
+      onSuccess();
+    } catch (error) {
+      setVerifyError(t("auth.two_factor.invalid_code"));
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const resetState = () => {
+    setStep("name");
+    setName("");
+    setQrCodeUri("");
+    setAuthenticatorId("");
+    setVerifyError(undefined);
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (!newOpen) resetState();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      {trigger ? (
+        <DialogTrigger render={trigger} />
+      ) : (
+        <DialogTrigger render={<Button variant="outline">{t("auth.two_factor.add_authenticator")}</Button>} />
+      )}
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("auth.two_factor.setup_authenticator")}</DialogTitle>
+          <DialogDescription>
+            {step === "name" && t("auth.two_factor.name_your_authenticator")}
+            {step === "scan" && t("auth.two_factor.scan_qr_code")}
+            {step === "verify" && t("auth.two_factor.enter_verification_code")}
+          </DialogDescription>
+        </DialogHeader>
+
+        {step === "name" && (
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="authenticator-name">{t("auth.two_factor.authenticator_name")}</Label>
+              <Input
+                id="authenticator-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder={t("auth.two_factor.authenticator_name_placeholder")}
+                data-testid="authenticator-name-input"
+              />
+            </div>
+            <Button onClick={handleStartSetup} disabled={!name.trim() || isLoading} data-testid="start-setup-button">
+              {t("common.buttons.continue")}
+            </Button>
+          </div>
+        )}
+
+        {step === "scan" && (
+          <div className="flex flex-col items-center gap-4">
+            <div className="p-4 bg-white rounded-lg">
+              <QRCodeSVG value={qrCodeUri} size={200} data-testid="totp-qr-code" />
+            </div>
+            <p className="text-sm text-muted-foreground text-center">{t("auth.two_factor.scan_with_app")}</p>
+            <Button onClick={() => setStep("verify")} data-testid="next-to-verify">
+              {t("common.buttons.next")}
+            </Button>
+          </div>
+        )}
+
+        {step === "verify" && (
+          <div className="flex flex-col items-center gap-4">
+            <TotpInput onComplete={handleVerify} disabled={isLoading} error={verifyError} />
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}