rl-core-front 0.1.0

package/src/features/profile/components/avatar-crop-dialog.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import type { JSX } from "react";
+import { useEffect, useMemo, useState } from "react";
+import Cropper from "react-easy-crop";
+
+import { CropAreaPixels, cropImageToFile } from "#core/_utils/crop-image";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogForm,
+  DialogHeader,
+  DialogTitle,
+} from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+
+const ZOOM_MIN = 1;
+const ZOOM_MAX = 3;
+const ZOOM_STEP = 0.05;
+
+interface Props {
+  /** Arquivo escolhido pelo usuário; `null` mantém o modal fechado. */
+  file: File | null;
+  loading: boolean;
+  onCancel: () => void;
+  onConfirm: (cropped: File) => void;
+}
+
+/**
+ * Recorte do avatar: arrastar para posicionar, slider para o zoom.
+ * O corte é sempre quadrado (1:1) porque o avatar é exibido redondo.
+ */
+export function AvatarCropDialog({
+  file,
+  loading,
+  onCancel,
+  onConfirm,
+}: Props): JSX.Element {
+  const { t } = useI18n();
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(ZOOM_MIN);
+  const [area, setArea] = useState<CropAreaPixels | null>(null);
+
+  // Derivado do arquivo, não guardado em estado — evita um render extra só para
+  // publicar a URL. O efeito abaixo existe apenas para revogá-la.
+  const src = useMemo(
+    () => (file ? URL.createObjectURL(file) : null),
+    [file],
+  );
+
+  useEffect(() => {
+    if (!src) {
+      return;
+    }
+    // A object URL segura o arquivo em memória até ser revogada.
+    return () => URL.revokeObjectURL(src);
+  }, [src]);
+
+  /** Volta ao estado inicial: o componente não desmonta ao fechar o modal. */
+  const reset = (): void => {
+    setCrop({ x: 0, y: 0 });
+    setZoom(ZOOM_MIN);
+    setArea(null);
+  };
+
+  const cancel = (): void => {
+    reset();
+    onCancel();
+  };
+
+  const confirm = async (): Promise<void> => {
+    if (!src || !area) {
+      return;
+    }
+    const cropped = await cropImageToFile(src, area);
+    reset();
+    onConfirm(cropped);
+  };
+
+  return (
+    <Dialog open={!!file} onOpenChange={(o) => !o && cancel()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("profile.cropTitle")}</DialogTitle>
+          <DialogDescription>{t("profile.cropHint")}</DialogDescription>
+        </DialogHeader>
+
+        <DialogForm onSubmit={() => void confirm()}>
+          <div className="relative h-64 w-full overflow-hidden rounded-lg bg-muted">
+            {src && (
+              <Cropper
+                image={src}
+                crop={crop}
+                zoom={zoom}
+                aspect={1}
+                cropShape="round"
+                showGrid={false}
+                onCropChange={setCrop}
+                onZoomChange={setZoom}
+                onCropComplete={(_area, areaPixels) => setArea(areaPixels)}
+              />
+            )}
+          </div>
+
+          <label className="flex items-center gap-3 text-sm text-muted-foreground">
+            {t("profile.cropZoom")}
+            <input
+              type="range"
+              className="flex-1 accent-primary"
+              min={ZOOM_MIN}
+              max={ZOOM_MAX}
+              step={ZOOM_STEP}
+              value={zoom}
+              onChange={(e) => setZoom(Number(e.target.value))}
+            />
+          </label>
+
+          <DialogFooter className="gap-2">
+            <Button type="button" variant="outline" onClick={cancel}>
+              {t("common.cancel")}
+            </Button>
+            <Button type="submit" disabled={loading || !area}>
+              {t("common.save")}
+            </Button>
+          </DialogFooter>
+        </DialogForm>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,2 @@
+// Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
+export * from "./avatar-crop-dialog";

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

@@ -0,0 +1,114 @@
+"use client";
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import type { JSX } from "react";
+import { useForm } 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 { useAuth, useI18n } from "#core/contexts";
+import { useRequest } from "#core/hooks/use-request";
+
+export function ForcePasswordChange({
+  reason = "expired",
+}: {
+  reason?: "expired" | "provisional";
+}): JSX.Element {
+  const { run, loading, error } = useRequest();
+  const { logout } = useAuth();
+  const { t } = useI18n();
+
+  const schema = yup.object({
+    currentPassword: yup.string().required(t("validation.required")),
+    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({ resolver: yupResolver(schema) });
+
+  const onSubmit = handleSubmit(async (data) => {
+    const res = await run(
+      () => authService.changePassword(data.currentPassword, data.newPassword),
+      { success: t("profile.changed") },
+    );
+    if (res !== null) {
+      await logout();
+    }
+  });
+
+  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("profile.changePassword")}
+        </h1>
+        <Alert variant="warning" className="mb-4">
+          {reason === "provisional"
+            ? t("profile.forceProvisional")
+            : t("profile.forceExpired")}
+        </Alert>
+        {error && (
+          <Alert variant="error" className="mb-4">
+            {error}
+          </Alert>
+        )}
+        <form onSubmit={onSubmit} className="flex flex-col gap-4">
+          <Field
+            label={t("profile.currentPassword")}
+            error={errors.currentPassword?.message}
+          >
+            <PasswordField
+              error={!!errors.currentPassword}
+              {...register("currentPassword")}
+            />
+          </Field>
+          <Field
+            label={t("profile.newPassword")}
+            error={errors.newPassword?.message}
+          >
+            <PasswordField
+              error={!!errors.newPassword}
+              {...register("newPassword")}
+            />
+          </Field>
+          <Field
+            label={t("profile.confirmPassword")}
+            error={errors.confirm?.message}
+          >
+            <PasswordField error={!!errors.confirm} {...register("confirm")} />
+          </Field>
+          <Button type="submit" size="lg" disabled={loading}>
+            {loading ? t("common.loading") : t("profile.changePassword")}
+          </Button>
+          {/*
+            Saída da tela. Sem isto o usuário fica preso: a tela cobre o app
+            inteiro e não há navegação nem menu — só restava limpar os cookies.
+            Sair não desarma a exigência: no próximo login ela volta, porque a
+            senha continua provisória (ou expirada).
+          */}
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => void logout()}
+            disabled={loading}
+          >
+            {t("user.logout")}
+          </Button>
+        </form>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,385 @@
+"use client";
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Camera, ShieldCheck, Trash2 } from "lucide-react";
+import type { JSX } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+
+import { api } from "#core/_services/api/axios.factory";
+import { authService } from "#core/_services/auth";
+import { maskPhoneBR } from "#core/_utils/format";
+import { STRONG_PASSWORD_REGEX } from "#core/_utils/password";
+import { PasswordField } from "#core/components";
+import { UserAvatar } from "#core/components";
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogForm,
+  DialogHeader,
+  DialogTitle,
+  Field,
+  Input,
+} from "#core/components/ui";
+import {
+  ColorPreference,
+  useAuth,
+  useColorMode,
+  useI18n,
+} from "#core/contexts";
+import { BackupCodesDialog } from "#core/features/login/components";
+import { AvatarCropDialog } from "#core/features/profile/components";
+import { useRequest } from "#core/hooks/use-request";
+import { cn } from "#core/lib/utils";
+
+const THEME_OPTIONS: { value: ColorPreference; key: string }[] = [
+  { value: "light", key: "common.light" },
+  { value: "dark", key: "common.dark" },
+  { value: "system", key: "common.system" },
+];
+
+export function ProfileScreen(): JSX.Element {
+  const { user, logout, refreshProfile } = useAuth();
+  const { preference, setPreference } = useColorMode();
+  const { run, loading } = useRequest();
+  // useRequest próprio da troca de senha: o `run` compartilhado da tela zeraria
+  // esse erro a cada outra ação (salvar perfil, trocar avatar).
+  const password = useRequest();
+  const { t } = useI18n();
+
+  const [avatar, setAvatar] = useState<string | null>(null);
+  const [form, setForm] = useState({ name: "", lastName: "", phone: "" });
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  // Arquivo escolhido mas ainda não recortado — o upload só sai depois do corte.
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [regenOpen, setRegenOpen] = useState(false);
+  const [totp, setTotp] = useState("");
+  const [newCodes, setNewCodes] = useState<string[] | null>(null);
+
+  const loadMe = async (): Promise<void> => {
+    const me = await run(() => api.get("/users/me").then((r) => r.data));
+    if (me) {
+      setAvatar(me.avatar ?? null);
+      setForm({
+        name: me.name ?? "",
+        lastName: me.lastName ?? "",
+        phone: me.phone ?? "",
+      });
+    }
+  };
+  useEffect(() => {
+    void loadMe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const saveProfile = async (): Promise<void> => {
+    const res = await run(() => authService.updateProfile(form), {
+      success: t("profile.saved"),
+    });
+    if (res !== null) {
+      await refreshProfile();
+      await loadMe();
+    }
+  };
+
+  const schema = yup.object({
+    currentPassword: yup.string().required(t("validation.required")),
+    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({ resolver: yupResolver(schema) });
+  const onChangePassword = handleSubmit(async (data) => {
+    const res = await password.run(
+      () => authService.changePassword(data.currentPassword, data.newPassword),
+      { success: t("profile.changed") },
+    );
+    if (res !== null) {
+      await logout();
+    }
+  });
+
+  const onPickFile = (): void | undefined => fileRef.current?.click();
+  const onFile = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const file = e.target.files?.[0];
+    if (!file) {
+      return;
+    }
+    setPendingFile(file);
+    // Zera o input: sem isso, escolher o mesmo arquivo de novo não dispara change.
+    e.target.value = "";
+  };
+  const onCropped = async (cropped: File): Promise<void> => {
+    const res = await run(() => authService.uploadAvatar(cropped), {
+      success: t("profile.avatarUpdated"),
+    });
+    setPendingFile(null);
+    if (res) {
+      await refreshProfile();
+      await loadMe();
+    }
+  };
+  const onDeleteAvatar = async (): Promise<void> => {
+    const res = await run(() => authService.deleteAvatar(), {
+      success: t("profile.avatarRemoved"),
+    });
+    if (res !== null) {
+      setAvatar(null);
+    }
+  };
+
+  const onRegen = async (): Promise<void> => {
+    const res = await run(() => authService.regenerateBackup(totp));
+    if (res) {
+      setRegenOpen(false);
+      setTotp("");
+      setNewCodes(res.backupCodes);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="mb-6 text-3xl font-bold">{t("profile.title")}</h1>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        {/* Dados + Avatar */}
+        <Card>
+          <CardContent className="flex flex-col gap-4 pt-6">
+            <div className="flex items-center gap-4">
+              {/* Câmera sobreposta ao avatar no lugar do antigo botão "Editar" */}
+              <div className="relative h-16 w-16 shrink-0">
+                <UserAvatar
+                  name={form.name || user?.name}
+                  lastName={form.lastName || user?.lastName}
+                  avatar={avatar}
+                  className="h-16 w-16"
+                  fallbackClassName="text-lg"
+                />
+                <button
+                  type="button"
+                  onClick={onPickFile}
+                  disabled={loading}
+                  title={t("profile.changeAvatar")}
+                  aria-label={t("profile.changeAvatar")}
+                  className="absolute -bottom-1.5 -right-1.5 flex h-7 w-7 items-center justify-center rounded-full border-2 border-card bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+                >
+                  <Camera className="h-3.5 w-3.5" />
+                </button>
+              </div>
+              {avatar && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onDeleteAvatar}
+                  disabled={loading}
+                  className="text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  {t("common.delete")}
+                </Button>
+              )}
+              <input
+                ref={fileRef}
+                type="file"
+                accept="image/*"
+                hidden
+                onChange={onFile}
+              />
+            </div>
+
+            <h2 className="text-lg font-semibold">{t("profile.data")}</h2>
+            <Field label={t("users.name")}>
+              <Input
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+              />
+            </Field>
+            <Field label={t("users.lastName")}>
+              <Input
+                value={form.lastName}
+                onChange={(e) => setForm({ ...form, lastName: e.target.value })}
+              />
+            </Field>
+            <Field label={t("users.phone")}>
+              <Input
+                placeholder="(11) 90000-0000"
+                value={form.phone}
+                onChange={(e) =>
+                  setForm({ ...form, phone: maskPhoneBR(e.target.value) })
+                }
+              />
+            </Field>
+            <p className="text-sm text-muted-foreground">
+              <strong>{t("users.email")}:</strong> {user?.email} ·{" "}
+              <strong>{t("dashboard.roles")}:</strong> {user?.roles.join(", ")}
+            </p>
+            <Button
+              className="self-start"
+              onClick={saveProfile}
+              disabled={loading}
+            >
+              {t("common.save")}
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* Aparência + 2FA + Trocar senha */}
+        <div className="flex flex-col gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("common.theme")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="inline-flex rounded-lg border border-border p-1">
+                {THEME_OPTIONS.map((o) => (
+                  <button
+                    key={o.value}
+                    onClick={() => setPreference(o.value)}
+                    className={cn(
+                      "rounded-md px-4 py-1.5 text-sm font-medium transition-colors",
+                      preference === o.value
+                        ? "bg-primary text-primary-foreground"
+                        : "text-muted-foreground hover:text-foreground",
+                    )}
+                  >
+                    {t(o.key)}
+                  </button>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>2FA</CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-col items-start gap-3">
+              <Badge
+                variant={user?.twoFactorEnabled ? "success" : "warning"}
+                className="gap-1"
+              >
+                <ShieldCheck className="h-3.5 w-3.5" />
+                {user?.twoFactorEnabled
+                  ? t("dashboard.twoFactorActive")
+                  : t("dashboard.twoFactorPending")}
+              </Badge>
+              <Button variant="outline" onClick={() => setRegenOpen(true)}>
+                {t("auth.backupTitle")}
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("profile.changePassword")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={onChangePassword} className="flex flex-col gap-4">
+                {password.error && (
+                  <Alert variant="error" role="alert">
+                    {password.error}
+                  </Alert>
+                )}
+                <Field
+                  label={t("profile.currentPassword")}
+                  error={errors.currentPassword?.message}
+                >
+                  <PasswordField
+                    error={!!errors.currentPassword}
+                    {...register("currentPassword")}
+                  />
+                </Field>
+                <Field
+                  label={t("profile.newPassword")}
+                  error={errors.newPassword?.message}
+                >
+                  <PasswordField
+                    error={!!errors.newPassword}
+                    {...register("newPassword")}
+                  />
+                </Field>
+                <Field
+                  label={t("profile.confirmPassword")}
+                  error={errors.confirm?.message}
+                >
+                  <PasswordField
+                    error={!!errors.confirm}
+                    {...register("confirm")}
+                  />
+                </Field>
+                <Button type="submit" disabled={password.loading}>
+                  {password.loading
+                    ? t("common.loading")
+                    : t("profile.changePassword")}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* diálogo: pede código TOTP para regenerar backup codes */}
+      <Dialog open={regenOpen} onOpenChange={(o) => !o && setRegenOpen(false)}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t("auth.backupTitle")}</DialogTitle>
+          </DialogHeader>
+          <DialogForm onSubmit={() => void onRegen()}>
+            <p className="text-sm text-muted-foreground">{t("auth.codeApp")}</p>
+            <Input
+              autoFocus
+              inputMode="numeric"
+              maxLength={6}
+              value={totp}
+              onChange={(e) => setTotp(e.target.value)}
+            />
+            <DialogFooter className="gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setRegenOpen(false)}
+              >
+                {t("common.cancel")}
+              </Button>
+              <Button type="submit" disabled={loading || totp.length < 6}>
+                {t("common.confirm")}
+              </Button>
+            </DialogFooter>
+          </DialogForm>
+        </DialogContent>
+      </Dialog>
+
+      <AvatarCropDialog
+        file={pendingFile}
+        loading={loading}
+        onCancel={() => setPendingFile(null)}
+        onConfirm={(cropped) => void onCropped(cropped)}
+      />
+
+      <BackupCodesDialog
+        open={!!newCodes}
+        codes={newCodes ?? []}
+        onClose={() => setNewCodes(null)}
+      />
+    </div>
+  );
+}

package/src/features/rbac/panels/actions-panel.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { CatalogPanel } from "#core/features/rbac/panels/catalog-panel";
+import { rbacService } from "#core/features/rbac/services/rbac.service";
+
+export function ActionsPanel(): JSX.Element {
+  return (
+    <CatalogPanel
+      resource="actions"
+      storageKey="rbac-actions"
+      namePlaceholder="read"
+      list={rbacService.listActions}
+      create={rbacService.createAction}
+      update={rbacService.updateAction}
+      remove={rbacService.deleteAction}
+    />
+  );
+}