Skip to content

Improve documentation regarding "Full UI custimization" and custom validators #155

@pmellaaho

Description

@pmellaaho

Before creating a new issue, please confirm:

Which UI component?

Authenticator

Gradle script dependencies

// Put output below this line
authenticatorVersion = "1.1.0"

Environment information

# Put output below this line
Gradle 8.6

Please include any relevant guides or documentation you're referencing

https://ui.docs.amplify.aws/android/connected-components/authenticator/customization#full-ui-customization

Describe the bug

I'm trying to implement the custom UI for the Authenticator steps (e.g. SignUp) but still depend on the State instance provided by Authenticator. Lets say that in my case the username is always email so I would like to replace the orig username validator with email validator. I'm able to replace the UI components (e.g. username input) without problems but I'm having hard time trying to replace the validator used for my custom input (TextInputField). This because the validator inside fieldData is a val not var. Can you please provide more documentation on how this can be done with simple code example. Furthermore, I don't quite get why validator can be found from both fieldData and fieldConfig.

Reproduction steps (if applicable)

No response

Code Snippet

// Trying to replace the orig username validator with email validator

val userName = state.form.fields[FieldKey.Username]!!
    val userNameData = object : MutableFieldData {
        override val config: FieldConfig = userName.config
        override val state = userName.state
        override val validator: FieldValidator = {
            if (content.isNotBlank() && !Patterns.EMAIL_ADDRESS.matcher(content)
                    .matches()
            ) FieldError.InvalidFormat else null
        }
    }

// And then passing the userNameData to custom TextInputField

TextInputField(
                fieldConfig = userNameData.config as FieldConfig.Text,
                fieldState = userNameData.state,
                enabled = formStateEnabled
            )

// The above code does really replace the username's MutablefieldData and the original validator is still in use.

Log output

// Put your logs below this line


amplifyconfiguration.json

No response

Additional information and screenshots

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    authenticatorThis issue relates to the Authenticator componentquestionFurther information is requested

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions