Add example for how to customize Sign Up #552
Conversation
ericclemmons
force-pushed
the
custom-SignUp
branch
from
940610d
to
17a1f41
Compare
This includes `preferred_username` for testing
ericclemmons
added
Documentation
There was a problem hiding this comment.
Take my approval with a grain of salt! Things look good with the walkthrough you showed, but I can't pull down the change locally to test for myself since my laptop apparently doesn't like this project anymore and keeps crashing.
My comments are just nits/idle thoughts. Overall, looks like a solid approach to me.
| components: { | ||
| // Customize `Authenticator.SignUp.FormFields` | ||
| SignUp: { | ||
| FormFields() { |
There was a problem hiding this comment.
^^ I think this would definitely be the way to go. Not gonna block on it since this is just an example, but if we want it to be cleaner, I think this is a good choice.
| @@ -12,7 +12,9 @@ export function ConfirmSignUp() { | |||
| const { isPending, resendCode, submitForm, updateForm } = useAuthenticator(); | |||
|
|
|||
| const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { | |||
| const { name, value } = event.target; | |||
| let { checked, name, type, value } = event.target; | |||
| if (type === 'checkbox' && !checked) value = undefined; | |||
There was a problem hiding this comment.
I wonder if it would be worth having an enum for the possible types here?
There was a problem hiding this comment.
The type showed up because of the HTMLInputElement, if that's what you mean. But this behavior of checked is specific to checkboxes & radio fields.
| const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| const { name, value } = event.target; | ||
| let { checked, name, type, value } = event.target; | ||
| if (type === 'checkbox' && !checked) value = undefined; | ||
|
|
There was a problem hiding this comment.
Seeing these changes reminded me of how I wanted to pull out these handleChange functions into a utility file. Making the same edit over and over gets annoying, right?
There was a problem hiding this comment.
It was for about 2 minutes, but then I realized that we'd probably actually move the handleChange from the form to individual primitive's onChange event:
https://ui.docs.amplify.aws/ui/primitives/checkboxfield?platform=react#controlled-component
So that's probably the future cleanup to have. I don't know if Angular or Vue will need that, or if those frameworks correctly handle checkboxes? 🤔
Co-authored-by: Eddie Keller <[email protected]>
Sync amplify-ui to amplify-ui-staging
Issue #, if available: Fixes #246, #248, #254, #260, #279
Description of changes:
Based on #532
Introduces
createSignUpMachineso we can share dynamic services.There will need to be an equivalent for each actor that will eventually accept customized services!
Adds React example for
preferred_usernameand a custom "Terms & Conditions".Introduces
validateCustomSignUpthat internallyvalidateSignUpcalls alongside default fields.Introduces (but not documented)
validatePreferredUsernameandvalidateConfirmPassword, which are our (internal) services that can eventually be overridden.Removed
deletemutations & instead favor an allowlist forsignUp.Docs
sign-up-fields.mp4
Tests
custom-sign-up-fields.mp4
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.