@seedgrid/fe-security 2026.7.0 → 2026.7.2

package/scaffold/src/app/security/2fa/page.tsx

@@ -0,0 +1,370 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import {
+  SgButton,
+  SgCombobox,
+  SgGrid,
+  SgInputPassword,
+  SgInputText,
+  SgPanel,
+  SgStack,
+  sgWhistle,
+} from "@seedgrid/fe-components";
+
+import { useI18n } from "@/i18n";
+import {
+  InlineNotice,
+  PageFrame,
+  RouteGuard,
+  StatusBadge,
+  extractApiMessage,
+  securityService,
+  type TwoFactorEnableResponse,
+  type TwoFactorStatus,
+} from "@/modules/security";
+
+export default function TwoFactorSettingsPage() {
+  return (
+    <RouteGuard>
+      <TwoFactorSettingsScreen />
+    </RouteGuard>
+  );
+}
+
+type TwoFactorSettingsFormValues = {
+  totpCode: string;
+  disableTwoFactorCode: string;
+  disablePassword: string;
+  backupCode: string;
+};
+
+function TwoFactorSettingsScreen() {
+  const { t } = useI18n();
+  const [status, setStatus] = useState<TwoFactorStatus | null>(null);
+  const [enableResponse, setEnableResponse] =
+    useState<TwoFactorEnableResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [pending, setPending] = useState(false);
+  const [selectedMethod, setSelectedMethod] = useState("EMAIL");
+  const { getValues, register, resetField } = useForm<TwoFactorSettingsFormValues>({
+    defaultValues: {
+      totpCode: "",
+      disableTwoFactorCode: "",
+      disablePassword: "",
+      backupCode: "",
+    },
+  });
+  const disablePasswordInputProps = {
+    autoComplete: "current-password",
+  };
+
+  useEffect(() => {
+    void loadStatus();
+  }, []);
+
+  async function loadStatus() {
+    setLoading(true);
+
+    try {
+      const nextStatus = await securityService.getTwoFactorStatus();
+      setStatus(nextStatus);
+      setSelectedMethod(nextStatus.availableMethods[0] ?? "EMAIL");
+    } catch (error) {
+      sgWhistle.error({
+        message: extractApiMessage(error) ?? t("security.two_factor.error"),
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleEnable() {
+    setPending(true);
+
+    try {
+      const response = await securityService.enableTwoFactor(selectedMethod, true);
+      setEnableResponse(response);
+
+      if (response.backupCodes?.length && selectedMethod !== "TOTP") {
+        sgWhistle.success({ message: t("security.two_factor.success_enable") });
+        await loadStatus();
+      }
+    } catch (error) {
+      sgWhistle.error({
+        message: extractApiMessage(error) ?? t("security.two_factor.error"),
+      });
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function handleConfirmTotp() {
+    setPending(true);
+
+    try {
+      const response = await securityService.confirmTotp(getValues("totpCode").trim());
+      setEnableResponse(response);
+      sgWhistle.success({ message: t("security.two_factor.success_confirm") });
+      resetField("totpCode");
+      await loadStatus();
+    } catch (error) {
+      sgWhistle.error({
+        message: extractApiMessage(error) ?? t("security.two_factor.error"),
+      });
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function handleDisable() {
+    const requiresTotpCode = status?.primaryMethod === "TOTP";
+    const disablePassword = getValues("disablePassword");
+    const backupCode = getValues("backupCode");
+    const disableTwoFactorCode = getValues("disableTwoFactorCode");
+
+    if (
+      !disablePassword.trim() &&
+      !backupCode.trim() &&
+      (!requiresTotpCode || !disableTwoFactorCode.trim())
+    ) {
+      sgWhistle.error({
+        message: t(
+          requiresTotpCode
+            ? "security.two_factor.disable_validation_totp"
+            : "security.two_factor.disable_validation"
+        ),
+      });
+      return;
+    }
+
+    setPending(true);
+
+    try {
+      await securityService.disableTwoFactor({
+        twoFactorCode: disableTwoFactorCode.trim() || undefined,
+        password: disablePassword.trim() || undefined,
+        backupCode: backupCode.trim() || undefined,
+      });
+      sgWhistle.success({ message: t("security.two_factor.success_disable") });
+      resetField("disableTwoFactorCode");
+      resetField("disablePassword");
+      resetField("backupCode");
+      setEnableResponse(null);
+      await loadStatus();
+    } catch (error) {
+      sgWhistle.error({
+        message: extractApiMessage(error) ?? t("security.two_factor.error"),
+      });
+    } finally {
+      setPending(false);
+    }
+  }
+
+  function handleDownloadBackupCodesCsv() {
+    const backupCodes = enableResponse?.backupCodes ?? [];
+
+    if (!backupCodes.length || typeof window === "undefined") {
+      return;
+    }
+
+    const csvContent = ["code", ...backupCodes].join("\n");
+    const csvBlob = new Blob([csvContent], {
+      type: "text/csv;charset=utf-8;",
+    });
+    const downloadUrl = window.URL.createObjectURL(csvBlob);
+    const link = document.createElement("a");
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
+
+    link.href = downloadUrl;
+    link.download = `seedgrid-2fa-backup-codes-${timestamp}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(downloadUrl);
+  }
+
+  return (
+    <PageFrame
+      title={t("security.two_factor.title")}
+      description={t("security.two_factor.description")}
+    >
+      {loading ? (
+        <InlineNotice>{t("security.common.loading")}</InlineNotice>
+      ) : status ? (
+        <SgStack gap={16}>
+          <SgGrid minItemWidth={320} gap={16}>
+            <InlineNotice>
+              <SgStack gap={12}>
+                <div className="font-medium">{t("security.two_factor.status")}</div>
+                <StatusBadge
+                  active={status.enabled}
+                  activeLabel={t("security.common.enabled")}
+                  inactiveLabel={t("security.common.disabled")}
+                />
+                <div>
+                  <div className="text-xs uppercase tracking-wide text-slate-500">
+                    {t("security.two_factor.primary_method")}
+                  </div>
+                  <div>{status.primaryMethod ?? "-"}</div>
+                </div>
+                <div>
+                  <div className="text-xs uppercase tracking-wide text-slate-500">
+                    {t("security.two_factor.available_methods")}
+                  </div>
+                  <div>{status.availableMethods.join(", ") || "-"}</div>
+                </div>
+                <div>
+                  <div className="text-xs uppercase tracking-wide text-slate-500">
+                    {t("security.two_factor.backup_codes")}
+                  </div>
+                  <div>{status.unusedBackupCodesCount ?? 0}</div>
+                </div>
+              </SgStack>
+            </InlineNotice>
+
+            <SgStack gap={16}>
+              {!status.enabled ? (
+                <SgGrid minItemWidth={220} gap={16} align="end">
+                  <SgCombobox
+                    id="security-2fa-method"
+                    label={t("security.two_factor.method")}
+                    source={status.availableMethods}
+                    value={selectedMethod}
+                    onValueChange={(value) => setSelectedMethod(String(value))}
+                  />
+                  <SgButton
+                    appearance="solid"
+                    severity="primary"
+                    shape="rounded"
+                    label={t("security.two_factor.enable")}
+                    loading={pending}
+                    disabled={pending}
+                    onClick={handleEnable}
+                  />
+                </SgGrid>
+              ) : (
+                <SgGrid minItemWidth={280} gap={16}>
+                  {status.primaryMethod === "TOTP" ? (
+                    <SgInputText
+                      id="security-2fa-disable-code"
+                      name="disableTwoFactorCode"
+                      label={t("security.two_factor.code")}
+                      register={register}
+                    />
+                  ) : null}
+                  <SgInputPassword
+                    id="security-2fa-disable-password"
+                    name="disablePassword"
+                    label={t("security.two_factor.password")}
+                    register={register}
+                    minSize={0}
+                    showStrengthBar={false}
+                    commonPasswordCheck={false}
+                    upperRequired={false}
+                    lowerRequired={false}
+                    numberRequired={false}
+                    specialCharacterRequired={false}
+                    prohibitsRepeatedCharactersInSequence={false}
+                    prohibitsSequentialAscCharacters={false}
+                    prohibitsSequentialDescCharacters={false}
+                    inputProps={disablePasswordInputProps}
+                  />
+                  <SgInputText
+                    id="security-2fa-backup-code"
+                    name="backupCode"
+                    label={t("security.two_factor.backup_code")}
+                    register={register}
+                  />
+                  <SgPanel borderStyle="none" className="min-h-0 min-w-0">
+                    <InlineNotice>
+                      {t(
+                        status.primaryMethod === "TOTP"
+                          ? "security.two_factor.disable_hint_totp"
+                          : "security.two_factor.disable_hint"
+                      )}
+                    </InlineNotice>
+                  </SgPanel>
+                  <SgStack direction="row" justify="end">
+                    <SgButton
+                      appearance="outline"
+                      severity="danger"
+                      shape="rounded"
+                      label={t("security.two_factor.disable")}
+                      loading={pending}
+                      disabled={pending}
+                      onClick={handleDisable}
+                    />
+                  </SgStack>
+                </SgGrid>
+              )}
+
+              {enableResponse?.qrCode?.base64 ? (
+                <SgGrid minItemWidth={280} gap={24}>
+                  <SgPanel className="rounded-3xl border border-slate-200 bg-slate-50 p-4">
+                    <img
+                      alt={t("security.two_factor.qr_code")}
+                      className="h-48 w-48 rounded-2xl object-contain"
+                      src={`data:image/png;base64,${enableResponse.qrCode.base64}`}
+                    />
+                  </SgPanel>
+                  <SgStack gap={16}>
+                    <SgInputText
+                      id="security-2fa-totp-code"
+                      name="totpCode"
+                      label={t("security.two_factor.code")}
+                      register={register}
+                    />
+                    <SgStack direction="row" justify="end">
+                      <SgButton
+                        appearance="solid"
+                        severity="primary"
+                        shape="rounded"
+                        label={t("security.two_factor.confirm_totp")}
+                        loading={pending}
+                        disabled={pending}
+                        onClick={handleConfirmTotp}
+                      />
+                    </SgStack>
+                  </SgStack>
+                </SgGrid>
+              ) : null}
+
+              {enableResponse?.backupCodes?.length ? (
+                <InlineNotice tone="success">
+                  <SgStack gap={12}>
+                    <SgStack direction="row" wrap justify="between" align="center" gap={12}>
+                      <div className="font-medium">
+                        {t("security.two_factor.backup_codes")}
+                      </div>
+                      <SgButton
+                        appearance="solid"
+                        severity="primary"
+                        shape="rounded"
+                        label={t("security.two_factor.download_backup_codes_csv")}
+                        onClick={handleDownloadBackupCodesCsv}
+                      />
+                    </SgStack>
+                    <div>{t("security.two_factor.backup_codes_hint")}</div>
+                    <SgGrid columns={2} gap={8}>
+                      {enableResponse.backupCodes.map((code) => (
+                        <div
+                          key={code}
+                          className="rounded-xl border border-emerald-200 bg-white px-3 py-2 font-mono text-sm"
+                        >
+                          {code}
+                        </div>
+                      ))}
+                    </SgGrid>
+                  </SgStack>
+                </InlineNotice>
+              ) : null}
+            </SgStack>
+          </SgGrid>
+        </SgStack>
+      ) : null}
+    </PageFrame>
+  );
+}

package/scaffold/src/app/security/companies/(create)/new/page.tsx

@@ -0,0 +1,12 @@
+import { CompanyManagementGuard, RouteGuard } from "@/modules/security";
+import { CompanyEditor } from "@/app/security/companies/editors/CompanyEditor";
+
+export default function NewCompanyPage() {
+  return (
+    <CompanyManagementGuard>
+      <RouteGuard permissions={["COMPANY_CREATE"]}>
+        <CompanyEditor />
+      </RouteGuard>
+    </CompanyManagementGuard>
+  );
+}

package/scaffold/src/app/security/companies/(edit)/[publicId]/page.tsx

@@ -0,0 +1,18 @@
+import { CompanyManagementGuard, RouteGuard } from "@/modules/security";
+import { CompanyEditor } from "@/app/security/companies/editors/CompanyEditor";
+
+export default async function EditCompanyPage({
+  params,
+}: {
+  params: Promise<{ publicId: string }>;
+}) {
+  const resolvedParams = await params;
+
+  return (
+    <CompanyManagementGuard>
+      <RouteGuard permissions={["COMPANY_READ"]}>
+        <CompanyEditor publicId={resolvedParams.publicId} />
+      </RouteGuard>
+    </CompanyManagementGuard>
+  );
+}

package/scaffold/src/app/security/companies/(list)/page.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  SgButton,
+  SgConfirmationDialog,
+  SgDatatable,
+  SgInputText,
+  SgStack,
+  toast,
+} from "@seedgrid/fe-components";
+import { Pencil, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { useI18n } from "@/i18n";
+import {
+  CompanyManagementGuard,
+  InlineNotice,
+  PageFrame,
+  RouteGuard,
+  StatusBadge,
+  extractApiMessage,
+  securityConfig,
+  securityService,
+  useCrudPermission,
+  useDebouncedSearch,
+  type CompanySummary,
+  type SortState,
+} from "@/modules/security";
+import { isSearchReady } from "@/modules/security/utils";
+
+export default function CompaniesListPage() {
+  return (
+    <CompanyManagementGuard>
+      <RouteGuard permissions={["COMPANY_READ"]}>
+        <CompaniesListScreen />
+      </RouteGuard>
+    </CompanyManagementGuard>
+  );
+}
+
+function CompaniesListScreen() {
+  const router = useRouter();
+  const { t } = useI18n();
+  const permissions = useCrudPermission("COMPANY");
+  const [companies, setCompanies] = useState<CompanySummary[]>([]);
+  const [page, setPage] = useState(0);
+  // <number> explicito: defaultPageSize e um literal (ex.: 10), entao sem a
+  // anotacao o useState inferiria o tipo `10` e setRows(event.rows ?? ...)
+  // recusaria um number qualquer (TS2345 SetStateAction<10>).
+  const [rows, setRows] = useState<number>(securityConfig.pagination.defaultPageSize);
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [searchValue, setSearchValue] = useState("");
+  const [sort, setSort] = useState<SortState>({
+    sortField: "tradeName",
+    sortOrder: 1,
+  });
+  const [selectedCompany, setSelectedCompany] = useState<CompanySummary | null>(
+    null
+  );
+  const debouncedSearch = useDebouncedSearch(searchValue);
+  const effectiveSearch = isSearchReady(debouncedSearch) ? debouncedSearch : "";
+
+  const searchInputProps = {
+    value: searchValue,
+    onChange: (event: { target: { value: string } }) => {
+      setSearchValue(event.target.value);
+      setPage(0);
+    },
+  };
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+
+    void (async () => {
+      try {
+        const response = await securityService.listCompaniesPage({
+          page,
+          size: rows,
+          search: effectiveSearch,
+          sort,
+        });
+
+        if (!active) {
+          return;
+        }
+
+        setCompanies(response.items);
+        setTotalRecords(response.total);
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+
+        toast.error(
+          extractApiMessage(error) ??
+            t("security.companies.list.delete_error")
+        );
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [effectiveSearch, page, rows, sort, t]);
+
+  const columns = useMemo(
+    () => [
+      {
+        field: "tradeName",
+        header: t("security.companies.list.column.trade_name"),
+        sortable: true,
+      },
+      {
+        field: "corporateName",
+        header: t("security.companies.list.column.corporate_name"),
+        sortable: true,
+      },
+      {
+        field: "cnpj",
+        header: t("security.companies.list.column.cnpj"),
+      },
+      {
+        field: "addrCity",
+        header: t("security.companies.list.column.location"),
+        body: (company: CompanySummary) =>
+          [company.addrCity, company.addrState].filter(Boolean).join(" / ") ||
+          "-",
+      },
+      {
+        field: "active",
+        header: t("security.companies.list.column.status"),
+        body: (company: CompanySummary) => (
+          <StatusBadge
+            active={Boolean(company.active)}
+            activeLabel={t("security.common.enabled")}
+            inactiveLabel={t("security.common.disabled")}
+          />
+        ),
+      },
+      {
+        header: t("security.common.actions"),
+        body: (company: CompanySummary) => (
+          <SgStack direction="row" wrap gap={8} data-sg-stop-row-select="true">
+            <SgButton
+              appearance="ghost"
+              severity="info"
+              iconOnly
+              leftIcon={<Pencil size={16} />}
+              title={
+                permissions.canUpdate
+                  ? t("security.companies.list.action.edit")
+                  : t("security.companies.list.action.view")
+              }
+              aria-label={
+                permissions.canUpdate
+                  ? t("security.companies.list.action.edit")
+                  : t("security.companies.list.action.view")
+              }
+              onClick={() => {
+                router.push(
+                  `${securityConfig.routes.companies}/${company.publicId}`
+                );
+              }}
+              className="border border-slate-200/80 bg-slate-50/55 text-slate-700 hover:border-sky-200 hover:bg-slate-50 hover:text-sky-700"
+            />
+            {permissions.canDelete ? (
+              <SgButton
+                appearance="ghost"
+                severity="danger"
+                iconOnly
+                leftIcon={<Trash2 size={16} />}
+                title={t("security.companies.list.action.delete")}
+                aria-label={t("security.companies.list.action.delete")}
+                onClick={() => {
+                  setSelectedCompany(company);
+                }}
+                className="border border-rose-200/80 bg-rose-50/45 text-rose-600 hover:border-rose-200 hover:bg-rose-50/70 hover:text-rose-700"
+              />
+            ) : null}
+          </SgStack>
+        ),
+      },
+    ],
+    [permissions.canDelete, permissions.canUpdate, router, t]
+  );
+
+  async function handleDelete() {
+    if (!selectedCompany) {
+      return;
+    }
+
+    try {
+      await securityService.deleteCompany(selectedCompany.publicId);
+      toast.success(t("security.companies.list.delete_success"));
+      setSelectedCompany(null);
+      setLoading(true);
+      const response = await securityService.listCompaniesPage({
+        page,
+        size: rows,
+        search: effectiveSearch,
+        sort,
+      });
+      setCompanies(response.items);
+      setTotalRecords(response.total);
+    } catch (error) {
+      toast.error(
+        extractApiMessage(error) ?? t("security.companies.list.delete_error")
+      );
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <PageFrame
+      title={t("security.companies.list.title")}
+      description={t("security.companies.list.description")}
+      readonlyLabel={
+        permissions.isReadOnly ? t("security.common.readonly") : null
+      }
+      actions={
+        permissions.canCreate ? (
+          <SgButton
+            appearance="solid"
+            severity="primary"
+            shape="rounded"
+            label={t("security.companies.list.new")}
+            onClick={() => {
+              router.push(`${securityConfig.routes.companies}/new`);
+            }}
+          />
+        ) : undefined
+      }
+    >
+      <SgStack gap={16}>
+        <SgInputText
+          id="security-companies-search"
+          label={t("security.common.search")}
+          inputProps={searchInputProps}
+          placeholder={t("security.companies.list.search_placeholder")}
+        />
+
+        {!isSearchReady(searchValue) && searchValue.trim().length > 0 ? (
+          <InlineNotice>{t("security.common.search_hint")}</InlineNotice>
+        ) : null}
+
+        <SgDatatable<CompanySummary>
+          title=" "
+          value={companies}
+          columns={columns}
+          dataKey="publicId"
+          lazy
+          paginator
+          rows={rows}
+          first={page * rows}
+          totalRecords={totalRecords}
+          sortField={sort.sortField}
+          sortOrder={sort.sortOrder}
+          loading={loading}
+          emptyMessage={t("security.companies.list.empty")}
+          onPage={(event) => {
+            setRows(event.rows ?? securityConfig.pagination.defaultPageSize);
+            setPage(event.page ?? 0);
+          }}
+          onSort={(event) => {
+            setPage(0);
+            setSort({
+              sortField: event.sortField ?? "tradeName",
+              sortOrder:
+                event.sortOrder === 1 || event.sortOrder === -1
+                  ? event.sortOrder
+                  : 1,
+            });
+          }}
+        />
+      </SgStack>
+
+      <SgConfirmationDialog
+        open={Boolean(selectedCompany)}
+        severity="danger"
+        title={t("security.companies.list.delete_title")}
+        message={t("security.companies.list.delete_message")}
+        onCancel={() => {
+          setSelectedCompany(null);
+        }}
+        onConfirm={handleDelete}
+      />
+    </PageFrame>
+  );
+}