Add Navigation

app/build.gradle.kts

@@ -50,6 +50,8 @@ dependencies {
     implementation(libs.androidx.compose.ui.tooling.preview)
     implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.foundation.layout)
+    implementation(libs.androidx.navigation.compose)
+    implementation(libs.androidx.lifecycle.viewmodel.compose)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/com/example/mvvm/MainActivity.kt

@@ -13,8 +13,10 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.compose.rememberNavController
 import com.example.mvvm.ui.login.ui.LoginScreen
 import com.example.mvvm.ui.login.ui.LoginViewModel
+import com.example.mvvm.ui.navigation.AuthNavGraph
 import com.example.mvvm.ui.theme.MVVMTheme
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -26,7 +28,8 @@ class MainActivity : ComponentActivity() {
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
-                    LoginScreen(LoginViewModel())
+                    val navController = rememberNavController()
+                    AuthNavGraph(navController = navController)
                 }
             }
         }

app/src/main/java/com/example/mvvm/ui/forgotPassword/ForgotPasswordScreen.kt

@@ -0,0 +1,17 @@
+package com.example.mvvm.ui.forgotPassword
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+
+@Composable
+fun ForgotPasswordScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.Red),
+    )
+}

app/src/main/java/com/example/mvvm/ui/login/ui/LoginDestination.kt

@@ -0,0 +1,40 @@
+package com.example.mvvm.ui.login.ui
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import com.example.mvvm.R
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import kotlinx.coroutines.launch
+
+sealed interface LoginDestination {
+    data object ForgotPassword : LoginDestination
+}

app/src/main/java/com/example/mvvm/ui/login/ui/loginScreen.kt

@@ -16,6 +16,7 @@ import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
@@ -76,7 +77,12 @@ fun Login(
             Spacer(modifier = Modifier.height(8.dp))
             Password(password) { viewModel.onLoginChanged(email, it) }
             Spacer(modifier = Modifier.padding((8.dp)))
-            ForgotPassword(Modifier.align(Alignment.End)) // column organiza a lo que hay debajo, la propiedad align() de los hijos de una Column espera un Alignment.Horizontal, no un Alignment completo (que es bidimensional).
+            ForgotPassword(
+                modifier = Modifier.align(Alignment.End),
+                onClick = {
+                    viewModel.onClickedForgotPassword()
+                }
+            ) // column organiza a lo que hay debajo, la propiedad align() de los hijos de una Column espera un Alignment.Horizontal, no un Alignment completo (que es bidimensional).
             Spacer(modifier = Modifier.padding((16.dp)))
             LoginButton(enabled ) {
                 coroutine.launch {
@@ -92,18 +98,23 @@ fun Login(
 }
 
 @Composable
-fun ForgotPassword(modifier: Modifier) {
-    Text(
-        text = "olvidaste la contraseña?",
-        modifier = modifier.clickable {},
-        fontSize = 12.sp,
-        fontWeight = FontWeight.Bold, //Negritas
-        color = Color(
-            0xFF0A70C0
-        ),
-
-        )
-
+fun ForgotPassword(
+    modifier: Modifier,
+    onClick: () -> Unit,
+) {
+    TextButton(
+        modifier = modifier,
+        onClick = onClick,
+    ) {
+        Text(
+            text = "olvidaste la contraseña?",
+            fontSize = 12.sp,
+            fontWeight = FontWeight.Bold, //Negritas
+            color = Color(
+                0xFF0A70C0
+            ),
+            )
+    }
 }
 
 @Composable

app/src/main/java/com/example/mvvm/ui/login/ui/loginViewModel.kt

@@ -2,12 +2,20 @@ package com.example.mvvm.ui.login.ui
 
 import android.util.Patterns
 import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import androidx.lifecycle.viewmodel.compose.viewModel
+import kotlinx.coroutines.channels.Channel
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.receiveAsFlow
+import kotlinx.coroutines.launch
 
 class LoginViewModel : ViewModel() {
+    private val _destinations = Channel<LoginDestination>(Channel.BUFFERED)
+    val destinations = _destinations.receiveAsFlow()
+
     private val _email = MutableStateFlow("") // crea un flujo mutable
     val email = _email.asStateFlow() //inmutable creamos ese puente para que la UI pueda verlo
     private val _password = MutableStateFlow("")
@@ -17,6 +25,12 @@ class LoginViewModel : ViewModel() {
     private val _loading = MutableStateFlow(false)
     val loading = _loading.asStateFlow()
 
+    fun onClickedForgotPassword() {
+        viewModelScope.launch {
+            _destinations.send(element = LoginDestination.ForgotPassword)
+        }
+    }
+
     fun onLoginChanged(
         newEmail: String,
         newPassword: String

app/src/main/java/com/example/mvvm/ui/navigation/AuthNavGraph.kt

@@ -0,0 +1,50 @@
+package com.example.mvvm.ui.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.navigation.NavController
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import com.example.mvvm.ui.forgotPassword.ForgotPasswordScreen
+import com.example.mvvm.ui.login.ui.ForgotPassword
+import com.example.mvvm.ui.login.ui.LoginDestination
+import com.example.mvvm.ui.login.ui.LoginScreen
+import com.example.mvvm.ui.login.ui.LoginViewModel
+import com.example.mvvm.ui.registration.RegistrationScreen
+
+@Composable
+internal fun AuthNavGraph(
+    navController: NavHostController,
+) {
+    NavHost(
+        navController = navController,
+        startDestination = AuthScreen.Login.route,
+    ) {
+        composable(route = AuthScreen.Login.route) { backStackEntry ->
+            val viewModel: LoginViewModel = viewModel(viewModelStoreOwner = backStackEntry)
+
+            LoginScreen(
+                viewModel = viewModel,
+            )
+
+            LaunchedEffect(viewModel) {
+                viewModel.destinations.collect { event ->
+                    when (event) {
+                        LoginDestination.ForgotPassword ->
+                            navController.navigate(route = AuthScreen.ForgotPassword.route)
+                    }
+                }
+            }
+
+        }
+        composable(route = AuthScreen.ForgotPassword.route) { backStackEntry ->
+            ForgotPasswordScreen()
+        }
+        composable(route = AuthScreen.Registration.route) { backStackEntry ->
+            RegistrationScreen()
+        }
+    }
+}

app/src/main/java/com/example/mvvm/ui/navigation/AuthScreen.kt

@@ -0,0 +1,20 @@
+package com.example.mvvm.ui.navigation
+
+sealed interface AuthScreen {
+    val route: String
+
+    data object ForgotPassword : AuthScreen {
+        override val route: String
+            get() = "forgot_password"
+    }
+
+    data object Login : AuthScreen {
+        override val route: String
+            get() = "login"
+    }
+
+    data object Registration : AuthScreen {
+        override val route: String
+            get() = "registration"
+    }
+}

app/src/main/java/com/example/mvvm/ui/registration/RegistrationScreen.kt

@@ -0,0 +1,17 @@
+package com.example.mvvm.ui.registration
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+
+@Composable
+internal fun RegistrationScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.Blue),
+    )
+}

gradle/libs.versions.toml

@@ -6,8 +6,10 @@ junit = "4.13.2"
 junitVersion = "1.1.5"
 espressoCore = "3.5.1"
 lifecycleRuntimeKtx = "2.6.1"
+lifecycleViewModelCompose = "2.6.1"
 activityCompose = "1.8.0"
 composeBom = "2024.09.00"
+navigationCompose = "2.7.3"
 foundationLayout = "1.9.4"
 
 [libraries]
@@ -16,6 +18,7 @@ junit = { group = "junit", name = "junit", version.ref = "junit" }
 androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
 androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
 androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
+androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycleViewModelCompose" }
 androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
 androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
 androidx-compose-ui = { group = "androidx.compose.ui", name = "ui" }
@@ -26,6 +29,7 @@ androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-
 androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3" }
 androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "foundationLayout" }
+androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }