Add autofill support

Author: hypergonial

composeApp/src/commonMain/kotlin/com/hypergonial/chat/view/composables/Autofill.kt

@@ -0,0 +1,41 @@
+package com.hypergonial.chat.view.composables
+
+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
+
+// Taken from https://bryanherbst.com/2021/04/13/compose-autofill/
+
+/** Add autofill support to a composable. This is typically applied to text inputs.
+*
+* @param autofillTypes The types of autofill data that this field can accept.
+* @param onFill A callback that is called when the autofill data is filled into the field.
+*  */
+@OptIn(ExperimentalComposeUiApi::class)
+fun Modifier.autofill(
+    autofillTypes: List<AutofillType>,
+    onFill: ((String) -> Unit),
+) = composed {
+    val autofill = LocalAutofill.current
+    val autofillNode = AutofillNode(onFill = onFill, autofillTypes = autofillTypes)
+    LocalAutofillTree.current += autofillNode
+
+    this.onGloballyPositioned {
+        autofillNode.boundingBox = it.boundsInWindow()
+    }.onFocusChanged { focusState ->
+        autofill?.run {
+            if (focusState.isFocused) {
+                requestAutofillForNode(autofillNode)
+            } else {
+                cancelAutofillForNode(autofillNode)
+            }
+        }
+    }
+}

composeApp/src/commonMain/kotlin/com/hypergonial/chat/view/content/LoginContent.kt

@@ -28,7 +28,9 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 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.focus.FocusDirection
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.input.ImeAction
@@ -44,8 +46,7 @@ import com.hypergonial.chat.view.composables.ActionText
 import com.hypergonial.chat.view.composables.ChatButton
 import com.hypergonial.chat.view.composables.FullScreenProgressIndicator
 import com.hypergonial.chat.view.composables.PasswordTextField
-import com.hypergonial.chat.view.sendNotification
-import kotlin.random.Random
+import com.hypergonial.chat.view.composables.autofill
 import org.jetbrains.compose.resources.painterResource
 
 @Composable
@@ -63,6 +64,7 @@ fun LoginBottomBar(component: LoginComponent) {
     }
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun LoginContent(component: LoginComponent) {
     val state by component.data.subscribeAsState()
@@ -92,7 +94,10 @@ fun LoginContent(component: LoginComponent) {
             OutlinedTextField(
                 value = state.username,
                 isError = state.loginFailed,
-                modifier = Modifier.width(300.dp).padding(0.dp, 5.dp),
+                modifier =
+                    Modifier.width(300.dp)
+                        .padding(0.dp, 5.dp)
+                        .autofill(listOf(AutofillType.Username), onFill = { component.onUsernameChange(it) }),
                 singleLine = true,
                 enabled = !state.isLoggingIn,
                 onValueChange = { component.onUsernameChange(username = it) },
@@ -113,6 +118,10 @@ fun LoginContent(component: LoginComponent) {
                 value = state.password.expose(),
                 isError = state.loginFailed,
                 enabled = !state.isLoggingIn,
+                modifier =
+                    Modifier.width(300.dp)
+                        .padding(0.dp, 5.dp)
+                        .autofill(listOf(AutofillType.Password), onFill = { component.onPasswordChange(it) }),
                 label = { Text("Password") },
                 placeholder = { Text("Enter your password...") },
                 onValueChange = { component.onPasswordChange(password = it) },
@@ -123,7 +132,6 @@ fun LoginContent(component: LoginComponent) {
                             if (state.canLogin) component.onLoginAttempt()
                         }
                     ),
-                modifier = Modifier.width(300.dp).padding(0.dp, 5.dp),
             )
 
             ChatButton(
@@ -137,7 +145,7 @@ fun LoginContent(component: LoginComponent) {
                 Text("Login")
             }
 
-/*            ChatButton(
+            /*            ChatButton(
                 onClick = {
                     sendNotification {
                         id = Random.nextInt(0, Int.MAX_VALUE)

composeApp/src/commonMain/kotlin/com/hypergonial/chat/view/content/RegisterContent.kt

@@ -32,7 +32,9 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 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.focus.FocusDirection
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.input.ImeAction
@@ -46,6 +48,7 @@ import com.hypergonial.chat.view.components.RegisterComponent
 import com.hypergonial.chat.view.composables.ChatButton
 import com.hypergonial.chat.view.composables.FullScreenProgressIndicator
 import com.hypergonial.chat.view.composables.PasswordTextField
+import com.hypergonial.chat.view.composables.autofill
 
 @Composable
 fun RegisterTopBar(component: RegisterComponent) {
@@ -66,6 +69,7 @@ fun RegisterTopBar(component: RegisterComponent) {
     }
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun RegisterContent(component: RegisterComponent) {
     val state by component.data.subscribeAsState()
@@ -89,7 +93,10 @@ fun RegisterContent(component: RegisterComponent) {
 
             OutlinedTextField(
                 value = state.username,
-                modifier = Modifier.width(300.dp).padding(0.dp, 5.dp),
+                modifier =
+                    Modifier.width(300.dp)
+                        .padding(0.dp, 5.dp)
+                        .autofill(listOf(AutofillType.NewUsername), onFill = { component.onPasswordChange(it) }),
                 singleLine = true,
                 isError = state.usernameErrors.isNotEmpty(),
                 onValueChange = { component.onUsernameChange(it) },
@@ -135,7 +142,10 @@ fun RegisterContent(component: RegisterComponent) {
                         keyboardType = KeyboardType.Password,
                         imeAction = ImeAction.Next,
                     ),
-                modifier = Modifier.width(300.dp).padding(0.dp, 5.dp),
+                modifier =
+                    Modifier.width(300.dp)
+                        .padding(0.dp, 5.dp)
+                        .autofill(listOf(AutofillType.NewPassword), onFill = { component.onPasswordChange(it) }),
             )
 
             for (error in state.passwordErrors) {
@@ -162,7 +172,10 @@ fun RegisterContent(component: RegisterComponent) {
                             }
                         }
                     ),
-                modifier = Modifier.width(300.dp).padding(0.dp, 5.dp),
+                modifier =
+                    Modifier.width(300.dp)
+                        .padding(0.dp, 5.dp)
+                        .autofill(listOf(AutofillType.NewPassword), onFill = { component.onPasswordChange(it) }),
             )
 
             ChatButton(