Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AchoArnold merged 2 commits into from
Jun 29, 2026
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27f7116
feat(web): add verify email button on settings page
AchoArnold Jun 29, 2026
4d2a4bf
Update web/app/pages/settings/index.vue
AchoArnold Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 41 additions & 2 deletions web/app/pages/settings/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ import {
mdiCalendarClock,
mdiPlus,
} from '@mdi/js'
import { getAuth, signOut, type User as FirebaseUser } from 'firebase/auth'
import {
getAuth,
sendEmailVerification,
signOut,
type User as FirebaseUser,
} from 'firebase/auth'
import QRCode from 'qrcode'
import { ErrorMessages } from '~/utils/errors'
import { toApiError } from '~/utils/api-error'
Expand Down Expand Up @@ -45,6 +50,29 @@ const notificationsStore = useNotificationsStore()

const firebaseUser = ref<FirebaseUser | null>(null)
const gravatarUrl = ref<string | null>(null)
const sendingVerificationEmail = ref(false)
const verificationEmailSent = ref(false)

async function sendVerificationEmail() {
if (!firebaseUser.value) return
sendingVerificationEmail.value = true
try {
await sendEmailVerification(firebaseUser.value)
verificationEmailSent.value = true
notificationsStore.addNotification({
message: 'Verification email sent. Please check your inbox.',
type: 'success',
})
} catch (error) {
console.error('sendEmailVerification failed:', error)
notificationsStore.addNotification({
message: 'Failed to send verification email. Please try again later.',
type: 'error',
})
} finally {
sendingVerificationEmail.value = false
}
}

const computeGravatarUrl = async (email: string): Promise<string> => {
const normalized = email.trim().toLowerCase()
Expand Down Expand Up @@ -819,6 +847,17 @@ onMounted(async () => {
color="primary"
:icon="mdiShieldCheck"
/>
<VBtn
v-else
size="x-small"
variant="tonal"
color="warning"
:loading="sendingVerificationEmail"
:disabled="verificationEmailSent"
@click="sendVerificationEmail"
>
Verify Email
</VBtn>
</h4>
Comment on lines +850 to 861

@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!

<VAutocomplete
v-if="authStore.user"
Expand All @@ -834,7 +873,7 @@ onMounted(async () => {
</div>

<!-- API Key -->
<h5 class="text-headline-large mb-3 mt-3">API Key</h5>
<h5 class="text-headline-large mb-3 mt-0">API Key</h5>
<p class="text-medium-emphasis">
Use your API Key in the <v-code>x-api-key</v-code> HTTP Header
when sending requests to
Expand Down
Loading