diff --git a/.github/workflows/android.yml b/.github/workflows/android.yml index 1af7126..db7e80f 100644 --- a/.github/workflows/android.yml +++ b/.github/workflows/android.yml @@ -3,9 +3,9 @@ name: Android CI/CD Rho.Studio® on: workflow_dispatch: push: - branches: [ "pre-release" ] + branches: [ "19-compose-migration-review" ] pull_request: - branches: [ "main" ] + branches: [ "dev" , "pre-release" , "main" ] jobs: build: diff --git a/README.md b/README.md index 29087e0..39adf0e 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,104 @@ -# Rho Studio UI App -#### An Android View System app. +# Technical Report: Rho Studio UI Architecture +## Modern Android Development with Jetpack Compose & MVVM +This report outlines the architecture design of the Rho Studio UI application. -logintohomepageMVVM +Image -## Architecture +--- -- MVVM Architecture for managing the app and code. -- Single-activity Android architecture. -- Android View System for UI. -- Session manager. +## 1. Executive Summary +The application is a pure **Jetpack Compose** implementation following a **Single-Activity Architecture**. It leverages a reactive **MVVM (Model-View-ViewModel)** pattern to ensure a clean separation of concerns, testability, and a fluid user experience driven by Unidirectional Data Flow (UDF). -### Current navigation graph +--- -image +## 2. Integrated Architectural Perspective +The project utilizes a **Feature-Layered Architecture**. Each feature is encapsulated within its own package, maintaining a clean internal separation between UI (Compose) and Logic (ViewModels), while sharing a common Core/Data foundation. +### 2.1 UI & Feature Layers (View) +The UI is composed of stateless screens and modular components that observe state from their respective ViewModels. -[**Rho.Studio®**](https://rho.studio/) +- **`MainActivity.kt`**: The application's core orchestrator. Manages the high-level `NavHost`, coordinates the global `LoadingOverlay`, and synchronizes navigation via `SessionManager`. +- **Authentication Feature (`features/auth/`)**: + - `LoginScreen.kt`: The main entry point for user authentication. + - `LoginEmailField.kt` / `LoginPasswordField.kt`: Specialized inputs with built-in validation and security logic. +- **Home & Dashboard Feature (`features/home/`)**: + - `HomeScreen.kt`: The primary post-auth landing page. + - `ServiceList.kt` / `ServiceItem.kt`: Adaptive components for dynamic content delivery. +- **Common UI Feature (`features/common/`)**: + - `PageHeader.kt` / `PageFooter.kt`: Shared layouts that provide global context and actions (e.g., Logout). + +### 2.2 Business Logic & State Layer (ViewModel) +ViewModels act as the bridge between features and the data layer, handling user intent and reactive state. + +- **`BaseViewModel.kt`**: The architectural anchor providing unified loading states, toast messaging, and standardized error handling. +- **`LoginViewModel.kt`**: Manages complex form state and **debounced validation** logic. +- **`HomeViewModel.kt`**: Orchestrates dashboard content lifecycle and session termination. +- **`HeaderViewModel.kt`**: Bridges the `SessionManager` state to common UI components like the `PageHeader`. + +### 2.3 Core Data & Infrastructure Layer +Provides the essential services and "Single Source of Truth" for the entire application. + +- **`SessionManager.kt`**: A singleton coordinator for the application's global authentication state and user profile. +- **`SessionRepository.kt`**: Manages persistent storage and retrieval of session tokens and user data. +- **`Credentials.kt` / `User.kt` / `ServiceModule.kt`**: Strongly typed data models that enforce business rules and schema consistency. + +--- + +## 3. Core Technical Implementations + +### 3.1 State-Driven Reactive Navigation +Navigation is decoupled from direct user input. `MainActivity.kt` observes the `isAuthenticated` state from `SessionManager.kt`. When this state changes, a `LaunchedEffect` executes the transition, ensuring the UI is always a reflection of the underlying session state. + +### 3.2 Performance Optimized Validation +To ensure a smooth typing experience, `LoginViewModel.kt` utilizes **Coroutine Debouncing**. Input validation is deferred until the user pauses for 300ms, minimizing unnecessary UI updates and logic execution. + +### 3.3 Centralized Design System +Managed in `ui/theme/`, the app uses a custom Material 3 implementation. This ensures brand consistency (`RhoRed`, `RhoStrongGray`) is automatically applied to all features through a unified `Theme.kt` and `Color.kt` definition. + +--- + +## 4. File Registry & Responsibilities + +| File | Feature | Primary Engineering Responsibility | +| :--- | :--- | :--- | +| `MainActivity.kt` | App Root | Global orchestration, NavHost, and session-based routing. | +| `BaseViewModel.kt` | Core | Shared architectural logic for Loading/Error states. | +| `SessionManager.kt` | Core | Centralized authentication and session lifecycle management. | +| `LoginViewModel.kt` | Auth | Form state management and debounced validation. | +| `HomeScreen.kt` | Home | Root layout for the post-authentication dashboard. | +| `ServiceList.kt` | Home | Efficient grid implementation for platform modules. | +| `Credentials.kt` | Core | Logic-heavy model for credential validation rules. | +| `Theme.kt` | Design | Global Material 3 theme configuration and brand mapping. | + +--- + +## 5. Path to Enterprise-Grade Architecture + +To transition this foundation into a highly scalable, enterprise-grade application, the following architectural advancements are planned to manage complex business flows and transactional integrity. + +### 5.1 Domain Layer & Use Case Implementation +As business logic complexity grows, direct ViewModel-to-Repository interaction is being transitioned to a dedicated **Domain Layer**. +- **Use Cases (Interactors)**: Classes like `LoginUseCase.kt` (`core/domain/usecase/LoginUseCase.kt`) encapsulate specific business rules, making the logic reusable across different ViewModels and testable in isolation. +- **Business Transaction Flow**: A single user action (e.g., "Login") may involve multiple steps: credential validation -> token acquisition -> user profile synchronization. These are managed as atomic transactions within the Domain Layer. +- **Best Practice**: [Android Guide to the Domain Layer](https://developer.android.com/topic/architecture/domain-layer) + +### 5.2 Advanced Data Flow & Synchronization +Enterprise apps require robust data handling beyond simple memory state. +- **Repository Pattern**: Refined `SessionRepository.kt` and future repositories will implement a **Single Source of Truth (SSOT)** strategy, coordinating between local storage (Room) and remote APIs (Retrofit). +- **Reactive Stream Transactions**: Utilizing **Kotlin Flow** for end-to-end reactive streams. Transactions are modeled as immutable states flowing from the Data Layer to the UI. +- **Best Practice**: [Data Layer with Repositories](https://developer.android.com/topic/architecture/data-layer) + +### 5.3 Scalability & Reliability Standards +- **Dependency Injection (Hilt)**: Moving from manual singleton management to **Dagger Hilt** for better decoupling and automated lifecycle management. +- **Modularization**: Splitting the current feature packages into independent Gradle modules (`:feature:auth`, `:feature:home`, `:core:data`) to improve build times and enforce strict visibility boundaries. +- **Best Practice**: [Guide to App Modularization](https://developer.android.com/topic/modularization) + +--- + +## 6. References & Standards +- **MAD (Modern Android Development)**: Adhering to official [Android Architecture Guidelines](https://developer.android.com/topic/architecture). +- **Jetpack Compose Best Practices**: Following [UDF (Unidirectional Data Flow)](https://developer.android.com/jetpack/compose/architecture#udf) principles for state management. +- **Clean Architecture**: Implementing principles from Robert C. Martin to maintain a high degree of testability and independence from external libraries. [Clean Architecture Reference](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html) + +--- +**[Rho.Studio®](https://rho.studio/) - Engineering Department** - Contact [alexis.tercero@rho.studio](mailto:alexis.tercero@rho.studio) diff --git a/app/build.gradle.kts b/app/build.gradle.kts index b26cc37..cc9120e 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -2,7 +2,6 @@ plugins { alias(libs.plugins.android.application) alias(libs.plugins.kotlin.compose) alias(libs.plugins.kotlin.parcelize) - alias(libs.plugins.legacy.kapt) } android { @@ -35,8 +34,6 @@ android { buildFeatures { compose = true - dataBinding = true - viewBinding = true // Optional but recommended } sourceSets { @@ -66,15 +63,16 @@ dependencies { implementation(libs.androidx.core.ktx) implementation(libs.androidx.lifecycle.runtime.ktx) + implementation(libs.androidx.lifecycle.viewmodel.compose) implementation(libs.androidx.activity.compose) implementation(platform(libs.androidx.compose.bom)) implementation(libs.androidx.ui) implementation(libs.androidx.ui.graphics) implementation(libs.androidx.ui.tooling.preview) implementation(libs.androidx.material3) - implementation(libs.androidx.fragment.ktx) - implementation(libs.androidx.navigation.fragment.ktx) - implementation(libs.androidx.navigation.ui.ktx) + implementation(libs.androidx.compose.material.icons.extended) + implementation(libs.androidx.compose.runtime.livedata) + implementation(libs.androidx.navigation.compose) implementation(libs.gson) implementation(libs.material) testImplementation(libs.junit) diff --git a/app/src/main/java/com/rho/studio/ui/MainActivity.kt b/app/src/main/java/com/rho/studio/ui/MainActivity.kt index 6faf781..1bd3030 100644 --- a/app/src/main/java/com/rho/studio/ui/MainActivity.kt +++ b/app/src/main/java/com/rho/studio/ui/MainActivity.kt @@ -10,189 +10,136 @@ * File: MainActivity.kt * Author: Alexis Tercero * Email: alexis.tercero@rho.studio - * Date: 2026-07-20 + * Date: 2026-07-29 * ========================================================================== * Description: - * This activity follows the "Single Activity" architecture pattern, acting as the - * main orchestrator for fragment navigation and global state management. + * The primary entry point for the RHO Studio application, migrated to + * pure Jetpack Compose. + * Screen Assembly: Built LoginScreen and HomeScreen to unify the components. + * Main Entry Point: Migrated MainActivity to ComponentActivity. + * Compose Navigation: Implemented a NavHost in MainActivity to handle routing + * based on SessionManager state, replacing nav_graph.xml. * ========================================================================== */ package com.rho.studio.ui import android.os.Bundle -import android.util.Log -import android.view.View import android.widget.Toast -import androidx.appcompat.app.AppCompatActivity -import androidx.databinding.DataBindingUtil +import androidx.activity.ComponentActivity +import androidx.activity.compose.setContent +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.livedata.observeAsState +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier import androidx.lifecycle.ViewModelProvider -import androidx.navigation.NavController -import androidx.navigation.fragment.NavHostFragment +import androidx.navigation.compose.NavHost +import androidx.navigation.compose.composable +import androidx.navigation.compose.rememberNavController import com.rho.studio.ui.core.manager.SessionManager -import com.rho.studio.ui.databinding.ActivityMainBinding -import com.rho.studio.ui.features.auth.LoginFragment +import com.rho.studio.ui.features.auth.LoginScreen import com.rho.studio.ui.features.auth.LoginViewModel -import com.rho.studio.ui.features.home.HomeFragment +import com.rho.studio.ui.features.home.HomeScreen +import com.rho.studio.ui.features.home.HomeViewModel +import com.rho.studio.ui.ui.theme.UITheme -/** - * The primary entry point and root container for the RHO Studio application. - * - * This activity follows the "Single Activity" architecture pattern, acting as the - * main orchestrator for fragment navigation and global state management. - * - * ### Key Responsibilities: - * 1. **Initialization:** Bootstraps the [SessionManager] and core ViewModels. - * 2. **Authentication Routing:** Observes [SessionManager.isAuthenticated] to - * automatically toggle between the login flow and the home dashboard. - * 3. **Global Error Handling:** Implements a top-level [Thread.UncaughtExceptionHandler] - * to log and display fatal crashes during development. - * 4. **Resource Management:** Ensures the [SessionManager] is cleaned up during - * the activity destruction to prevent memory leaks. - * - * ### UI Components: - * - Uses [ActivityMainBinding] for layout management. - * - Hosts fragments within the `main_container` (ID: R.id.main_container). - * - Manages a global progress indicator synchronized with [SessionManager.isLoading]. - */ -class MainActivity : AppCompatActivity() { +class MainActivity : ComponentActivity() { - private lateinit var binding: ActivityMainBinding private lateinit var sessionManager: SessionManager private lateinit var loginViewModel: LoginViewModel - private lateinit var navController: NavController - private var isNavGraphReady = false + private lateinit var homeViewModel: HomeViewModel override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) - try { - // Set a default error handler - Thread.setDefaultUncaughtExceptionHandler { thread, throwable -> - Log.e("MainActivityCrash", "Uncaught exception", throwable) - // Show error in a Toast (might not work if UI thread is dead) - runOnUiThread { - Toast.makeText( - this, - "Crash: ${throwable.message}", - Toast.LENGTH_LONG - ).show() - } - } - - initializeBinding() - initializeManagers() - setupObservers() + initializeManagers() - // Removed showInitialScreen() as handleAuthStateChange - // will be triggered by the SessionManager observer automatically. - } catch (e: Exception) { - Log.e("MainActivity", "Initialization failed", e) - Toast.makeText(this, "Error: ${e.message}", Toast.LENGTH_LONG).show() - finish() + setContent { + UITheme { + MainContent() + } } } - override fun onSaveInstanceState(outState: Bundle) { - super.onSaveInstanceState(outState) - outState.putBoolean("is_initialized", true) - } - - private fun initializeBinding() { - binding = DataBindingUtil.setContentView(this, R.layout.activity_main) - binding.lifecycleOwner = this - - val navHostFragment = supportFragmentManager - .findFragmentById(R.id.main_container) as NavHostFragment - navController = navHostFragment.navController - } - private fun initializeManagers() { SessionManager.init(applicationContext) sessionManager = SessionManager.getInstance() loginViewModel = ViewModelProvider(this)[LoginViewModel::class.java] - binding.sessionManager = sessionManager - } - - private fun setupObservers() { - // Wait for session check before deciding initial route - sessionManager.isSessionChecked.observe(this) { isChecked -> - if (isChecked) { - handleAuthStateChange(sessionManager.isAuthenticatedSync()) - } else { - // Show loading while checking - binding.progressBar.visibility = View.VISIBLE - } - } - - sessionManager.isAuthenticated.observe(this) { isAuthenticated -> - // Only handle subsequent changes if graph is already ready - if (isNavGraphReady) { - handleAuthStateChange(isAuthenticated) - } - } - - sessionManager.isLoading.observe(this) { isLoading -> - // Combine with isSessionChecked logic - if (sessionManager.isSessionChecked.value == true) { - binding.progressBar.visibility = if (isLoading) View.VISIBLE else View.GONE - } - } - + homeViewModel = ViewModelProvider(this)[HomeViewModel::class.java] + sessionManager.error.observe(this) { error -> error?.let { - android.widget.Toast.makeText(this, it, Toast.LENGTH_LONG).show() + Toast.makeText(this, it, Toast.LENGTH_LONG).show() sessionManager.clearError() } } } - private fun showLoginScreen() { - val currentDest = navController.currentDestination?.id - if (currentDest != null && currentDest != R.id.loginFragment) { - navController.navigate(R.id.action_homeFragment_to_loginFragment) - } - } + @Composable + private fun MainContent() { + val navController = rememberNavController() + val isSessionChecked by sessionManager.isSessionChecked.observeAsState(false) + val isAuthenticated by sessionManager.isAuthenticated.observeAsState(false) + val isLoading by sessionManager.isLoading.observeAsState(false) - private fun showHomeScreen() { - val currentDest = navController.currentDestination?.id - if (currentDest != null && currentDest != R.id.homeFragment) { - navController.navigate(R.id.action_loginFragment_to_homeFragment) + if (!isSessionChecked) { + LoadingScreen() + return } - } - private fun handleAuthStateChange(isAuthenticated: Boolean) { - Log.d("MainActivity", "Auth state change: isAuthenticated = $isAuthenticated") - - if (!isNavGraphReady) { - setupNavGraph(isAuthenticated) - isNavGraphReady = true - // Hide initial loading - binding.progressBar.visibility = if (sessionManager.isLoading.value == true) - View.VISIBLE else View.GONE - } else { + // Handle navigation based on auth state + LaunchedEffect(isAuthenticated) { if (isAuthenticated) { - showHomeScreen() - loginViewModel.resetForm() + navController.navigate("home") { + popUpTo("login") { inclusive = true } + } } else { - showLoginScreen() + loginViewModel.resetForm() + navController.navigate("login") { + popUpTo("home") { inclusive = true } + } } } - } - /** - * Set up the Navigation Graph programmatically to avoid the "Start Destination" flicker. - */ - private fun setupNavGraph(isAuthenticated: Boolean) { - val navInflater = navController.navInflater - val graph = navInflater.inflate(R.navigation.nav_graph) + Box(modifier = Modifier.fillMaxSize()) { + NavHost( + navController = navController, + startDestination = if (isAuthenticated) "home" else "login" + ) { + composable("login") { + LoginScreen(viewModel = loginViewModel) + } + composable("home") { + HomeScreen(homeViewModel = homeViewModel) + } + } - // Choose start destination based on authentication state - graph.setStartDestination(if (isAuthenticated) R.id.homeFragment else R.id.loginFragment) - - navController.graph = graph + if (isLoading) { + LoadingOverlay() + } + } } - fun getLoginViewModel(): LoginViewModel = loginViewModel + @Composable + private fun LoadingScreen() { + Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { + CircularProgressIndicator() + } + } + + @Composable + private fun LoadingOverlay() { + Box( + modifier = Modifier.fillMaxSize(), + contentAlignment = Alignment.Center + ) { + CircularProgressIndicator() + } + } override fun onDestroy() { super.onDestroy() diff --git a/app/src/main/java/com/rho/studio/ui/core/base/BaseFragment.kt b/app/src/main/java/com/rho/studio/ui/core/base/BaseFragment.kt deleted file mode 100644 index 18aaa72..0000000 --- a/app/src/main/java/com/rho/studio/ui/core/base/BaseFragment.kt +++ /dev/null @@ -1,220 +0,0 @@ -/** - * ██████╗ ██╗ ██╗ ██████╗ ███████╗████████╗██╗ ██╗██████╗ ██╗ ██████╗ - * ██╔══██╗██║ ██║██╔═══██╗ ██╔════╝╚══██╔══╝██║ ██║██╔══██╗██║██╔═══██╗ - * ██████╔╝███████║██║ ██║ ███████╗ ██║ ██║ ██║██║ ██║██║██║ ██║ - * ██╔══██╗██╔══██║██║ ██║ ╚════██║ ██║ ██║ ██║██║ ██║██║██║ ██║ - * ██║ ██║██║ ██║╚██████╔╝ ███████║ ██║ ╚██████╔╝██████╔╝██║╚██████╔╝ - * ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═════╝ - * - * ============================================================================================== - * File: BaseFragment.kt - * Author: Alexis Tercero - * Email: alexis.tercero@rho.studio - * Date: 2026-07-15 - * ============================================================================================== - * Description: - * A generic base class for [Fragment]s that utilize DataBinding and BaseViewModel. - * ============================================================================================== - */ -package com.rho.studio.ui.core.base - -import android.os.Bundle -import android.view.LayoutInflater -import android.view.View -import android.view.ViewGroup -import android.widget.Toast -import androidx.annotation.LayoutRes -import androidx.databinding.DataBindingUtil -import androidx.databinding.ViewDataBinding -import androidx.fragment.app.Fragment -import androidx.lifecycle.ViewModel -import com.rho.studio.ui.core.manager.SessionManager - -/** - * BaseFragment - Base class for all feature fragments - * - * A generic base class for [Fragment]s that utilize DataBinding and [BaseViewModel]. - * - * This base class standardizes the fragment lifecycle, enforces memory leak prevention - * for view bindings, and provides common hooks for initialization and observation. - * - * ### Key Features: - * 1. **Automated DataBinding:** Inflates the layout and attaches the ViewModel automatically. - * 2. **Lifecycle Safety:** Manages the backing property for [_binding] to prevent - * memory leaks by nulling it out in [onDestroyView]. - * 3. **Session Integration:** Provides lazy access to the global [SessionManager]. - * 4. **Standardized Workflow:** Defines a clear execution order: Binding -> [initializeViews] -> [setupObservers]. - * - * ### How to implement: - * ```kotlin - * class LoginFragment : BaseFragment() { - * override val viewModel: LoginViewModel by viewModels() - * override val layoutId: Int = R.layout.fragment_login - * override val bindingVariable: Int = BR.viewModel - * - * override fun initializeViews() { - * binding.loginButton.setOnClickListener { ... } - * } - * } - * ``` - * - * @param T The specific [ViewDataBinding] class generated for the fragment's layout. - * @param VM The [ViewModel] class associated with this fragment. - */ -abstract class BaseFragment : Fragment() { - - // ==================== ABSTRACT PROPERTIES ==================== - - /**It declares a read-only property named viewModel of type VM - * (the specific ViewModel type provided when the subclass is created).*/ - protected abstract val viewModel: VM - - @get:LayoutRes - protected abstract val layoutId: Int - - protected abstract val bindingVariable: Int - - // ==================== BINDING WITH MEMORY LEAK PROTECTION ==================== - - private var _binding: T? = null - - /** - * Protected binding property - safe access only between onCreateView and onDestroyView - * Throws IllegalStateException if accessed outside this window - */ - protected val binding: T - get() = _binding ?: throw IllegalStateException( - "Cannot access binding after onDestroyView or before onCreateView" - ) - - // ==================== OPTIONAL DEPENDENCIES ==================== - - /** - * SessionManager - lazy initialized, only created if accessed - * Made open so fragments can override if needed - */ - protected open val sessionManager: SessionManager by lazy { - SessionManager.getInstance() - } - - // ==================== LIFECYCLE METHODS ==================== - - final override fun onCreateView( - inflater: LayoutInflater, - container: ViewGroup?, - savedInstanceState: Bundle? - ): View { - //backing property - _binding = DataBindingUtil.inflate(inflater, layoutId, container, false) - - /** snippet is used in - * Android Data Binding to connect your layout views to a data source - * (usually a ViewModel) and ensure the UI reflects changes immediately. - * */ - with(binding) { - /**layout uses LiveData, the binding needs a lifecycle owner to observe that data. - * Without this line, LiveData changes in your ViewModel - * will not automatically update the UI*/ - lifecycleOwner = viewLifecycleOwner - setVariable(bindingVariable, viewModel) - executePendingBindings() // Immediate UI update - } - - return binding.root - } - - /** - * Set up views and observers in this method - */ - override fun onViewCreated(view: View, savedInstanceState: Bundle?) { - super.onViewCreated(view, savedInstanceState) - setupCommonObservers() - initializeViews() - setupObservers() - } - - /** - * Critical for memory leak prevention - */ - final override fun onDestroyView() { - cleanupBinding() - super.onDestroyView() - _binding = null - } - - /** - * Sets up automatic observation of common ViewModel LiveData. - * This eliminates boilerplate in child fragments. - */ - private fun setupCommonObservers() { - // Loading state - override onLoadingStateChanged for custom UI - viewModel.isLoading.observe(viewLifecycleOwner) { isLoading -> - onLoadingStateChanged(isLoading) - } - - // Error messages - automatically shown and cleared - viewModel.error.observe(viewLifecycleOwner) { error -> - error?.let { - onError(it) - viewModel.clearError() - } - } - - // Toast messages - automatically shown and cleared - viewModel.toastMessage.observe(viewLifecycleOwner) { message -> - message?.let { - onToastMessage(it) - viewModel.clearToastMessage() - } - } - } - - // ==================== EXTENSION POINTS FOR CHILD FRAGMENTS ==================== - - /** - * Called after binding is set up - use for view initialization - * Examples: setting up RecyclerView, adapters, click listeners - */ - protected open fun initializeViews() {} - - /** - * Called after initializeViews - use for LiveData observers - * Separated from initializeViews for better organization - */ - protected open fun setupObservers() {} - - /** - * Optional cleanup method for fragments that need to release resources - * Called before binding is nulled - */ - protected open fun cleanupBinding() { - // Override in child fragments if needed - } - - // ==================== UTILITY METHODS ==================== - - /** Called when loading state changes - override for custom loading UI */ - protected open fun onLoadingStateChanged(isLoading: Boolean) {} - - /** Called when an error occurs - override for custom error handling */ - protected open fun onError(message: String) { - Toast.makeText(requireContext(), message, Toast.LENGTH_LONG).show() - } - - /** Called for toast messages - override for custom toast behavior */ - protected open fun onToastMessage(message: String) { - Toast.makeText(requireContext(), message, Toast.LENGTH_SHORT).show() - } - - /** - * Check if binding is available (between onCreateView and onDestroyView) - */ - protected fun isBindingAvailable(): Boolean = _binding != null - - /** - * Safely execute code that requires binding - */ - protected fun withBinding(block: (T) -> Unit) { - _binding?.let(block) - } -} \ No newline at end of file diff --git a/app/src/main/java/com/rho/studio/ui/features/auth/LoginFragment.kt b/app/src/main/java/com/rho/studio/ui/features/auth/LoginFragment.kt deleted file mode 100644 index c0b37b6..0000000 --- a/app/src/main/java/com/rho/studio/ui/features/auth/LoginFragment.kt +++ /dev/null @@ -1,91 +0,0 @@ -/** - * ██████╗ ██╗ ██╗ ██████╗ ███████╗████████╗██╗ ██╗██████╗ ██╗ ██████╗ - * ██╔══██╗██║ ██║██╔═══██╗ ██╔════╝╚══██╔══╝██║ ██║██╔══██╗██║██╔═══██╗ - * ██████╔╝███████║██║ ██║ ███████╗ ██║ ██║ ██║██║ ██║██║██║ ██║ - * ██╔══██╗██╔══██║██║ ██║ ╚════██║ ██║ ██║ ██║██║ ██║██║██║ ██║ - * ██║ ██║██║ ██║╚██████╔╝ ███████║ ██║ ╚██████╔╝██████╔╝██║╚██████╔╝ - * ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═════╝ - * - * ============================================================================================== - * File: LoginFragment.kt - * Author: Alexis Tercero - * Email: alexis.tercero@rho.studio - * Date: 2026-07-16 - * ============================================================================================== - * LoginFragment serves as the primary orchestration layer for the authentication feature. - * It acts as a parent container that manages the lifecycle, state observation, - * and composition of specialized login components. It inherits from BaseFragment - * to leverage standardized ViewBinding and ViewModel integration. - * ============================================================================================== - */ -package com.rho.studio.ui.features.auth - -import android.view.View -import androidx.fragment.app.viewModels -import com.rho.studio.ui.BR -import com.rho.studio.ui.R -import com.rho.studio.ui.core.base.BaseFragment -import com.rho.studio.ui.databinding.FragmentLoginBinding -import com.rho.studio.ui.features.auth.components.LoginButtonFragment -import com.rho.studio.ui.features.auth.components.LoginEmailFragment -import com.rho.studio.ui.features.auth.components.LoginPasswordFragment - - -/** - * LoginFragment - Main container for authentication - * - * Feature: auth - * - * Responsibilities: - * • Reusability: Individual login components can be reused in other flows - * (e.g., Registration). - * • Separation of Concerns: LoginFragment manages the "How" (layout/navigation), - * while child fragments handle the "What" (specific inputs). - * - * 1. Fragment Composition - * The fragment initializes the UI by embedding three core sub-components - * into designated containers within fragment_login.xml: - * •LoginEmailFragment: Handles email input and validation. - * •LoginPasswordFragment: Handles password input and visibility. - * •LoginButtonFragment: Handles the submission trigger. - * 2. State Observation - * It observes the LoginViewModel to react to the following states: - * •Toast Messages: Short-lived UI feedback (e.g., "Welcome back"). - * •Errors: Long-lived feedback for failed authentication attempts. - * •Loading State: Toggles the visibility of a global ProgressBar - * to block interaction during network requests. - * 3. Lifecycle Management - * •Initialization: - * Uses childFragmentManager to transactionally inject components - * once the fragment is attached. - * •Cleanup: - * Ensures that transient UI states (like error messages or toasts) - * are cleared from the ViewModel when the view is destroyed - * to prevent stale data on return. - */ -class LoginFragment : BaseFragment() { - - override val viewModel: LoginViewModel by viewModels() - override val layoutId: Int = R.layout.fragment_login - override val bindingVariable: Int = BR.viewModel - - override fun initializeViews() { - if (isAdded) { - setupChildFragments() - } - } - - override fun cleanupBinding() { - // Enforce clean slate policy defined in feature docs - viewModel.clearToastMessage() - viewModel.clearError() - } - private fun setupChildFragments() { - childFragmentManager.beginTransaction().apply { - replace(R.id.email_container, LoginEmailFragment()) - replace(R.id.password_container, LoginPasswordFragment()) - replace(R.id.button_container, LoginButtonFragment()) - commitAllowingStateLoss() - } - } -} \ No newline at end of file diff --git a/app/src/main/java/com/rho/studio/ui/features/auth/LoginScreen.kt b/app/src/main/java/com/rho/studio/ui/features/auth/LoginScreen.kt new file mode 100644 index 0000000..b5a43bf --- /dev/null +++ b/app/src/main/java/com/rho/studio/ui/features/auth/LoginScreen.kt @@ -0,0 +1,101 @@ +/** + * ██████╗ ██╗ ██╗ ██████╗ ███████╗████████╗██╗ ██╗██████╗ ██╗ ██████╗ + * ██╔══██╗██║ ██║██╔═══██╗ ██╔════╝╚══██╔══╝██║ ██║██╔══██╗██║██╔═══██╗ + * ██████╔╝███████║██║ ██║ ███████╗ ██║ ██║ ██║██║ ██║██║██║ ██║ + * ██╔══██╗██╔══██║██║ ██║ ╚════██║ ██║ ██║ ██║██║ ██║██║██║ ██║ + * ██║ ██║██║ ██║╚██████╔╝ ███████║ ██║ ╚██████╔╝██████╔╝██║╚██████╔╝ + * ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═════╝ + * + * ============================================================================ + * File: LoginScreen.kt + * Author: Alexis Tercero + * Email: alexis.tercero@rho.studio + * Date: 2026-07-29 + * ============================================================================ + * Description: Implementation of the Login screen using Jetpack Compose and + * MVVM architecture. + * + * Features: + * - State Management: Utilizes LiveData observed as Compose State for reactive + * UI updates (e.g., loading states, input validation). + * - Unidirectional Data Flow (UDF): Events are passed from the UI to the + * ViewModel, while State flows down from the ViewModel to the Composables. + * - Component Modularization: Extracts input fields and buttons into dedicated + * sub-components for reusability and cleaner code structure. + * - Theming: Integrates custom branding colors (RhoRed, SilverGray) via + * gradient backgrounds and Material3 typography. + * ============================================================================ + */ +package com.rho.studio.ui.features.auth + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.livedata.observeAsState +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.rho.studio.ui.R +import com.rho.studio.ui.features.auth.components.LoginButton +import com.rho.studio.ui.features.auth.components.LoginEmailField +import com.rho.studio.ui.features.auth.components.LoginPasswordField +import com.rho.studio.ui.ui.theme.Black +import com.rho.studio.ui.ui.theme.RhoRed +import com.rho.studio.ui.ui.theme.RhoStrongGray +import com.rho.studio.ui.ui.theme.SilverGray +import com.rho.studio.ui.ui.theme.White + +@Composable +fun LoginScreen( + viewModel: LoginViewModel, + modifier: Modifier = Modifier +) { + val isLoading by viewModel.isLoading.observeAsState(false) + + Box( + modifier = modifier + .fillMaxSize() + .background( + brush = Brush.verticalGradient( + colors = listOf( + RhoRed, + SilverGray, + Black + ) + ) + ) + .padding(24.dp), + contentAlignment = Alignment.Center + ) { + Column( + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text( + text = stringResource(R.string.app_name), + fontSize = 32.sp, + fontWeight = FontWeight.Bold, + color = Color.Black + ) + Spacer(modifier = Modifier.height(48.dp)) + LoginEmailField(viewModel = viewModel) + Spacer(modifier = Modifier.height(16.dp)) + LoginPasswordField(viewModel = viewModel) + Spacer(modifier = Modifier.height(24.dp)) + LoginButton(viewModel = viewModel) + } + } +} diff --git a/app/src/main/java/com/rho/studio/ui/features/auth/LoginViewModel.kt b/app/src/main/java/com/rho/studio/ui/features/auth/LoginViewModel.kt index 52e3434..cfa794b 100644 --- a/app/src/main/java/com/rho/studio/ui/features/auth/LoginViewModel.kt +++ b/app/src/main/java/com/rho/studio/ui/features/auth/LoginViewModel.kt @@ -10,13 +10,14 @@ * File: LoginViewModel.kt * Author: Alexis Tercero * Email: alexis.tercero@rho.studio - * Date: 2026-07-16 + * Date: 2026-07-29 * ============================================================================ * Description: * The LoginViewModel manages the state and business logic for the - * Authentication screen, leveraging the Rho Studio BaseViewModel architecture. - * It handles user input validation, manages asynchronous login requests - * via SessionManager, and exposes reactive UI states using LiveData. + * Authentication screen in a pure Jetpack Compose environment. + * It leverages the Rho Studio BaseViewModel architecture to handle + * user input validation, asynchronous login requests via SessionManager, + * and reactive UI states. * * •Extends: com.rho.studio.ui.core.base.BaseViewModel * •Dependencies: @@ -24,12 +25,14 @@ * •Credentials: A data model encapsulating email and password logic. * * Core Logic Flows - * Real-time Validation + * State-Driven Input + * •email / password: Uses Compose `mutableStateOf` to provide + * immediate, observable reactivity for the UI layer. + * Real-time & Debounced Validation * •onEmailChanged() / onPasswordChanged(): - * Triggered on every keystroke. - * •Updates the credentials model and - * immediately evaluates validation rules - * (blank checks, email regex, password length). + * Triggered on every keystroke, updating the state immediately. + * •300ms Debounce: Logic moved from Fragments to the ViewModel, + * ensuring validation is only performed after the user pauses typing. * Authentication Process * •Trigger: onLoginClick() performs final validation and guards * against concurrent attempts using the base loading state. @@ -44,52 +47,67 @@ * Relies on BaseViewModel's automated job tracking and cleanup * to prevent memory leaks without manual cancellation logic. * •State Reset: - * resetForm() provides a clean slate for the UI. + * resetForm() provides a clean, secure slate for the UI by + * clearing Compose states and the underlying model. * ============================================================================ */ package com.rho.studio.ui.features.auth +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.setValue import androidx.lifecycle.LiveData import androidx.lifecycle.MutableLiveData +import androidx.lifecycle.viewModelScope import com.rho.studio.ui.core.base.BaseViewModel import com.rho.studio.ui.core.manager.SessionManager import com.rho.studio.ui.core.model.Credentials import kotlinx.coroutines.Job +import kotlinx.coroutines.delay +import kotlinx.coroutines.launch class LoginViewModel : BaseViewModel() { - // ==================== DEPENDENCIES ==================== - private val sessionManager = SessionManager.getInstance() private var loginJob: Job? = null - + private var emailDebounceJob: Job? = null + private var passwordDebounceJob: Job? = null // ==================== FORM STATE ==================== - + var email by mutableStateOf("") + private set + var password by mutableStateOf("") + private set val credentials = Credentials() - // ==================== UI STATE ==================== - private val _emailError = MutableLiveData() val emailError: LiveData = _emailError - private val _passwordError = MutableLiveData() val passwordError: LiveData = _passwordError - private val _isFormValid = MutableLiveData(false) val isFormValid: LiveData = _isFormValid - // ==================== FORM VALIDATION ==================== - fun onEmailChanged(email: String) { + this.email = email credentials.email = email - validateEmail() - validateForm() + + emailDebounceJob?.cancel() + emailDebounceJob = viewModelScope.launch { + delay(300) + validateEmail() + validateForm() + } } fun onPasswordChanged(password: String) { + this.password = password credentials.password = password - validatePassword() - validateForm() + + passwordDebounceJob?.cancel() + passwordDebounceJob = viewModelScope.launch { + delay(300) + validatePassword() + validateForm() + } } private fun validateEmail() { @@ -113,7 +131,6 @@ class LoginViewModel : BaseViewModel() { } // ==================== ACTIONS ==================== - fun onLoginClick() { // Guard against multiple concurrent login attempts if (isLoading.value == true) return @@ -152,8 +169,9 @@ class LoginViewModel : BaseViewModel() { } // ==================== UTILITY METHODS ==================== - fun resetForm() { + email = "" + password = "" credentials.clear() _emailError.value = null _passwordError.value = null diff --git a/app/src/main/java/com/rho/studio/ui/features/auth/components/LoginButton.kt b/app/src/main/java/com/rho/studio/ui/features/auth/components/LoginButton.kt new file mode 100644 index 0000000..c715b8a --- /dev/null +++ b/app/src/main/java/com/rho/studio/ui/features/auth/components/LoginButton.kt @@ -0,0 +1,57 @@ +/** + * ██████╗ ██╗ ██╗ ██████╗ ███████╗████████╗██╗ ██╗██████╗ ██╗ ██████╗ + * ██╔══██╗██║ ██║██╔═══██╗ ██╔════╝╚══██╔══╝██║ ██║██╔══██╗██║██╔═══██╗ + * ██████╔╝███████║██║ ██║ ███████╗ ██║ ██║ ██║██║ ██║██║██║ ██║ + * ██╔══██╗██╔══██║██║ ██║ ╚════██║ ██║ ██║ ██║██║ ██║██║██║ ██║ + * ██║ ██║██║ ██║╚██████╔╝ ███████║ ██║ ╚██████╔╝██████╔╝██║╚██████╔╝ + * ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═════╝ + * + * ============================================================================ + * File: LoginButton.kt (composable UI) + * Author: Alexis Tercero + * Email: alexis.tercero@rho.studio + * Date: 2026-07-29 + * ============================================================================ + * Description: A custom Jetpack Compose button component for the Login screen. + * It observes the LoginViewModel state to handle validation logic + * and loading states, automatically disabling interaction and + * updating its UI when a login attempt is in progress. + * ============================================================================ + */ +package com.rho.studio.ui.features.auth.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.livedata.observeAsState +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp +import com.rho.studio.ui.R +import com.rho.studio.ui.features.auth.LoginViewModel +import com.rho.studio.ui.ui.theme.RhoRed + +@Composable +fun LoginButton( + viewModel: LoginViewModel, + modifier: Modifier = Modifier +) { + val isFormValid by viewModel.isFormValid.observeAsState(false) + val isLoading by viewModel.isLoading.observeAsState(false) + + Button( + onClick = { viewModel.onLoginClick() }, + modifier = modifier + .fillMaxWidth() + .height(56.dp), + enabled = isFormValid && !isLoading, + colors = ButtonDefaults.buttonColors(containerColor = RhoRed) + ) { + Text(text = stringResource(if (isLoading) R.string.rho_studio_app else R.string.login)) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/rho/studio/ui/features/auth/components/LoginButtonFragment.kt b/app/src/main/java/com/rho/studio/ui/features/auth/components/LoginButtonFragment.kt deleted file mode 100644 index 78d2c95..0000000 --- a/app/src/main/java/com/rho/studio/ui/features/auth/components/LoginButtonFragment.kt +++ /dev/null @@ -1,111 +0,0 @@ -/** - * ██████╗ ██╗ ██╗ ██████╗ ███████╗████████╗██╗ ██╗██████╗ ██╗ ██████╗ - * ██╔══██╗██║ ██║██╔═══██╗ ██╔════╝╚══██╔══╝██║ ██║██╔══██╗██║██╔═══██╗ - * ██████╔╝███████║██║ ██║ ███████╗ ██║ ██║ ██║██║ ██║██║██║ ██║ - * ██╔══██╗██╔══██║██║ ██║ ╚════██║ ██║ ██║ ██║██║ ██║██║██║ ██║ - * ██║ ██║██║ ██║╚██████╔╝ ███████║ ██║ ╚██████╔╝██████╔╝██║╚██████╔╝ - * ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═════╝ - * - * ============================================================================================== - * File: LoginButtonFragment.kt - * Author: Alexis Tercero - * Email: alexis.tercero@rho.studio - * Date: 2026-07-16 - * ============================================================================================== - * Description: Manages the primary action button and loading - * state for the login flow. - * ============================================================================================== - */ -package com.rho.studio.ui.features.auth.components - -import android.os.Bundle -import android.view.View -import android.widget.Toast -import androidx.databinding.BindingAdapter -import androidx.fragment.app.viewModels -import androidx.lifecycle.lifecycleScope -import com.rho.studio.ui.BR -import com.rho.studio.ui.R -import com.rho.studio.ui.core.base.BaseFragment -import com.rho.studio.ui.databinding.FragmentLoginButtonBinding -import com.rho.studio.ui.features.auth.LoginViewModel -import kotlinx.coroutines.launch - -/** - * LoginEmailFragment - Reusable email input component - * - * Feature: auth - * Purpose: Manages the primary action button and loading - * state for the login flow. - * - * This fragment acts as a reactive component within the Auth module. It synchronizes - * the button's enabled state with form validation and displays progress indicators - * during asynchronous login operations. - * - * ### Key Behaviors: - * 1. **Shared State:** Scoped to the parent fragment via [requireParentFragment] to - * interact with the shared [LoginViewModel]. - * 2. **Reactive UI:** Automatically enables/disables the login button based on - * [LoginViewModel.isFormValid] and [LoginViewModel.isLoading]. - * 3. **Visual Feedback:** Manages the visibility of a progress bar during the - * authentication network simulation. - * 4. **Binding Adapters:** Provides a static [showToast] adapter to allow the XML - * layout to reactively trigger system toasts based on ViewModel messages. - * - * ### Usage in XML: - * ```xml - *