Add support for leading icons and multi-line text fields (#292)

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

@@ -40,6 +40,8 @@ import com.x8bit.bitwarden.R
  * @param onValueChange Callback that is triggered when the password changes.
  * @param modifier Modifier for the composable.
  * @param readOnly `true` if the input should be read-only and not accept user interactions.
+ * @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
+ * instead of wrapping onto multiple lines.
  * @param hint optional hint text that will appear below the text input.
  * @param showPasswordTestTag The test tag to be used on the show password button (testing tool).
  * @param autoFocus When set to true, the view will request focus after the first recomposition.
@@ -54,6 +56,7 @@ fun BitwardenPasswordField(
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
     readOnly: Boolean = false,
+    singleLine: Boolean = true,
     hint: String? = null,
     showPasswordTestTag: String? = null,
     autoFocus: Boolean = false,
@@ -70,7 +73,7 @@ fun BitwardenPasswordField(
         } else {
             PasswordVisualTransformation()
         },
-        singleLine = true,
+        singleLine = singleLine,
         readOnly = readOnly,
         keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
         supportingText = hint?.let {
@@ -117,6 +120,8 @@ fun BitwardenPasswordField(
  * @param onValueChange Callback that is triggered when the password changes.
  * @param modifier Modifier for the composable.
  * @param readOnly `true` if the input should be read-only and not accept user interactions.
+ * @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
+ * instead of wrapping onto multiple lines.
  * @param hint optional hint text that will appear below the text input.
  * @param initialShowPassword The initial state of the show/hide password control. A value of
  * `false` (the default) indicates that that password should begin in the hidden state.
@@ -131,6 +136,7 @@ fun BitwardenPasswordField(
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
     readOnly: Boolean = false,
+    singleLine: Boolean = true,
     hint: String? = null,
     initialShowPassword: Boolean = false,
     showPasswordTestTag: String? = null,
@@ -145,6 +151,7 @@ fun BitwardenPasswordField(
         showPasswordChange = { showPassword = !showPassword },
         onValueChange = onValueChange,
         readOnly = readOnly,
+        singleLine = singleLine,
         hint = hint,
         showPasswordTestTag = showPasswordTestTag,
         autoFocus = autoFocus,

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

@@ -25,6 +25,8 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
  * @param onValueChange Callback that is triggered when the password changes.
  * @param modifier Modifier for the composable.
  * @param readOnly `true` if the input should be read-only and not accept user interactions.
+ * @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
+ * instead of wrapping onto multiple lines.
  * @param actions A lambda containing the set of actions (usually icons or similar) to display
  * in the app bar's trailing side. This lambda extends [RowScope], allowing flexibility in
  * defining the layout of the actions.
@@ -36,6 +38,7 @@ fun BitwardenPasswordFieldWithActions(
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
     readOnly: Boolean = false,
+    singleLine: Boolean = false,
     actions: @Composable RowScope.() -> Unit = {},
 ) {
     Row(
@@ -47,6 +50,7 @@ fun BitwardenPasswordFieldWithActions(
             value = value,
             onValueChange = onValueChange,
             readOnly = readOnly,
+            singleLine = singleLine,
             modifier = Modifier
                 .weight(1f)
                 .padding(end = 8.dp),

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

@@ -1,6 +1,7 @@
 package com.x8bit.bitwarden.ui.platform.components
 
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
@@ -8,6 +9,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
+import com.x8bit.bitwarden.ui.platform.components.model.IconResource
 
 /**
  * Component that allows the user to input text. This composable will manage the state of
@@ -18,6 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
  * @param onValueChange callback that is triggered when the input of the text field changes.
  * @param placeholder the optional placeholder to be displayed when the text field is in focus and
  * the [value] is empty.
+ * @param leadingIconResource the optional resource for the leading icon on the text field.
  * @param hint optional hint text that will appear below the text input.
  * @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
  * instead of wrapping onto multiple lines.
@@ -32,6 +35,7 @@ fun BitwardenTextField(
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
     placeholder: String? = null,
+    leadingIconResource: IconResource? = null,
     hint: String? = null,
     singleLine: Boolean = true,
     readOnly: Boolean = false,
@@ -43,6 +47,15 @@ fun BitwardenTextField(
         enabled = enabled,
         label = { Text(text = label) },
         value = value,
+        leadingIcon = leadingIconResource?.let { iconResource ->
+            {
+                Icon(
+                    painter = iconResource.iconPainter,
+                    contentDescription = iconResource.contentDescription,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+        },
         placeholder = placeholder?.let {
             { Text(text = it) }
         },

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

@@ -23,6 +23,8 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
  * @param onValueChange Callback that is triggered when the text content changes.
  * @param modifier [Modifier] applied to this layout composable.
  * @param readOnly `true` if the input should be read-only and not accept user interactions.
+ * @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
+ * instead of wrapping onto multiple lines.
  * @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.
@@ -34,6 +36,7 @@ fun BitwardenTextFieldWithActions(
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
     readOnly: Boolean = false,
+    singleLine: Boolean = true,
     keyboardType: KeyboardType = KeyboardType.Text,
     actions: @Composable RowScope.() -> Unit = {},
 ) {
@@ -47,6 +50,7 @@ fun BitwardenTextFieldWithActions(
             label = label,
             value = value,
             readOnly = readOnly,
+            singleLine = singleLine,
             onValueChange = onValueChange,
             keyboardType = keyboardType,
         )