feat: Add autofill for login

Author: dev-Fabi

src/main/kotlin/org/datepollsystems/waiterrobot/mediator/ui/common/AutofillModifier.kt

@@ -0,0 +1,34 @@
+package org.datepollsystems.waiterrobot.mediator.ui.common
+
+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.focus.onFocusChanged
+import androidx.compose.ui.layout.boundsInWindow
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalAutofill
+import androidx.compose.ui.platform.LocalAutofillTree
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun Modifier.autofill(
+    vararg autofillTypes: AutofillType,
+    onFill: ((String) -> Unit),
+) = composed {
+    val autofill = LocalAutofill.current
+    val autofillNode = AutofillNode(onFill = onFill, autofillTypes = autofillTypes.toList())
+    LocalAutofillTree.current += autofillNode
+
+    this.onGloballyPositioned {
+        autofillNode.boundingBox = it.boundsInWindow()
+    }.onFocusChanged { focusState ->
+        autofill?.run {
+            if (focusState.isFocused) {
+                requestAutofillForNode(autofillNode)
+            } else {
+                cancelAutofillForNode(autofillNode)
+            }
+        }
+    }
+}

src/main/kotlin/org/datepollsystems/waiterrobot/mediator/ui/login/LoginScreen.kt

@@ -11,16 +11,20 @@ import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
 import androidx.compose.runtime.*
 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.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import org.datepollsystems.waiterrobot.mediator.ui.common.LoadableScreen
+import org.datepollsystems.waiterrobot.mediator.ui.common.autofill
 import org.datepollsystems.waiterrobot.mediator.ui.common.onEnterKeyDown
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun LoginScreen(vm: LoginViewModel) {
     val state = vm.state.collectAsState().value
@@ -64,7 +68,9 @@ fun LoginScreen(vm: LoginViewModel) {
             }
 
             OutlinedTextField(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .autofill(AutofillType.Username, AutofillType.EmailAddress) { mail = it },
                 value = mail,
                 isError = state.loginErrorMessage != null,
                 singleLine = true,
@@ -76,7 +82,8 @@ fun LoginScreen(vm: LoginViewModel) {
             OutlinedTextField(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .onEnterKeyDown { vm.doLogin(mail, password) },
+                    .onEnterKeyDown { vm.doLogin(mail, password) }
+                    .autofill(AutofillType.Password) { password = it },
                 value = password,
                 singleLine = true,
                 isError = state.loginErrorMessage != null,
@@ -97,7 +104,7 @@ fun LoginScreen(vm: LoginViewModel) {
                     IconButton(onClick = { passwordVisible = !passwordVisible }) {
                         Icon(imageVector = image, description)
                     }
-                }
+                },
             )
 
             OutlinedButton(