refactor: login screen in compose

mifospay/build.gradle

@@ -72,6 +72,8 @@ dependencies {
     implementation("androidx.hilt:hilt-navigation-compose:1.0.0")
     implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
     implementation("androidx.lifecycle:lifecycle-runtime-compose:$lifecycle_version")
+    implementation "androidx.compose.material:material-icons-extended:$compose_version"
+
 
     // ViewModel
     implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"

mifospay/src/main/java/org/mifos/mobilewallet/mifospay/auth/ui/LoginScreen.kt

@@ -4,26 +4,38 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Button
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Text
-import androidx.compose.material.TextField
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Visibility
+import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 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.stringResource
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import org.mifos.mobilewallet.mifospay.R
 import org.mifos.mobilewallet.mifospay.theme.MifosTheme
 import org.mifos.mobilewallet.mifospay.theme.grey
 import org.mifos.mobilewallet.mifospay.theme.styleMedium16sp
@@ -35,8 +47,18 @@ fun LoginScreen(
     login: (username: String, password: String) -> Unit,
     signUp: () -> Unit
 ) {
-    var userName by rememberSaveable { mutableStateOf("") }
-    var password by rememberSaveable { mutableStateOf("") }
+    var userName by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(
+            TextFieldValue("")
+        )
+    }
+    var password by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(
+            TextFieldValue("")
+        )
+    }
+    var passwordVisibility: Boolean by remember { mutableStateOf(false) }
+
     MifosTheme {
         Column(
             modifier = Modifier
@@ -47,46 +69,57 @@ fun LoginScreen(
             horizontalAlignment = Alignment.Start
         ) {
             Text(
-                text = "Login",
+                text = stringResource(id = R.string.login),
                 style = styleMedium30sp
             )
             Text(
                 modifier = Modifier
                     .padding(top = 32.dp),
-                text = "Welcome back!",
+                text = stringResource(id = R.string.welcome_back),
                 style = styleNormal18sp.copy(color = grey)
             )
-            TextField(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 32.dp),
+            Spacer(modifier = Modifier.padding(top = 32.dp))
+            MifosOutlinedTextField(
+                modifier = Modifier.fillMaxWidth(),
                 value = userName,
                 onValueChange = {
                     userName = it
                 },
-                label = { Text("Username") }
+                label = R.string.username
             )
-            TextField(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 16.dp),
+            Spacer(modifier = Modifier.padding(top = 16.dp))
+            MifosOutlinedTextField(
+                modifier = Modifier.fillMaxWidth(),
                 value = password,
                 onValueChange = {
                     password = it
                 },
-                label = { Text("Password") }
+                label = R.string.password,
+                visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
+                trailingIcon = {
+                    val image = if (passwordVisibility)
+                        Icons.Filled.Visibility
+                    else Icons.Filled.VisibilityOff
+                    IconButton(onClick = { passwordVisibility = !passwordVisibility }) {
+                        Icon(imageVector = image, null)
+                    }
+                }
             )
             Button(
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(top = 16.dp),
                 colors = ButtonDefaults.buttonColors(backgroundColor = Color.Black),
-                enabled = userName.isNotEmpty() && password.isNotEmpty(),
+                enabled = userName.text.isNotEmpty() && password.text.isNotEmpty(),
                 onClick = {
-                    login.invoke(userName, password)
-                }
+                    login.invoke(userName.text, password.text)
+                },
+                contentPadding = PaddingValues(12.dp)
             ) {
-                Text(text = "Login", style = styleMedium16sp.copy(color = Color.White))
+                Text(
+                    text = stringResource(id = R.string.login).uppercase(),
+                    style = styleMedium16sp.copy(color = Color.White)
+                )
             }
             // Hide reset password for now
             /*Text(
@@ -121,7 +154,7 @@ fun LoginScreen(
                     modifier = Modifier.clickable {
                         signUp.invoke()
                     },
-                    text = "Sign up.",
+                    text = stringResource(id = R.string.sign_up),
                     style = styleMedium16sp.copy(
                         textDecoration = TextDecoration.Underline,
                     ),

mifospay/src/main/java/org/mifos/mobilewallet/mifospay/auth/ui/MifosOutlineTextField.kt

@@ -0,0 +1,77 @@
+package org.mifos.mobilewallet.mifospay.auth.ui
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+/**
+ * @author Pratyush Singh
+ * @since 21/11/2023
+ */
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MifosOutlinedTextField(
+    value: TextFieldValue,
+    onValueChange: (TextFieldValue) -> Unit,
+    maxLines: Int = 1,
+    modifier: Modifier,
+    singleLine: Boolean = true,
+    icon: Int? = null,
+    label: Int,
+    visualTransformation: VisualTransformation = VisualTransformation.None,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    error: Boolean = false,
+) {
+
+    OutlinedTextField(
+        value = value,
+        onValueChange = onValueChange,
+        label = { Text(stringResource(id = label)) },
+        modifier = modifier,
+        leadingIcon = if (icon != null) {
+            {
+                Image(
+                    painter = painterResource(id = icon),
+                    contentDescription = null,
+                    colorFilter = if (isSystemInDarkTheme()) ColorFilter.tint(Color.White) else ColorFilter.tint(
+                        Color.Black
+                    )
+                )
+            }
+        } else null,
+        trailingIcon = trailingIcon,
+        maxLines = maxLines,
+        singleLine = singleLine,
+        colors = TextFieldDefaults.outlinedTextFieldColors(
+            focusedBorderColor = Color.Black,
+            focusedLabelColor = Color.Black
+        ),
+        textStyle = LocalDensity.current.run {
+            TextStyle(fontSize = 18.sp, color = Color.Black)
+        },
+        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
+        visualTransformation = visualTransformation,
+        isError = error
+    )
+}

mifospay/src/main/res/values/strings.xml

@@ -310,7 +310,8 @@
     <string name="share_receipt">Share Receipt Link</string>
     <string name="default_web_client_id"></string>
     <string name="pay">Pay</string>
-
+    <string name="welcome_back">Welcome back!</string>
+    <string name="sign_up">Sign up.</string>
 
 
 </resources>