Create separate PasswordField

app/src/main/java/eu/steffo/twom/ui/login/LoginActivityControl.kt

@@ -7,6 +7,10 @@ import androidx.compose.material3.Button
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
@@ -21,6 +25,10 @@ fun LoginActivityControl(
     onSelectHomeserver: () -> Unit = {},
     onComplete: () -> Unit = {},
 ) {
+
+    var username by rememberSaveable { mutableStateOf("") }
+    var password by rememberSaveable { mutableStateOf("") }
+
     Column(modifier) {
         Row(BASE_PADDING) {
             Text(LocalContext.current.getString(R.string.login_text))
@@ -37,8 +45,11 @@ fun LoginActivityControl(
         Row(BASE_PADDING) {
             TextField(
                 modifier = Modifier.fillMaxWidth(),
-                value = "",
-                onValueChange = {},
+                value = username,
+                onValueChange = { username = it },
+                label = {
+                    Text(LocalContext.current.getString(R.string.login_username_label))
+                },
                 placeholder = {
                     Text(LocalContext.current.getString(R.string.login_username_placeholder))
                 },
@@ -48,10 +59,13 @@ fun LoginActivityControl(
             )
         }
         Row(BASE_PADDING) {
-            TextField(
+            PasswordField(
                 modifier = Modifier.fillMaxWidth(),
-                value = "",
-                onValueChange = {},
+                value = password,
+                onValueChange = { password = it },
+                label = {
+                    Text(LocalContext.current.getString(R.string.login_password_label))
+                },
                 placeholder = {
                     Text(LocalContext.current.getString(R.string.login_password_placeholder))
                 },

app/src/main/java/eu/steffo/twom/ui/login/PasswordField.kt

@@ -0,0 +1,108 @@
+package eu.steffo.twom.ui.login
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.FavoriteBorder
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldColors
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
+import eu.steffo.twom.R
+
+@Composable
+@Preview
+fun PasswordField(
+    modifier: Modifier = Modifier,
+    value: String = "",
+    onValueChange: (String) -> Unit = {},
+    enabled: Boolean = true,
+    readOnly: Boolean = false,
+    textStyle: TextStyle = LocalTextStyle.current,
+    label: @Composable (() -> Unit)? = null,
+    placeholder: @Composable (() -> Unit)? = null,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    prefix: @Composable (() -> Unit)? = null,
+    suffix: @Composable (() -> Unit)? = null,
+    supportingText: @Composable (() -> Unit)? = null,
+    isError: Boolean = false,
+    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    keyboardActions: KeyboardActions = KeyboardActions.Default,
+    singleLine: Boolean = false,
+    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
+    minLines: Int = 1,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    shape: Shape = TextFieldDefaults.shape,
+    colors: TextFieldColors = TextFieldDefaults.colors()
+) {
+    var showPassword by rememberSaveable { mutableStateOf(false) }
+
+    TextField(
+        modifier = modifier,
+        value = value,
+        onValueChange = onValueChange,
+        enabled = enabled,
+        readOnly = readOnly,
+        textStyle = textStyle,
+        label = label,
+        placeholder = placeholder,
+        leadingIcon = leadingIcon,
+        prefix = prefix,
+        suffix = suffix,
+        supportingText = supportingText,
+        isError = isError,
+        keyboardOptions = keyboardOptions,
+        keyboardActions = keyboardActions,
+        singleLine = singleLine,
+        maxLines = maxLines,
+        minLines = minLines,
+        interactionSource = interactionSource,
+        shape = shape,
+        colors = colors,
+
+        visualTransformation = if(showPassword) VisualTransformation.None else PasswordVisualTransformation(),
+
+        trailingIcon = {
+            IconButton(
+                onClick = {
+                    showPassword = !showPassword
+                }
+            ) {
+                Icon(
+                    // TODO: Replace with better icons when possible
+                    if(showPassword) {
+                        Icons.Filled.Favorite
+                    }
+                    else {
+                        Icons.Filled.FavoriteBorder
+                    },
+                    if(showPassword) {
+                        LocalContext.current.getString(R.string.password_hide)
+                    }
+                    else {
+                        LocalContext.current.getString(R.string.password_show)
+                    }
+                )
+            }
+        }
+    )
+}

app/src/main/res/values/strings.xml

@@ -20,11 +20,15 @@
     <string name="homeserver_title">Select homeserver</string>
     <string name="login_title">Log into Matrix</string>
     <string name="back">Go back</string>
-    <string name="login_text">To use TwoM, you need to log into a Matrix homeserver.</string>
-    <string name="login_complete_text">Continue</string>
+    <string name="login_text">To use TwoM, you need to log into a Matrix homeserver. Currently, TwoM supports only username and password authentication.</string>
+    <string name="login_complete_text">Log in</string>
     <string name="login_selecthomeserver_text">Select homeserver</string>
     <string name="login_username_placeholder">\@steffo:candy.steffo.eu</string>
     <string name="login_username_supporting">The Matrix ID to login as, including the @ symbol and the homeserver name.</string>
-    <string name="login_password_placeholder">••••••••</string>
+    <string name="login_password_placeholder">p4ssw0rd!</string>
     <string name="login_password_supporting">The password of the Matrix account.</string>
+    <string name="login_username_label">Username</string>
+    <string name="login_password_label">Password</string>
+    <string name="password_show">Show password</string>
+    <string name="password_hide">Hide password</string>
 </resources>