Enable autofill on login form (#451)

* Enable autofill on login form * Fix lint errors * Use theme color
LemmyNet · Jun 7, 2023 · fa32d22 · fa32d22
1 parent 76fa69e
commit fa32d22
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/app/src/main/java/com/jerboa/Utils.kt b/app/src/main/java/com/jerboa/Utils.kt
@@ -21,12 +21,21 @@ import androidx.compose.material3.TabPosition
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.snapshots.SnapshotStateList
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.autofill.AutofillNode
+import androidx.compose.ui.autofill.AutofillType
+import androidx.compose.ui.composed
 import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.layout.boundsInWindow
 import androidx.compose.ui.layout.layout
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalAutofill
+import androidx.compose.ui.platform.LocalAutofillTree
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -51,7 +60,6 @@ import java.net.URL
 import java.text.DecimalFormat
 import java.util.*
 import kotlin.math.abs
-import kotlin.math.log10
 import kotlin.math.pow
 
 val prettyTime = PrettyTime(Locale.getDefault())
@@ -814,3 +822,28 @@ fun getDepthFromComment(comment: Comment?): Int? {
 fun nsfwCheck(postView: PostView): Boolean {
     return postView.post.nsfw || postView.community.nsfw
 }
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun Modifier.onAutofill(vararg autofillType: AutofillType, onFill: (String) -> Unit): Modifier = composed {
+    val autofillNode = AutofillNode(
+        autofillTypes = autofillType.toList(),
+        onFill = onFill,
+    )
+    LocalAutofillTree.current += autofillNode
+
+    val autofill = LocalAutofill.current
+
+    this
+        .onGloballyPositioned {
+            autofillNode.boundingBox = it.boundsInWindow()
+        }
+        .onFocusChanged { focusState ->
+            autofill?.run {
+                if (focusState.isFocused) {
+                    requestAutofillForNode(autofillNode)
+                } else {
+                    cancelAutofillForNode(autofillNode)
+                }
+            }
+        }
+}
diff --git a/app/src/main/java/com/jerboa/ui/components/login/Login.kt b/app/src/main/java/com/jerboa/ui/components/login/Login.kt
@@ -2,6 +2,7 @@
 
 package com.jerboa.ui.components.login
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
@@ -17,7 +18,10 @@ import androidx.compose.material3.ExposedDropdownMenuDefaults.TrailingIcon
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.autofill.AutofillType
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
@@ -29,11 +33,13 @@ import androidx.navigation.compose.rememberNavController
 import com.jerboa.DEFAULT_LEMMY_INSTANCES
 import com.jerboa.datatypes.api.Login
 import com.jerboa.db.Account
+import com.jerboa.onAutofill
 
 val BANNED_INSTANCES = listOf("wolfballs.com")
 
 @Composable
 fun MyTextField(
+    modifier: Modifier = Modifier,
     label: String,
     placeholder: String? = null,
     text: String,
@@ -50,17 +56,20 @@ fun MyTextField(
             keyboardType = KeyboardType.Text,
             autoCorrect = false,
         ),
+        modifier = modifier,
     )
 }
 
 @Composable
 fun PasswordField(
+    modifier: Modifier = Modifier,
     password: String,
     onValueChange: (String) -> Unit,
 ) {
     var passwordVisibility by remember { mutableStateOf(false) }
 
     OutlinedTextField(
+        modifier = modifier,
         value = password,
         onValueChange = onValueChange,
         singleLine = true,
@@ -83,6 +92,7 @@ fun PasswordField(
     )
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun LoginForm(
     modifier: Modifier = Modifier,
@@ -94,6 +104,7 @@ fun LoginForm(
     var password by rememberSaveable { mutableStateOf("") }
     val instanceOptions = DEFAULT_LEMMY_INSTANCES
     var expanded by remember { mutableStateOf(false) }
+    var wasAutofilled by remember { mutableStateOf(false) }
 
     val isValid =
         instance.isNotEmpty() && username.isNotEmpty() && password.isNotEmpty() &&
@@ -149,12 +160,25 @@ fun LoginForm(
                 }
             }
         }
+
         MyTextField(
+            modifier = Modifier
+                .background(if (wasAutofilled) MaterialTheme.colorScheme.surfaceVariant else Color.Transparent)
+                .onAutofill(AutofillType.Username, AutofillType.EmailAddress) {
+                    username = it
+                    wasAutofilled = true
+                },
             label = "Email or Username",
             text = username,
             onValueChange = { username = it },
         )
         PasswordField(
+            modifier = Modifier
+                .background(if (wasAutofilled) MaterialTheme.colorScheme.surfaceVariant else Color.Transparent)
+                .onAutofill(AutofillType.Password) {
+                    password = it
+                    wasAutofilled = true
+                },
             password = password,
             onValueChange = { password = it },
         )