BIT-1018: Add visual transformation to generated string field (#340)

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenReadOnlyTextFieldWithActions.kt

@@ -14,6 +14,7 @@ import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.text
 import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.x8bit.bitwarden.R
@@ -28,7 +29,9 @@ import com.x8bit.bitwarden.R
  * @param label Label for the text field.
  * @param value Current text in the text field.
  * @param modifier [Modifier] applied to this layout composable.
- * @param readOnly If `true`, user input is disabled for the text field, making it read-only.
+ * @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
+ * instead of wrapping onto multiple lines.
+ * @param visualTransformation Transforms the visual representation of the input [value].
  * @param actions A lambda containing the set of actions (usually icons or similar) to display
  * next to the text field. This lambda extends [RowScope],
  * providing flexibility in the layout definition.
@@ -38,7 +41,8 @@ fun BitwardenReadOnlyTextFieldWithActions(
     label: String,
     value: String,
     modifier: Modifier = Modifier,
-    readOnly: Boolean = true,
+    singleLine: Boolean = true,
+    visualTransformation: VisualTransformation = VisualTransformation.None,
     actions: @Composable RowScope.() -> Unit = {},
 ) {
     Row(
@@ -54,10 +58,12 @@ fun BitwardenReadOnlyTextFieldWithActions(
                     contentDescription = "$label, $value"
                     text = AnnotatedString(label)
                 },
-            readOnly = readOnly,
+            readOnly = true,
+            singleLine = singleLine,
             label = label,
             value = value,
             onValueChange = {},
+            visualTransformation = visualTransformation,
         )
         BitwardenRowOfActions(actions)
     }
@@ -69,7 +75,6 @@ private fun BitwardenReadOnlyTextFieldWithActions_preview() {
     BitwardenReadOnlyTextFieldWithActions(
         label = "Username",
         value = "john.doe",
-        readOnly = true,
         actions = {
             Icon(
                 painter = painterResource(id = R.drawable.ic_tooltip),

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenTextField.kt

@@ -8,6 +8,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import com.x8bit.bitwarden.ui.platform.components.model.IconResource
 
@@ -26,6 +27,7 @@ import com.x8bit.bitwarden.ui.platform.components.model.IconResource
  * instead of wrapping onto multiple lines.
  * @param readOnly `true` if the input should be read-only and not accept user interactions.
  * @param enabled Whether or not the text field is enabled.
+ * @param visualTransformation Transforms the visual representation of the input [value].
  * @param keyboardType the preferred type of keyboard input.
  */
 @Composable
@@ -41,6 +43,7 @@ fun BitwardenTextField(
     readOnly: Boolean = false,
     enabled: Boolean = true,
     keyboardType: KeyboardType = KeyboardType.Text,
+    visualTransformation: VisualTransformation = VisualTransformation.None,
 ) {
     OutlinedTextField(
         modifier = modifier,
@@ -71,6 +74,7 @@ fun BitwardenTextField(
         singleLine = singleLine,
         readOnly = readOnly,
         keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
+        visualTransformation = visualTransformation,
     )
 }
 

app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt

@@ -62,6 +62,7 @@ import com.x8bit.bitwarden.ui.platform.components.BitwardenTextField
 import com.x8bit.bitwarden.ui.platform.components.BitwardenWideSwitch
 import com.x8bit.bitwarden.ui.platform.components.model.IconResource
 import com.x8bit.bitwarden.ui.platform.components.model.TooltipData
+import com.x8bit.bitwarden.ui.platform.components.util.nonLetterColorVisualTransformation
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 import com.x8bit.bitwarden.ui.tools.feature.generator.GeneratorState.MainType.Passcode.PasscodeType.Passphrase.Companion.PASSPHRASE_MAX_NUMBER_OF_WORDS
 import com.x8bit.bitwarden.ui.tools.feature.generator.GeneratorState.MainType.Passcode.PasscodeType.Passphrase.Companion.PASSPHRASE_MIN_NUMBER_OF_WORDS
@@ -271,6 +272,7 @@ private fun GeneratedStringItem(
     BitwardenReadOnlyTextFieldWithActions(
         label = "",
         value = generatedText,
+        singleLine = false,
         actions = {
             BitwardenIconButtonWithResource(
                 iconRes = IconResource(
@@ -287,6 +289,7 @@ private fun GeneratedStringItem(
                 onClick = onRegenerateClick,
             )
         },
+        visualTransformation = nonLetterColorVisualTransformation(),
         modifier = Modifier.padding(horizontal = 16.dp),
     )
 }