Reescrita dos geradores: biblioteca IGenerator, minimal API e novo frontend
- GeradoresService: cada tipo passa a ser um IGenerator (NIF, NIPC, NISS, CC, passaporte, IBAN, NIB, cartões, referência MB, pessoa, telefone, código postal, email, matrícula, EAN, UUID) registado em GeneratorRegistry; remove DAL/EF - GeradoresWS: minimal APIs em /api/v1 com OpenAPI + Scalar e health check - UnitTest: testes de ida e volta, valores conhecidos, detecção e API - geradoresfe: UI construída a partir dos metadados da API, validador livre, exportação CSV/JSON/TXT, nginx com API_UPSTREAM configurável - Docker, docker-compose e Jenkinsfile actualizados Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
84
geradoresfe/src/components/Validator.tsx
Normal file
84
geradoresfe/src/components/Validator.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import { useState, type FormEvent } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { SearchCheckIcon } from "lucide-react";
|
||||
import { api, type DetectMatch } from "../lib/api";
|
||||
import { Button } from "./ui/Button";
|
||||
import { Input } from "./ui/Input";
|
||||
import { ValidationResultView } from "./ValidationResultView";
|
||||
|
||||
/**
|
||||
* Validador livre: o utilizador cola um valor qualquer e a API identifica o tipo
|
||||
* (NIF, IBAN, CC, …) e se é válido, incluindo "quase" correspondências com o dígito errado.
|
||||
*/
|
||||
export function Validator({ autoFocus = false }: { autoFocus?: boolean }) {
|
||||
const [value, setValue] = useState("");
|
||||
const [matches, setMatches] = useState<DetectMatch[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const submit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!value.trim()) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
setMatches(await api.detect(value));
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
setMatches(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const valid = matches?.filter((m) => m.result.isValid) ?? [];
|
||||
const nearMisses = matches?.filter((m) => !m.result.isValid) ?? [];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<form onSubmit={submit} className="flex flex-col gap-2 sm:flex-row">
|
||||
<Input
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
setValue(e.target.value);
|
||||
setMatches(null);
|
||||
}}
|
||||
placeholder="Cole um NIF, NISS, CC, IBAN, cartão, matrícula, EAN…"
|
||||
aria-label="Valor a validar"
|
||||
autoFocus={autoFocus}
|
||||
className="py-3 font-mono text-base"
|
||||
/>
|
||||
<Button type="submit" loading={loading} icon={<SearchCheckIcon className="h-4 w-4" />} className="py-3 sm:w-40">
|
||||
Validar
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
|
||||
|
||||
{matches && matches.length === 0 && (
|
||||
<ValidationResultView
|
||||
result={{ isValid: false, formatMatch: false, message: "Não foi reconhecido como nenhum dos tipos suportados." }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{valid.map((m) => (
|
||||
<ValidationResultView key={m.generatorId} title={m.generatorName} result={m.result} />
|
||||
))}
|
||||
|
||||
{valid.length === 0 && nearMisses.map((m) => (
|
||||
<ValidationResultView key={m.generatorId} title={`Parece um ${m.generatorName}, mas…`} result={m.result} />
|
||||
))}
|
||||
|
||||
{valid.length > 0 && nearMisses.length > 0 && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Também tem o formato de: {nearMisses.map((m) => (
|
||||
<Link key={m.generatorId} to={`/gerador/${m.generatorId}`} className="mr-2 underline">
|
||||
{m.generatorName}
|
||||
</Link>
|
||||
))}
|
||||
(mas não é válido como tal).
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user