Sign in ui and view model (#2851)

Nagarjuna0033 · web-flow · commit fc0b40613eab · 2025-07-02T16:46:53.000Z
diff --git a/core/designsystem/src/commonMain/kotlin/org/mifos/mobile/core/designsystem/component/MifosPasswordField.kt b/core/designsystem/src/commonMain/kotlin/org/mifos/mobile/core/designsystem/component/MifosPasswordField.kt
@@ -13,6 +13,9 @@ import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextFieldDefaults
+import androidx.compose.material3.TextFieldColors
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -23,6 +26,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.input.ImeAction
@@ -42,6 +47,9 @@ fun MifosPasswordField(
     showPasswordChange: (Boolean) -> Unit,
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
+    shape: Shape = OutlinedTextFieldDefaults.shape,
+    colors: TextFieldColors = OutlinedTextFieldDefaults.colors(),
+    isError: Boolean = false,
     readOnly: Boolean = false,
     singleLine: Boolean = true,
     hint: String? = null,
@@ -56,6 +64,8 @@ fun MifosPasswordField(
         modifier = modifier
             .tabNavigation()
             .focusRequester(focusRequester),
+        shape = shape,
+        colors = colors,
         label = label,
         value = value,
         onValueChange = onValueChange,
@@ -67,27 +77,33 @@ fun MifosPasswordField(
             },
             singleLine = singleLine,
             readOnly = readOnly,
+            isError = isError,
             keyboardOptions = KeyboardOptions(
                 keyboardType = keyboardType,
                 imeAction = imeAction,
             ),
             keyboardActions = keyboardActions,
             errorText = hint,
             trailingIcon = {
-                IconButton(
-                    onClick = { showPasswordChange.invoke(!showPassword) },
-                ) {
-                    val imageVector = if (showPassword) {
-                        MifosIcons.OutlinedVisibilityOff
-                    } else {
-                        MifosIcons.OutlinedVisibility
-                    }
-
+                if (isError) {
                     Icon(
-                        modifier = Modifier.semantics { showPasswordTestTag?.let { testTag = it } },
-                        imageVector = imageVector,
-                        contentDescription = "togglePassword",
+                        imageVector = MifosIcons.EyeFilled,
+                        contentDescription = "Error",
+                        tint = MaterialTheme.colorScheme.error,
                     )
+                } else {
+                    IconButton(
+                        onClick = { showPasswordChange.invoke(!showPassword) },
+                    ) {
+                        val imageVector = if (showPassword) MifosIcons.EyeOff else MifosIcons.Eye
+
+                        Icon(
+                            modifier = Modifier.semantics { showPasswordTestTag?.let { testTag = it } },
+                            imageVector = imageVector,
+                            contentDescription = "togglePassword",
+                            tint = Color.Unspecified,
+                        )
+                    }
                 }
             },
         ),
@@ -103,6 +119,9 @@ fun MifosPasswordField(
     value: String,
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
+    shape: Shape = OutlinedTextFieldDefaults.shape,
+    colors: TextFieldColors = OutlinedTextFieldDefaults.colors(),
+    isError: Boolean = false,
     readOnly: Boolean = false,
     singleLine: Boolean = true,
     hint: String? = null,
@@ -117,6 +136,9 @@ fun MifosPasswordField(
     MifosPasswordField(
         modifier = modifier,
         label = label,
+        shape = shape,
+        colors = colors,
+        isError = isError,
         value = value,
         showPassword = showPassword,
         showPasswordChange = { showPassword = !showPassword },
diff --git a/core/designsystem/src/commonMain/kotlin/org/mifos/mobile/core/designsystem/component/MifosTextField.kt b/core/designsystem/src/commonMain/kotlin/org/mifos/mobile/core/designsystem/component/MifosTextField.kt
@@ -21,12 +21,16 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldColors
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.semantics.contentDescription
@@ -35,13 +39,16 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.VisualTransformation
 import org.mifos.mobile.core.designsystem.icon.MifosIcons
+import org.mifos.mobile.core.designsystem.theme.MifosTypography
 
 @Composable
 fun MifosOutlinedTextField(
     value: String,
     onValueChange: (String) -> Unit,
     label: String,
     modifier: Modifier = Modifier,
+    shape: Shape = OutlinedTextFieldDefaults.shape,
+    colors: TextFieldColors = TextFieldDefaults.colors(),
     textStyle: TextStyle = LocalTextStyle.current,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     config: MifosTextFieldConfig = MifosTextFieldConfig(),
@@ -51,6 +58,8 @@ fun MifosOutlinedTextField(
     val showIcon by rememberUpdatedState(value.isNotEmpty())
 
     OutlinedTextField(
+        shape = shape,
+        colors = colors,
         value = value,
         label = { Text(text = label) },
         onValueChange = onValueChange,
@@ -87,7 +96,7 @@ fun MifosOutlinedTextField(
                 Text(
                     modifier = Modifier.testTag("errorTag"),
                     text = it,
-                    style = MaterialTheme.typography.labelSmall,
+                    style = MifosTypography.bodySmall,
                     color = MaterialTheme.colorScheme.error,
                 )
             }
@@ -146,7 +155,7 @@ fun MifosTextField(
                 Text(
                     modifier = Modifier.testTag("errorTag"),
                     text = it ?: "",
-                    style = MaterialTheme.typography.labelSmall,
+                    style = MifosTypography.bodySmall,
                     color = MaterialTheme.colorScheme.error,
                 )
             }
diff --git a/core/designsystem/src/commonMain/kotlin/org/mifos/mobile/core/designsystem/icon/MifosIcons.kt b/core/designsystem/src/commonMain/kotlin/org/mifos/mobile/core/designsystem/icon/MifosIcons.kt
@@ -54,7 +54,11 @@ import androidx.compose.material.icons.rounded.Home
 import androidx.compose.material.icons.rounded.SwapHoriz
 import androidx.compose.ui.graphics.vector.ImageVector
 import fluent.ui.system.icons.FluentIcons
+import fluent.ui.system.icons.filled.ErrorCircle
+import fluent.ui.system.icons.filled.Eye
 import fluent.ui.system.icons.regular.CardUi
+import fluent.ui.system.icons.regular.Eye
+import fluent.ui.system.icons.regular.EyeOff
 import fluent.ui.system.icons.regular.Image
 
 object MifosIcons {
@@ -105,4 +109,9 @@ object MifosIcons {
 
     val UploadId = FluentIcons.Regular.CardUi
     val Image = FluentIcons.Regular.Image
+
+    val Eye = FluentIcons.Regular.Eye
+    val EyeOff = FluentIcons.Regular.EyeOff
+    val EyeFilled = FluentIcons.Filled.Eye
+    val ErrorCircle = FluentIcons.Filled.ErrorCircle
 }
diff --git a/feature/auth/build.gradle.kts b/feature/auth/build.gradle.kts
@@ -23,6 +23,7 @@ android {
 kotlin {
     sourceSets {
         commonMain.dependencies {
+            implementation(projects.core.ui)
             implementation(compose.material3)
             implementation(compose.foundation)
             implementation(compose.ui)
diff --git a/feature/auth/src/commonMain/composeResources/values/strings.xml b/feature/auth/src/commonMain/composeResources/values/strings.xml
@@ -61,4 +61,16 @@
     <string name="error_enter_user_name">Please enter your user name</string>
     <string name="error_enter_country">Please enter your country</string>
 
+
+    <string name="feature_sign_in_title">Sign in</string>
+    <string name="feature_sign_in_sub_title">Enter your email and password to log in </string>
+    <string name="feature_sign_in_username_label">Username or Email</string>
+    <string name="feature_sign_in_password_label">Password</string>
+    <string name="feature_sign_in_forgot_password">Forgot Password ?</string>
+    <string name="feature_sign_in_Sign_in">Sign in</string>
+    <string name="feature_sign_in_dont_have_an_account">Don’t have an account?</string>
+    <string name="feature_sign_in_sign_up">Sign up!</string>
+    <string name="feature_sign_in_username_error">Email address not found</string>
+    <string name="feature_sign_in_password_error">Your password is not correct!</string>
+
 </resources>
diff --git a/feature/auth/src/commonMain/kotlin/org/mifos/mobile/feature/auth/login/LogInNavigation.kt b/feature/auth/src/commonMain/kotlin/org/mifos/mobile/feature/auth/login/LogInNavigation.kt
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * See https://github.com/openMF/mobile-mobile/blob/master/LICENSE.md
+ */
+@file:Suppress("MatchingDeclarationName")
+
+package org.mifos.mobile.feature.auth.login
+
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavOptions
+import kotlinx.serialization.Serializable
+import org.mifos.mobile.core.ui.composableWithStayTransitions
+
+@Serializable
+data object LoginRoute
+
+@Suppress("UnusedParameter")
+fun NavController.navigateToLogin(navOptions: NavOptions? = null) {
+    this.navigate(route = LoginRoute, navOptions = navOptions)
+}
+
+@Suppress("UnusedParameter")
+fun NavGraphBuilder.loginDestination(
+    navigateToRegisterScreen: () -> Unit,
+    navigateToPasscodeScreen: () -> Unit,
+) {
+    composableWithStayTransitions<LoginRoute> {
+        LoginScreen(
+            navigateToRegisterScreen = navigateToRegisterScreen,
+            navigateToPasscodeScreen = navigateToPasscodeScreen,
+        )
+    }
+}
diff --git a/feature/auth/src/commonMain/kotlin/org/mifos/mobile/feature/auth/login/LoginScreen.kt b/feature/auth/src/commonMain/kotlin/org/mifos/mobile/feature/auth/login/LoginScreen.kt
diff --git a/feature/auth/src/commonMain/kotlin/org/mifos/mobile/feature/auth/login/LoginViewModel.kt b/feature/auth/src/commonMain/kotlin/org/mifos/mobile/feature/auth/login/LoginViewModel.kt
