Account creation: design polishes - add a button to show/hide text field input for a secure field

[jaclync]

Part of #7891
Based on #7995 just for easier testing

Description

To follow the design for the password field, this PR added an 👁️ button to AccountCreationFormFieldView when the view model's isSecure is true. Tapping on the button shows/hides the secure input. Because of the rounded border design, the reveal button has to be added using a ZStack with some custom insets to the text field style and button image size using @ScaledMetric for dynamic type.

One minor issue I noticed is the slight height change between the shown/hidden state. Please feel free to share any suggestions to fix it!

Testing instructions

• Launch the app
• Log out and skip onboarding if needed
• Tap Create a Store --> there should be an 👁️/ icon with a slash in the password field
• Enter some text into the password field
• Tap on the 👁️ / icon --> the password input should be shown, and the icon becomes 👁️ without a slash

Screenshots

secure input hidden	secure input shown

---

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[wpmobilebot]

You can test the changes from this Pull Request by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr8006-a09e7e3 on your iPhone

If you need access to App Center, please ask a maintainer to add you.

[itsmeichigo]

Looks great! 🎉 I have a suggestion to fix the height change in the comment below.

Also - do you think we should extract this ZStack into a reusable view, in case we need it for a native login screen? It's something for the future, so we can do that later too.

[itsmeichigo]

Looks like the change of height when switching between field types is due to vertical padding and the content height difference of SecureField and TextField.

A quick fix would be to add a fixed height, we may need to take scale into consideration:

Suggested change

	.padding(insets)
	.padding(insets)
	.frame(height: 44 * scale)

[jaclync]

After some testing, the insets aren't the cause of the mismatched height, the height is just slightly different between the TextField and SecureField. In a09e7e3, I passed an optional height parameter for AccountCreationFormFieldView to set 44 * scale.

[jaclync]

Also - do you think we should extract this ZStack into a reusable view, in case we need it for a native login screen? It's something for the future, so we can do that later too.

When we support login in the future, I was thinking we probably want to use the SwiftUI field view for both login and signup. So maybe we can just rename AccountCreationFormFieldView to like AccountFormFieldView or AuthFormFieldView?

[itsmeichigo]

So maybe we can just rename AccountCreationFormFieldView to like AccountFormFieldView or AuthFormFieldView?

My suggestion was to create a generic RoundedBorderTextField with the option to be secure (with the 👁️ button) or not; not the whole form view 😅 But please feel free to leave that for later if necessary.

[jaclync]

My suggestion was to create a generic RoundedBorderTextField with the option to be secure (with the 👁️ button) or not; not the whole form view 😅 But please feel free to leave that for later if necessary.

I feel like the secure field is mostly useful during authentication 🤔 Let's go with the PR and we can create it when it's needed for another use case.