diff --git a/auth/build.gradle.kts b/auth/build.gradle.kts index b26051d1c..57462420d 100644 --- a/auth/build.gradle.kts +++ b/auth/build.gradle.kts @@ -74,16 +74,17 @@ android { } dependencies { - implementation(platform(Config.Libs.Androidx.Compose.bom)) - implementation(Config.Libs.Androidx.Compose.ui) - implementation(Config.Libs.Androidx.Compose.uiGraphics) - implementation(Config.Libs.Androidx.Compose.material3) - implementation(Config.Libs.Androidx.Compose.foundation) - implementation(Config.Libs.Androidx.Compose.tooling) - implementation(Config.Libs.Androidx.Compose.toolingPreview) - implementation(Config.Libs.Androidx.Compose.activityCompose) + implementation(platform(libs.androidx.compose.bom)) + implementation(libs.androidx.compose.ui) + implementation(libs.androidx.compose.ui.graphics) + implementation(libs.androidx.compose.material3) + implementation(libs.androidx.compose.foundation) + implementation(libs.androidx.compose.ui.tooling) + implementation(libs.androidx.compose.ui.tooling.preview) + implementation(libs.androidx.activity.compose) implementation(Config.Libs.Androidx.materialDesign) implementation(Config.Libs.Androidx.activity) + implementation(libs.androidx.compose.material.icons.extended) // The new activity result APIs force us to include Fragment 1.3.0 // See https://issuetracker.google.com/issues/152554847 implementation(Config.Libs.Androidx.fragment) diff --git a/auth/src/main/java/com/firebase/ui/auth/compose/ui/components/AuthTextField.kt b/auth/src/main/java/com/firebase/ui/auth/compose/ui/components/AuthTextField.kt new file mode 100644 index 000000000..66f2b475e --- /dev/null +++ b/auth/src/main/java/com/firebase/ui/auth/compose/ui/components/AuthTextField.kt @@ -0,0 +1,201 @@ +package com.firebase.ui.auth.compose.ui.components + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Email +import androidx.compose.material.icons.filled.Lock +import androidx.compose.material.icons.filled.Visibility +import androidx.compose.material.icons.filled.VisibilityOff +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +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.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.text.input.PasswordVisualTransformation +import androidx.compose.ui.text.input.VisualTransformation +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.firebase.ui.auth.compose.configuration.PasswordRule +import com.firebase.ui.auth.compose.configuration.string_provider.DefaultAuthUIStringProvider +import com.firebase.ui.auth.compose.configuration.validators.EmailValidator +import com.firebase.ui.auth.compose.configuration.validators.FieldValidator +import com.firebase.ui.auth.compose.configuration.validators.PasswordValidator + +/** + * A customizable input field with built-in validation display. + * + * **Example usage:** + * ```kotlin + * val emailTextValue = remember { mutableStateOf("") } + * + * val emailValidator = remember { + * EmailValidator(stringProvider = DefaultAuthUIStringProvider(context)) + * } + * + * AuthTextField( + * value = emailTextValue, + * onValueChange = { emailTextValue.value = it }, + * label = { + * Text("Email") + * }, + * validator = emailValidator + * ) + * ``` + * + * @param modifier A modifier for the field. + * @param value The current value of the text field. + * @param onValueChange A callback when the value changes. + * @param label The label for the text field. + * @param enabled If the field is enabled. + * @param isError Manually set the error state. + * @param errorMessage A custom error message to display. + * @param validator A validator to automatically handle error state and messages. + * @param keyboardOptions Keyboard options for the field. + * @param keyboardActions Keyboard actions for the field. + * @param visualTransformation Visual transformation for the input (e.g., password). + * @param leadingIcon An optional icon to display at the start of the field. + * @param trailingIcon An optional icon to display at the start of the field. + */ +@Composable +fun AuthTextField( + modifier: Modifier = Modifier, + value: String, + onValueChange: (String) -> Unit, + label: @Composable (() -> Unit)? = null, + enabled: Boolean = true, + isError: Boolean? = null, + errorMessage: String? = null, + validator: FieldValidator? = null, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions.Default, + visualTransformation: VisualTransformation = VisualTransformation.None, + leadingIcon: @Composable (() -> Unit)? = null, + trailingIcon: @Composable (() -> Unit)? = null, +) { + val isSecureTextField = validator is PasswordValidator + var passwordVisible by remember { mutableStateOf(false) } + + TextField( + modifier = modifier, + value = value, + onValueChange = { newValue -> + onValueChange(newValue) + validator?.validate(newValue) + }, + label = label, + singleLine = true, + enabled = enabled, + isError = isError ?: validator?.hasError ?: false, + supportingText = { + if (validator?.hasError ?: false) { + Text(text = errorMessage ?: validator.errorMessage) + } + }, + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + visualTransformation = if (isSecureTextField && !passwordVisible) + PasswordVisualTransformation() else visualTransformation, + leadingIcon = leadingIcon, + trailingIcon = trailingIcon ?: { + if (isSecureTextField) { + IconButton( + onClick = { + passwordVisible = !passwordVisible + } + ) { + Icon( + imageVector = if (passwordVisible) + Icons.Filled.VisibilityOff else Icons.Filled.Visibility, + contentDescription = if (passwordVisible) "Hide password" else "Show password" + ) + } + } + }, + ) +} + +@Preview(showBackground = true) +@Composable +internal fun PreviewAuthTextField() { + val context = LocalContext.current + val nameTextValue = remember { mutableStateOf("") } + val emailTextValue = remember { mutableStateOf("") } + val passwordTextValue = remember { mutableStateOf("") } + val emailValidator = remember { + EmailValidator(stringProvider = DefaultAuthUIStringProvider(context)) + } + val passwordValidator = remember { + PasswordValidator( + stringProvider = DefaultAuthUIStringProvider(context), + rules = listOf( + PasswordRule.MinimumLength(8), + PasswordRule.RequireUppercase, + PasswordRule.RequireLowercase, + ) + ) + } + + Column( + modifier = Modifier + .fillMaxSize(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally, + ) { + AuthTextField( + value = nameTextValue.value, + label = { + Text("Name") + }, + onValueChange = { text -> + nameTextValue.value = text + }, + ) + Spacer(modifier = Modifier.height(16.dp)) + AuthTextField( + value = emailTextValue.value, + validator = emailValidator, + label = { + Text("Email") + }, + onValueChange = { text -> + emailTextValue.value = text + }, + leadingIcon = { + Icon( + imageVector = Icons.Default.Email, + contentDescription = "" + ) + } + ) + Spacer(modifier = Modifier.height(16.dp)) + AuthTextField( + value = passwordTextValue.value, + validator = passwordValidator, + label = { + Text("Password") + }, + onValueChange = { text -> + passwordTextValue.value = text + }, + leadingIcon = { + Icon( + imageVector = Icons.Default.Lock, + contentDescription = "" + ) + } + ) + } +} \ No newline at end of file diff --git a/auth/src/test/java/com/firebase/ui/auth/compose/ui/components/AuthTextFieldTest.kt b/auth/src/test/java/com/firebase/ui/auth/compose/ui/components/AuthTextFieldTest.kt new file mode 100644 index 000000000..21629a1a2 --- /dev/null +++ b/auth/src/test/java/com/firebase/ui/auth/compose/ui/components/AuthTextFieldTest.kt @@ -0,0 +1,449 @@ +/* + * Copyright 2025 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the + * License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either + * express or implied. See the License for the specific language governing permissions and + * limitations under the License. + */ + +package com.firebase.ui.auth.compose.ui.components + +import android.content.Context +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Email +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.test.assertIsDisplayed +import androidx.compose.ui.test.assertIsEnabled +import androidx.compose.ui.test.assertIsNotDisplayed +import androidx.compose.ui.test.assertIsNotEnabled +import androidx.compose.ui.test.junit4.createComposeRule +import androidx.compose.ui.test.onNodeWithContentDescription +import androidx.compose.ui.test.onNodeWithText +import androidx.compose.ui.test.performClick +import androidx.compose.ui.test.performTextClearance +import androidx.compose.ui.test.performTextInput +import androidx.test.core.app.ApplicationProvider +import com.firebase.ui.auth.compose.configuration.PasswordRule +import com.firebase.ui.auth.compose.configuration.string_provider.AuthUIStringProvider +import com.firebase.ui.auth.compose.configuration.string_provider.DefaultAuthUIStringProvider +import com.firebase.ui.auth.compose.configuration.validators.EmailValidator +import com.firebase.ui.auth.compose.configuration.validators.PasswordValidator +import org.junit.Before +import org.junit.Rule +import org.junit.Test +import org.junit.runner.RunWith +import org.robolectric.RobolectricTestRunner +import org.robolectric.annotation.Config + +/** + * Unit tests for [AuthTextField] covering UI interactions, validation, + * password visibility toggle, and error states. + * + * @suppress Internal test class + */ +@Config(sdk = [34]) +@RunWith(RobolectricTestRunner::class) +class AuthTextFieldTest { + + @get:Rule + val composeTestRule = createComposeRule() + + private lateinit var context: Context + private lateinit var stringProvider: AuthUIStringProvider + + @Before + fun setUp() { + context = ApplicationProvider.getApplicationContext() + stringProvider = DefaultAuthUIStringProvider(context) + } + + // ============================================================================================= + // Basic UI Tests + // ============================================================================================= + + @Test + fun `AuthTextField displays correctly with basic configuration`() { + composeTestRule.setContent { + AuthTextField( + value = "", + onValueChange = { }, + label = { Text("Name") } + ) + } + + composeTestRule + .onNodeWithText("Name") + .assertIsDisplayed() + } + + @Test + fun `AuthTextField displays initial value`() { + composeTestRule.setContent { + AuthTextField( + value = "test@example.com", + onValueChange = { }, + label = { Text("Email") } + ) + } + + composeTestRule + .onNodeWithText("Email") + .assertIsDisplayed() + + composeTestRule + .onNodeWithText("test@example.com") + .assertIsDisplayed() + } + + @Test + fun `AuthTextField updates value on text input`() { + composeTestRule.setContent { + val textValue = remember { mutableStateOf("") } + AuthTextField( + value = textValue.value, + onValueChange = { textValue.value = it }, + label = { Text("Email") } + ) + } + + composeTestRule + .onNodeWithText("Email") + .performTextInput("test@example.com") + + composeTestRule + .onNodeWithText("Email") + .assertIsDisplayed() + + composeTestRule + .onNodeWithText("test@example.com") + .assertIsDisplayed() + } + + @Test + fun `AuthTextField respects enabled state`() { + composeTestRule.setContent { + AuthTextField( + value = "", + onValueChange = { }, + label = { Text("Email") }, + enabled = false + ) + } + + composeTestRule + .onNodeWithText("Email") + .assertIsNotEnabled() + } + + @Test + fun `AuthTextField is enabled by default`() { + composeTestRule.setContent { + AuthTextField( + value = "", + onValueChange = { }, + label = { Text("Email") } + ) + } + + composeTestRule + .onNodeWithText("Email") + .assertIsEnabled() + } + + @Test + fun `AuthTextField displays leading icon when provided`() { + composeTestRule.setContent { + AuthTextField( + value = "", + onValueChange = { }, + label = { Text("Email") }, + leadingIcon = { + Icon( + imageVector = Icons.Default.Email, + contentDescription = "Email Icon" + ) + } + ) + } + + composeTestRule + .onNodeWithContentDescription("Email Icon") + .assertIsDisplayed() + } + + @Test + fun `AuthTextField displays custom trailing icon when provided`() { + composeTestRule.setContent { + AuthTextField( + value = "", + onValueChange = { }, + label = { Text("Email") }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Email, + contentDescription = "Custom Trailing Icon" + ) + } + ) + } + + composeTestRule + .onNodeWithContentDescription("Custom Trailing Icon") + .assertIsDisplayed() + } + + // ============================================================================================= + // Validation Tests + // ============================================================================================= + + @Test + fun `AuthTextField validates email correctly with EmailValidator`() { + composeTestRule.setContent { + val emailValidator = remember { + EmailValidator(stringProvider = stringProvider) + } + val textValue = remember { mutableStateOf("") } + AuthTextField( + value = textValue.value, + onValueChange = { textValue.value = it }, + label = { Text("Email") }, + validator = emailValidator + ) + } + + composeTestRule + .onNodeWithText("Email") + .performTextInput("invalid-email") + + composeTestRule.waitForIdle() + + composeTestRule + .onNodeWithText(stringProvider.invalidEmailAddress) + .assertIsDisplayed() + + composeTestRule + .onNodeWithText("Email") + .performTextClearance() + + composeTestRule.waitForIdle() + + composeTestRule + .onNodeWithText(stringProvider.missingEmailAddress) + .assertIsDisplayed() + + composeTestRule + .onNodeWithText("Email") + .performTextInput("valid@example.com") + + composeTestRule.waitForIdle() + + composeTestRule + .onNodeWithText(stringProvider.missingEmailAddress) + .assertIsNotDisplayed() + composeTestRule + .onNodeWithText(stringProvider.invalidEmailAddress) + .assertIsNotDisplayed() + } + + @Test + fun `AuthTextField displays custom error message when provided`() { + composeTestRule.setContent { + val emailValidator = remember { + EmailValidator(stringProvider = stringProvider) + } + val textValue = remember { mutableStateOf("") } + AuthTextField( + value = textValue.value, + onValueChange = { textValue.value = it }, + label = { Text("Email") }, + validator = emailValidator, + errorMessage = "Custom error message" + ) + } + + composeTestRule + .onNodeWithText("Email") + .performTextInput("invalid") + + composeTestRule.waitForIdle() + + composeTestRule + .onNodeWithText("Custom error message") + .assertIsDisplayed() + } + + @Test + fun `AuthTextField validates password with PasswordValidator`() { + composeTestRule.setContent { + val passwordValidator = remember { + PasswordValidator( + stringProvider = stringProvider, + rules = listOf( + PasswordRule.MinimumLength(8), + PasswordRule.RequireUppercase, + PasswordRule.RequireLowercase + ) + ) + } + val textValue = remember { mutableStateOf("") } + AuthTextField( + value = textValue.value, + onValueChange = { textValue.value = it }, + label = { Text("Password") }, + validator = passwordValidator + ) + } + + composeTestRule + .onNodeWithText("Password") + .performTextInput("short") + + composeTestRule.waitForIdle() + + composeTestRule + .onNodeWithText(stringProvider.passwordTooShort.format(8)) + .assertIsDisplayed() + + composeTestRule + .onNodeWithText("Password") + .performTextClearance() + + composeTestRule.waitForIdle() + + composeTestRule + .onNodeWithText(stringProvider.invalidPassword) + .assertIsDisplayed() + + composeTestRule + .onNodeWithText("Password") + .performTextInput("pass@1234") + + composeTestRule.waitForIdle() + + composeTestRule + .onNodeWithText(stringProvider.passwordMissingUppercase) + .assertIsDisplayed() + + composeTestRule + .onNodeWithText("Password") + .performTextInput("ValidPass123") + + composeTestRule.waitForIdle() + + composeTestRule + .onNodeWithText(stringProvider.passwordTooShort.format(8)) + .assertIsNotDisplayed() + composeTestRule + .onNodeWithText(stringProvider.passwordMissingLowercase) + .assertIsNotDisplayed() + composeTestRule + .onNodeWithText(stringProvider.passwordMissingUppercase) + .assertIsNotDisplayed() + } + + // ============================================================================================= + // Password Visibility Toggle Tests + // ============================================================================================= + + @Test + fun `AuthTextField shows password visibility toggle for PasswordValidator`() { + composeTestRule.setContent { + AuthTextField( + value = "password123", + onValueChange = { }, + label = { Text("Password") }, + validator = PasswordValidator( + stringProvider = stringProvider, + rules = emptyList() + ) + ) + } + + composeTestRule + .onNodeWithContentDescription("Show password") + .assertIsDisplayed() + } + + @Test + fun `AuthTextField toggles password visibility when icon is clicked`() { + composeTestRule.setContent { + AuthTextField( + value = "password123", + onValueChange = { }, + label = { Text("Password") }, + validator = PasswordValidator( + stringProvider = stringProvider, + rules = emptyList() + ) + ) + } + + composeTestRule + .onNodeWithContentDescription("Show password") + .assertIsDisplayed() + .performClick() + + composeTestRule.waitForIdle() + + composeTestRule + .onNodeWithContentDescription("Hide password") + .assertIsDisplayed() + } + + @Test + fun `AuthTextField hides password visibility toggle for non-password fields`() { + composeTestRule.setContent { + AuthTextField( + value = "test@example.com", + onValueChange = { }, + label = { Text("Email") }, + ) + } + + composeTestRule + .onNodeWithContentDescription("Show password") + .assertDoesNotExist() + + composeTestRule + .onNodeWithContentDescription("Hide password") + .assertDoesNotExist() + } + + @Test + fun `AuthTextField respects custom trailing icon over password toggle`() { + composeTestRule.setContent { + AuthTextField( + value = "password123", + onValueChange = { }, + label = { Text("Password") }, + validator = PasswordValidator( + stringProvider = stringProvider, + rules = emptyList() + ), + trailingIcon = { + Icon( + imageVector = Icons.Default.Email, + contentDescription = "Custom Icon" + ) + } + ) + } + + composeTestRule + .onNodeWithContentDescription("Custom Icon") + .assertIsDisplayed() + + composeTestRule + .onNodeWithContentDescription("Show password") + .assertDoesNotExist() + } +} diff --git a/buildSrc/src/main/kotlin/Config.kt b/buildSrc/src/main/kotlin/Config.kt index 8b2317698..b24d297ea 100644 --- a/buildSrc/src/main/kotlin/Config.kt +++ b/buildSrc/src/main/kotlin/Config.kt @@ -41,17 +41,6 @@ object Config { const val pagingRxJava = "androidx.paging:paging-rxjava3:3.0.0" const val recyclerView = "androidx.recyclerview:recyclerview:1.2.1" const val materialDesign = "com.google.android.material:material:1.4.0" - - object Compose { - const val bom = "androidx.compose:compose-bom:2025.08.00" - const val ui = "androidx.compose.ui:ui" - const val uiGraphics = "androidx.compose.ui:ui-graphics" - const val toolingPreview = "androidx.compose.ui:ui-tooling-preview" - const val tooling = "androidx.compose.ui:ui-tooling" - const val foundation = "androidx.compose.foundation:foundation" - const val material3 = "androidx.compose.material3:material3" - const val activityCompose = "androidx.activity:activity-compose" - } } object Firebase { diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 44eb15432..befb470ce 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -1,7 +1,20 @@ [versions] kotlin = "2.2.0" +androidxComposeBom = "2025.08.00" +androidxActivityCompose = "1.9.0" [libraries] +# Compose +androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "androidxComposeBom" } +androidx-compose-ui = { group = "androidx.compose.ui", name = "ui" } +androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" } +androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" } +androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" } +androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation" } +androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3" } +androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidxActivityCompose" } +androidx-compose-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" } + # Testing androidx-ui-test-junit4 = { module = "androidx.compose.ui:ui-test-junit4" }