feat(authenticator): Add support for Compose autofill (#252)

Author: mattcreaser

authenticator/src/main/java/com/amplifyframework/ui/authenticator/locals/LocalAuthenticatorStep.kt

@@ -0,0 +1,10 @@
+package com.amplifyframework.ui.authenticator.locals
+
+import androidx.compose.runtime.compositionLocalOf
+import com.amplifyframework.ui.authenticator.enums.AuthenticatorStep
+
+/**
+ * This composition local supplies the current AuthenticatorStep. This allows descendant composables to tailor
+ * their content to specific steps.
+ */
+internal val LocalAuthenticatorStep = compositionLocalOf<AuthenticatorStep> { AuthenticatorStep.Loading }

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/Authenticator.kt

@@ -31,6 +31,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -56,6 +57,7 @@ import com.amplifyframework.ui.authenticator.SignUpState
 import com.amplifyframework.ui.authenticator.SignedInState
 import com.amplifyframework.ui.authenticator.VerifyUserConfirmState
 import com.amplifyframework.ui.authenticator.VerifyUserState
+import com.amplifyframework.ui.authenticator.locals.LocalAuthenticatorStep
 import com.amplifyframework.ui.authenticator.rememberAuthenticatorState
 import com.amplifyframework.ui.authenticator.util.AuthenticatorMessage
 
@@ -140,31 +142,35 @@ fun Authenticator(
                 Column(
                     modifier = Modifier.verticalScroll(rememberScrollState())
                 ) {
-                    headerContent()
-                    when (targetState) {
-                        is LoadingState -> loadingContent()
-                        is SignInState -> signInContent(targetState)
-                        is SignInConfirmMfaState -> signInConfirmMfaContent(targetState)
-                        is SignInConfirmCustomState -> signInConfirmCustomContent(targetState)
-                        is SignInConfirmNewPasswordState -> signInConfirmNewPasswordContent(
-                            targetState
-                        )
-                        is SignInConfirmTotpCodeState -> signInConfirmTotpCodeContent(targetState)
-                        is SignInContinueWithTotpSetupState -> signInContinueWithTotpSetupContent(targetState)
-                        is SignInContinueWithEmailSetupState -> signInContinueWithEmailSetupContent(targetState)
-                        is SignInContinueWithMfaSetupSelectionState ->
-                            signInContinueWithMfaSetupSelectionContent(targetState)
-                        is SignInContinueWithMfaSelectionState -> signInContinueWithMfaSelectionContent(targetState)
-                        is SignUpState -> signUpContent(targetState)
-                        is PasswordResetState -> passwordResetContent(targetState)
-                        is PasswordResetConfirmState -> passwordResetConfirmContent(targetState)
-                        is ErrorState -> errorContent(targetState)
-                        is SignUpConfirmState -> signUpConfirmContent(targetState)
-                        is VerifyUserState -> verifyUserContent(targetState)
-                        is VerifyUserConfirmState -> verifyUserConfirmContent(targetState)
-                        else -> Unit
+                    CompositionLocalProvider(LocalAuthenticatorStep provides targetState.step) {
+                        headerContent()
+                        when (targetState) {
+                            is LoadingState -> loadingContent()
+                            is SignInState -> signInContent(targetState)
+                            is SignInConfirmMfaState -> signInConfirmMfaContent(targetState)
+                            is SignInConfirmCustomState -> signInConfirmCustomContent(targetState)
+                            is SignInConfirmNewPasswordState -> signInConfirmNewPasswordContent(
+                                targetState
+                            )
+
+                            is SignInConfirmTotpCodeState -> signInConfirmTotpCodeContent(targetState)
+                            is SignInContinueWithTotpSetupState -> signInContinueWithTotpSetupContent(targetState)
+                            is SignInContinueWithEmailSetupState -> signInContinueWithEmailSetupContent(targetState)
+                            is SignInContinueWithMfaSetupSelectionState ->
+                                signInContinueWithMfaSetupSelectionContent(targetState)
+
+                            is SignInContinueWithMfaSelectionState -> signInContinueWithMfaSelectionContent(targetState)
+                            is SignUpState -> signUpContent(targetState)
+                            is PasswordResetState -> passwordResetContent(targetState)
+                            is PasswordResetConfirmState -> passwordResetConfirmContent(targetState)
+                            is ErrorState -> errorContent(targetState)
+                            is SignUpConfirmState -> signUpConfirmContent(targetState)
+                            is VerifyUserState -> verifyUserContent(targetState)
+                            is VerifyUserConfirmState -> verifyUserConfirmContent(targetState)
+                            else -> Unit
+                        }
+                        footerContent()
                     }
-                    footerContent()
                 }
             }
             SnackbarHost(hostState = snackbarState, modifier = Modifier.align(Alignment.BottomCenter))

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/AuthenticatorForm.kt

@@ -48,7 +48,7 @@ internal fun AuthenticatorForm(
     ) {
         state.fields.values.forEach { field ->
             AuthenticatorField(
-                modifier = Modifier.fillMaxWidth().testTag(field.config.key.toString()),
+                modifier = Modifier.fillMaxWidth().testTag(field.config.key.testTag),
                 fieldConfig = field.config,
                 fieldState = field.state,
                 formState = state

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/AuthenticatorLoading.kt

@@ -40,6 +40,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 
 /**
@@ -58,10 +59,7 @@ fun AuthenticatorLoading(modifier: Modifier = Modifier) {
 }
 
 @Composable
-private fun LoadingDot(
-    modifier: Modifier = Modifier,
-    color: Color
-) {
+private fun LoadingDot(modifier: Modifier = Modifier, color: Color) {
     Box(
         modifier = modifier
             .clip(shape = CircleShape)
@@ -101,7 +99,7 @@ internal fun LoadingIndicator(
                 modifier = Modifier
                     .size(dotSize)
                     .aspectRatio(1f)
-                    .offset(y = offset.dp)
+                    .offset { IntOffset(x = 0, y = offset.dp.roundToPx()) }
             )
         }
     }

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/PasswordInputField.kt

@@ -36,6 +36,7 @@ import com.amplifyframework.ui.authenticator.R
 import com.amplifyframework.ui.authenticator.forms.FieldConfig
 import com.amplifyframework.ui.authenticator.forms.MutablePasswordFieldState
 import com.amplifyframework.ui.authenticator.strings.StringResolver
+import com.amplifyframework.ui.authenticator.util.contentTypeForKey
 
 @Composable
 internal fun PasswordInputField(
@@ -55,7 +56,7 @@ internal fun PasswordInputField(
     )
 
     OutlinedTextField(
-        modifier = modifier,
+        modifier = modifier.contentTypeForKey(fieldConfig.key),
         enabled = enabled,
         value = fieldState.content,
         onValueChange = { fieldState.content = it },

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/PasswordResetConfirm.kt

@@ -24,6 +24,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalAutofillManager
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.amplifyframework.auth.AuthCodeDeliveryDetails
@@ -62,12 +64,18 @@ fun PasswordResetConfirm(
 }
 
 @Composable
-fun PasswordResetConfirmFooter(
-    state: PasswordResetConfirmState,
-    modifier: Modifier = Modifier
-) {
+fun PasswordResetConfirmFooter(state: PasswordResetConfirmState, modifier: Modifier = Modifier) {
+    // If we navigate away from the screen via some reason other that submitting the form then cancel any changes
+    // in autofill manager so that user won't be prompted to update their saved password
+    val autofillManager = LocalAutofillManager.current
     Column(modifier = modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
-        TextButton(onClick = { state.moveTo(AuthenticatorStep.SignIn) }) {
+        TextButton(
+            modifier = Modifier.testTag(TestTags.BackToSignInButton),
+            onClick = {
+                autofillManager?.cancel()
+                state.moveTo(AuthenticatorStep.SignIn)
+            }
+        ) {
             Text(stringResource(R.string.amplify_ui_authenticator_button_back_to_signin))
         }
     }

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/PhoneInputField.kt

@@ -64,6 +64,7 @@ import com.amplifyframework.ui.authenticator.forms.FieldConfig
 import com.amplifyframework.ui.authenticator.forms.MutableFieldState
 import com.amplifyframework.ui.authenticator.strings.StringResolver
 import com.amplifyframework.ui.authenticator.util.Region
+import com.amplifyframework.ui.authenticator.util.contentTypeForKey
 import com.amplifyframework.ui.authenticator.util.regionList
 import com.amplifyframework.ui.authenticator.util.regionMap
 import java.util.Locale
@@ -102,7 +103,7 @@ internal fun PhoneInputField(
     }
 
     OutlinedTextField(
-        modifier = modifier,
+        modifier = modifier.contentTypeForKey(fieldConfig.key),
         enabled = enabled,
         value = state.number,
         onValueChange = { state.number = it },

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/SignIn.kt

@@ -25,6 +25,7 @@ import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalAutofillManager
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -61,20 +62,31 @@ fun SignIn(
 }
 
 @Composable
-fun SignInFooter(
-    state: SignInState,
-    modifier: Modifier = Modifier,
-    hideSignUp: Boolean = false
-) {
+fun SignInFooter(state: SignInState, modifier: Modifier = Modifier, hideSignUp: Boolean = false) {
+    // If we navigate away from the screen via some reason other that submitting the form then cancel any changes
+    // in autofill manager so that user won't be prompted to update their saved password
+    val autofillManager = LocalAutofillManager.current
     Row(
         modifier = modifier.fillMaxWidth(),
         horizontalArrangement = Arrangement.SpaceEvenly
     ) {
-        TextButton(onClick = { state.moveTo(AuthenticatorStep.PasswordReset) }) {
+        TextButton(
+            modifier = Modifier.testTag(TestTags.ForgotPasswordButton),
+            onClick = {
+                autofillManager?.cancel()
+                state.moveTo(AuthenticatorStep.PasswordReset)
+            }
+        ) {
             Text(stringResource(R.string.amplify_ui_authenticator_button_forgot_password))
         }
         if (!hideSignUp) {
-            TextButton(onClick = { state.moveTo(AuthenticatorStep.SignUp) }) {
+            TextButton(
+                modifier = Modifier.testTag(TestTags.CreateAccountButton),
+                onClick = {
+                    autofillManager?.cancel()
+                    state.moveTo(AuthenticatorStep.SignUp)
+                }
+            ) {
                 Text(stringResource(R.string.amplify_ui_authenticator_button_signup))
             }
         }

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/SignUp.kt

@@ -25,6 +25,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalAutofillManager
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -59,12 +60,18 @@ fun SignUp(
 }
 
 @Composable
-fun SignUpFooter(
-    state: SignUpState,
-    modifier: Modifier = Modifier
-) {
+fun SignUpFooter(state: SignUpState, modifier: Modifier = Modifier) {
+    // If we navigate away from the screen via some reason other that submitting the form then cancel any changes
+    // in autofill manager so that user won't be prompted to update their saved password
+    val autofillManager = LocalAutofillManager.current
     Box(modifier = modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
-        TextButton(onClick = { state.moveTo(AuthenticatorStep.SignIn) }) {
+        TextButton(
+            modifier = Modifier.testTag(TestTags.BackToSignInButton),
+            onClick = {
+                autofillManager?.cancel()
+                state.moveTo(AuthenticatorStep.SignIn)
+            }
+        ) {
             Text(stringResource(R.string.amplify_ui_authenticator_button_back_to_signin))
         }
     }

authenticator/src/main/java/com/amplifyframework/ui/authenticator/ui/TestTags.kt

@@ -15,14 +15,22 @@
 
 package com.amplifyframework.ui.authenticator.ui
 
+import com.amplifyframework.ui.authenticator.forms.FieldKey
+
+@Suppress("ConstPropertyName")
 internal object TestTags {
     const val SignInConfirmButton = "SignInConfirmButton"
     const val BackToSignInButton = "BackToSignInButton"
     const val CopyKeyButton = "CopyKeyButton"
     const val SignInButton = "SignInButton"
     const val SignUpButton = "SignUpButton"
+    const val ForgotPasswordButton = "ForgotPasswordButton"
+    const val CreateAccountButton = "CreateAccountButton"
     const val PasswordResetButton = "PasswordResetButton"
     const val AuthenticatorTitle = "AuthenticatorTitle"
 
     const val ShowPasswordIcon = "ShowPasswordIcon"
 }
+
+internal val FieldKey.testTag: String
+    get() = this.toString()