Implement timer "cooldown" to email verification email request

[divine-comedian]

In some scenarios it can take more than 2 minutes for an email containing the verification code to arrive in a user's inbox. In this case a user may doubt if the button is working properly, clicking the button to send the code many times. each one triggering a new email & code to be sent.

In order to prevent this we should add a countdown timer of 3 minutes that the user must wait until for them to request another code to be sent.

Screencast.from.2024-12-03.10-47-20.webm

[Tosinolawale]

https://www.figma.com/design/vMiyVd1Ly5LjgSyZrChVV8/Giveth-users?node-id=3141-9604&t=kG010GKaHGMW36sB-1
@divine-comedian

[Tosinolawale]

Timer.webm

[divine-comedian]

@Tosinolawale what happens when the user tries to click the link while the timer is active? is it disabled? do we show a warning toast message?

do we have any confirmation toast as well when the user clicks to resend verification link?

[Tosinolawale]

@Tosinolawale what happens when the user tries to click the link while the timer is active? is it disabled? do we show a warning toast message?

do we have any confirmation toast as well when the user clicks to resend verification link?

From the design there, the link is disabled.. it's greyed out while the timer is active. I also explained it in the figma file and there is no need to show a warning toast message. The count down and inactive link is sufficient to convey that message

[divine-comedian]

@Tosinolawale what happens when the user tries to click the link while the timer is active? is it disabled? do we show a warning toast message?
do we have any confirmation toast as well when the user clicks to resend verification link?

From the design there, the link is disabled.. it's greyed out while the timer is active. I also explained it in the figma file and there is no need to show a warning toast message. The count down and inactive link is sufficient to convey that message

Got it! Yep looked at the figma 😅 looks great 🙌

[maryjaf]

It hasn't been merged on staging and isn't ready for QA yet

[kkatusic]

Sorry @maryjaf, merged now

[maryjaf]

There is a problem in showing counter @kkatusic

-by tapping on verify email, the counter is shown for a sec after that disappears
-by tapping on resend verification code, the counter is shown for a sec after that disappears

Screen.Recording.2025-01-13.at.1.15.42.PM.mov

[kkatusic]

@maryjaf you can test it again when you find time, thx

[maryjaf]

there seems to be an issue with displaying the timer. Please take a look at the screen recording below: @kkatusic

Screen.Recording.2025-01-14.at.10.18.22.AM.mov

Also, I think the "Resend Verification Code" button should have a different color when the timer is active, so the user can easily recognize that it's disabled.

[divine-comedian]

@Tosinolawale

Do you mind making the timer countdown a bit more noticeable based on @maryjaf's feedback - maybe a bit bigger and a distinct colour so it can be seen easily.

[kkatusic]

@maryjaf I blurred link, thx for that, please can you on next test refresh link and try again. I don't get same problem as you, maybe some old state was inside cache, if you see same problem please can you record all steps ;)

[Tosinolawale]

there seems to be an issue with displaying the timer. Please take a look at the screen recording below: @kkatusic

Screen.Recording.2025-01-14.at.10.18.22.AM.mov
Also, I think the "Resend Verification Code" button should have a different color when the timer is active, so the user can easily recognize that it's disabled.

From the design itself, "Resend Verification Code" IS a different color when the timer is active.

Different Color tones from the color styles @maryjaf

[Tosinolawale]

@Tosinolawale

Do you mind making the timer countdown a bit more noticeable based on @maryjaf's feedback - maybe a bit bigger and a distinct colour so it can be seen easily.

https://www.figma.com/design/vMiyVd1Ly5LjgSyZrChVV8/Giveth-users?node-id=3141-9604&t=KbsceyEfnR0TJjF8-1
@divine-comedian @maryjaf

[maryjaf]

Different Color tones from the color styles @maryjaf

Thanks Guys, this problem has been fixed.

But As you can see in the screen recording below, when the timer starts for the first time, everything works correctly. However, when I tap on "Resend Verification Email" and the timer restarts, the displayed numbers appear glitchy @kkatusic

Screen.Recording.2025-01-15.at.10.40.49.AM.mov

[kkatusic]

@maryjaf when you find time you can test it again ;)

[maryjaf]

But As you can see in the screen recording below, when the timer starts for the first time, everything works correctly. However, when I tap on "Resend Verification Email" and the timer restarts, the displayed numbers appear glitchy @kkatusic

Thanks @kkatusic this problem has been fixed.

[kkatusic]

Thx to you @maryjaf ;)