rl-core-front 0.3.0 → 0.5.0

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

@@ -4,6 +4,7 @@ import { AlertTriangle } from "lucide-react";
 import type { JSX } from "react";
 
 import {
+  Alert,
   Button,
   Dialog,
   DialogContent,
@@ -43,10 +44,9 @@ export function BackupCodesDialog({ open, codes, onClose }: Props): JSX.Element
           <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>
+        <Alert variant="warning" icon={<AlertTriangle />}>
+          {t("auth.backupWarning")}
+        </Alert>
 
         <div className="grid grid-cols-2 gap-2 rounded-lg bg-muted p-4 font-mono text-sm text-foreground">
           {codes.map((c) => (

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

@@ -17,16 +17,29 @@ import {
 interface Props {
   loading: boolean;
   onSubmit: (email: string, password: string) => void;
+  /**
+   * Email já preenchido. Serve a quem foi devolvido para cá porque a
+   * verificação de 2FA venceu: a senha o sistema não pode guardar, mas fazer a
+   * pessoa redigitar o email também seria gratuito.
+   */
+  defaultEmail?: string;
 }
 
-export function LoginForm({ loading, onSubmit }: Props): JSX.Element {
+export function LoginForm({
+  loading,
+  onSubmit,
+  defaultEmail,
+}: Props): JSX.Element {
   const { t } = useI18n();
   const schema = useMemo(() => makeLoginSchema(t), [t]);
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<LoginFormData>({ resolver: yupResolver(schema) });
+  } = useForm<LoginFormData>({
+    resolver: yupResolver(schema),
+    defaultValues: { email: defaultEmail ?? "", password: "" },
+  });
 
   return (
     <form
@@ -37,13 +50,15 @@ export function LoginForm({ loading, onSubmit }: Props): JSX.Element {
         <Input
           type="email"
           autoComplete="email"
-          autoFocus
+          // Com o email já preenchido, o cursor vai direto para o que falta.
+          autoFocus={!defaultEmail}
           {...register("email")}
         />
       </Field>
       <Field label={t("auth.password")} error={errors.password?.message}>
         <PasswordField
           autoComplete="current-password"
+          autoFocus={!!defaultEmail}
           error={!!errors.password}
           {...register("password")}
         />

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

@@ -13,15 +13,25 @@ import {
   CodeFormData,
   makeCodeSchema,
 } from "#core/features/login/validation/schemas";
+import { useCountdown } from "#core/hooks/use-countdown";
+import { cn } from "#core/lib/utils";
 
 interface Props {
   setup: TotpSetup;
   loading: boolean;
   onConfirm: (code: string) => void;
+  /** Prazo para confirmar, em segundos. `null` esconde o contador. */
+  expiresInSeconds?: number | null;
 }
 
-export function TwoFactorSetup({ setup, loading, onConfirm }: Props): JSX.Element {
+export function TwoFactorSetup({
+  setup,
+  loading,
+  onConfirm,
+  expiresInSeconds = null,
+}: Props): JSX.Element {
   const { t } = useI18n();
+  const { formatted, remaining, expired } = useCountdown(expiresInSeconds);
   const schema = useMemo(() => makeCodeSchema(t), [t]);
   const {
     register,
@@ -62,7 +72,27 @@ export function TwoFactorSetup({ setup, loading, onConfirm }: Props): JSX.Elemen
             {...register("code")}
           />
         </Field>
-        <Button type="submit" size="lg" disabled={loading}>
+        {/*
+          O prazo fica à vista porque é justamente aqui que a pessoa demora —
+          instalar o app, escanear, digitar. Antes ele vencia em silêncio e o
+          código certo voltava como inválido.
+        */}
+        {expiresInSeconds !== null && (
+          <p
+            className={cn(
+              "text-center text-xs",
+              // Último minuto: deixa de ser informação e passa a ser aviso.
+              remaining <= 60 ? "text-warning-strong" : "text-muted-foreground",
+            )}
+            aria-live="polite"
+          >
+            {expired
+              ? t("auth.expiredHint")
+              : t("auth.expiresIn", { time: formatted })}
+          </p>
+        )}
+
+        <Button type="submit" size="lg" disabled={loading || expired}>
           {loading ? t("auth.confirming") : t("auth.confirmActivate")}
         </Button>
       </form>

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

@@ -8,6 +8,7 @@ import {
   useState,
 } from "react";
 
+import { AppErrorCode } from "#core/_services/api/app-error-code.enum";
 import { authService, TotpSetup } from "#core/_services/auth";
 import { useAuth, useI18n, useToast } from "#core/contexts";
 import { useRequest } from "#core/hooks/use-request";
@@ -26,6 +27,15 @@ export interface UseLoginFlowResult {
   loading: boolean;
   error: string | null;
   setError: Dispatch<SetStateAction<string | null>>;
+  /**
+   * Aviso que explica por que a tela voltou ao início. Diferente de `error`,
+   * atravessa a troca de passo.
+   */
+  notice: string | null;
+  /** Último email digitado — repõe o campo quando a verificação vence. */
+  email: string;
+  /** Prazo da etapa do código, em segundos. `null` fora dessa etapa. */
+  expiresInSeconds: number | null;
   submitCredentials: (email: string, password: string) => Promise<void>;
   submitCode: (
     code: string,
@@ -46,15 +56,52 @@ export function useLoginFlow(): UseLoginFlowResult {
   const [pendingToken, setPendingToken] = useState("");
   const [setup, setSetup] = useState<TotpSetup | null>(null);
   const [backupCodes, setBackupCodes] = useState<string[]>([]);
+  const [email, setEmail] = useState("");
+  const [notice, setNotice] = useState<string | null>(null);
+  const [expiresInSeconds, setExpiresInSeconds] = useState<number | null>(null);
+
+  /**
+   * A janela entre a senha e o código venceu.
+   *
+   * Devolve ao primeiro passo em vez de deixar a pessoa presa numa tela cujo
+   * botão só responde erro — que era o que acontecia no primeiro acesso: o
+   * usuário instalava o autenticador, digitava o código certo e recebia
+   * "inválido", sem caminho nenhum. O email volta preenchido, e o QR do próximo
+   * login é o mesmo (o backend reaproveita o segredo pendente), então quem já
+   * escaneou não precisa escanear de novo.
+   */
+  const onExpired = useCallback(
+    ({ code }: { code: string | null }) => {
+      if (code !== AppErrorCode.PENDING_TOKEN_EXPIRED) {
+        return;
+      }
+      setStep("credentials");
+      setSetup(null);
+      setPendingToken("");
+      setExpiresInSeconds(null);
+      /*
+       * Vai em `notice`, e não em `error`: a tela limpa o erro a cada troca de
+       * passo, e é justamente um passo que estamos trocando aqui — o aviso
+       * sumiria no mesmo render em que aparece.
+       */
+      setNotice(t("auth.verificationExpired"));
+    },
+    [t],
+  );
 
   const submitCredentials = useCallback(
     async (email: string, password: string) => {
+      setEmail(email);
+      setNotice(null);
       const res = await run(() => authService.login(email, password));
       if (!res) {return;}
       setPendingToken(res.pendingToken);
+      setExpiresInSeconds(res.expiresInSeconds);
 
       if (res.status === "SETUP_REQUIRED") {
-        const s = await run(() => authService.setupTotp(res.pendingToken));
+        const s = await run(() => authService.setupTotp(res.pendingToken), {
+          onError: onExpired,
+        });
         if (!s) {return;}
         setSetup(s);
         setStep("setup");
@@ -70,13 +117,14 @@ export function useLoginFlow(): UseLoginFlowResult {
           .catch(() => {});
       }
     },
-    [run, notify, t],
+    [run, notify, t, onExpired],
   );
 
   const submitCode = useCallback(
     async (code: string, method?: "totp" | "email" | "backup") => {
-      const res = await run(() =>
-        authService.verify(pendingToken, code, method),
+      const res = await run(
+        () => authService.verify(pendingToken, code, method),
+        { onError: onExpired },
       );
       if (!res) {return;}
 
@@ -89,13 +137,15 @@ export function useLoginFlow(): UseLoginFlowResult {
         router.replace("/dashboard");
       }
     },
-    [run, pendingToken, notify, router, t, refreshProfile],
+    [run, pendingToken, notify, router, t, refreshProfile, onExpired],
   );
 
   const requestEmailCode = useCallback(async () => {
-    const res = await run(() => authService.requestEmailCode(pendingToken));
+    const res = await run(() => authService.requestEmailCode(pendingToken), {
+      onError: onExpired,
+    });
     if (res?.sent) {notify(t("auth.codeSent"), "success");}
-  }, [run, pendingToken, notify, t]);
+  }, [run, pendingToken, notify, t, onExpired]);
 
   const finishBackup = useCallback(async () => {
     await refreshProfile();
@@ -111,6 +161,9 @@ export function useLoginFlow(): UseLoginFlowResult {
     loading,
     error,
     setError,
+    notice,
+    email,
+    expiresInSeconds,
     submitCredentials,
     submitCode,
     requestEmailCode,

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

@@ -1,11 +1,17 @@
 "use client";
 
+import { Clock } from "lucide-react";
 import type { JSX } from "react";
 import { useEffect } from "react";
 
-import { BrandHeader, LanguageSelector, ThemeToggle } from "#core/components";
-import { Card } from "#core/components/ui";
-import { useI18n } from "#core/contexts";
+import {
+  BrandHeader,
+  BrandPanel,
+  LanguageSelector,
+  ThemeToggle,
+} from "#core/components";
+import { Alert, Card, Separator } from "#core/components/ui";
+import { useBrand, useI18n } from "#core/contexts";
 import {
   BackupCodesDialog,
   LoginForm,
@@ -13,6 +19,7 @@ import {
   TwoFactorVerify,
 } from "#core/features/login/components";
 import { useLoginFlow } from "#core/features/login/hooks/use-login-flow";
+import { cn } from "#core/lib/utils";
 
 export function LoginScreen(): JSX.Element {
   const flow = useLoginFlow();
@@ -30,50 +37,102 @@ export function LoginScreen(): JSX.Element {
     // 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>
+  const { loginLayout } = useBrand();
+  const aoLado = loginLayout !== "top";
 
-      <Card className="w-full max-w-md p-8">
-        {/* A marca vem antes do título do passo: é a primeira tela do sistema,
-            e quem chega aqui precisa reconhecer onde está antes de logar. */}
-        <BrandHeader title={titles[flow.step]} />
+  const conteudo = (
+    <>
+      {/* A marca vem antes do título do passo: é a primeira tela do sistema, e
+          quem chega aqui precisa reconhecer onde está antes de logar. Com a
+          marca ao lado, só o título — repeti-la aqui seria dizer duas vezes. */}
+      <BrandHeader title={titles[flow.step]} showBrand={!aoLado} />
 
-        {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>
-        )}
+      {/* Explica por que a tela voltou ao início; não é falha de credencial. */}
+      {flow.notice && (
+        <Alert variant="warning" icon={<Clock />} className="mb-4">
+          {flow.notice}
+        </Alert>
+      )}
 
-        {flow.step === "credentials" && (
-          <LoginForm loading={flow.loading} onSubmit={flow.submitCredentials} />
-        )}
+      {flow.error && (
+        <Alert variant="error" className="mb-4">
+          {flow.error}
+        </Alert>
+      )}
 
-        {flow.step === "setup" && flow.setup && (
-          <TwoFactorSetup
-            setup={flow.setup}
-            loading={flow.loading}
-            onConfirm={(code) => flow.submitCode(code, "totp")}
-          />
-        )}
+      {flow.step === "credentials" && (
+        <LoginForm
+          loading={flow.loading}
+          onSubmit={flow.submitCredentials}
+          defaultEmail={flow.email}
+        />
+      )}
 
-        {flow.step === "verify" && (
-          <TwoFactorVerify
-            loading={flow.loading}
-            onVerify={flow.submitCode}
-            onRequestEmail={flow.requestEmailCode}
-          />
-        )}
+      {flow.step === "setup" && flow.setup && (
+        <TwoFactorSetup
+          setup={flow.setup}
+          loading={flow.loading}
+          expiresInSeconds={flow.expiresInSeconds}
+          onConfirm={(code) => flow.submitCode(code, "totp")}
+        />
+      )}
 
-        <BackupCodesDialog
-          open={flow.step === "backup"}
-          codes={flow.backupCodes}
-          onClose={flow.finishBackup}
+      {flow.step === "verify" && (
+        <TwoFactorVerify
+          loading={flow.loading}
+          onVerify={flow.submitCode}
+          onRequestEmail={flow.requestEmailCode}
         />
-      </Card>
+      )}
+
+      <BackupCodesDialog
+        open={flow.step === "backup"}
+        codes={flow.backupCodes}
+        onClose={flow.finishBackup}
+      />
+    </>
+  );
+
+  const seletores = (
+    <div className="absolute right-3 top-3 z-10 flex gap-1">
+      <LanguageSelector />
+      <ThemeToggle />
+    </div>
+  );
+
+  if (aoLado) {
+    return (
+      <div className="relative min-h-screen bg-background">
+        {seletores}
+        {/* Empilhado em tela estreita, lado a lado a partir do `lg`. No DOM a
+            marca vem primeiro — no celular é ela que deve abrir a tela, nos
+            dois casos. Quem troca os lados no desktop é o `order`, e o divisor
+            precisa do dele para não sobrar na ponta. */}
+        <div className="flex min-h-screen flex-col lg:flex-row">
+          <BrandPanel
+            className={loginLayout === "right" ? "lg:order-3" : "lg:order-1"}
+          />
+          <Separator
+            orientation="horizontal"
+            className="lg:order-2 lg:h-auto lg:w-px lg:self-stretch"
+          />
+          <div
+            className={cn(
+              "flex flex-1 items-center justify-center p-4",
+              loginLayout === "right" ? "lg:order-1" : "lg:order-3",
+            )}
+          >
+            <Card className="w-full max-w-md p-8">{conteudo}</Card>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center bg-background p-4">
+      {seletores}
+      <Card className="w-full max-w-md p-8">{conteudo}</Card>
     </div>
   );
 }

package/src/features/logs/enums/error-type.enum.ts

@@ -0,0 +1,21 @@
+// Categoria do erro (espelha o ErrorType do backend: request_logs.error_type).
+export enum ErrorType {
+  VALIDATION = 0,
+  AUTH = 1,
+  NOT_FOUND = 2,
+  RATE_LIMIT = 3,
+  DATABASE = 4,
+  INTEGRATION = 5,
+  INTERNAL = 6,
+}
+
+/** Chave de i18n de cada valor — o texto mora em `i18n/messages` (§6). */
+export const ErrorTypeLabelKey: Record<ErrorType, string> = {
+  [ErrorType.VALIDATION]: "logs.errorValidation",
+  [ErrorType.AUTH]: "logs.errorAuth",
+  [ErrorType.NOT_FOUND]: "logs.errorNotFound",
+  [ErrorType.RATE_LIMIT]: "logs.errorRateLimit",
+  [ErrorType.DATABASE]: "logs.errorDatabase",
+  [ErrorType.INTEGRATION]: "logs.errorIntegration",
+  [ErrorType.INTERNAL]: "logs.errorInternal",
+};

package/src/features/logs/enums/request-outcome.enum.ts

@@ -0,0 +1,14 @@
+// Desfecho da requisição (espelha o RequestOutcome do backend:
+// request_logs.outcome).
+export enum RequestOutcome {
+  SUCCESS = 0,
+  ERROR = 1,
+  ABORTED = 2,
+}
+
+/** Chave de i18n de cada valor — o texto mora em `i18n/messages` (§6). */
+export const RequestOutcomeLabelKey: Record<RequestOutcome, string> = {
+  [RequestOutcome.SUCCESS]: "logs.outcomeSuccess",
+  [RequestOutcome.ERROR]: "logs.outcomeError",
+  [RequestOutcome.ABORTED]: "logs.outcomeAborted",
+};

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

@@ -9,11 +9,23 @@ import {
   useState,
 } from "react";
 
+import type { FilterValues } from "#core/_utils/filter";
+import { RequestOutcome } from "#core/features/logs/enums/request-outcome.enum";
 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";
 
+/**
+ * A tela abre no sucesso, não em tudo.
+ *
+ * Fora do módulo para não recriar o objeto a cada render: ele é dependência do
+ * efeito de hidratação, e um literal novo por render o refaria sem parar.
+ */
+const DEFAULT_FILTER: FilterValues = {
+  outcome: { values: [String(RequestOutcome.SUCCESS)] },
+};
+
 export interface UseRequestLogsResult {
   rows: RequestLog[];
   total: number;
@@ -32,7 +44,11 @@ export interface UseRequestLogsResult {
 export function useRequestLogs(): UseRequestLogsResult {
   const { run, loading } = useRequest();
 
-  const list = useListQuery("/audit/changes/filter-schema", 20);
+  const list = useListQuery(
+    "/audit/requests/filter-schema",
+    20,
+    DEFAULT_FILTER,
+  );
 
   const [rows, setRows] = useState<RequestLog[]>([]);
   const [total, setTotal] = useState(0);
@@ -45,9 +61,14 @@ export function useRequestLogs(): UseRequestLogsResult {
     }
   }, [run, list.query]);
 
+  // Não busca antes da URL ser lida: a query sairia sem o filtro, e essa
+  // resposta pode chegar depois da certa e pintar a tela com tudo.
   useEffect(() => {
+    if (!list.ready) {
+      return;
+    }
     void fetch();
-  }, [fetch]);
+  }, [fetch, list.ready]);
 
   return {
     rows,
@@ -55,7 +76,9 @@ export function useRequestLogs(): UseRequestLogsResult {
     page: list.page,
     pageSize: list.pageSize,
     sorting: list.sorting,
-    loading,
+    // Esperar o catálogo também é carregar: sem isso a tabela pisca
+    // "Nenhum registro" antes da primeira busca sair.
+    loading: loading || !list.ready,
     setPage: list.setPage,
     setPageSize: list.setPageSize,
     setSorting: list.setSorting,

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

@@ -2,9 +2,8 @@
 
 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";
+import { RequestLogsPanel } from "#core/features/logs/panels";
 
 export function LogsScreen(): JSX.Element {
   const { t } = useI18n();
@@ -14,18 +13,7 @@ export function LogsScreen(): JSX.Element {
       <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>
+      <RequestLogsPanel />
     </div>
   );
 }

package/src/features/logs/panels/index.ts

@@ -1,3 +1,2 @@
 // Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
-export * from "./error-logs-panel";
 export * from "./request-logs-panel";