Screen · Login
Iniciar sesión
Puerta de entrada para cuentas existentes (ruta /login). El celular es el identificador — no hay login con correo en MVP. Dos estados según el dispositivo: A · frío (sin historial local, pide celular completo) y B · caliente (el dispositivo reconoce al usuario y muestra solo los últimos 4 dígitos, sin nombre — PII mínima pre-auth). Errores anti-enumeración: la UI nunca revela si un celular existe.
/login · POST /v1/auth/login
celular = identificador
anti-enumeración
PII mínima pre-auth
Layout anotado · estado A (frío) · paso celular
Canvas-first: campo borderless con hairline, sin cards. El CTA vive bajo el campo y se habilita solo con 10 dígitos válidos que empiecen por 3.
wordmark · sin nav
prefijo +57 readonly
hint de formato
CTA deshabilitado hasta válido
crear cuenta nueva
9:41
MiCapi
Inicia sesión
Ingresa el celular con el que te registraste.
Celular
🇨🇴 +57
312 456
10 dígitos, empieza por 3.
Continuar
Composición
- Prefijo fijo · readonly🇨🇴
+57 no editable y sin selector de país — MiCapi opera solo en Colombia. El teclado es numérico desde el primer tap.
- Validación local · 10 dígitosExactamente 10 dígitos y primer dígito
3 (móvil colombiano). Formateo visual 312 456 7890 mientras escribe. El CTA pasa de disabled (canónico B4) a primario al cumplir — sin mensaje de error por longitud mientras teclea.
- Continuar → paso claveUn solo campo por paso (celular → clave). La transición es slide-in estándar; el celular queda visible arriba en el paso 2 para corregir.
- Sin login con correoDecisión MVP: el celular es el identificador único de la cuenta. No se ofrece alternativa ni "magic link".
- Links secundarios
Crear cuenta nueva → /register. En el paso clave aparece además ¿Olvidaste tu clave? → /password-recovery (A3).
Paso clave · y estado B (caliente)
La clave siempre se pide en el dispositivo — reconocido o no. En caliente se muestra +57 ******1658 (últimos 4, no editable) y nunca el nombre: ante un teléfono robado, la pantalla no confirma de quién es la cuenta.
A2 · frío · paso clave
9:41
MiCapi
Tu clave
Celular +57 312 456 7890
Iniciar sesión
B · caliente · reconocido
9:41
MiCapi
Hola de nuevo
+57 ******1658
Cuenta guardada en este dispositivo
Continuar
Reglas del caliente
- PII mínimaSolo
+57 ******1658 (últimos 4). Sin nombre completo, sin foto real, sin saldo. El avatar es glifo genérico.
- Continuar → claveEl tap lleva al paso clave con el celular ya resuelto. La clave nunca se omite (la biometría local, si se activa, es post-MVP).
- Iniciar con otra cuentaCae al estado A (frío) con el campo celular vacío. No borra la cuenta recordada hasta que otra inicie sesión con éxito.
- Qué recuerda el dispositivoSolo un alias cifrado del celular en storage seguro — nunca la clave, nunca tokens de sesión vencidos.
Estados · error y offline
El error de credenciales es genérico por diseño. Sin conexión, el CTA se deshabilita y un banner sobrio lo explica — el usuario no pierde lo escrito.
C · error genérico
9:41
MiCapi
Tu clave
Celular +57 312 456 7890
Clave
••••••••
Datos incorrectos. Revisa tu celular y tu clave.
Iniciar sesión
D · offline
9:41
MiCapi
Sin conexión. Podrás iniciar sesión cuando vuelva la señal.
Inicia sesión
Ingresa el celular con el que te registraste.
Celular
🇨🇴 +57
312 456 7890
Continuar
Reglas de estado
- Anti-enumeraciónCelular inexistente y clave incorrecta producen el mismo mensaje: "Datos incorrectos. Revisa tu celular y tu clave." Nunca "este celular no está registrado" — eso confirma qué números tienen cuenta.
- Rate limitingTras N intentos, el backend responde con espera creciente; la UI muestra "Demasiados intentos. Intenta en X minutos" con countdown mono — sin distinguir causa.
- OfflineBanner neutro (no error — no es culpa del usuario) + CTA disabled. Lo escrito se conserva; al volver la señal el banner desaparece y el CTA se rehabilita.
- LoadingAl enviar: spinner inline 16px en el botón + "Procesando…" (canon §4.9). Campos bloqueados durante la petición.
Línea roja anti-enumeración. Ningún copy, código de error visible, tiempo de respuesta artificial ni variación de UI puede revelar si un celular tiene cuenta en MiCapi. Aplica aquí, en registro y en recuperación de clave (A3). El backend devuelve error uniforme; la UI lo respeta.
Light y dark · 360dp
Mismos tokens semánticos. En dark el hairline del campo sube a neutral-500 equivalente para mantener ≥3:1 (regla B6 de bordes de control).
Light · frío
9:41
MiCapi
Inicia sesión
Ingresa el celular con el que te registraste.
Celular
🇨🇴 +57
300 000 0000
10 dígitos, empieza por 3.
Continuar
Dark · caliente
9:41
MiCapi
Hola de nuevo
+57 ******1658
Cuenta guardada en este dispositivo
Continuar
Notas de implementación · Flutter
Auth flow + storage seguro
Input de celular
TextInputType.phone + inputFormatters: solo dígitos, máx. 10, formateo ### ### ####. Validación ^3\d{9}$ local; el CTA observa el validador con ValueListenableBuilder.
Endpoint
POST /v1/auth/login con {phone, password, device_id}. Respuesta de error uniforme (401 genérico) — la UI mapea todo a "Datos incorrectos." 429 → countdown de reintento.
Estado caliente
flutter_secure_storage guarda {alias_last4, avatar_seed} tras el primer login exitoso — nunca clave ni tokens vencidos. Si existe → ruta /login/known; "Iniciar con otra cuenta" navega a /login sin borrar el alias.
Ojo revelador
obscureText toggle con eye/eye-off, Semantics(label: 'Mostrar clave'). Se re-oculta al perder foco.
Offline
connectivity_plus stream → banner + CTA disabled. El formulario conserva estado; sin reintentos automáticos de login (acción sensible, siempre explícita).
Post-login
Token + refresh en flutter_secure_storage. Registro del dispositivo para A5 (sesiones) con modelo y ciudad aproximada por IP — se informa en la primera sesión.