Skip to content

Refactor/frontend auth primitives #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GusGaiotti merged 4 commits into from
Jul 9, 2026
Merged

Refactor/frontend auth primitives #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9053368
refactor(frontend): replace raw palette colors with design tokens
GusGaiotti Jul 9, 2026
439c1cb
chore(frontend): enforce the raw-color guardrail as an error
GusGaiotti Jul 9, 2026
1f02ee2
feat(frontend): add a label action slot to Field
GusGaiotti Jul 9, 2026
376eeab
refactor(frontend): adopt ui primitives in auth pages
GusGaiotti Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const eslintConfig = defineConfig([
// acessivel vem do botao Fechar e da tecla Esc. Fica como aviso, nao erro.
"jsx-a11y/no-static-element-interactions": "warn",
"no-restricted-syntax": [
"warn",
"error",
{
selector:
"Literal[value=/\\b(?:bg|text|border|ring|outline|from|via|to|fill|stroke|divide|placeholder)-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone)-\\d{2,3}\\b/]",
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/(app)/categories/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default function CategoriesPage() {
/>

{errorMessage ? (
<div className="mb-4 rounded-md border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">
<div className="mb-4 rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-4 py-3 text-sm text-[var(--danger-text)]">
{errorMessage}
</div>
) : null}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/(app)/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export default function DashboardPage() {
) : null}

{hasError ? (
<div className="rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
<div className="rounded-xl border border-[color-mix(in_srgb,var(--accent-amber)_30%,transparent)] bg-[color-mix(in_srgb,var(--accent-amber)_10%,transparent)] px-4 py-3 text-sm text-[var(--accent-amber)]">
Algumas seções não carregaram. Verifique a permissão da fatura e a disponibilidade da API.
</div>
) : null}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/(app)/ledger/join/[token]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ export default function JoinLedgerPage() {
if (acceptErrorMessage) {
return (
<main className="mx-auto max-w-xl p-6">
<section className="surface border border-red-500/30 bg-red-500/10 p-6">
<p className="text-xs font-semibold tracking-[0.08em] text-red-200 uppercase">
<section className="surface border border-[var(--danger-border)] bg-[var(--danger-bg)] p-6">
<p className="text-xs font-semibold tracking-[0.08em] text-[var(--danger-text)] uppercase">
Convite indisponível
</p>
<h1 className="mt-3 font-display text-4xl text-[var(--text-primary)] italic">
Não foi possível aceitar
</h1>
<p className="mt-3 text-sm text-red-100">{acceptErrorMessage}</p>
<p className="mt-3 text-sm text-[var(--danger-text)]">{acceptErrorMessage}</p>
<p className="mt-2 text-sm text-[var(--text-secondary)]">
O convite pode ter sido cancelado, expirado ou ja utilizado.
</p>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/(app)/ledger/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default function LedgerPage() {
Cancelar
</button>
</div>
{nameError ? <p className="text-sm text-red-300">{nameError}</p> : null}
{nameError ? <p className="text-sm text-[var(--danger-text)]">{nameError}</p> : null}
</div>
) : (
<div className="mt-3 flex flex-wrap items-center gap-2">
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/app/(app)/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export default function SettingsPage() {
{...profileForm.register("displayName")}
/>
{profileForm.formState.errors.displayName ? (
<span className="mt-1.5 block text-xs text-red-300">
<span className="mt-1.5 block text-xs text-[var(--danger-text)]">
{profileForm.formState.errors.displayName.message}
</span>
) : null}
Expand Down Expand Up @@ -143,7 +143,7 @@ export default function SettingsPage() {
{...passwordForm.register("currentPassword")}
/>
{passwordForm.formState.errors.currentPassword ? (
<span className="mt-1.5 block text-xs text-red-300">
<span className="mt-1.5 block text-xs text-[var(--danger-text)]">
{passwordForm.formState.errors.currentPassword.message}
</span>
) : null}
Expand All @@ -159,7 +159,7 @@ export default function SettingsPage() {
{...passwordForm.register("newPassword")}
/>
{passwordForm.formState.errors.newPassword ? (
<span className="mt-1.5 block text-xs text-red-300">
<span className="mt-1.5 block text-xs text-[var(--danger-text)]">
{passwordForm.formState.errors.newPassword.message}
</span>
) : null}
Expand All @@ -175,7 +175,7 @@ export default function SettingsPage() {
{...passwordForm.register("confirmPassword")}
/>
{passwordForm.formState.errors.confirmPassword ? (
<span className="mt-1.5 block text-xs text-red-300">
<span className="mt-1.5 block text-xs text-[var(--danger-text)]">
{passwordForm.formState.errors.confirmPassword.message}
</span>
) : null}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/(app)/transactions/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function getNetBalanceClassName(value: number) {
return "text-[var(--expense)]";
}

return "text-amber-300";
return "text-[var(--accent-amber)]";
}

export default function TransactionsPage() {
Expand Down
27 changes: 9 additions & 18 deletions frontend/src/app/(auth)/forgot-password/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { BrandWordmark } from "@/components/brand/BrandWordmark";
import { ThemeToggle } from "@/components/theme/ThemeToggle";
import { Alert, Button, Field, Input } from "@/components/ui";
import { useForgotPassword } from "@/hooks/useAuth";
import { forgotPasswordSchema, type ForgotPasswordSchema } from "@/lib/validators/auth.schemas";

Expand Down Expand Up @@ -61,31 +62,21 @@ export default function ForgotPasswordPage() {
</p>

<form className="mt-6 space-y-5" onSubmit={onSubmit}>
<label className="block text-sm">
<span className="mb-1.5 block font-medium text-[var(--text-secondary)]">Email</span>
<input
<Field label="Email" htmlFor="email" error={form.formState.errors.email?.message}>
<Input
id="email"
type="email"
autoComplete="email"
className="focusable h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] px-3.5 transition-colors duration-150 outline-none"
invalid={!!form.formState.errors.email}
{...form.register("email")}
/>
{form.formState.errors.email ? (
<span className="mt-1.5 block text-xs text-red-300">
{form.formState.errors.email.message}
</span>
) : null}
</label>
</Field>
{mutation.isError ? (
<p className="danger-chip rounded-xl px-3 py-2.5 text-sm">
Ocorreu um erro. Tente novamente.
</p>
<Alert tone="danger">Ocorreu um erro. Tente novamente.</Alert>
) : null}
<button
disabled={mutation.isPending}
className="focusable h-11 w-full rounded-xl bg-[var(--accent)] px-4 font-semibold text-white shadow-[0_8px_24px_rgba(79,124,255,0.35)] transition-all duration-150 hover:bg-[var(--accent-hover)] disabled:cursor-not-allowed disabled:opacity-45"
>
<Button type="submit" className="w-full" disabled={mutation.isPending}>
{mutation.isPending ? "Enviando..." : "Enviar link de redefinição"}
</button>
</Button>
</form>
</div>
)}
Expand Down
52 changes: 22 additions & 30 deletions frontend/src/app/(auth)/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { BrandWordmark } from "@/components/brand/BrandWordmark";
import { ThemeToggle } from "@/components/theme/ThemeToggle";
import { Alert, Button, Field, Input } from "@/components/ui";
import { useLogin } from "@/hooks/useAuth";
import { getMyLedger } from "@/lib/api/ledger";
import { useAuthStore } from "@/lib/store/auth.store";
Expand Down Expand Up @@ -122,50 +123,41 @@ export default function LoginPage() {
</p>

<form className="mt-8 space-y-5" onSubmit={onSubmit}>
<label className="block text-sm">
<span className="mb-1.5 block font-medium text-[var(--text-secondary)]">
Email
</span>
<input
<Field label="Email" htmlFor="email" error={form.formState.errors.email?.message}>
<Input
id="email"
type="email"
className="focusable h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] px-3.5 transition-colors duration-150 outline-none"
invalid={!!form.formState.errors.email}
{...form.register("email")}
/>
{form.formState.errors.email ? (
<span className="mt-1.5 block text-xs text-red-300">
{form.formState.errors.email.message}
</span>
) : null}
</label>
<label className="block text-sm">
<div className="mb-1.5 flex items-center justify-between">
<span className="font-medium text-[var(--text-secondary)]">Senha</span>
</Field>
<Field
label="Senha"
htmlFor="password"
error={form.formState.errors.password?.message}
action={
<Link
className="text-xs text-[var(--text-muted)] hover:text-[var(--accent-hover)]"
href="/forgot-password"
>
Esqueci minha senha
</Link>
</div>
<input
}
>
<Input
id="password"
type="password"
className="focusable h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] px-3.5 transition-colors duration-150 outline-none"
invalid={!!form.formState.errors.password}
{...form.register("password")}
/>
{form.formState.errors.password ? (
<span className="mt-1.5 block text-xs text-red-300">
{form.formState.errors.password.message}
</span>
) : null}
</label>
</Field>
{loginMutation.isError ? (
<p className="danger-chip rounded-xl px-3 py-2.5 text-sm">
Credenciais inválidas ou servidor indisponível.
</p>
<Alert tone="danger">Credenciais inválidas ou servidor indisponível.</Alert>
) : null}
<button
<Button
type="submit"
className="w-full"
disabled={loginMutation.isPending || isPreparingRoute || cooldownSeconds > 0}
className="focusable h-11 w-full rounded-xl bg-[var(--accent)] px-4 font-semibold text-white shadow-[0_8px_24px_rgba(79,124,255,0.35)] transition-all duration-150 hover:bg-[var(--accent-hover)] disabled:cursor-not-allowed disabled:opacity-45"
>
{loginMutation.isPending
? "Entrando..."
Expand All @@ -174,7 +166,7 @@ export default function LoginPage() {
: cooldownSeconds > 0
? `Tente novamente em ${cooldownSeconds}s`
: "Entrar"}
</button>
</Button>
</form>
<p className="mt-5 text-sm text-[var(--text-secondary)]">
Não tem conta?{" "}
Expand Down
65 changes: 26 additions & 39 deletions frontend/src/app/(auth)/register/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, useWatch } from "react-hook-form";
import { BrandWordmark } from "@/components/brand/BrandWordmark";
import { ThemeToggle } from "@/components/theme/ThemeToggle";
import { Alert, Button, Field, Input } from "@/components/ui";
import { useRegister } from "@/hooks/useAuth";
import { registerSchema, type RegisterSchema } from "@/lib/validators/auth.schemas";

Expand Down Expand Up @@ -61,62 +62,48 @@ export default function RegisterPage() {
Configure o Zenith em menos de um minuto.
</p>
<form className="mt-6 space-y-4" onSubmit={onSubmit}>
<label className="block text-sm">
<span className="mb-1 block text-[var(--text-secondary)]">Nome</span>
<input
className="focusable w-full rounded-md border bg-[var(--bg-elevated)] px-3 py-2 outline-none"
<Field
label="Nome"
htmlFor="displayName"
error={form.formState.errors.displayName?.message}
>
<Input
id="displayName"
invalid={!!form.formState.errors.displayName}
{...form.register("displayName")}
/>
{form.formState.errors.displayName ? (
<span className="mt-1 block text-xs text-red-300">
{form.formState.errors.displayName.message}
</span>
) : null}
</label>
<label className="block text-sm">
<span className="mb-1 block text-[var(--text-secondary)]">Email</span>
<input
</Field>
<Field label="Email" htmlFor="email" error={form.formState.errors.email?.message}>
<Input
id="email"
type="email"
className="focusable w-full rounded-md border bg-[var(--bg-elevated)] px-3 py-2 outline-none"
invalid={!!form.formState.errors.email}
{...form.register("email")}
/>
{form.formState.errors.email ? (
<span className="mt-1 block text-xs text-red-300">
{form.formState.errors.email.message}
</span>
) : null}
</label>
<label className="block text-sm">
<span className="mb-1 block text-[var(--text-secondary)]">Senha</span>
<input
</Field>
<Field label="Senha" htmlFor="password" error={form.formState.errors.password?.message}>
<Input
id="password"
type="password"
className="focusable w-full rounded-md border bg-[var(--bg-elevated)] px-3 py-2 outline-none"
invalid={!!form.formState.errors.password}
{...form.register("password")}
/>
<span className="mt-1 block text-xs text-[var(--text-secondary)]">
Força: {strength}
</span>
{form.formState.errors.password ? (
<span className="mt-1 block text-xs text-red-300">
{form.formState.errors.password.message}
</span>
) : null}
</label>
<p className="text-xs text-[var(--text-secondary)]">Força: {strength}</p>
</Field>
{registerMutation.isError ? (
<p className="rounded-md bg-red-500/10 px-3 py-2 text-sm text-red-300">
Não foi possível cadastrar. Tente novamente.
</p>
<Alert tone="danger">Não foi possível cadastrar. Tente novamente.</Alert>
) : null}
<button
<Button
type="submit"
className="w-full"
disabled={registerMutation.isPending || cooldownSeconds > 0}
className="focusable w-full rounded-md bg-[var(--accent)] px-4 py-2 font-medium text-white transition-all duration-150 hover:bg-[var(--accent-hover)] disabled:cursor-not-allowed disabled:opacity-40"
>
{registerMutation.isPending
? "Cadastrando..."
: cooldownSeconds > 0
? `Tente novamente em ${cooldownSeconds}s`
: "Cadastrar"}
</button>
</Button>
</form>
<p className="mt-4 text-sm text-[var(--text-secondary)]">
Já tem conta?{" "}
Expand Down
Loading
Loading