rl-core-front 0.1.0

package/src/features/recovery/forgot-password-screen.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import NextLink from "next/link";
+import type { JSX } from "react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+
+import { authService } from "#core/_services/auth";
+import { Alert, Button, Card, Field, Input } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { useRequest } from "#core/hooks/use-request";
+
+export function ForgotPasswordScreen(): JSX.Element {
+  const { run, loading } = useRequest();
+  const { t } = useI18n();
+  const [sent, setSent] = useState(false);
+  const schema = yup.object({
+    email: yup
+      .string()
+      .required(t("validation.required"))
+      .email(t("validation.email")),
+  });
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{ email: string }>({ resolver: yupResolver(schema) });
+
+  const onSubmit = async (data: { email: string }): Promise<void> => {
+    await run(() => authService.forgotPassword(data.email));
+    setSent(true);
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="mb-4 text-xl font-semibold">
+          {t("recovery.forgotTitle")}
+        </h1>
+        {sent ? (
+          <Alert variant="success">{t("recovery.forgotSuccess")}</Alert>
+        ) : (
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className="flex flex-col gap-4"
+          >
+            <p className="text-sm text-muted-foreground">
+              {t("recovery.forgotHint")}
+            </p>
+            <Field label={t("auth.email")} error={errors.email?.message}>
+              <Input type="email" autoFocus {...register("email")} />
+            </Field>
+            <Button type="submit" size="lg" disabled={loading}>
+              {loading ? t("recovery.sending") : t("recovery.sendLink")}
+            </Button>
+          </form>
+        )}
+        <NextLink
+          href="/login"
+          className="mt-4 block text-center text-sm text-primary hover:underline"
+        >
+          {t("recovery.backToLogin")}
+        </NextLink>
+      </Card>
+    </div>
+  );
+}

package/src/features/recovery/reset-password-screen.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useRouter, useSearchParams } from "next/navigation";
+import type { JSX } from "react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+
+import {
+  authService,
+  PasswordTokenCheck,
+  PasswordTokenStatus,
+} from "#core/_services/auth";
+import { STRONG_PASSWORD_REGEX } from "#core/_utils/password";
+import { PasswordField } from "#core/components";
+import { Alert, Button, Card, Field, Spinner } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { useRequest } from "#core/hooks/use-request";
+
+const INVALID_MESSAGE_KEY: Record<PasswordTokenStatus, string> = {
+  valid: "recovery.linkInvalid",
+  invalid: "recovery.linkInvalid",
+  expired: "recovery.linkExpired",
+  used: "recovery.linkUsed",
+};
+
+export function ResetPasswordScreen(): JSX.Element {
+  const router = useRouter();
+  const params = useSearchParams();
+  const token = params.get("token") ?? "";
+  const { run, loading, error } = useRequest();
+  const { t } = useI18n();
+  const [done, setDone] = useState(false);
+  const [check, setCheck] = useState<PasswordTokenCheck | null>(null);
+  const [checking, setChecking] = useState(true);
+
+  // Valida o link ANTES de exibir o formulário — token ausente, expirado,
+  // já usado ou inexistente nunca chega a renderizar os campos de senha.
+  useEffect(() => {
+    if (!token) {
+      setCheck({ valid: false, status: "invalid" });
+      setChecking(false);
+      return;
+    }
+    let alive = true;
+    authService
+      .inspectPasswordToken(token)
+      .then((res) => alive && setCheck(res))
+      .catch(() => alive && setCheck({ valid: false, status: "invalid" }))
+      .finally(() => alive && setChecking(false));
+    return () => {
+      alive = false;
+    };
+  }, [token]);
+
+  const schema = yup.object({
+    newPassword: yup
+      .string()
+      .required(t("validation.required"))
+      .matches(STRONG_PASSWORD_REGEX, t("validation.passwordStrong")),
+    confirm: yup
+      .string()
+      .required(t("validation.required"))
+      .oneOf([yup.ref("newPassword")], t("validation.passwordsNotMatch")),
+  });
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{ newPassword: string; confirm: string }>({
+    resolver: yupResolver(schema),
+  });
+
+  const onSubmit = async (data: { newPassword: string; confirm: string }): Promise<void> => {
+    const res = await run(
+      () => authService.resetPassword(token, data.newPassword),
+      { success: t("recovery.resetSuccess") },
+    );
+    if (res !== null) {
+      setDone(true);
+      setTimeout(() => router.replace("/login"), 1500);
+    }
+  };
+
+  const isFirstAccess = check?.purpose === "first_access";
+  const title = isFirstAccess
+    ? t("recovery.firstAccessTitle")
+    : t("recovery.resetTitle");
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="mb-4 text-xl font-semibold">{title}</h1>
+
+        {checking && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Spinner className="h-4 w-4" />
+            {t("recovery.checking")}
+          </div>
+        )}
+
+        {!checking && check && !check.valid && (
+          <div className="flex flex-col gap-4">
+            <Alert variant="error">{t(INVALID_MESSAGE_KEY[check.status])}</Alert>
+            <Button size="lg" onClick={() => router.push("/forgot-password")}>
+              {t("recovery.requestNewLink")}
+            </Button>
+            <Button variant="ghost" onClick={() => router.push("/login")}>
+              {t("recovery.backToLogin")}
+            </Button>
+          </div>
+        )}
+
+        {!checking && check?.valid && (
+          <>
+            {isFirstAccess && (
+              <p className="mb-4 text-sm text-muted-foreground">
+                {t("recovery.firstAccessHint")}
+              </p>
+            )}
+            {error && (
+              <Alert variant="error" className="mb-2">
+                {error}
+              </Alert>
+            )}
+            {done ? (
+              <Alert variant="success">{t("recovery.resetSuccess")}</Alert>
+            ) : (
+              <form
+                onSubmit={handleSubmit(onSubmit)}
+                className="flex flex-col gap-4"
+              >
+                <Field
+                  label={t("recovery.newPassword")}
+                  error={errors.newPassword?.message}
+                >
+                  <PasswordField
+                    error={!!errors.newPassword}
+                    {...register("newPassword")}
+                  />
+                </Field>
+                <Field
+                  label={t("recovery.confirmPassword")}
+                  error={errors.confirm?.message}
+                >
+                  <PasswordField
+                    error={!!errors.confirm}
+                    {...register("confirm")}
+                  />
+                </Field>
+                <Button type="submit" size="lg" disabled={loading}>
+                  {loading ? t("recovery.sending") : t("recovery.resetCta")}
+                </Button>
+              </form>
+            )}
+          </>
+        )}
+      </Card>
+    </div>
+  );
+}

package/src/features/users/components/user-form-dialog.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import type { JSX } from "react";
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import * as yup from "yup";
+
+import { maskPhoneBR } from "#core/_utils/format";
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogForm,
+  DialogHeader,
+  DialogTitle,
+  Field,
+  Input,
+  Label,
+} from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import {
+  CreateUserPayload,
+  Role,
+  User,
+} from "#core/features/users/services/users.service";
+
+interface Props {
+  open: boolean;
+  loading: boolean;
+  roles: Role[];
+  editing?: User | null;
+  onClose: () => void;
+  onSubmit: (data: CreateUserPayload, id?: string) => Promise<boolean>;
+}
+
+export function UserFormDialog({
+  open,
+  loading,
+  roles,
+  editing,
+  onClose,
+  onSubmit,
+}: Props): JSX.Element {
+  const { t } = useI18n();
+  const isEdit = !!editing;
+
+  const schema = yup.object({
+    name: yup.string().required(t("validation.required")).min(2),
+    lastName: yup.string().optional(),
+    phone: yup.string().optional(),
+    email: yup
+      .string()
+      .required(t("validation.required"))
+      .email(t("validation.email")),
+    roleIds: yup.array().of(yup.string()).optional(),
+  });
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      name: "",
+      lastName: "",
+      phone: "",
+      email: "",
+      roleIds: [] as string[],
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      reset({
+        name: editing?.name ?? "",
+        lastName: editing?.lastName ?? "",
+        phone: editing?.phone ?? "",
+        email: editing?.email ?? "",
+        roleIds: editing?.roles?.map((r) => r.id) ?? [],
+      });
+    }
+  }, [open, editing, reset]);
+
+  const submit = handleSubmit(async (data) => {
+    const payload: CreateUserPayload = {
+      name: data.name,
+      lastName: data.lastName || undefined,
+      phone: data.phone || undefined,
+      email: data.email,
+      // o schema Yup infere (string | undefined)[]; aqui estreitamos sem cast
+      roleIds: data.roleIds?.filter((id): id is string => !!id),
+    };
+    const ok = await onSubmit(payload, editing?.id);
+    if (ok) {onClose();}
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {isEdit ? t("common.edit") : t("users.newUser")}
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogForm onSubmit={submit}>
+          <div className="flex max-h-[70vh] flex-col gap-4 overflow-y-auto px-1">
+            <Field label={t("users.name")} error={errors.name?.message}>
+              <Input {...register("name")} />
+            </Field>
+            <Field label={t("users.lastName")} error={errors.lastName?.message}>
+              <Input {...register("lastName")} />
+            </Field>
+            <Controller
+              name="phone"
+              control={control}
+              render={({ field }) => (
+                <Field label={t("users.phone")}>
+                  <Input
+                    placeholder="(11) 90000-0000"
+                    value={field.value ?? ""}
+                    onChange={(e) => field.onChange(maskPhoneBR(e.target.value))}
+                  />
+                </Field>
+              )}
+            />
+            <Field label={t("users.email")} error={errors.email?.message}>
+              <Input type="email" {...register("email")} />
+            </Field>
+            {!isEdit && (
+              <Alert variant="info">{t("users.passwordByEmailHint")}</Alert>
+            )}
+
+            <Controller
+              name="roleIds"
+              control={control}
+              render={({ field }) => {
+                const selected = (field.value ?? []) as string[];
+                const toggle = (id: string): void =>
+                  field.onChange(
+                    selected.includes(id)
+                      ? selected.filter((x) => x !== id)
+                      : [...selected, id],
+                  );
+                return (
+                  <div className="space-y-2">
+                    <Label>{t("users.roles")}</Label>
+                    <div className="flex flex-col gap-2 rounded-md border border-border p-3">
+                      {roles.map((r) => (
+                        <label
+                          key={r.id}
+                          className="flex cursor-pointer items-center gap-2 text-sm"
+                        >
+                          <Checkbox
+                            checked={selected.includes(r.id)}
+                            onCheckedChange={() => toggle(r.id)}
+                          />
+                          {r.name}
+                        </label>
+                      ))}
+                  </div>
+                </div>
+              );
+            }}
+          />
+          </div>
+
+          <DialogFooter className="gap-2">
+            <Button type="button" variant="outline" onClick={onClose}>
+              {t("common.cancel")}
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {isEdit ? t("common.save") : t("common.create")}
+            </Button>
+          </DialogFooter>
+        </DialogForm>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/users/hooks/use-users.ts

@@ -0,0 +1,181 @@
+"use client";
+
+import type { SortingState } from "@tanstack/react-table";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+
+import { useI18n } from "#core/contexts";
+import {
+  CreateUserPayload,
+  Role,
+  UpdateUserPayload,
+  User,
+  usersService,
+} from "#core/features/users/services/users.service";
+import type { FiltersState } from "#core/hooks/use-filters";
+import { useListQuery } from "#core/hooks/use-list-query";
+import { RequestOperation, useRequest } from "#core/hooks/use-request";
+
+export interface UseUsersResult {
+  rows: User[];
+  roles: Role[];
+  total: number;
+  page: number;
+  pageSize: number;
+  sorting: SortingState;
+  /** Carregando a listagem — é o spinner da tabela. */
+  loading: boolean;
+  /** Executando uma ação de linha (enviar link, resetar 2FA, excluir). */
+  acting: 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>;
+  create: (payload: CreateUserPayload) => Promise<boolean>;
+  update: (id: string, payload: UpdateUserPayload) => Promise<boolean>;
+  setActive: (id: string, isActive: boolean) => Promise<void>;
+  sendPasswordResetLink: (id: string) => Promise<void>;
+  resetTwoFactor: (id: string) => Promise<void>;
+  sendFirstAccessLink: (id: string) => Promise<void>;
+  remove: (id: string) => Promise<void>;
+}
+
+export function useUsers(): UseUsersResult {
+  const { run, loading } = useRequest();
+  // `run` separado para as ações: com um só, qualquer clique de linha ligava o
+  // spinner da tabela — que não recarrega quando a ação não muda nenhuma coluna.
+  const { run: runAction, loading: acting } = useRequest();
+  const { t } = useI18n();
+
+  const list = useListQuery("/users/filter-schema");
+
+  const [rows, setRows] = useState<User[]>([]);
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [total, setTotal] = useState(0);
+
+  const fetch = useCallback(async () => {
+    const res = await run(() => usersService.list(list.query));
+    if (res) {
+      setRows(res.items);
+      setTotal(res.meta.total);
+    }
+  }, [run, list.query]);
+
+  useEffect(() => {
+    void fetch();
+  }, [fetch]);
+
+  useEffect(() => {
+    void run(() => usersService.listRoles()).then((r) => r && setRoles(r));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const create = useCallback(
+    async (payload: CreateUserPayload) => {
+      const res = await runAction(() => usersService.create(payload), {
+        success: RequestOperation.Create,
+      });
+      if (res) {
+        await fetch();
+        return true;
+      }
+      return false;
+    },
+    [runAction, fetch],
+  );
+
+  const update = useCallback(
+    async (id: string, payload: UpdateUserPayload) => {
+      const res = await runAction(() => usersService.update(id, payload), {
+        success: RequestOperation.Update,
+      });
+      if (res) {
+        await fetch();
+        return true;
+      }
+      return false;
+    },
+    [runAction, fetch],
+  );
+
+  const setActive = useCallback(
+    async (id: string, isActive: boolean) => {
+      const res = await runAction(() => usersService.setActive(id, isActive));
+      if (res) {await fetch();}
+    },
+    [runAction, fetch],
+  );
+
+  const sendPasswordResetLink = useCallback(
+    async (id: string): Promise<void> => {
+      await runAction(() => usersService.sendPasswordResetLink(id), {
+        success: t("users.passwordResetLinkSent"),
+      });
+    },
+    [runAction, t],
+  );
+
+  const remove = useCallback(
+    async (id: string) => {
+      const res = await runAction(() => usersService.remove(id), {
+        success: RequestOperation.Delete,
+      });
+      if (res !== null) {
+        await fetch();
+      }
+    },
+    [runAction, fetch],
+  );
+
+  const sendFirstAccessLink = useCallback(
+    async (id: string): Promise<void> => {
+      // nenhuma coluna da tabela muda com o envio — não precisa refazer o fetch
+      await runAction(() => usersService.sendFirstAccessLink(id), {
+        success: t("users.firstAccessLinkSent"),
+      });
+    },
+    [runAction, t],
+  );
+
+  const resetTwoFactor = useCallback(
+    async (id: string) => {
+      const res = await runAction(() => usersService.resetTwoFactor(id), {
+        success: t("users.twoFactorReset"),
+      });
+      if (res !== null) {
+        await fetch();
+      }
+    },
+    [runAction, fetch, t],
+  );
+
+  return {
+    rows,
+    roles,
+    total,
+    page: list.page,
+    pageSize: list.pageSize,
+    sorting: list.sorting,
+    loading,
+    acting,
+    setPage: list.setPage,
+    setPageSize: list.setPageSize,
+    setSorting: list.setSorting,
+    filters: list.filters,
+    refresh: fetch,
+    create,
+    update,
+    setActive,
+    sendPasswordResetLink,
+    resetTwoFactor,
+    sendFirstAccessLink,
+    remove,
+  };
+}

package/src/features/users/services/users.service.ts

@@ -0,0 +1,83 @@
+import { api } from "#core/_services/api/axios.factory";
+import type { ListQuery } from "#core/_services/api/list-query";
+import { toListParams } from "#core/_services/api/list-query";
+import type { components } from "#core/_services/api/schema";
+
+/**
+ * Tipos derivados do `openapi.json` (§5): campo que mudar no backend quebra o
+ * build, não a tela. Nada de redigitar a forma da resposta aqui.
+ */
+export type Role = components["schemas"]["UserRoleResponse"];
+export type User = components["schemas"]["UserResponse"];
+export type PaginationMeta = components["schemas"]["PaginationMetaResponse"];
+
+export interface Paginated<T> {
+  items: T[];
+  meta: PaginationMeta;
+}
+
+/**
+ * Sem senha: o usuário recebe um link de primeiro acesso por email
+ * e define a própria senha.
+ */
+export interface CreateUserPayload {
+  name: string;
+  lastName?: string;
+  phone?: string;
+  email: string;
+  roleIds?: string[];
+}
+
+export interface UpdateUserPayload {
+  name?: string;
+  lastName?: string;
+  phone?: string;
+  email?: string;
+  roleIds?: string[];
+}
+
+export const usersService = {
+  list(query: ListQuery) {
+    return api
+      .get<Paginated<User>>("/users", { params: toListParams(query) })
+      .then((r) => r.data);
+  },
+
+  get(id: string) {
+    return api.get<User>(`/users/${id}`).then((r) => r.data);
+  },
+
+  create(payload: CreateUserPayload) {
+    return api.post<User>("/users", payload).then((r) => r.data);
+  },
+
+  update(id: string, payload: UpdateUserPayload) {
+    return api.patch<User>(`/users/${id}`, payload).then((r) => r.data);
+  },
+
+  setActive(id: string, isActive: boolean) {
+    return api
+      .patch<User>(`/users/${id}/active/${isActive}`)
+      .then((r) => r.data);
+  },
+
+  sendPasswordResetLink(id: string) {
+    return api.post(`/users/${id}/reset-password`).then((r) => r.data);
+  },
+
+  sendFirstAccessLink(id: string) {
+    return api.post(`/users/${id}/first-access-link`).then((r) => r.data);
+  },
+
+  resetTwoFactor(id: string) {
+    return api.post(`/users/${id}/reset-2fa`).then((r) => r.data);
+  },
+
+  remove(id: string) {
+    return api.delete(`/users/${id}`).then((r) => r.data);
+  },
+
+  listRoles() {
+    return api.get<Role[]>("/rbac/roles").then((r) => r.data);
+  },
+};