delay showing resend verification email button

[XiNiHa]

Background

During the email verification flow, some users are getting confused and clicking the "Resend verification email" button right after the page loads, invalidating the first sent email.

Description

Added some delay before un-disabling the resend button

Checklist

• Input validation
• Output encoding
• Authentication management
• Session management
• Access control
• Cryptographic practices
• Error handling and logging
• Data protection
• Communication security
• System configuration
• Database security
• File management
• Memory management
• Testing

[gemini-code-assist]

Summary of Changes

Hello @XiNiHa, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the email verification flow by introducing a controlled delay for the "Resend verification email" button. This change aims to mitigate user confusion and prevent the accidental invalidation of the initial verification email by ensuring the button remains disabled for a short period after an email is sent, thereby improving the overall user experience during the verification process.

Highlights

• Prevent premature resend clicks: Introduced a state variable to control the disabled state of the "Resend verification email" button, preventing users from clicking it immediately after an email is sent.
• Implement delay for resend button: Added a 3-second delay after a verification email is successfully sent before the resend button becomes active again.
• Update button disabled state: Modified the "Resend verification email" buttons to use the new state variable for their disabled property, ensuring they are temporarily disabled after an email is sent.

Changelog

• packages/web/app/src/pages/auth-verify-email.tsx
  • Imported the useState hook for managing component state.
  • Initialized a new state variable resendDisabled to control the enabled/disabled status of the resend button.
  • Set resendDisabled to true at the beginning of the sendEmail callback to disable the button upon initiation.
  • Introduced a 3-second setTimeout after a successful verification email dispatch to enforce a delay.
  • Set resendDisabled to false once the email sending process and the delay are complete, re-enabling the button.
  • Updated the disabled prop of the "Resend verification email" buttons to reference the resendDisabled state.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[github-actions]

🚀 Snapshot Release (alpha)

The latest changes of this PR are available as alpha on npm (based on the declared changesets):

Package	Version	Info
hive	9.4.1-alpha-20260212052736-c9c2534d877aa62cce345802c2e9b540c9ccd21b	npm ↗︎ unpkg ↗︎

[gemini-code-assist]

Code Review

This PR introduces a delay for the resend verification email button. I've found a critical bug where the button can become permanently disabled on verification failure, and a potential issue from updating state on an unmounted component. I've included suggestions to fix both issues.

[github-actions]

💻 Website Preview

The latest changes are available as preview in: https://pr-7678.hive-landing-page.pages.dev

[github-actions]

🐋 This PR was built and pushed to the following Docker images:

Targets: build

Platforms: linux/amd64

Image Tag: c9c2534d877aa62cce345802c2e9b540c9ccd21b

[jdolle]

It's technically possible for the page to be unloaded during this timeout and the timeout will leak.

You can use the hook defined in packages/web/app/src/lib/hooks/use-timed.ts to have the timer cleaned up if the component is unmounted while it's running

[jdolle]

I'm okay with this UX as proposed. This delay might solve the problem, but perhaps we could provide a bit more context to users experiencing issues.

I was thinking about the UX the other day and had an idea that maybe this should be made a 2 step flow. E.g. on this page, have a text link (not a large button) asking, "Didn't receive a verification email?" and that could bring users to a page clarifying to check in spam/junk and also with a resend button.

Perhaps @jonathanawesome and @n1ru4l can weigh in on if we should adjust the design more or not.