agent
e8e37d77fe
Extracted from unibus v0.13.0: the chat SPA (web/, React+Mantine, per-user BIP39 wallet) and the web gateway (cmd/webgw, REST+SSE) that acts as a bus peer for the browser. Consumes unibus as a Go module via replace => ../unibus, keeping its own replace fn-registry for the cybersecurity primitives. go build/vet/test and pnpm build green in the new location.
90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
Button,
|
|
Card,
|
|
Center,
|
|
PasswordInput,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
ThemeIcon,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { IconShieldLock, IconKey } from "@tabler/icons-react";
|
|
import { api, ApiError } from "./api";
|
|
import type { User } from "./types";
|
|
|
|
export function Login({ onLogin }: { onLogin: (u: User) => void }) {
|
|
const [handle, setHandle] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const ready = handle.trim().length > 0 && password.length > 0;
|
|
const connect = async () => {
|
|
if (!ready || busy) return;
|
|
setBusy(true);
|
|
setError(null);
|
|
try {
|
|
// La contraseña desbloquea la sesión del gateway (passphrase del operador).
|
|
// El handle es solo el nombre a mostrar en esta iteración (wallet = fase 2).
|
|
const me = await api.login(password);
|
|
const h = handle.trim() || me.endpoint.slice(0, 8);
|
|
onLogin({ id: me.endpoint, handle: h });
|
|
} catch (e) {
|
|
setError(e instanceof ApiError ? e.message : "No se pudo conectar al gateway");
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Center h="100vh" bg="dark.9">
|
|
<Card w={380} p="xl" radius="lg" withBorder bg="dark.7">
|
|
<Stack align="center" gap="lg">
|
|
<ThemeIcon size={60} radius="xl" variant="light" color="brand">
|
|
<IconShieldLock size={32} />
|
|
</ThemeIcon>
|
|
<Stack gap={2} align="center">
|
|
<Title order={2}>unibus</Title>
|
|
<Text c="dimmed" size="sm">
|
|
Mensajería cifrada de extremo a extremo
|
|
</Text>
|
|
</Stack>
|
|
<TextInput
|
|
w="100%"
|
|
label="Identidad"
|
|
placeholder="tu-handle"
|
|
value={handle}
|
|
onChange={(e) => setHandle(e.currentTarget.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && connect()}
|
|
data-autofocus
|
|
/>
|
|
<PasswordInput
|
|
w="100%"
|
|
label="Contraseña"
|
|
description="Desbloquea tu identidad cifrada en este dispositivo"
|
|
placeholder="••••••••"
|
|
leftSection={<IconKey size={16} />}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.currentTarget.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && void connect()}
|
|
/>
|
|
{error && (
|
|
<Text c="red" size="sm" ta="center">
|
|
{error}
|
|
</Text>
|
|
)}
|
|
<Button
|
|
w="100%"
|
|
size="md"
|
|
onClick={() => void connect()}
|
|
disabled={!ready}
|
|
loading={busy}
|
|
>
|
|
Conectar
|
|
</Button>
|
|
</Stack>
|
|
</Card>
|
|
</Center>
|
|
);
|
|
}
|