Password update to use BasicSecureTextField (#357)

* Code snippet for Compose doc at https://developer.android.com/quick-guides/content/animate-text?hl=en (Animate text character-by-character).

This commit slightly modifies (makes buildable in our repo) the existing code on the current DAC page.

That code, in turn, was BNR's simplified version of Xoogler astamato's Medium article at https://medium.com/androiddevelopers/effective-state-management-for-textfield-in-compose-d6e5b070fbe5

* Code snippet for Compose doc at https://developer.android.com/quick-guides/content/animate-text?hl=en (Animate text character-by-character).

This commit slightly modifies (makes buildable in our repo) the existing code on the current DAC page.

That code, in turn, was BNR's simplified version of Xoogler astamato's Medium article at https://medium.com/androiddevelopers/effective-state-management-for-textfield-in-compose-d6e5b070fbe5

* Apply Spotless

* Fix email input snippet

* Migrate to use BasicSecureTextField.

* Updated to use BasicSecureTextField.

* Apply Spotless

* Apply Spotless

---------

Co-authored-by: dmail <[email protected]>
Co-authored-by: thedmail <[email protected]>
Co-authored-by: riggaroo <[email protected]>

Author: riggaroo

compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt

@@ -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
@@ -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
@@ -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),
+        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 }
+                )
+            }
         }
     )
 }