Skip to content

feat(web): add verify email button on settings page#930

Merged
AchoArnold merged 2 commits into
mainfrom
feat/settings-verify-email-button
Jun 29, 2026
Merged

feat(web): add verify email button on settings page#930
AchoArnold merged 2 commits into
mainfrom
feat/settings-verify-email-button

Conversation

@AchoArnold

@AchoArnold AchoArnold commented Jun 29, 2026

Copy link
Copy Markdown
Member

Show a small Vuetify button to trigger email verification when the user's email is not verified, replacing the verified badge icon. The button disables after sending to prevent duplicate requests.

@AchoArnold
feat(web): add verify email button on settings page
27f7116 
Show a small Vuetify button to trigger email verification when
the user's email is not verified, replacing the verified badge.
The button disables after sending to prevent duplicate requests.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@what-the-diff

what-the-diff Bot commented Jun 29, 2026

Copy link
Copy Markdown

PR Summary

  • Email Verification Added for Users
    • The addition allows emails to be sent from an established service called Firebase to verify users.
    • The functionality has a tracking system to show when the verification email is being sent and when it has been dispatched.
  • Implementation of a Verification Action
    • A new "Verify Email" button has been included, this button initiates the verification process. Its status will vary as per the progression of the email dispatch.
  • Visual Enhancements
    • Updates in the design have been carried out for a more pleasing display and improved spacing, specifically in the API Key section of the user interface.

@codacy-production

codacy-production Bot commented Jun 29, 2026

Copy link
Copy Markdown

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 0 complexity · 0 duplication

Metric Results
Complexity 0
Duplication 0

View in Codacy

NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.

@greptile-apps

greptile-apps Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR adds a "Verify Email" button to the settings profile card, shown only when the user's email is not yet verified. The button calls Firebase's sendEmailVerification, disables on success to prevent duplicate sends, and shows a notification for both outcomes.

  • A sendingVerificationEmail loading guard and verificationEmailSent disabled-after-success guard are added, giving correct duplicate-send prevention with no race conditions.
  • The spacing tweak on the API Key heading (mt-3 → mt-0) is a minor layout adjustment bundled with the feature.

Confidence Score: 4/5

Safe to merge — the feature is self-contained and the core verification flow works correctly.

The logic is sound: guards prevent duplicate sends, both success and error paths show user feedback, and the Firebase import is used correctly. The two findings are a missing error log in the catch block and a button rendered inside an h4 heading (invalid HTML), neither of which breaks functionality.

web/app/pages/settings/index.vue — the catch block and the h4/button nesting are worth a quick look before merging.

Important Files Changed

Filename Overview
web/app/pages/settings/index.vue Adds Firebase sendEmailVerification call with loading/sent state guards and a conditional Vuetify button in the profile section; two minor issues: error swallowed in catch without logging, and VBtn placed inside an h4 heading element which is invalid HTML.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant User
    participant SettingsPage
    participant Firebase
    participant NotificationsStore

    User->>SettingsPage: clicks "Verify Email" button
    SettingsPage->>SettingsPage: "sendingVerificationEmail = true"
    SettingsPage->>Firebase: sendEmailVerification(firebaseUser)
    alt success
        Firebase-->>SettingsPage: resolved
        SettingsPage->>SettingsPage: "verificationEmailSent = true"
        SettingsPage->>NotificationsStore: addNotification (success)
        SettingsPage->>User: button disabled permanently in session
    else error
        Firebase-->>SettingsPage: throws error
        SettingsPage->>NotificationsStore: addNotification (error)
        SettingsPage->>User: button re-enabled (can retry)
    end
    SettingsPage->>SettingsPage: "sendingVerificationEmail = false"
Loading 
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant User
    participant SettingsPage
    participant Firebase
    participant NotificationsStore

    User->>SettingsPage: clicks "Verify Email" button
    SettingsPage->>SettingsPage: "sendingVerificationEmail = true"
    SettingsPage->>Firebase: sendEmailVerification(firebaseUser)
    alt success
        Firebase-->>SettingsPage: resolved
        SettingsPage->>SettingsPage: "verificationEmailSent = true"
        SettingsPage->>NotificationsStore: addNotification (success)
        SettingsPage->>User: button disabled permanently in session
    else error
        Firebase-->>SettingsPage: throws error
        SettingsPage->>NotificationsStore: addNotification (error)
        SettingsPage->>User: button re-enabled (can retry)
    end
    SettingsPage->>SettingsPage: "sendingVerificationEmail = false"
Loading

Reviews (1): Last reviewed commit: "feat(web): add verify email button on se..." | Re-trigger Greptile

greptile-apps[bot]
greptile-apps Bot reviewed Jun 29, 2026
View reviewed changes
Comment thread web/app/pages/settings/index.vue
Comment on lines +849 to 860
<VBtn
v-else
size="x-small"
variant="tonal"
color="warning"
:loading="sendingVerificationEmail"
:disabled="verificationEmailSent"
@click="sendVerificationEmail"
>
Verify Email
</VBtn>
</h4>

@greptile-apps greptile-apps Bot Jun 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Interactive element inside a heading

A <VBtn> (which renders a <button>) nested inside an <h4> is invalid HTML — the spec forbids interactive content inside heading elements. This can cause accessibility issues (screen readers may misparse the heading) and browser-normalised rendering quirks. Consider wrapping both the email text and the icon/button in a <div> or <span> container that sits next to or below the <h4>, rather than placing the button inside it.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Comment thread web/app/pages/settings/index.vue Outdated
@AchoArnold @greptile-apps
Update web/app/pages/settings/index.vue
4d2a4bf 
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
@AchoArnold AchoArnold merged commit 0cc27fb into main Jun 29, 2026
7 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@AchoArnold