Skip to content

Commit 27f7116

Browse files
AchoArnoldCopilot
andcommitted
feat(web): add verify email button on settings page
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>
1 parent 4eb8851 commit 27f7116

1 file changed

Lines changed: 40 additions & 2 deletions

File tree

web/app/pages/settings/index.vue

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,12 @@ import {
1515
mdiCalendarClock,
1616
mdiPlus,
1717
} from '@mdi/js'
18-
import { getAuth, signOut, type User as FirebaseUser } from 'firebase/auth'
18+
import {
19+
getAuth,
20+
sendEmailVerification,
21+
signOut,
22+
type User as FirebaseUser,
23+
} from 'firebase/auth'
1924
import QRCode from 'qrcode'
2025
import { ErrorMessages } from '~/utils/errors'
2126
import { toApiError } from '~/utils/api-error'
@@ -45,6 +50,28 @@ const notificationsStore = useNotificationsStore()
4550
4651
const firebaseUser = ref<FirebaseUser | null>(null)
4752
const gravatarUrl = ref<string | null>(null)
53+
const sendingVerificationEmail = ref(false)
54+
const verificationEmailSent = ref(false)
55+
56+
async function sendVerificationEmail() {
57+
if (!firebaseUser.value) return
58+
sendingVerificationEmail.value = true
59+
try {
60+
await sendEmailVerification(firebaseUser.value)
61+
verificationEmailSent.value = true
62+
notificationsStore.addNotification({
63+
message: 'Verification email sent. Please check your inbox.',
64+
type: 'success',
65+
})
66+
} catch {
67+
notificationsStore.addNotification({
68+
message: 'Failed to send verification email. Please try again later.',
69+
type: 'error',
70+
})
71+
} finally {
72+
sendingVerificationEmail.value = false
73+
}
74+
}
4875
4976
const computeGravatarUrl = async (email: string): Promise<string> => {
5077
const normalized = email.trim().toLowerCase()
@@ -819,6 +846,17 @@ onMounted(async () => {
819846
color="primary"
820847
:icon="mdiShieldCheck"
821848
/>
849+
<VBtn
850+
v-else
851+
size="x-small"
852+
variant="tonal"
853+
color="warning"
854+
:loading="sendingVerificationEmail"
855+
:disabled="verificationEmailSent"
856+
@click="sendVerificationEmail"
857+
>
858+
Verify Email
859+
</VBtn>
822860
</h4>
823861
<VAutocomplete
824862
v-if="authStore.user"
@@ -834,7 +872,7 @@ onMounted(async () => {
834872
</div>
835873

836874
<!-- API Key -->
837-
<h5 class="text-headline-large mb-3 mt-3">API Key</h5>
875+
<h5 class="text-headline-large mb-3 mt-0">API Key</h5>
838876
<p class="text-medium-emphasis">
839877
Use your API Key in the <v-code>x-api-key</v-code> HTTP Header
840878
when sending requests to

0 commit comments

Comments
 (0)