Login Screen
Component Detail
Description
The root screen for email/password authentication, composing the login form within a keyboard-aware, scrollable layout. Handles screen-level navigation and routes the user to the appropriate home screen upon successful authentication.
login-screen
Summaries
The Login Screen is the organization's digital front door — the first branded touchpoint every user encounters. A seamless, role-aware entry experience directly reduces user abandonment, decreases helpdesk volume around login confusion, and accelerates time-to-productivity across every session. By routing authenticated users to the correct home screen based on their role without any manual navigation, it eliminates friction that would otherwise cost minutes per user per day at scale. Branding and context displayed at this layer build institutional trust, supporting broader platform adoption and demonstrating professionalism to new users and stakeholders evaluating the product.
The Login Screen carries low implementation complexity and should represent a short, well-scoped delivery item. Its primary dependencies are the Login Form widget and the Login Form BLoC, both of which must be completed and stable before full integration testing can occur — sequence these accordingly in the sprint plan. Key delivery risks include late changes to the authentication flow or role-based routing logic, which could require rework of the navigation layer. Testing should cover successful login routing for each user role, loading overlay display during async operations, and error banner rendering for failed authentication.
No backend or database coupling exists directly in this component, making it straightforward to test in isolation with mocked BLoC states.
Login Screen is a stateless Flutter widget responsible for composing the Login Form within a keyboard-aware, scrollable scaffold. It consumes the login-form and login-form-bloc dependencies but owns no state itself — all authentication state is delegated to the BLoC layer. The navigateOnSuccess(UserRole) interface drives post-authentication routing, meaning the screen must subscribe to BLoC state emissions (typically via BlocListener) and dispatch Navigator push/replacement calls based on the resolved role. showLoadingOverlay and showErrorBanner are screen-level concerns, likely implemented via an overlay stack or conditional widget tree.
Ensure the keyboard-aware scroll view uses Flutter's SingleChildScrollView with reverse: true or equivalent to prevent field occlusion on smaller devices.
Responsibilities
- Compose login form within keyboard-aware scroll view
- Display organization branding and context
- Route user post-authentication based on role
- Handle loading and error overlay states
Interfaces
build(BuildContext)
navigateOnSuccess(UserRole)
showErrorBanner(String message)
showLoadingOverlay(bool visible)