rl-core-front 0.1.0

package/src/features/login/components/backup-codes-dialog.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { AlertTriangle } from "lucide-react";
+import type { JSX } from "react";
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "#core/components/ui";
+import { useI18n, useToast } from "#core/contexts";
+
+interface Props {
+  open: boolean;
+  codes: string[];
+  onClose: () => void;
+}
+
+export function BackupCodesDialog({ open, codes, onClose }: Props): JSX.Element {
+  const { notify } = useToast();
+  const { t } = useI18n();
+
+  const copyAll = async (): Promise<void> => {
+    await navigator.clipboard.writeText(codes.join("\n"));
+    notify(t("auth.codesCopied"), "success");
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      {/*
+        Clique fora continua bloqueado de propósito — o usuário precisa guardar
+        os códigos antes de sair. `X` e `Esc` fecham porque só o `onOpenChange`
+        avisa o componente; sem ele o modal não fechava por nenhum caminho.
+      */}
+      <DialogContent
+        className="max-w-md"
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>{t("auth.backupTitle")}</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex items-start gap-2 rounded-md border border-warning/30 bg-warning/10 px-3 py-2 text-sm text-warning">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+          <span>{t("auth.backupWarning")}</span>
+        </div>
+
+        <div className="grid grid-cols-2 gap-2 rounded-lg bg-muted p-4 font-mono text-sm text-foreground">
+          {codes.map((c) => (
+            <span key={c}>{c}</span>
+          ))}
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={copyAll}>
+            {t("auth.copy")}
+          </Button>
+          <Button onClick={onClose}>{t("auth.savedContinue")}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/login/components/index.ts

@@ -0,0 +1,5 @@
+// Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
+export * from "./backup-codes-dialog";
+export * from "./login-form";
+export * from "./two-factor-setup";
+export * from "./two-factor-verify";

package/src/features/login/components/login-form.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import NextLink from "next/link";
+import type { JSX } from "react";
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+
+import { PasswordField } from "#core/components";
+import { Button, Field, Input } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import {
+  LoginFormData,
+  makeLoginSchema,
+} from "#core/features/login/validation/schemas";
+
+interface Props {
+  loading: boolean;
+  onSubmit: (email: string, password: string) => void;
+}
+
+export function LoginForm({ loading, onSubmit }: Props): JSX.Element {
+  const { t } = useI18n();
+  const schema = useMemo(() => makeLoginSchema(t), [t]);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({ resolver: yupResolver(schema) });
+
+  return (
+    <form
+      onSubmit={handleSubmit((d) => onSubmit(d.email, d.password))}
+      className="flex flex-col gap-4"
+    >
+      <Field label={t("auth.email")} error={errors.email?.message}>
+        <Input
+          type="email"
+          autoComplete="email"
+          autoFocus
+          {...register("email")}
+        />
+      </Field>
+      <Field label={t("auth.password")} error={errors.password?.message}>
+        <PasswordField
+          autoComplete="current-password"
+          error={!!errors.password}
+          {...register("password")}
+        />
+      </Field>
+      <Button type="submit" size="lg" disabled={loading}>
+        {loading ? t("auth.entering") : t("auth.enter")}
+      </Button>
+      <NextLink
+        href="/forgot-password"
+        className="self-center text-sm text-primary hover:underline"
+      >
+        {t("auth.forgotPassword")}
+      </NextLink>
+    </form>
+  );
+}

package/src/features/login/components/two-factor-setup.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+import { yupResolver } from "@hookform/resolvers/yup";
+import type { JSX } from "react";
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+
+import { TotpSetup } from "#core/_services/auth";
+import { Button, Field, Input } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import {
+  CodeFormData,
+  makeCodeSchema,
+} from "#core/features/login/validation/schemas";
+
+interface Props {
+  setup: TotpSetup;
+  loading: boolean;
+  onConfirm: (code: string) => void;
+}
+
+export function TwoFactorSetup({ setup, loading, onConfirm }: Props): JSX.Element {
+  const { t } = useI18n();
+  const schema = useMemo(() => makeCodeSchema(t), [t]);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CodeFormData>({ resolver: yupResolver(schema) });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-sm text-muted-foreground">{t("auth.setupHint")}</p>
+
+      <div className="flex justify-center">
+        <div className="rounded-lg border border-border bg-white p-3">
+          <img
+            src={setup.qrDataUrl}
+            alt="QR code 2FA"
+            width={200}
+            height={200}
+          />
+        </div>
+      </div>
+
+      <p className="text-center text-xs text-muted-foreground">
+        {t("auth.manualKey")}
+        <br />
+        <span className="break-all font-mono">{setup.secret}</span>
+      </p>
+
+      <form
+        onSubmit={handleSubmit((d) => onConfirm(d.code))}
+        className="flex flex-col gap-4"
+      >
+        <Field label={t("auth.codeApp")} error={errors.code?.message}>
+          <Input
+            autoFocus
+            inputMode="numeric"
+            maxLength={6}
+            {...register("code")}
+          />
+        </Field>
+        <Button type="submit" size="lg" disabled={loading}>
+          {loading ? t("auth.confirming") : t("auth.confirmActivate")}
+        </Button>
+      </form>
+    </div>
+  );
+}

package/src/features/login/components/two-factor-verify.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import type { JSX } from "react";
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+
+import { Button, Field, Input } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import {
+  CodeFormData,
+  makeCodeSchema,
+} from "#core/features/login/validation/schemas";
+
+interface Props {
+  loading: boolean;
+  onVerify: (code: string, method?: "totp" | "email" | "backup") => void;
+  onRequestEmail: () => void;
+}
+
+export function TwoFactorVerify({ loading, onVerify, onRequestEmail }: Props): JSX.Element {
+  const { t } = useI18n();
+  const schema = useMemo(() => makeCodeSchema(t), [t]);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CodeFormData>({ resolver: yupResolver(schema) });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-sm text-muted-foreground">{t("auth.verifyHint")}</p>
+
+      <form
+        onSubmit={handleSubmit((d) => onVerify(d.code))}
+        className="flex flex-col gap-4"
+      >
+        <Field label={t("auth.codeAny")} error={errors.code?.message}>
+          <Input autoFocus {...register("code")} />
+        </Field>
+        <Button type="submit" size="lg" disabled={loading}>
+          {loading ? t("auth.verifying") : t("auth.verify")}
+        </Button>
+      </form>
+
+      <Button
+        variant="link"
+        size="sm"
+        onClick={onRequestEmail}
+        disabled={loading}
+      >
+        {loading ? t("auth.sendingEmail") : t("auth.receiveByEmail")}
+      </Button>
+    </div>
+  );
+}

package/src/features/login/hooks/use-login-flow.ts

@@ -0,0 +1,119 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useState,
+} from "react";
+
+import { authService, TotpSetup } from "#core/_services/auth";
+import { useAuth, useI18n, useToast } from "#core/contexts";
+import { useRequest } from "#core/hooks/use-request";
+
+export type LoginStep = "credentials" | "setup" | "verify" | "backup";
+
+/**
+ * Máquina de estados do login com 2FA obrigatório:
+ * credentials → (setup → verify | verify) → [backup] → /dashboard
+ */
+export interface UseLoginFlowResult {
+  step: LoginStep;
+  setStep: Dispatch<SetStateAction<LoginStep>>;
+  setup: TotpSetup | null;
+  backupCodes: string[];
+  loading: boolean;
+  error: string | null;
+  setError: Dispatch<SetStateAction<string | null>>;
+  submitCredentials: (email: string, password: string) => Promise<void>;
+  submitCode: (
+    code: string,
+    method?: "totp" | "email" | "backup",
+  ) => Promise<void>;
+  requestEmailCode: () => Promise<void>;
+  finishBackup: () => Promise<void>;
+}
+
+export function useLoginFlow(): UseLoginFlowResult {
+  const router = useRouter();
+  const { notify } = useToast();
+  const { t } = useI18n();
+  const { run, loading, error, setError } = useRequest();
+  const { refreshProfile } = useAuth();
+
+  const [step, setStep] = useState<LoginStep>("credentials");
+  const [pendingToken, setPendingToken] = useState("");
+  const [setup, setSetup] = useState<TotpSetup | null>(null);
+  const [backupCodes, setBackupCodes] = useState<string[]>([]);
+
+  const submitCredentials = useCallback(
+    async (email: string, password: string) => {
+      const res = await run(() => authService.login(email, password));
+      if (!res) {return;}
+      setPendingToken(res.pendingToken);
+
+      if (res.status === "SETUP_REQUIRED") {
+        const s = await run(() => authService.setupTotp(res.pendingToken));
+        if (!s) {return;}
+        setSetup(s);
+        setStep("setup");
+      } else {
+        setStep("verify");
+        // Já dispara o código por email ao chegar na tela — evita depender do
+        // usuário ter o app autenticador à mão; ele ainda pode digitar o TOTP direto.
+        authService
+          .requestEmailCode(res.pendingToken)
+          .then((r) => {
+            if (r?.sent) {notify(t("auth.codeSent"), "success");}
+          })
+          .catch(() => {});
+      }
+    },
+    [run, notify, t],
+  );
+
+  const submitCode = useCallback(
+    async (code: string, method?: "totp" | "email" | "backup") => {
+      const res = await run(() =>
+        authService.verify(pendingToken, code, method),
+      );
+      if (!res) {return;}
+
+      if (res.backupCodes?.length) {
+        setBackupCodes(res.backupCodes);
+        setStep("backup");
+      } else {
+        await refreshProfile();
+        notify(t("auth.loginSuccess"), "success");
+        router.replace("/dashboard");
+      }
+    },
+    [run, pendingToken, notify, router, t, refreshProfile],
+  );
+
+  const requestEmailCode = useCallback(async () => {
+    const res = await run(() => authService.requestEmailCode(pendingToken));
+    if (res?.sent) {notify(t("auth.codeSent"), "success");}
+  }, [run, pendingToken, notify, t]);
+
+  const finishBackup = useCallback(async () => {
+    await refreshProfile();
+    notify(t("auth.twoFactorConfigured"), "success");
+    router.replace("/dashboard");
+  }, [notify, router, t, refreshProfile]);
+
+  return {
+    step,
+    setStep,
+    setup,
+    backupCodes,
+    loading,
+    error,
+    setError,
+    submitCredentials,
+    submitCode,
+    requestEmailCode,
+    finishBackup,
+  };
+}

package/src/features/login/login-screen.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Lock } from "lucide-react";
+import type { JSX } from "react";
+import { useEffect } from "react";
+
+import { LanguageSelector, ThemeToggle } from "#core/components";
+import { Card } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import {
+  BackupCodesDialog,
+  LoginForm,
+  TwoFactorSetup,
+  TwoFactorVerify,
+} from "#core/features/login/components";
+import { useLoginFlow } from "#core/features/login/hooks/use-login-flow";
+
+export function LoginScreen(): JSX.Element {
+  const flow = useLoginFlow();
+  const { t } = useI18n();
+
+  const titles: Record<string, string> = {
+    credentials: t("auth.loginTitle"),
+    setup: t("auth.twoFactorSetupTitle"),
+    verify: t("auth.twoFactorVerifyTitle"),
+    backup: t("auth.backupTitle"),
+  };
+
+  useEffect(() => {
+    flow.setError(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flow.step]);
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="absolute right-3 top-3 flex gap-1">
+        <LanguageSelector />
+        <ThemeToggle />
+      </div>
+
+      <Card className="w-full max-w-md p-8">
+        <div className="mb-6 flex flex-col items-center">
+          <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground">
+            <Lock className="h-6 w-6" />
+          </div>
+          <h1 className="text-xl font-semibold">{titles[flow.step]}</h1>
+        </div>
+
+        {flow.error && (
+          <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            {flow.error}
+          </div>
+        )}
+
+        {flow.step === "credentials" && (
+          <LoginForm loading={flow.loading} onSubmit={flow.submitCredentials} />
+        )}
+
+        {flow.step === "setup" && flow.setup && (
+          <TwoFactorSetup
+            setup={flow.setup}
+            loading={flow.loading}
+            onConfirm={(code) => flow.submitCode(code, "totp")}
+          />
+        )}
+
+        {flow.step === "verify" && (
+          <TwoFactorVerify
+            loading={flow.loading}
+            onVerify={flow.submitCode}
+            onRequestEmail={flow.requestEmailCode}
+          />
+        )}
+
+        <BackupCodesDialog
+          open={flow.step === "backup"}
+          codes={flow.backupCodes}
+          onClose={flow.finishBackup}
+        />
+      </Card>
+    </div>
+  );
+}

package/src/features/login/validation/schemas.ts

@@ -0,0 +1,30 @@
+import * as yup from "yup";
+
+type TFn = (key: string) => string;
+
+export interface LoginFormData {
+  email: string;
+  password: string;
+}
+
+export interface CodeFormData {
+  code: string;
+}
+
+export const makeLoginSchema = (t: TFn): yup.ObjectSchema<LoginFormData> =>
+  yup.object({
+    email: yup
+      .string()
+      .required(t("validation.required"))
+      .email(t("validation.email")),
+    password: yup.string().required(t("validation.required")),
+  });
+
+export const makeCodeSchema = (t: TFn): yup.ObjectSchema<CodeFormData> =>
+  yup.object({
+    code: yup
+      .string()
+      .required(t("validation.required"))
+      .min(6, t("validation.codeShort"))
+      .max(9),
+  });

package/src/features/logs/hooks/use-error-logs.ts

@@ -0,0 +1,65 @@
+"use client";
+
+import type { SortingState } from "@tanstack/react-table";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+
+import { ErrorLog, logsService } from "#core/features/logs/services/logs.service";
+import type { FiltersState } from "#core/hooks/use-filters";
+import { useListQuery } from "#core/hooks/use-list-query";
+import { useRequest } from "#core/hooks/use-request";
+
+export interface UseErrorLogsResult {
+  rows: ErrorLog[];
+  total: number;
+  page: number;
+  pageSize: number;
+  sorting: SortingState;
+  loading: boolean;
+  setPage: Dispatch<SetStateAction<number>>;
+  setPageSize: Dispatch<SetStateAction<number>>;
+  setSorting: Dispatch<SetStateAction<SortingState>>;
+  /** Filtros dinâmicos — repassar para o `DataTable`. */
+  filters: FiltersState;
+  refresh: () => Promise<void>;
+}
+
+export function useErrorLogs(): UseErrorLogsResult {
+  const { run, loading } = useRequest();
+
+  const list = useListQuery("/audit/errors/filter-schema", 20);
+
+  const [rows, setRows] = useState<ErrorLog[]>([]);
+  const [total, setTotal] = useState(0);
+
+  const fetch = useCallback(async () => {
+    const res = await run(() => logsService.listErrors(list.query));
+    if (res) {
+      setRows(res.items);
+      setTotal(res.meta.total);
+    }
+  }, [run, list.query]);
+
+  useEffect(() => {
+    void fetch();
+  }, [fetch]);
+
+  return {
+    rows,
+    total,
+    page: list.page,
+    pageSize: list.pageSize,
+    sorting: list.sorting,
+    loading,
+    setPage: list.setPage,
+    setPageSize: list.setPageSize,
+    setSorting: list.setSorting,
+    filters: list.filters,
+    refresh: fetch,
+  };
+}

package/src/features/logs/hooks/use-request-logs.ts

@@ -0,0 +1,65 @@
+"use client";
+
+import type { SortingState } from "@tanstack/react-table";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+
+import { logsService, RequestLog } from "#core/features/logs/services/logs.service";
+import type { FiltersState } from "#core/hooks/use-filters";
+import { useListQuery } from "#core/hooks/use-list-query";
+import { useRequest } from "#core/hooks/use-request";
+
+export interface UseRequestLogsResult {
+  rows: RequestLog[];
+  total: number;
+  page: number;
+  pageSize: number;
+  sorting: SortingState;
+  loading: boolean;
+  setPage: Dispatch<SetStateAction<number>>;
+  setPageSize: Dispatch<SetStateAction<number>>;
+  setSorting: Dispatch<SetStateAction<SortingState>>;
+  /** Filtros dinâmicos — repassar para o `DataTable`. */
+  filters: FiltersState;
+  refresh: () => Promise<void>;
+}
+
+export function useRequestLogs(): UseRequestLogsResult {
+  const { run, loading } = useRequest();
+
+  const list = useListQuery("/audit/changes/filter-schema", 20);
+
+  const [rows, setRows] = useState<RequestLog[]>([]);
+  const [total, setTotal] = useState(0);
+
+  const fetch = useCallback(async () => {
+    const res = await run(() => logsService.listRequests(list.query));
+    if (res) {
+      setRows(res.items);
+      setTotal(res.meta.total);
+    }
+  }, [run, list.query]);
+
+  useEffect(() => {
+    void fetch();
+  }, [fetch]);
+
+  return {
+    rows,
+    total,
+    page: list.page,
+    pageSize: list.pageSize,
+    sorting: list.sorting,
+    loading,
+    setPage: list.setPage,
+    setPageSize: list.setPageSize,
+    setSorting: list.setSorting,
+    filters: list.filters,
+    refresh: fetch,
+  };
+}

package/src/features/logs/logs-screen.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { ErrorLogsPanel, RequestLogsPanel } from "#core/features/logs/panels";
+
+export function LogsScreen(): JSX.Element {
+  const { t } = useI18n();
+
+  return (
+    <div>
+      <h1 className="mb-1 text-3xl font-bold">{t("logs.title")}</h1>
+      <p className="mb-4 text-sm text-muted-foreground">{t("logs.subtitle")}</p>
+
+      <Tabs defaultValue="requests">
+        <TabsList>
+          <TabsTrigger value="requests">{t("logs.tabRequests")}</TabsTrigger>
+          <TabsTrigger value="errors">{t("logs.tabErrors")}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="requests">
+          <RequestLogsPanel />
+        </TabsContent>
+        <TabsContent value="errors">
+          <ErrorLogsPanel />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}