syaroful/Muhamad_Syaroful_Anam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement password visibility toggle in AppPasswordField

Browse Source
This commit is contained in:
Cutiful 2025-06-05 13:15:50 +07:00
parent 2b4c3cd55a
commit 3cc84e0957
1 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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