Add invitation reminder and acceptance flows for teams

- show pending team invites with Send reminder and Revoke actions in settings
- send org invitation emails with accept-invitation link and new accept page
- support resend flag in invite API and cover team invite workflow in Playwright

Author: Andreas-Froyland

components/settings/SettingsOrganization.vue

@@ -261,19 +261,30 @@
               <p class="text-xs text-muted-foreground">
                 Invited as <span class="capitalize">{{ inv.role }}</span>
                 <span v-if="inv.teamName"> to {{ inv.teamName }}</span>
-                &middot; Expires {{ formatDate(inv.expiresAt) }}
+                &middot; Sent {{ formatDate(inv.createdAt) }} &middot; Expires {{ formatDate(inv.expiresAt) }}
               </p>
             </div>
-            <Button
-              variant="ghost"
-              size="sm"
-              class="text-red-600 hover:text-red-700 shrink-0"
-              :disabled="cancellingInvitationId === inv.id"
-              @click="cancelInvitation(inv.id)"
-            >
-              <Icon v-if="cancellingInvitationId === inv.id" name="lucide:loader-2" class="h-4 w-4 animate-spin" />
-              <span v-else>Cancel</span>
-            </Button>
+            <div class="flex items-center gap-2 shrink-0">
+              <Button
+                variant="outline"
+                size="sm"
+                :disabled="resendingInvitationId === inv.id || cancellingInvitationId === inv.id"
+                @click="resendInvitation(inv)"
+              >
+                <Icon v-if="resendingInvitationId === inv.id" name="lucide:loader-2" class="h-4 w-4 animate-spin" />
+                <span v-else>Send reminder</span>
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                class="text-red-600 hover:text-red-700"
+                :disabled="cancellingInvitationId === inv.id || resendingInvitationId === inv.id"
+                @click="cancelInvitation(inv.id)"
+              >
+                <Icon v-if="cancellingInvitationId === inv.id" name="lucide:loader-2" class="h-4 w-4 animate-spin" />
+                <span v-else>Revoke</span>
+              </Button>
+            </div>
           </div>
         </div>
       </CardContent>
@@ -442,6 +453,7 @@ export default {
 
       // Cancel invitation
       cancellingInvitationId: null,
+      resendingInvitationId: null,
     }
   },
 
@@ -814,7 +826,7 @@ export default {
         this.cancellingInvitationId = invitationId
         await authClient.organization.cancelInvitation({ invitationId })
         this.pendingInvitations = this.pendingInvitations.filter((inv) => inv.id !== invitationId)
-        toast.success('Invitation cancelled')
+        toast.success('Invitation revoked')
       } catch (error) {
         console.error('Error cancelling invitation:', error)
         toast.error('Failed to cancel invitation')
@@ -823,6 +835,31 @@ export default {
       }
     },
 
+    async resendInvitation(invitation) {
+      if (!this.organizationDetails?.id) return
+      try {
+        this.resendingInvitationId = invitation.id
+        await $fetch('/api/organizations/invite', {
+          method: 'POST',
+          body: {
+            organizationId: this.organizationDetails.id,
+            email: invitation.email,
+            role: invitation.role,
+            ...(invitation.teamId ? { teamId: invitation.teamId } : {}),
+            resend: true,
+          },
+        })
+        await this.loadPendingInvitations()
+        toast.success('Invitation reminder sent')
+      } catch (error) {
+        console.error('Error resending invitation:', error)
+        const message = error?.data?.statusMessage || error?.data?.error?.message || 'Failed to resend invitation'
+        toast.error(message)
+      } finally {
+        this.resendingInvitationId = null
+      }
+    },
+
     async updateOrganization() {
       if (!this.organizationDetails?.slug || !this.canEditOrganization) return
 

components/settings/SettingsTeam.vue

@@ -164,6 +164,72 @@
       </CardContent>
     </Card>
 
+    <!-- Pending Team Invitations -->
+    <Card
+      v-if="currentTeam && !isDefaultTeam(currentTeam) && (isLoadingInvitations || pendingInvitations.length > 0)"
+      data-testid="team-pending-invitations"
+    >
+      <CardHeader>
+        <CardTitle class="flex items-center gap-2">
+          <Icon name="lucide:mail" class="h-5 w-5" />
+          Pending Invites
+        </CardTitle>
+        <CardDescription
+          >Outstanding invitations for {{ currentTeam.name }} that have not yet been accepted.</CardDescription
+        >
+      </CardHeader>
+      <CardContent>
+        <div v-if="isLoadingInvitations" class="space-y-2">
+          <Skeleton class="h-14 w-full" />
+          <Skeleton class="h-14 w-full" />
+        </div>
+        <div v-else class="space-y-2">
+          <div
+            v-for="invitation in pendingInvitations"
+            :key="invitation.id"
+            data-testid="team-pending-invitation-row"
+            class="flex items-center justify-between rounded-lg border p-3"
+          >
+            <div class="min-w-0">
+              <p class="font-medium truncate">{{ invitation.email }}</p>
+              <p class="text-xs text-muted-foreground">
+                Invited {{ formatDate(invitation.createdAt) }} &middot; Expires {{ formatDate(invitation.expiresAt) }}
+              </p>
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <Button
+                variant="outline"
+                size="sm"
+                :disabled="resendingInvitationId === invitation.id || cancellingInvitationId === invitation.id"
+                @click="resendInvitation(invitation)"
+              >
+                <Icon
+                  v-if="resendingInvitationId === invitation.id"
+                  name="lucide:loader-2"
+                  class="h-4 w-4 animate-spin"
+                />
+                <span v-else>Send reminder</span>
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                class="text-red-600 hover:text-red-700"
+                :disabled="cancellingInvitationId === invitation.id || resendingInvitationId === invitation.id"
+                @click="cancelInvitation(invitation.id)"
+              >
+                <Icon
+                  v-if="cancellingInvitationId === invitation.id"
+                  name="lucide:loader-2"
+                  class="h-4 w-4 animate-spin"
+                />
+                <span v-else>Revoke</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
     <!-- Danger Zone -->
     <Card v-if="currentTeam && !isDefaultTeam(currentTeam)" class="border-red-200">
       <CardHeader>
@@ -235,7 +301,7 @@
         </div>
         <DialogFooter>
           <Button variant="outline" @click="showInviteDialog = false">Cancel</Button>
-          <Button :disabled="isInviting || !inviteEmail.trim()" @click="inviteToTeam">
+          <Button :disabled="isInviting || !isValidInviteEmail" @click="inviteToTeam">
             <Icon v-if="isInviting" name="lucide:loader-2" class="h-4 w-4 mr-2 animate-spin" />
             Send Invite
           </Button>
@@ -287,13 +353,17 @@ export default {
       teamName: '',
       teamSlug: '',
       teamMembers: [],
+      pendingInvitations: [],
       isLoading: true,
       isLoadingMembers: false,
+      isLoadingInvitations: false,
       isSavingTeam: false,
       isCreatingTeam: false,
       isInviting: false,
       isDeletingTeam: false,
       switchingTeamId: null,
+      cancellingInvitationId: null,
+      resendingInvitationId: null,
       showCreateTeamDialog: false,
       showInviteDialog: false,
       showDeleteTeamDialog: false,
@@ -318,6 +388,9 @@ export default {
         (this.teamSlug.trim() && this.teamSlug.trim() !== this.currentTeam?.slug)
       )
     },
+    isValidInviteEmail() {
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.inviteEmail.trim())
+    },
     additionalTeams() {
       return this.allTeams.filter((t) => !this.isDefaultTeam(t))
     },
@@ -397,7 +470,7 @@ export default {
     async handleActiveTeamChanged() {
       await this.syncActiveTeamContext()
       this.allTeams = await this.fetchAllTeams()
-      await this.loadTeamMembers()
+      await Promise.all([this.loadTeamMembers(), this.loadPendingInvitations()])
     },
 
     async resolveOrganizationId() {
@@ -447,7 +520,7 @@ export default {
         this.allTeams = allTeams
         this.organizations = organizations
 
-        await this.loadTeamMembers()
+        await Promise.all([this.loadTeamMembers(), this.loadPendingInvitations()])
       } catch (error) {
         console.error('Error during team settings initialization:', error)
         toast.error('Failed to load team settings')
@@ -489,6 +562,40 @@ export default {
       }
     },
 
+    async resolveOrganizationSlug() {
+      if (this.activeOrganization?.slug) {
+        return this.activeOrganization.slug
+      }
+
+      const organization = this.organizations.find((entry) => entry.id === this.currentTeam?.organizationId)
+      return organization?.slug || null
+    },
+
+    async loadPendingInvitations() {
+      if (!this.currentTeam?.id || this.isDefaultTeam(this.currentTeam)) {
+        this.pendingInvitations = []
+        return
+      }
+
+      const organizationSlug = await this.resolveOrganizationSlug()
+      if (!organizationSlug) {
+        this.pendingInvitations = []
+        return
+      }
+
+      try {
+        this.isLoadingInvitations = true
+        const response = await $fetch(`/api/orgs/${organizationSlug}/invitations`)
+        const invitations = response?.data || []
+        this.pendingInvitations = invitations.filter((invitation) => invitation.teamId === this.currentTeam.id)
+      } catch (error) {
+        console.error('Error loading pending team invitations:', error)
+        this.pendingInvitations = []
+      } finally {
+        this.isLoadingInvitations = false
+      }
+    },
+
     async switchToTeam(team) {
       if (team.id === this.currentTeam?.id || this.switchingTeamId) return
 
@@ -515,7 +622,7 @@ export default {
           this.activeOrganization = await this.fetchActiveOrganization()
         }
 
-        await this.loadTeamMembers()
+        await Promise.all([this.loadTeamMembers(), this.loadPendingInvitations()])
 
         // Notify other components (sidebar TeamSwitcher, pages)
         if (import.meta.client) {
@@ -610,7 +717,7 @@ export default {
 
           await this.syncActiveTeamContext()
           this.allTeams = await this.fetchAllTeams()
-          await this.loadTeamMembers()
+          await Promise.all([this.loadTeamMembers(), this.loadPendingInvitations()])
 
           // Notify other components
           if (import.meta.client) {
@@ -656,6 +763,7 @@ export default {
         })
         this.showInviteDialog = false
         this.inviteEmail = ''
+        await this.loadPendingInvitations()
         toast.success('Invitation sent')
       } catch (error) {
         console.error('Error inviting team member:', error)
@@ -668,6 +776,50 @@ export default {
       }
     },
 
+    async resendInvitation(invitation) {
+      const organizationId = await this.resolveOrganizationId()
+      if (!organizationId || !this.currentTeam?.id) {
+        toast.error('No active workspace context')
+        return
+      }
+
+      try {
+        this.resendingInvitationId = invitation.id
+        await $fetch('/api/organizations/invite', {
+          method: 'POST',
+          body: {
+            organizationId,
+            email: invitation.email,
+            role: invitation.role,
+            teamId: this.currentTeam.id,
+            resend: true,
+          },
+        })
+        await this.loadPendingInvitations()
+        toast.success('Invitation reminder sent')
+      } catch (error) {
+        console.error('Error resending team invitation:', error)
+        const message = error?.data?.statusMessage || error?.data?.error?.message || 'Failed to resend invitation'
+        toast.error(message)
+      } finally {
+        this.resendingInvitationId = null
+      }
+    },
+
+    async cancelInvitation(invitationId) {
+      try {
+        this.cancellingInvitationId = invitationId
+        await authClient.organization.cancelInvitation({ invitationId })
+        this.pendingInvitations = this.pendingInvitations.filter((invitation) => invitation.id !== invitationId)
+        toast.success('Invitation revoked')
+      } catch (error) {
+        console.error('Error cancelling team invitation:', error)
+        toast.error('Failed to revoke invitation')
+      } finally {
+        this.cancellingInvitationId = null
+      }
+    },
+
     async removeTeamMember(userId) {
       if (!this.currentTeam?.id) return
       try {
@@ -696,7 +848,7 @@ export default {
         this.allTeams = this.allTeams.filter((t) => t.id !== deletedTeamId)
 
         await this.syncActiveTeamContext()
-        await this.loadTeamMembers()
+        await Promise.all([this.loadTeamMembers(), this.loadPendingInvitations()])
 
         // Notify other components
         if (import.meta.client) {