From 8204282b257728df1ab8fda1a7e2eda3779e8d6c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 16 Feb 2026 12:47:56 +0000
Subject: [PATCH] feat: add email verification nudge banner to dashboard

Shows a dismissible yellow banner on all dashboard pages when the
logged-in user's email is not verified. Includes a "Resend email"
button that calls authClient.sendVerificationEmail() with success
and error feedback. Converts dashboard layout to Options API.

https://claude.ai/code/session_01TWXA6GHDVkZLT1hfDwVoEB
---
 TODO.md                               |   1 -
 components/EmailVerificationNudge.vue | 112 ++++++++++++++++++++++++++
 layouts/dashboard.vue                 |   7 +-
 3 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 components/EmailVerificationNudge.vue

diff --git a/TODO.md b/TODO.md
index 6de3dfe..9641cdd 100644
--- a/TODO.md
+++ b/TODO.md
@@ -5,5 +5,4 @@
 - click to access feedback details for items in personal feedback list
 - Notifications infrastructure 
 - Anonymous feedback claiming
-- Email verification nudge 
 - Create widgets for users to embed on their website
\ No newline at end of file
diff --git a/components/EmailVerificationNudge.vue b/components/EmailVerificationNudge.vue
new file mode 100644
index 0000000..a3fd503
--- /dev/null
+++ b/components/EmailVerificationNudge.vue
@@ -0,0 +1,112 @@
+<template>
+  <div
+    v-if="showNudge"
+    class="flex items-center gap-3 rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-3 text-sm text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-200"
+  >
+    <Icon name="lucide:mail-warning" class="h-4 w-4 shrink-0" />
+    <span class="flex-1">
+      Please verify your email address
+      <span class="font-medium">{{ userEmail }}</span>
+      to access all features.
+    </span>
+    <span v-if="successMessage" class="font-medium text-green-700 dark:text-green-400">
+      {{ successMessage }}
+    </span>
+    <span v-else-if="errorMessage" class="font-medium text-red-700 dark:text-red-400">
+      {{ errorMessage }}
+    </span>
+    <Button
+      v-if="!successMessage"
+      variant="outline"
+      size="sm"
+      :disabled="isSending"
+      class="shrink-0 border-yellow-300 bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-800"
+      @click="resendVerification"
+    >
+      <Icon v-if="isSending" name="lucide:loader-circle" class="h-3 w-3 animate-spin" />
+      {{ isSending ? 'Sending…' : 'Resend email' }}
+    </Button>
+    <button
+      class="ml-1 shrink-0 rounded p-0.5 opacity-60 hover:opacity-100"
+      aria-label="Dismiss"
+      @click="dismiss"
+    >
+      <Icon name="lucide:x" class="h-4 w-4" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { authClient } from '~/lib/auth-client'
+
+export default {
+  name: 'EmailVerificationNudge',
+
+  data() {
+    return {
+      session: null,
+      isPending: true,
+      dismissed: false,
+      isSending: false,
+      successMessage: '',
+      errorMessage: '',
+    }
+  },
+
+  computed: {
+    userEmail() {
+      return this.session?.user?.email || ''
+    },
+
+    emailVerified() {
+      return this.session?.user?.emailVerified ?? true
+    },
+
+    showNudge() {
+      return !this.isPending && !this.dismissed && !this.emailVerified
+    },
+  },
+
+  async mounted() {
+    if (import.meta.client) {
+      try {
+        const { data: session } = await authClient.useSession(useFetch)
+        this.session = session.value || null
+        this.isPending = false
+
+        watch(session, (next) => {
+          this.session = next || null
+        })
+      } catch {
+        this.isPending = false
+      }
+    }
+  },
+
+  methods: {
+    dismiss() {
+      this.dismissed = true
+    },
+
+    async resendVerification() {
+      if (!this.userEmail || this.isSending) return
+
+      this.isSending = true
+      this.errorMessage = ''
+      this.successMessage = ''
+
+      try {
+        await authClient.sendVerificationEmail({
+          email: this.userEmail,
+          callbackURL: '/dashboard',
+        })
+        this.successMessage = 'Verification email sent!'
+      } catch {
+        this.errorMessage = 'Failed to send. Please try again.'
+      } finally {
+        this.isSending = false
+      }
+    },
+  },
+}
+</script>
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
index 3fe1fd2..5de339e 100644
--- a/layouts/dashboard.vue
+++ b/layouts/dashboard.vue
@@ -12,6 +12,7 @@
           </div>
         </header>
         <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <EmailVerificationNudge />
           <slot />
         </div>
       </SidebarInset>
@@ -19,4 +20,8 @@
   </TooltipProvider>
 </template>
 
-<script setup lang="ts"></script>
+<script>
+export default {
+  name: 'DashboardLayout',
+}
+</script>