rl-core-front 0.4.0 → 0.5.0

package/src/components/ui/segmented-control.tsx

@@ -4,6 +4,8 @@ import * as React from "react";
 
 import { cn } from "#core/lib/utils";
 
+import { TRACK_CLASS, TRACK_ITEM_CLASS } from "./track.styles";
+
 export interface SegmentedOption {
   value: string;
   label: string;
@@ -49,7 +51,7 @@ export const SegmentedControl = ({
     role="group"
     aria-label={label}
     className={cn(
-      "h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      TRACK_CLASS,
       fullWidth ? "flex w-full" : "inline-flex",
       className,
     )}
@@ -60,12 +62,11 @@ export const SegmentedControl = ({
         key={option.value}
         type="button"
         aria-pressed={option.value === value}
+        // Só para vestir a pele compartilhada, que seleciona por `data-state`.
+        // Quem anuncia o estado ao leitor de tela continua sendo o aria-pressed.
+        data-state={option.value === value ? "active" : "inactive"}
         onClick={() => onValueChange(option.value)}
-        className={cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          fullWidth && "flex-1",
-          option.value === value && "bg-card text-foreground shadow-sm",
-        )}
+        className={cn(TRACK_ITEM_CLASS, fullWidth && "flex-1")}
       >
         {option.label}
       </button>

package/src/components/ui/simple-select.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { JSX } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "#core/components/ui/select";
+
+/**
+ * Mesmo formato que o `Label` dos enums do §7 já produz — nada a converter
+ * entre um catálogo de opções e este componente.
+ */
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SimpleSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  /**
+   * Rótulo da opção "nenhum". Ausente, o campo não oferece vazio.
+   *
+   * O Radix não aceita `value=""` num item, então a opção vazia precisa de uma
+   * chave-sentinela — detalhe que some aqui dentro em vez de reaparecer em toda
+   * tela que precisa de um campo opcional.
+   */
+  emptyLabel?: string;
+  disabled?: boolean;
+}
+
+const EMPTY = "__none__";
+
+/**
+ * O caso comum do `Select`: uma lista de opções e um valor.
+ *
+ * Os primitivos do `select.tsx` continuam disponíveis para quem precisa de
+ * grupos, separadores ou item com markup — este cobre o resto, que era a
+ * mesma casca de cinco componentes repetida a cada campo.
+ */
+export function SimpleSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  emptyLabel,
+  disabled,
+}: SimpleSelectProps): JSX.Element {
+  return (
+    <Select
+      value={value || (emptyLabel ? EMPTY : "")}
+      onValueChange={(next) => onChange(next === EMPTY ? "" : next)}
+      disabled={disabled}
+    >
+      <SelectTrigger>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {emptyLabel && <SelectItem value={EMPTY}>{emptyLabel}</SelectItem>}
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/ui/switch.tsx

@@ -19,7 +19,9 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        // `bg-card` e não `bg-background`: no tema claro o card é branco puro e
+      // destaca do trilho; o fundo da página quase se confunde com ele.
+      "pointer-events-none block h-4 w-4 rounded-full bg-card shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>

package/src/components/ui/tabs.tsx

@@ -5,6 +5,8 @@ import * as React from "react";
 
 import { cn } from "#core/lib/utils";
 
+import { TRACK_CLASS, TRACK_ITEM_CLASS } from "./track.styles";
+
 const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
@@ -13,10 +15,7 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className,
-    )}
+    className={cn("inline-flex", TRACK_CLASS, className)}
     {...props}
   />
 ));
@@ -28,10 +27,7 @@ const TabsTrigger = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className,
-    )}
+    className={cn(TRACK_ITEM_CLASS, className)}
     {...props}
   />
 ));

package/src/components/ui/track.styles.ts

@@ -0,0 +1,31 @@
+/**
+ * A pele compartilhada dos controles em trilha: `Tabs` e `SegmentedControl`.
+ *
+ * Os dois sempre tiveram a mesma aparência, mas cada um com a sua cópia das
+ * classes — então o contraste quebrado no tema escuro precisava ser corrigido
+ * em dois lugares, e só um foi. Aqui é uma verdade só (§6 do CLAUDE.md).
+ *
+ * Ambos marcam o item com `data-state="active" | "inactive"`: o `Tabs` porque o
+ * Radix já emite esse atributo, o `SegmentedControl` porque escrevê-lo à mão
+ * sai mais barato que manter uma segunda lista de classes condicionais.
+ */
+
+/** A trilha: o fundo em que as opções vivem. */
+export const TRACK_CLASS =
+  "h-10 items-center justify-center rounded-lg bg-track p-1 text-muted-foreground ring-1 ring-inset ring-border/60";
+
+/**
+ * A opção. O estado aceso vem por `data-[state=active]`, com anel próprio:
+ * a sombra sozinha é invisível sobre fundo escuro, e era parte do motivo de a
+ * opção selecionada sumir no tema escuro.
+ */
+export const TRACK_ITEM_CLASS = [
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5",
+  "text-sm font-medium ring-offset-background transition-all",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+  "disabled:pointer-events-none disabled:opacity-50",
+  // Feedback de mouse no que ainda não está selecionado — antes não havia nenhum.
+  "data-[state=inactive]:hover:bg-foreground/5 data-[state=inactive]:hover:text-foreground",
+  "data-[state=active]:bg-track-active data-[state=active]:text-foreground",
+  "data-[state=active]:shadow-sm data-[state=active]:ring-1 data-[state=active]:ring-border",
+].join(" ");

package/src/contexts/color-mode-context.tsx

@@ -10,6 +10,8 @@ import {
   useState,
 } from "react";
 
+import { safeStorage } from "#core/_utils/storage";
+
 export const STORAGE_KEY = "color-mode";
 
 export type ColorPreference = "light" | "dark" | "system";
@@ -54,7 +56,7 @@ export function ColorModeProvider({ children }: { children: React.ReactNode }):
   const [resolved, setResolved] = useState(false);
 
   useEffect(() => {
-    const saved = localStorage.getItem(STORAGE_KEY);
+    const saved = safeStorage.get(STORAGE_KEY);
     if (isPreference(saved)) {
       setPreferenceState(saved);
     }
@@ -77,7 +79,7 @@ export function ColorModeProvider({ children }: { children: React.ReactNode }):
 
   const setPreference = useCallback((p: ColorPreference) => {
     setPreferenceState(p);
-    localStorage.setItem(STORAGE_KEY, p);
+    safeStorage.set(STORAGE_KEY, p);
   }, []);
 
   const toggle = useCallback(

package/src/contexts/i18n-context.tsx

@@ -10,6 +10,7 @@ import {
   useState,
 } from "react";
 
+import { safeStorage } from "#core/_utils/storage";
 import { en } from "#core/i18n/messages/en";
 import { pt } from "#core/i18n/messages/pt";
 
@@ -100,13 +101,13 @@ export function I18nProvider({
   );
 
   useEffect(() => {
-    const saved = (localStorage.getItem(STORAGE_KEY) as Locale) || null;
+    const saved = (safeStorage.get(STORAGE_KEY) as Locale) || null;
     if (saved === "pt" || saved === "en") {setLocaleState(saved);}
   }, []);
 
   const setLocale = useCallback((l: Locale) => {
     setLocaleState(l);
-    localStorage.setItem(STORAGE_KEY, l);
+    safeStorage.set(STORAGE_KEY, l);
     document.cookie = `${STORAGE_KEY}=${l}; path=/; max-age=31536000`;
   }, []);
 

package/src/contexts/socket-context.tsx

@@ -46,6 +46,12 @@ const SOCKET_URL =
   process.env.NEXT_PUBLIC_SOCKET_URL ?? "http://localhost:3108";
 const NAMESPACE = "/notifications";
 
+/**
+ * O servidor pede que a sessão seja relida (ver socket.constants.ts do backend).
+ * Chega quando um admin mexe no que o usuário pode ver — hoje, seus papéis.
+ */
+export const SESSION_REFRESH_EVENT = "session:refresh";
+
 /**
  * Conexão única de socket da aplicação.
  *
@@ -60,7 +66,7 @@ export function SocketProvider({
 }: {
   children: React.ReactNode;
 }): JSX.Element {
-  const { user } = useAuth();
+  const { user, refreshProfile } = useAuth();
   const [status, setStatus] = useState<SocketStatus>("disconnected");
   const [reconnectCount, setReconnectCount] = useState(0);
   const socketRef = useRef<Socket | null>(null);
@@ -134,6 +140,26 @@ export function SocketProvider({
     [],
   );
 
+  /**
+   * O que o usuário pode ver mudou enquanto ele estava logado.
+   *
+   * São duas coisas velhas ao mesmo tempo: o perfil em memória (menu e
+   * permissões saem dele) e as salas do socket, resolvidas no handshake a
+   * partir dos papéis. Reler o perfil e refazer a conexão corrige as duas sem
+   * obrigar ninguém a recarregar a página — e a reconexão ainda repõe o que
+   * chegou na janela em que o socket esteve fora.
+   */
+  useEffect(() => {
+    return on<{ userId: string }>(SESSION_REFRESH_EVENT, () => {
+      void refreshProfile();
+      const socket = socketRef.current;
+      if (socket) {
+        socket.disconnect();
+        socket.connect();
+      }
+    });
+  }, [on, refreshProfile]);
+
   const value = useMemo<SocketContextType>(
     () => ({ status, reconnectCount, on }),
     [status, reconnectCount, on],

package/src/features/audit/components/audit-diff.tsx

@@ -131,7 +131,7 @@ export function AuditDiff({ change }: AuditDiffProps): JSX.Element {
                   <TableCell className="whitespace-pre-wrap text-destructive/90">
                     {row.before}
                   </TableCell>
-                  <TableCell className="whitespace-pre-wrap text-success">
+                  <TableCell className="whitespace-pre-wrap text-success-strong">
                     {row.after}
                   </TableCell>
                 </TableRow>

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,5 +1,6 @@
 "use client";
 
+import { Clock } from "lucide-react";
 import type { JSX } from "react";
 import { useEffect } from "react";
 
@@ -9,7 +10,7 @@ import {
   LanguageSelector,
   ThemeToggle,
 } from "#core/components";
-import { Card, Separator } from "#core/components/ui";
+import { Alert, Card, Separator } from "#core/components/ui";
 import { useBrand, useI18n } from "#core/contexts";
 import {
   BackupCodesDialog,
@@ -46,20 +47,32 @@ export function LoginScreen(): JSX.Element {
           marca ao lado, só o título — repeti-la aqui seria dizer duas vezes. */}
       <BrandHeader title={titles[flow.step]} showBrand={!aoLado} />
 
+      {/* 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.error && (
-        <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+        <Alert variant="error" className="mb-4">
           {flow.error}
-        </div>
+        </Alert>
       )}
 
       {flow.step === "credentials" && (
-        <LoginForm loading={flow.loading} onSubmit={flow.submitCredentials} />
+        <LoginForm
+          loading={flow.loading}
+          onSubmit={flow.submitCredentials}
+          defaultEmail={flow.email}
+        />
       )}
 
       {flow.step === "setup" && flow.setup && (
         <TwoFactorSetup
           setup={flow.setup}
           loading={flow.loading}
+          expiresInSeconds={flow.expiresInSeconds}
           onConfirm={(code) => flow.submitCode(code, "totp")}
         />
       )}

package/src/features/profile/force-password-change.tsx

@@ -2,13 +2,18 @@
 
 import { yupResolver } from "@hookform/resolvers/yup";
 import type { JSX } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import * as yup from "yup";
 
 import { authService } from "#core/_services/auth";
 import { STRONG_PASSWORD_REGEX } from "#core/_utils/password";
 import { PasswordField } from "#core/components";
-import { Alert, Button, Card, Field } from "#core/components/ui";
+import {
+  Alert,
+  Button,
+  Card,
+  Field,
+} from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
 import { useRequest } from "#core/hooks/use-request";
 
@@ -36,8 +41,13 @@ export function ForcePasswordChange({
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors },
   } = useForm({ resolver: yupResolver(schema) });
+  const [newPassword = "", confirm = ""] = useWatch({
+    control,
+    name: ["newPassword", "confirm"],
+  });
 
   const onSubmit = handleSubmit(async (data) => {
     const res = await run(
@@ -81,6 +91,7 @@ export function ForcePasswordChange({
           >
             <PasswordField
               error={!!errors.newPassword}
+              rulesFor={newPassword}
               {...register("newPassword")}
             />
           </Field>
@@ -88,7 +99,11 @@ export function ForcePasswordChange({
             label={t("profile.confirmPassword")}
             error={errors.confirm?.message}
           >
-            <PasswordField error={!!errors.confirm} {...register("confirm")} />
+            <PasswordField
+              error={!!errors.confirm}
+              rulesFor={confirm}
+              {...register("confirm")}
+            />
           </Field>
           <Button type="submit" size="lg" disabled={loading}>
             {loading ? t("common.loading") : t("profile.changePassword")}