Pantalla: Registro
Identificador: SCR-AUTH-003
Modulo: MTS-AUTH-001 - Autenticacion y Seguridad
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Registro |
| Proposito |
Crear cuenta nueva via autenticacion social |
| Tipo |
Full Screen con navigation |
| Acceso |
Desde SCR-AUTH-002 (Login) |
| Prioridad |
Critica |
NOTA V1.0: Registro solo via Google/Apple. Flujo de registro es esencialmente igual a login pero con contexto de "nueva cuenta".
2. Wireframe ASCII
2.1. Estado: Seleccion de Metodo
+------------------------------------------+
| [<-] Crear cuenta | <- Top App Bar
+------------------------------------------+
| |
| +----------+ |
| | MEDTIME | |
| +----------+ |
| |
| Crea tu cuenta para |
| empezar a cuidar tu salud |
| |
| |
| +------------------------------------+ |
| | [G] Registrate con Google | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Apple] Registrate con Apple | |
| +------------------------------------+ |
| |
| |
| Al crear una cuenta, aceptas nuestros |
| Terminos de Servicio y Politica de |
| Privacidad. |
| |
| |
| Ya tienes cuenta? [Inicia sesion] |
| |
+------------------------------------------+
2.2. Estado: Confirmacion Pre-OAuth
+------------------------------------------+
| [<-] Crear cuenta |
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | [Icono Google/Apple] | |
| | | |
| | Vas a crear una cuenta MedTime | |
| | usando tu cuenta de {Google/Apple}| |
| | | |
| | Datos que compartiras: | |
| | - Nombre | |
| | - Email | |
| | - Foto de perfil (opcional) | |
| | | |
| | MedTime nunca publicara nada | |
| | sin tu permiso. | |
| | | |
| | +------------------------------+ | |
| | | Continuar | | |
| | +------------------------------+ | |
| | | |
| | [Cancelar] | |
| | | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Estado: Cuenta Creada Exitosamente
+------------------------------------------+
| |
| |
| |
| +----------+ |
| | | |
| | [Check] | |
| | Verde | |
| +----------+ |
| |
| Cuenta creada exitosamente! |
| |
| Bienvenido/a a MedTime, {nombre} |
| |
| Ahora vamos a configurar tu perfil |
| y preferencias. |
| |
| |
| +------------------------------------+ |
| | Continuar | |
| +------------------------------------+ |
| |
| |
+------------------------------------------+
3. Componentes UI
3.1. Top App Bar
| Propiedad |
Valor |
| Componente |
CMP-NAV-002 (Top App Bar) |
| Variante |
small |
| Titulo |
"Crear cuenta" |
| Leading |
Back arrow |
| Accion back |
Volver a SCR-AUTH-002 |
3.2. Logo
| Propiedad |
Valor |
| Tamano |
60x60dp |
| Posicion |
Center |
3.3. Titulo
| Propiedad |
Valor |
| Texto |
"Crea tu cuenta para empezar a cuidar tu salud" |
| Tipografia |
lg (18sp), medium, neutral.900 |
| Alineacion |
Center |
| Max lines |
2 |
3.4. Botones Sociales
| Propiedad |
Google |
Apple |
| Componente |
CMP-BTN-007 |
CMP-BTN-007 |
| Texto |
"Registrate con Google" |
"Registrate con Apple" |
| Estilo |
White background |
Black background |
| Height |
56dp |
56dp |
| Propiedad |
Valor |
| Texto |
"Al crear una cuenta, aceptas nuestros [Terminos de Servicio] y [Politica de Privacidad]." |
| Tipografia |
sm (14sp), neutral.600 |
| Links |
primary, underlined |
3.6. Link Inicia Sesion
| Propiedad |
Valor |
| Texto |
"Ya tienes cuenta? [Inicia sesion]" |
| Tipografia |
sm (14sp), neutral.600 + primary link |
| Accion |
Volver a SCR-AUTH-002 |
3.7. Modal Confirmacion
| Propiedad |
Valor |
| Componente |
CMP-FBK-002 (Dialog) |
| Variante |
informative |
| Icono |
Provider logo (Google/Apple) |
| Botones |
"Continuar" (primary), "Cancelar" (text) |
3.8. Success Screen
| Propiedad |
Valor |
| Icono |
Checkmark circle, success color |
| Tamano icono |
80x80dp |
| Animacion |
Scale up + fade in |
| Auto-advance |
No (espera tap) |
4. Comportamientos
4.1. Flujo de Registro
flowchart TD
A[Pantalla Registro] --> B{Tap social button}
B -->|Google| C[Modal confirmacion Google]
B -->|Apple| D[Modal confirmacion Apple]
C -->|Continuar| E[OAuth Google]
C -->|Cancelar| A
D -->|Continuar| F[OAuth Apple]
D -->|Cancelar| A
E -->|Exito| G{Cuenta existe?}
F -->|Exito| G
G -->|No| H[Crear en Firebase]
G -->|Si| I[Mostrar error: cuenta existe]
H --> J[Success screen]
J --> K[Onboarding]
I --> L{Ir a login?}
L -->|Si| M[SCR-AUTH-002]
L -->|No| A
E -->|Error| N[Mostrar error]
F -->|Error| N
N --> A
4.2. Gestos
| Gesto |
Elemento |
Accion |
| Tap |
Back arrow |
Volver a login |
| Tap |
Google button |
Mostrar modal -> OAuth |
| Tap |
Apple button |
Mostrar modal -> OAuth |
| Tap |
Link Terminos |
Abrir terminos |
| Tap |
Link Privacidad |
Abrir privacidad |
| Tap |
Inicia sesion |
Volver a SCR-AUTH-002 |
| Tap |
Continuar (success) |
Ir a onboarding |
5. Estados y Transiciones
5.1. Diagrama de Estados
stateDiagram-v2
[*] --> Ready: Pantalla cargada
Ready --> ConfirmModal: Tap social button
ConfirmModal --> Ready: Tap Cancelar
ConfirmModal --> Loading: Tap Continuar
Loading --> OAuthFlow: SDK ready
OAuthFlow --> Processing: Token recibido
OAuthFlow --> Ready: Usuario cancela
OAuthFlow --> Error: OAuth error
Processing --> Success: Cuenta creada
Processing --> AccountExists: Cuenta ya existe
Success --> [*]: Tap Continuar -> Onboarding
AccountExists --> Ready: Dismiss
AccountExists --> [*]: Ir a login
Error --> Ready: Auto-reset
5.2. Transiciones
| De |
A |
Trigger |
Animacion |
| Ready |
ConfirmModal |
Tap button |
Modal fade in |
| ConfirmModal |
Loading |
Tap Continuar |
Modal loading state |
| Loading |
OAuthFlow |
SDK ready |
Native sheet |
| Processing |
Success |
Cuenta creada |
Fade + scale |
| Success |
Onboarding |
Tap Continuar |
Slide left |
6. Manejo de Errores
6.1. Cuenta Ya Existe
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | [Info icon] | |
| | | |
| | Esta cuenta ya existe | |
| | | |
| | Ya existe una cuenta MedTime | |
| | asociada a {email}. | |
| | | |
| | +------------------------------+ | |
| | | Ir a iniciar sesion | | |
| | +------------------------------+ | |
| | | |
| | [Usar otra cuenta] | |
| | | |
| +------------------------------------+ |
| |
+------------------------------------------+
6.2. Errores de Red
| Error |
Mensaje |
Accion |
| Network |
"Sin conexion. Verifica tu internet." |
Retry button |
| Timeout |
"La conexion tardo demasiado. Intenta de nuevo." |
Retry button |
| Server |
"Error del servidor. Intenta mas tarde." |
Retry button |
7. Accesibilidad
7.1. Labels y Hints
| Elemento |
accessibilityLabel |
accessibilityHint |
| Back |
"Volver" |
"Regresa a inicio de sesion" |
| Google button |
"Registrate con Google" |
"Crea cuenta usando tu cuenta de Google" |
| Apple button |
"Registrate con Apple" |
"Crea cuenta usando tu cuenta de Apple" |
| Modal Continuar |
"Continuar" |
"Procede a crear tu cuenta" |
| Modal Cancelar |
"Cancelar" |
"Cancela la creacion de cuenta" |
| Success Continuar |
"Continuar" |
"Ir a configurar tu perfil" |
| Inicia sesion |
"Inicia sesion" |
"Ya tengo cuenta, ir a inicio de sesion" |
7.2. Orden de Foco
- Back button
- Titulo
- Boton Google
- Boton Apple
- Links legales
- Link "Inicia sesion"
7.3. Screen Reader Announcements
| Evento |
Anuncio |
| Pantalla cargada |
"Crear cuenta. Registrate con Google o Apple" |
| Modal abierto |
"Confirmacion de registro con {provider}" |
| Loading |
"Creando tu cuenta..." |
| Success |
"Cuenta creada exitosamente. Bienvenido a MedTime" |
| Error |
"Error: {mensaje}" |
8. Datos Requeridos
interface RegisterScreenData {
isOnline: boolean;
previousProvider?: 'google' | 'apple';
}
8.2. Output Events
| Evento |
Payload |
Destino |
| onBack |
- |
SCR-AUTH-002 |
| onRegisterGoogle |
google_token |
Firebase create |
| onRegisterApple |
apple_token |
Firebase create |
| onAccountCreated |
user_data |
MTS-ONB-001 |
| onAccountExists |
email |
Modal with options |
| onGoToLogin |
- |
SCR-AUTH-002 |
9. Metricas
9.1. Analytics Events
| Evento |
Parametros |
| screen_view |
screen_name: "register" |
| register_attempt |
provider |
| register_modal_shown |
provider |
| register_modal_continue |
provider |
| register_modal_cancel |
provider |
| register_success |
provider, time_ms |
| register_error |
provider, error_code |
| register_account_exists |
provider |
| register_to_login |
- |
10. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)