Add a banner to ask user to validate their email #24172

crazytonyli · 2025-03-10T09:54:05Z

Issue on Linear: e0bcdcc1be68

Here are some screenshots.

Init	Sent	Error

To test:

Regression Notes

Potential unintended areas of impact
What I did to test those areas of impact (or what existing automated tests I relied on)
What automated tests I added (or what prevented me from doing so)

PR submission checklist:

I have completed the Regression Notes.
I have considered adding unit tests for my changes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing checklist:

wpmobilebot · 2025-03-10T10:06:14Z

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr24172-0760a08
	Version	25.8
	Bundle ID	com.jetpack.alpha
	Commit	`0760a08`
	App Center Build	jetpack-installable-builds #10682

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

wpmobilebot · 2025-03-10T10:07:46Z

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr24172-0760a08
	Version	25.8
	Bundle ID	org.wordpress.alpha
	Commit	`0760a08`
	App Center Build	WPiOS - One-Offs #11653

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

jkmassel · 2025-03-10T18:44:21Z

Can we try to understand the error? If their account is already validated, we can probably just dismiss the banner?

crazytonyli · 2025-03-10T21:01:05Z

The error in the screenshot is a very poor example. 🤦‍♂️

My intention is to have an error state to show API errors: an error message (returned by the API endpoint) and a "Try again" button for all errors.

The easiest way for me to debug this state is to update the code to send a link to an already verified account. This should almost never happen in practice, though. Because MeViewController fetched account details quite often, and the banner does not show up if the account is already verified.

Also, the API does not return a specific error code for the "email already verified" error. It's just code: invalid_request. So, it'll be a bit difficult to handle this error. Again, this error should never happen. I don't think it needs special attention.

kean · 2025-03-10T21:17:35Z

Let's try a different color. Something similar to this could work:

crazytonyli · 2025-03-10T21:44:53Z

@kean I thought about that, but didn't reuse the cell because

The "verify email" view should be more prominent. Maybe the current red background is too much, but I'm not sure if there is some existing design in the app we can reuse.
The link/button at the bottom is more like a "more info" than an action button.

kean · 2025-03-10T22:06:23Z

Something like this would be adequate:

It's easy to spot and the icon would draw enough attention. People see "email" – the expect something about verification.

It's not a critical error, and they don't have to address it right away. It just needs to sit somewhere until you do it.

Shouldn't the default state be "Resend Verification Link"? I assume we send the initial verification link right after login.

kean · 2025-03-10T22:07:33Z

Btw, wouldn't it make sense to show it on dashboard? If it's not on dashboard, you need to draw attention to it with a tab bar icon badge.

kean · 2025-03-10T22:09:09Z

WordPress/Classes/ViewRelated/Me/Me Main/VerifyEmailRow.swift

+        contentView.addSubview(hostingView)
+        hostingView.translatesAutoresizingMaskIntoConstraints = false
+
+        NSLayoutConstraint.activate([


Please use extensions from WordPressUI:

contentView.addSubview(hostingView) hostingView.pinEdges(to: contentView)

hostingView.translatesAutoresizingMaskIntoConstraints will not be needed if you do.

kean · 2025-03-10T22:09:48Z

WordPress/Classes/ViewRelated/Me/Me Main/VerifyEmailRow.swift

+}
+
+private struct VerifyEmailView: View {
+    @StateObject var viewModel: VerifyEmailViewModel = .init()


Suggested change

@StateObject var viewModel: VerifyEmailViewModel = .init()

@StateObject private var viewModel = VerifyEmailViewModel()

kean · 2025-03-10T22:10:59Z

WordPress/Classes/ViewRelated/Me/Me Main/VerifyEmailRow.swift

+
+        state = .sending
+
+        let accountService = AccountService(coreDataStack: ContextManager.sharedInstance())


Suggested change

let accountService = AccountService(coreDataStack: ContextManager.sharedInstance())

let accountService = AccountService(coreDataStack: ContextManager.shared)

kean · 2025-03-10T22:12:34Z

WordPress/Classes/ViewRelated/Me/Me Main/VerifyEmailRow.swift

+
+// This value is not an actual "timeout" value of the verification link. It's just an arbitrary value to prevent
+// users from sending links repeatedly.
+private let verificationLinkTimeout: TimeInterval = 300


Seems a bit on a high end. I'd go with 60 seconds, perhaps?

I'd suggest showing the timer in the UI.

I think showing a countdown on the UI is not necessary? Showing a countdown feels like it's an action that the user needs to take action right now, but there is no real urgency in clicking the email link.

The app could start showing it if you tap "Resend" before it's possible. This way you'll know when you can tap it again. If that's what it already does – please ignore it.

The app could start showing it if you tap "Resend" before it's possible.

There are no real restrictions on the endpoint to limit when sending another email is possible.

BTW, I checked the website UI. It neither show a timer nor prevent users from keep resending emails. Once user refresh the webpage, they can send another one.

I pushed another commit to follow the web UI.

Start Sent

Start Sent

It neither show a timer nor prevent users from keep resending emails.

Well, if it's relatively free, it's should be fine.

I think I'll keep it the same with the web for now.

WordPress/Classes/ViewRelated/Me/Me Main/VerifyEmailRow.swift

crazytonyli · 2025-03-11T08:48:40Z

@kean I have updated the UI to be like this. Let me know what you think.

Start	Sent

nbradbury · 2025-03-12T12:09:20Z

@crazytonyli A couple minor thoughts on this:

"Verify Your Email" uses different capitalization than "Verification link sent"
Do we need to include the text, "Please check your inbox and click the link?" That seems like unnecessary wording to me.

jkmassel · 2025-03-12T18:57:56Z

Is there a way to call a bit more attention to this without turning the whole thing red?

kean · 2025-03-12T19:06:35Z

Is there a way to call a bit more attention to this without turning the whole thing red?

I'd suggest the following options:

Show it with animation in viewDidAppear the first time it appears
Add a badge on the "Me" tab until the user sees it once

crazytonyli · 2025-03-12T22:26:38Z

@nbradbury I have updated the design. See #24172 (comment)

crazytonyli · 2025-03-13T09:29:47Z

@jkmassel @kean I added the Verify Your Email view to the "no sites view" in #24211, which is the first screen after creating a new account from the app. I believe a newly created account is the only scenario where the account email is not verified.

nbradbury · 2025-03-19T12:11:45Z

@crazytonyli @kean When one of you has a minute, could you post a video of the validation flow? Thanks!

crazytonyli · 2025-03-19T23:35:34Z

@nbradbury This is how it looks like at the moment (including changes in #24211)

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-03-20.at.12.32.53.mp4

crazytonyli · 2025-03-20T09:39:26Z

@nbradbury BTW, the "Create WordPress.com site" button is no longer disabled. The app now shows an alert instead.

nbradbury · 2025-03-20T11:31:13Z

This is how it looks like at the moment

Thanks @crazytonyli ! I noticed that it says "you email" instead of "your email" in a couple of places.

kean · 2025-03-20T13:52:02Z

@nbradbury This is how it looks like at the moment (including changes in #24211)

Just wanted to note that I'm pretty confident that "No Sites" should not have the "Verify Your Email" view. I expanded on it here #24211 (review). Wdyt?

kean · 2025-03-20T14:28:20Z

I've tested verification and it worked as expected, but I have a couple of notes.

Steps

Create a new account (🟡 forced me to pick my username on the same screen as my email, which felt excessive)
Tap "Create Site" and get to the "Pick Plan" step (🔴 as expected, it failed to load asking me to login again)
Close the "Site Flow"
Open "Me"
See the "Verify Email" view saying that the email has been sent
Check my email
Tap "Confirm Email" (🟡 it opened the web view instead of the app and forced me to login again – annoying. I wish the app could verify me or there was an automatic redirect to the app)
Open the app
Verify that "Verify Email" view is gone 🟢
Verify that "Pick Plan" screen load and you can create a site 🟢

Overall, it does raise questions whether this flow is an improvement over the previous native production version which used your email to login you in and verify it at the same time. The verification step felt natural because after the verification, the web used to redirect you straight back in the app. It was a smoother flow, especially considering that you can't create a site without verification anyway, so it's critical for account creation (on mobile – why doesn't the web require it? what are we missing?).

kean

The code also looks good, but noting that the are multiple areas of improvements for the overall flow.

Add a banner to ask user to validate their email

fec8da8

crazytonyli added the Account Settings label Mar 10, 2025

crazytonyli added this to the 25.9 milestone Mar 10, 2025

crazytonyli requested review from jkmassel, kean and nbradbury March 10, 2025 09:54

kean reviewed Mar 10, 2025

View reviewed changes

crazytonyli added 3 commits March 11, 2025 21:08

Address PR comments

a15629b

Replace Spacer() with .frame

5090d68

Update verify email cell UI

8677474

crazytonyli added 2 commits March 11, 2025 21:54

Update variables

5510b26

Update UI to be similar to the web

97e9327

Merge branch 'trunk' into verify-email-address

0760a08

nbradbury mentioned this pull request Mar 19, 2025

Me onboarding banner wordpress-mobile/WordPress-Android#21760

Draft

crazytonyli requested a review from kean March 20, 2025 09:38

nbradbury mentioned this pull request Mar 20, 2025

No sites onboarding wordpress-mobile/WordPress-Android#21765

Closed

kean approved these changes Mar 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a banner to ask user to validate their email #24172

Add a banner to ask user to validate their email #24172

crazytonyli commented Mar 10, 2025

wpmobilebot commented Mar 10, 2025 •

edited

Loading

wpmobilebot commented Mar 10, 2025 •

edited

Loading

jkmassel commented Mar 10, 2025

crazytonyli commented Mar 10, 2025

kean commented Mar 10, 2025

crazytonyli commented Mar 10, 2025

kean commented Mar 10, 2025 •

edited

Loading

kean commented Mar 10, 2025

kean Mar 10, 2025

kean Mar 10, 2025

kean Mar 10, 2025

kean Mar 10, 2025

crazytonyli Mar 11, 2025

kean Mar 11, 2025

crazytonyli Mar 11, 2025

kean Mar 11, 2025

crazytonyli Mar 12, 2025

crazytonyli commented Mar 11, 2025

nbradbury commented Mar 12, 2025 •

edited

Loading

jkmassel commented Mar 12, 2025

kean commented Mar 12, 2025 •

edited

Loading

crazytonyli commented Mar 12, 2025

crazytonyli commented Mar 13, 2025

nbradbury commented Mar 19, 2025

crazytonyli commented Mar 19, 2025

crazytonyli commented Mar 20, 2025

nbradbury commented Mar 20, 2025

kean commented Mar 20, 2025 •

edited

Loading

kean commented Mar 20, 2025

kean left a comment

	@StateObject var viewModel: VerifyEmailViewModel = .init()
	@StateObject private var viewModel = VerifyEmailViewModel()


		state = .sending

		let accountService = AccountService(coreDataStack: ContextManager.sharedInstance())

Add a banner to ask user to validate their email #24172

Are you sure you want to change the base?

Add a banner to ask user to validate their email #24172

Conversation

crazytonyli commented Mar 10, 2025

Regression Notes

wpmobilebot commented Mar 10, 2025 • edited Loading

wpmobilebot commented Mar 10, 2025 • edited Loading

jkmassel commented Mar 10, 2025

crazytonyli commented Mar 10, 2025

kean commented Mar 10, 2025

crazytonyli commented Mar 10, 2025

kean commented Mar 10, 2025 • edited Loading

kean commented Mar 10, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

crazytonyli commented Mar 11, 2025

nbradbury commented Mar 12, 2025 • edited Loading

jkmassel commented Mar 12, 2025

kean commented Mar 12, 2025 • edited Loading

crazytonyli commented Mar 12, 2025

crazytonyli commented Mar 13, 2025

nbradbury commented Mar 19, 2025

crazytonyli commented Mar 19, 2025

crazytonyli commented Mar 20, 2025

nbradbury commented Mar 20, 2025

kean commented Mar 20, 2025 • edited Loading

kean commented Mar 20, 2025

kean left a comment

Choose a reason for hiding this comment

wpmobilebot commented Mar 10, 2025 •

edited

Loading

wpmobilebot commented Mar 10, 2025 •

edited

Loading

kean commented Mar 10, 2025 •

edited

Loading

nbradbury commented Mar 12, 2025 •

edited

Loading

kean commented Mar 12, 2025 •

edited

Loading

kean commented Mar 20, 2025 •

edited

Loading