feat: implement password visibility toggle in AppPasswordField

agrilinkvocpro/app/src/main/java/com/syaroful/agrilinkvocpro/core/components/AppPasswordField.kt

@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextFieldDefaults
@@ -19,6 +20,8 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -30,17 +33,19 @@ import com.syaroful.agrilinkvocpro.ui.theme.MainGreen
 
 @Composable
 fun AppPasswordField(
-//    modifier: Modifier = Modifier,
     hint: String,
-    keyboardType: KeyboardType
+    keyboardType: KeyboardType,
+    value: String,
+    onValueChange: (String) -> Unit
 ) {
-    var text by remember { mutableStateOf("") }
+    var passwordVisible by remember { mutableStateOf(false) }
+
     OutlinedTextField(
-        value = text,
-        onValueChange = { text = it },
+        value = value,
+        onValueChange = onValueChange,
         modifier = Modifier
             .fillMaxWidth()
-            .padding(16.dp),
+            .padding(horizontal = 16.dp),
         leadingIcon = {
             Icon(
                 painter = painterResource(R.drawable.ic_lock),
@@ -49,12 +54,16 @@ fun AppPasswordField(
             )
         },
         trailingIcon = {
-            Icon(
-                painter = painterResource(R.drawable.ic_visible),
-                contentDescription = "Visible Icon",
-                tint = DarkGrey
-            )
+            val icon = if (passwordVisible) R.drawable.ic_visible else R.drawable.ic_invisible
+            IconButton(onClick = { passwordVisible = !passwordVisible }) {
+                Icon(
+                    painter = painterResource(icon),
+                    contentDescription = if (passwordVisible) "Hide password" else "Show password",
+                    tint = DarkGrey
+                )
+            }
         },
+        visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
         keyboardOptions = KeyboardOptions(
             keyboardType = keyboardType,
             imeAction = ImeAction.Done
@@ -72,7 +81,7 @@ fun AppPasswordField(
                 hint,
                 style = TextStyle(
                     color = LightGrey,
-                    fontSize = 14.sp,
+                    fontSize = 14.sp
                 )
             )
         }
@@ -85,6 +94,8 @@ fun AppPasswordField(
 fun AppPasswordPreview() {
     AppPasswordField(
         hint = "Enter your password",
-        keyboardType = KeyboardType.Password
+        keyboardType = KeyboardType.Password,
+        value = "",
+        onValueChange = {}
     )
 }