MAI CALL - auth v0.2
# O que mudou 1 Schema: failedAttempts + lockedUntil em User; migration auth_v0_2_lockout aplicada; crypto.ts com hashSecret/verifySecret (Node scrypt nativo, zero deps) 2 packages/api/src/auth.ts — authenticateCredential com lockout de 5 tentativas 3 Seed reescrito: admin hashed admin1234, operadores hashed 1111/2222/3333 4 Porta das traseiras fechada: AUTH_DEV_AUTOLOGIN ignorado quando NODE_ENV=production, em ambas as apps 5 operator-pwa: Credentials provider usa PIN + allowedRoles:['OPERATOR']; cookies fieldops-op.* 6 Picker em 2 estados: lista → teclado PIN (botões grandes, dots de progresso, mensagem de erro sem dar pistas) 7 admin-web: Auth.js completo (auth.config, auth.ts, route handler, middleware, /login page, AUTH_SECRET no env) com cookies fieldops-admin.* 8 scripts/auth-smoke.ts (11/11 ✓); .env.example e README atualizados
This commit is contained in:
@@ -3,35 +3,31 @@
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { signIn } from 'next-auth/react';
|
||||
import { ArrowLeft, Delete } from 'lucide-react';
|
||||
|
||||
interface Operator {
|
||||
id: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export function OperatorPicker({ operators }: { operators: Operator[] }) {
|
||||
const router = useRouter();
|
||||
const [busy, setBusy] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
// ── State types ──────────────────────────────────────────────────────────────
|
||||
|
||||
async function handleSelect(email: string) {
|
||||
setBusy(email);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await signIn('credentials', { email, redirect: false });
|
||||
if (result?.error) {
|
||||
setError(`Não foi possível entrar como ${email}`);
|
||||
} else {
|
||||
router.push('/');
|
||||
router.refresh();
|
||||
}
|
||||
} catch {
|
||||
setError('Erro inesperado. Tente novamente.');
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}
|
||||
type PickerState =
|
||||
| { step: 'list' }
|
||||
| { step: 'pin'; operator: Operator };
|
||||
|
||||
const PIN_MIN = 4;
|
||||
const PIN_MAX = 6;
|
||||
|
||||
// ── Sub-components ───────────────────────────────────────────────────────────
|
||||
|
||||
function OperatorList({
|
||||
operators,
|
||||
onSelect,
|
||||
}: {
|
||||
operators: Operator[];
|
||||
onSelect: (op: Operator) => void;
|
||||
}) {
|
||||
if (operators.length === 0) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
@@ -39,20 +35,170 @@ export function OperatorPicker({ operators }: { operators: Operator[] }) {
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{operators.map((op) => (
|
||||
<button
|
||||
key={op.id}
|
||||
onClick={() => handleSelect(op.email)}
|
||||
disabled={busy !== null}
|
||||
className="w-full rounded-xl border border-border bg-card px-6 py-5 text-left text-base font-medium transition-colors hover:bg-accent active:scale-[0.98] disabled:opacity-50"
|
||||
onClick={() => onSelect(op)}
|
||||
className="w-full rounded-xl border border-border bg-card px-6 py-5 text-left text-base font-medium transition-colors hover:bg-accent active:scale-[0.98]"
|
||||
>
|
||||
{busy === op.email ? 'A entrar…' : op.email}
|
||||
{op.email}
|
||||
</button>
|
||||
))}
|
||||
{error && <p className="text-sm text-destructive">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PinPad({
|
||||
operator,
|
||||
onBack,
|
||||
}: {
|
||||
operator: Operator;
|
||||
onBack: () => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [digits, setDigits] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
function press(d: string) {
|
||||
if (digits.length >= PIN_MAX) return;
|
||||
setDigits((prev) => prev + d);
|
||||
setError(null);
|
||||
}
|
||||
|
||||
function erase() {
|
||||
setDigits((prev) => prev.slice(0, -1));
|
||||
setError(null);
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (digits.length < PIN_MIN || busy) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await signIn('credentials', {
|
||||
email: operator.email,
|
||||
pin: digits,
|
||||
redirect: false,
|
||||
});
|
||||
if (result?.error) {
|
||||
setDigits('');
|
||||
setError('PIN incorreto ou conta bloqueada. Tente novamente.');
|
||||
} else {
|
||||
router.push('/');
|
||||
router.refresh();
|
||||
}
|
||||
} catch {
|
||||
setDigits('');
|
||||
setError('Erro inesperado. Tente novamente.');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'del'];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={onBack}
|
||||
disabled={busy}
|
||||
className="rounded-lg p-2 hover:bg-accent disabled:opacity-50"
|
||||
aria-label="Voltar"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</button>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Operador selecionado</p>
|
||||
<p className="text-sm font-medium">{operator.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PIN dots */}
|
||||
<div className="flex justify-center gap-4">
|
||||
{Array.from({ length: PIN_MAX }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`h-4 w-4 rounded-full border-2 transition-colors ${
|
||||
i < digits.length
|
||||
? 'border-primary bg-primary'
|
||||
: 'border-muted-foreground bg-transparent'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<p className="text-center text-sm text-destructive">{error}</p>
|
||||
)}
|
||||
|
||||
{/* Numpad */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{keys.map((key, idx) => {
|
||||
if (key === '') {
|
||||
return <div key={idx} />;
|
||||
}
|
||||
if (key === 'del') {
|
||||
return (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={erase}
|
||||
disabled={busy || digits.length === 0}
|
||||
className="flex items-center justify-center rounded-2xl border border-border bg-card py-5 text-lg font-medium transition-colors hover:bg-accent active:scale-[0.97] disabled:opacity-40"
|
||||
aria-label="Apagar"
|
||||
>
|
||||
<Delete className="h-5 w-5" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => press(key)}
|
||||
disabled={busy || digits.length >= PIN_MAX}
|
||||
className="rounded-2xl border border-border bg-card py-5 text-xl font-semibold transition-colors hover:bg-accent active:scale-[0.97] disabled:opacity-40"
|
||||
>
|
||||
{key}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
onClick={submit}
|
||||
disabled={digits.length < PIN_MIN || busy}
|
||||
className="w-full rounded-xl bg-primary py-4 text-base font-semibold text-primary-foreground transition-opacity hover:opacity-90 active:scale-[0.98] disabled:opacity-40"
|
||||
>
|
||||
{busy ? 'A entrar…' : 'Entrar'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main component ───────────────────────────────────────────────────────────
|
||||
|
||||
export function OperatorPicker({ operators }: { operators: Operator[] }) {
|
||||
const [state, setState] = useState<PickerState>({ step: 'list' });
|
||||
|
||||
if (state.step === 'pin') {
|
||||
return (
|
||||
<PinPad
|
||||
operator={state.operator}
|
||||
onBack={() => setState({ step: 'list' })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<OperatorList
|
||||
operators={operators}
|
||||
onSelect={(op) => setState({ step: 'pin', operator: op })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user