Skip to content

Password update to use BasicSecureTextField #357

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 1, 2024
Merged

Password update to use BasicSecureTextField #357

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f875462
Code snippet for Compose doc at https://developer.android.com/quick-g…
thedmail Sep 16, 2024
cca4341
Code snippet for Compose doc at https://developer.android.com/quick-g…
thedmail Sep 16, 2024
638b01a
Apply Spotless
thedmail Sep 16, 2024
abb4277
Fix email input snippet
riggaroo Sep 27, 2024
718d8b3
Merge branch 'main' into validate-input
riggaroo Sep 27, 2024
1cefa75
Migrate to use BasicSecureTextField.
riggaroo Sep 27, 2024
774667f
Updated to use BasicSecureTextField.
riggaroo Sep 27, 2024
3a6763f
Apply Spotless
riggaroo Sep 27, 2024
334d1e3
Merge branch 'main' into feature/password
riggaroo Oct 1, 2024
fd5f95d
Apply Spotless
riggaroo Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 40 additions & 23 deletions compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,13 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicSecureTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.text.input.TextObfuscationMode
import androidx.compose.foundation.text.selection.DisableSelection
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.icons.Icons
Expand Down Expand Up @@ -812,7 +817,7 @@ fun PhoneNumber() {
// [END android_compose_text_auto_format_phone_number_textfieldconfig]

// [START android_compose_text_auto_format_phone_number_transformtext]
class NanpVisualTransformation() : VisualTransformation {
class NanpVisualTransformation : VisualTransformation {

override fun filter(text: AnnotatedString): TransformedText {
val trimmed = if (text.text.length >= 10) text.text.substring(0..9) else text.text
Expand Down Expand Up @@ -862,31 +867,43 @@ val Purple = Color(0xFF800080)
// [START android_compose_text_showhidepassword]
@Composable
fun PasswordTextField() {
var password by rememberSaveable { mutableStateOf("") }
val state = remember { TextFieldState() }
var showPassword by remember { mutableStateOf(false) }
val passwordVisualTransformation = remember { PasswordVisualTransformation() }

TextField(
value = password,
onValueChange = { password = it },
label = { Text("Enter password") },
visualTransformation = if (showPassword) {
VisualTransformation.None
BasicSecureTextField(
state = state,
textObfuscationMode =
if (showPassword) {
TextObfuscationMode.Visible
} else {
passwordVisualTransformation
TextObfuscationMode.RevealLastTyped
},
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
modifier = Modifier.fillMaxWidth(),
trailingIcon = {
Icon(
if (showPassword) {
Icons.Filled.Visibility
} else {
Icons.Filled.VisibilityOff
},
contentDescription = "Toggle password visibility",
modifier = Modifier.clickable { showPassword = !showPassword }
)
modifier = Modifier
.fillMaxWidth()
.padding(6.dp)
.border(1.dp, Color.LightGray, RoundedCornerShape(6.dp))
.padding(6.dp),
Copy link
Contributor

@dturner dturner Oct 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the padding modifier is set twice.

Copy link
Collaborator Author

@riggaroo riggaroo Oct 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is intentional to add the padding after and before the border :)

decorator = { innerTextField ->
Box(modifier = Modifier.fillMaxWidth()) {
Box(
modifier = Modifier
.align(Alignment.CenterStart)
.padding(start = 16.dp, end = 48.dp)
) {
innerTextField()
}
Icon(
if (showPassword) {
Icons.Filled.Visibility
} else {
Icons.Filled.VisibilityOff
},
contentDescription = "Toggle password visibility",
modifier = Modifier
.align(Alignment.CenterEnd)
.requiredSize(48.dp).padding(16.dp)
.clickable { showPassword = !showPassword }
)
}
}
)
}
Expand Down