-
-
- Please type {{ currentTeam?.name }} to confirm deletion:
-
-
-
+
+
-
-
+
@@ -369,216 +175,156 @@ import { toast } from 'vue-sonner'
export default {
name: 'SettingsTeam',
- setup() {
- // Use the organizations composable
- const organizations = authClient.useListOrganizations()
- const activeOrganization = authClient.useActiveOrganization()
-
- return {
- organizations,
- activeOrganization
- }
- },
data() {
return {
- // Current team data
+ session: null,
currentTeam: null,
- members: [],
- pendingInvitations: [],
- userRole: null,
- membershipLimit: 50,
-
- // Loading states
+ activeOrganization: null,
+ teamName: '',
+ teamMembers: [],
isLoading: true,
isLoadingMembers: false,
- isUpdating: false,
+ isSavingTeam: false,
isCreatingTeam: false,
isInviting: false,
- isDeleting: false,
-
- // Form data
- teamName: '',
- teamSlug: '',
- newTeamName: '',
- newTeamSlug: '',
- inviteEmail: '',
- inviteRole: 'member',
- deleteConfirmation: '',
-
- // Dialog states
+ isDeletingTeam: false,
showCreateTeamDialog: false,
showInviteDialog: false,
showDeleteTeamDialog: false,
+ newTeamName: '',
+ inviteEmail: '',
+ deleteConfirmation: '',
}
},
-
- computed: {
- // Loading states from composables
- isLoadingOrganizations() {
- return this.organizations.isPending || this.activeOrganization.isPending
- },
-
- // Get current team from active organization
- currentTeamFromComposable() {
- return this.activeOrganization.data || null
- },
-
- // Check if user has organizations
- hasOrganizations() {
- return this.organizations.data && this.organizations.data.length > 0
- },
-
- canManageTeam() {
- return this.userRole === 'owner' || this.userRole === 'admin'
- },
-
- canInviteUsers() {
- return this.canManageTeam && this.members.length < this.membershipLimit
- },
-
- canManageMember() {
- return (member) => {
- if (this.userRole === 'owner') return member.role !== 'owner'
- if (this.userRole === 'admin') return member.role === 'member'
- return false
- }
- },
-
- canPromoteToAdmin() {
- return (member) => this.userRole === 'owner' && member.role === 'member'
- },
-
- canDemoteFromAdmin() {
- return (member) => this.userRole === 'owner' && member.role === 'admin'
- },
-
- canRemoveMember() {
- return (member) => {
- if (member.role === 'owner') return false
- if (this.userRole === 'owner') return true
- if (this.userRole === 'admin') return member.role === 'member'
- return false
- }
- }
- },
-
- watch: {
- // Watch for changes in active organization from composable
- 'activeOrganization.data': {
- handler(newOrg, oldOrg) {
- if (newOrg !== oldOrg && !this.activeOrganization.isPending) {
- this.currentTeam = newOrg
- if (newOrg) {
- this.teamName = newOrg.name
- this.teamSlug = newOrg.slug
- this.loadTeamDetails()
- }
- }
- },
- immediate: true
- }
+
+ async mounted() {
+ await this.initialize()
},
-
+
methods: {
- async loadTeamDetails() {
- if (!this.currentTeam) return
-
+ async resolveOrganizationId() {
+ if (this.activeOrganization?.id) {
+ return this.activeOrganization.id
+ }
+
+ if (this.currentTeam?.organizationId) {
+ return this.currentTeam.organizationId
+ }
+
try {
- // Get user's role in the organization
- const { data: membership } = await authClient.organization.getMembership({
- organizationId: this.currentTeam.id
- })
- this.userRole = membership?.role
-
- await this.loadMembers()
- await this.loadPendingInvitations()
- } catch (error) {
- console.error('Error loading team details:', error)
- toast.error('Failed to load team details')
+ const response = await $fetch('/api/teams/active')
+ return response?.data?.organizationId || null
+ } catch (_error) {
+ return null
}
},
-
- async loadTeamData() {
+
+ async initialize() {
try {
- this.isLoading = true
-
- // Wait for organizations to load
- while (this.organizations.isPending || this.activeOrganization.isPending) {
- await new Promise(resolve => setTimeout(resolve, 100))
- }
-
- // Get current team from composable
- this.currentTeam = this.currentTeamFromComposable
-
- if (this.currentTeam) {
+ await $fetch('/api/teams/active')
+
+ const { data: session } = authClient.useSession()
+ this.session = session.value
+ watch(session, (newSession) => {
+ this.session = newSession || null
+ })
+
+ const { data: activeTeam } = authClient.useActiveTeam()
+ this.currentTeam = activeTeam.value
+ if (this.currentTeam?.name) {
this.teamName = this.currentTeam.name
- this.teamSlug = this.currentTeam.slug
- await this.loadTeamDetails()
}
+ watch(activeTeam, async (newTeam) => {
+ this.currentTeam = newTeam || null
+ this.teamName = newTeam?.name || ''
+ await this.loadTeamMembers()
+ })
+
+ const { data: activeOrganization } = authClient.useActiveOrganization()
+ this.activeOrganization = activeOrganization.value
+ watch(activeOrganization, (newOrg) => {
+ this.activeOrganization = newOrg || null
+ })
+
+ await this.loadTeamMembers()
} catch (error) {
- console.error('Error loading team data:', error)
- toast.error('Failed to load team data')
+ console.error('Error initializing team settings:', error)
+ toast.error('Failed to load team settings')
} finally {
this.isLoading = false
}
},
-
- async loadMembers() {
- if (!this.currentTeam) return
-
+
+ async loadTeamMembers() {
+ if (!this.currentTeam?.id) {
+ this.teamMembers = []
+ return
+ }
+
try {
this.isLoadingMembers = true
- const { data: members } = await authClient.organization.listMembers({
- organizationId: this.currentTeam.id
+ const { data } = await authClient.organization.listTeamMembers({
+ query: { teamId: this.currentTeam.id },
})
- this.members = members || []
+ this.teamMembers = data || []
} catch (error) {
- console.error('Error loading members:', error)
+ console.error('Error loading team members:', error)
toast.error('Failed to load team members')
} finally {
this.isLoadingMembers = false
}
},
-
- async loadPendingInvitations() {
- if (!this.currentTeam) return
-
+
+ async updateTeam() {
+ if (!this.currentTeam?.id || !this.teamName.trim()) return
try {
- const { data: invitations } = await authClient.organization.listInvitations({
- organizationId: this.currentTeam.id
+ this.isSavingTeam = true
+ await authClient.organization.updateTeam({
+ teamId: this.currentTeam.id,
+ data: { name: this.teamName.trim() },
})
- this.pendingInvitations = invitations?.filter(inv => inv.status === 'pending') || []
+ toast.success('Team updated')
} catch (error) {
- console.error('Error loading invitations:', error)
+ console.error('Error updating team:', error)
+ toast.error('Failed to update team')
+ } finally {
+ this.isSavingTeam = false
}
},
-
+
async createTeam() {
- if (!this.newTeamName.trim()) {
- toast.error('Team name is required')
+ if (!this.newTeamName.trim()) return
+
+ const organizationId = await this.resolveOrganizationId()
+ if (!organizationId) {
+ toast.error('No active organization context')
return
}
-
+
try {
this.isCreatingTeam = true
- const newTeam = await authClient.organization.create({
- name: this.newTeamName,
- slug: this.newTeamSlug || this.newTeamName.toLowerCase().replace(/\s+/g, '-')
+ const result = await authClient.organization.createTeam({
+ name: this.newTeamName.trim(),
+ organizationId,
})
-
- // Set the new team as active
- if (newTeam.data) {
- await authClient.organization.setActive({ organizationId: newTeam.data.id })
+
+ if (result?.data?.id) {
+ if (this.session?.user?.id) {
+ await authClient.organization.addTeamMember({
+ teamId: result.data.id,
+ userId: this.session.user.id,
+ })
+ }
+
+ await $fetch('/api/teams/active', {
+ method: 'POST',
+ body: { teamId: result.data.id },
+ })
}
-
- toast.success('Team created successfully')
+
this.showCreateTeamDialog = false
this.newTeamName = ''
- this.newTeamSlug = ''
-
- // Refresh organizations list
- await this.organizations.refresh?.()
- await this.activeOrganization.refresh?.()
+ toast.success('Team created')
} catch (error) {
console.error('Error creating team:', error)
toast.error('Failed to create team')
@@ -586,167 +332,64 @@ export default {
this.isCreatingTeam = false
}
},
-
- async updateTeam() {
- if (!this.currentTeam) return
-
- try {
- this.isUpdating = true
- await authClient.organization.update({
- organizationId: this.currentTeam.id,
- name: this.teamName,
- slug: this.teamSlug
- })
-
- toast.success('Team updated successfully')
-
- // Refresh organizations to reflect the changes
- await this.organizations.refresh?.()
- await this.activeOrganization.refresh?.()
- } catch (error) {
- console.error('Error updating team:', error)
- toast.error('Failed to update team')
- } finally {
- this.isUpdating = false
- }
- },
-
- async inviteMember() {
- if (!this.inviteEmail.trim()) {
- toast.error('Email address is required')
- return
- }
-
+
+ async inviteToTeam() {
+ if (!this.currentTeam?.id || !this.activeOrganization?.id || !this.inviteEmail.trim()) return
try {
this.isInviting = true
await authClient.organization.inviteMember({
- organizationId: this.currentTeam.id,
- email: this.inviteEmail,
- role: this.inviteRole
+ organizationId: this.activeOrganization.id,
+ email: this.inviteEmail.trim(),
+ role: 'member',
+ teamId: this.currentTeam.id,
})
-
- toast.success('Invitation sent successfully')
this.showInviteDialog = false
this.inviteEmail = ''
- this.inviteRole = 'member'
- await this.loadPendingInvitations()
+ toast.success('Invitation sent')
} catch (error) {
- console.error('Error inviting member:', error)
+ console.error('Error inviting team member:', error)
toast.error('Failed to send invitation')
} finally {
this.isInviting = false
}
},
-
- async updateMemberRole(memberId, newRole) {
- try {
- await authClient.organization.updateMemberRole({
- organizationId: this.currentTeam.id,
- memberId,
- role: newRole
- })
-
- toast.success('Member role updated successfully')
- await this.loadMembers()
- } catch (error) {
- console.error('Error updating member role:', error)
- toast.error('Failed to update member role')
- }
- },
-
- async removeMember(memberId) {
- try {
- await authClient.organization.removeMember({
- organizationId: this.currentTeam.id,
- memberId
- })
-
- toast.success('Member removed successfully')
- await this.loadMembers()
- } catch (error) {
- console.error('Error removing member:', error)
- toast.error('Failed to remove member')
- }
- },
-
- async resendInvitation(invitationId) {
- try {
- await authClient.organization.resendInvitation({
- invitationId
- })
-
- toast.success('Invitation resent successfully')
- } catch (error) {
- console.error('Error resending invitation:', error)
- toast.error('Failed to resend invitation')
- }
- },
-
- async cancelInvitation(invitationId) {
+
+ async removeTeamMember(userId) {
+ if (!this.currentTeam?.id) return
try {
- await authClient.organization.cancelInvitation({
- invitationId
+ await authClient.organization.removeTeamMember({
+ teamId: this.currentTeam.id,
+ userId,
})
-
- toast.success('Invitation cancelled')
- await this.loadPendingInvitations()
+ await this.loadTeamMembers()
+ toast.success('Team member removed')
} catch (error) {
- console.error('Error cancelling invitation:', error)
- toast.error('Failed to cancel invitation')
+ console.error('Error removing team member:', error)
+ toast.error('Failed to remove team member')
}
},
-
+
async deleteTeam() {
- if (!this.currentTeam) return
-
+ if (!this.currentTeam?.id) return
try {
- this.isDeleting = true
- await authClient.organization.delete({
- organizationId: this.currentTeam.id
- })
-
- toast.success('Team deleted successfully')
+ this.isDeletingTeam = true
+ await authClient.organization.removeTeam({ teamId: this.currentTeam.id })
this.showDeleteTeamDialog = false
this.deleteConfirmation = ''
-
- // Refresh organizations list
- await this.organizations.refresh?.()
- await this.activeOrganization.refresh?.()
-
- // Wait a moment for the data to update
- await new Promise(resolve => setTimeout(resolve, 500))
-
- // Navigate to dashboard if no teams left
- if (!this.organizations.data || this.organizations.data.length === 0) {
- await navigateTo('/dashboard')
- }
+ this.currentTeam = null
+ this.teamMembers = []
+ toast.success('Team deleted')
} catch (error) {
console.error('Error deleting team:', error)
toast.error('Failed to delete team')
} finally {
- this.isDeleting = false
+ this.isDeletingTeam = false
}
},
-
- getInitials(name) {
- if (!name) return '?'
- return name
- .split(' ')
- .map(n => n[0])
- .join('')
- .toUpperCase()
- .slice(0, 2)
- },
-
+
formatDate(date) {
return new Date(date).toLocaleDateString()
- }
+ },
},
-
- mounted() {
- // The watcher will handle loading when organizations are ready
- // Set initial loading state
- this.isLoading = this.isLoadingOrganizations
- }
}
-
\ No newline at end of file
+
diff --git a/components/sidebar/AppSidebar.vue b/components/sidebar/AppSidebar.vue
index 4bc2f62..a375b59 100644
--- a/components/sidebar/AppSidebar.vue
+++ b/components/sidebar/AppSidebar.vue
@@ -16,51 +16,56 @@ const props = withDefaults(defineProps
(), {
// Define navigation items
const feedbackItems = [
{
- title: "Dashboard",
- url: "/dashboard",
- icon: "lucide:layout-dashboard",
+ title: 'Dashboard',
+ url: '/dashboard',
+ icon: 'lucide:layout-dashboard',
},
{
- title: "Feedback",
- url: "/feedback",
- icon: "lucide:message-square",
+ title: 'Feedback',
+ url: '/feedback',
+ icon: 'lucide:message-square',
},
{
- title: "Roadmap",
- url: "/roadmap",
- icon: "lucide:map",
+ title: 'Roadmap',
+ url: '/roadmap',
+ icon: 'lucide:map',
},
{
- title: "Changelog",
- url: "/changelog",
- icon: "lucide:scroll-text",
+ title: 'Changelog',
+ url: '/changelog',
+ icon: 'lucide:scroll-text',
},
]
const managementItems = [
{
- title: "Team",
- url: "/settings#team",
- icon: "lucide:user-plus",
+ title: 'Products',
+ url: '/products',
+ icon: 'lucide:package',
+ },
+ {
+ title: 'Team',
+ url: '/settings#team',
+ icon: 'lucide:user-plus',
},
]
const supportItems = [
{
- title: "Help Center",
- url: "/help",
- icon: "lucide:help-circle",
+ title: 'Help Center',
+ url: '/help',
+ icon: 'lucide:help-circle',
},
{
- title: "Settings",
- url: "/settings",
- icon: "lucide:settings",
+ title: 'Settings',
+ url: '/settings',
+ icon: 'lucide:settings',
},
]
-
+
@@ -123,4 +128,4 @@ const supportItems = [
-
\ No newline at end of file
+
diff --git a/components/sidebar/NavUser.vue b/components/sidebar/NavUser.vue
index bbcb1c9..c9a10ea 100644
--- a/components/sidebar/NavUser.vue
+++ b/components/sidebar/NavUser.vue
@@ -3,10 +3,10 @@
@@ -70,9 +70,7 @@
-
- Sign in to continue
-
+ Sign in to continue
@@ -83,63 +81,11 @@ import { authClient } from '~/lib/auth-client'
export default {
name: 'NavUser',
-
- setup() {
- // Use the session composable at the top level
- // This ensures proper reactivity
- const sessionComposable = authClient.useSession()
-
- return {
- sessionComposable
- }
- },
data() {
return {
session: null,
- isPending: true
- }
- },
-
- mounted() {
- if (!import.meta.client) return
-
- try {
- // Access the composable result
- const sessionRef = this.sessionComposable?.data || this.sessionComposable
- const isPendingRef = this.sessionComposable?.isPending
-
- // Set initial values
- if (sessionRef && typeof sessionRef === 'object' && 'value' in sessionRef) {
- this.session = sessionRef.value
- } else if (sessionRef) {
- this.session = sessionRef
- }
-
- if (isPendingRef && typeof isPendingRef === 'object' && 'value' in isPendingRef) {
- this.isPending = isPendingRef.value ?? false
- }
-
- // Watch for changes - only watch if it's a ref
- if (sessionRef && typeof sessionRef === 'object' && 'value' in sessionRef) {
- watch(sessionRef, (newSession) => {
- this.session = newSession
- }, { immediate: false })
- }
-
- if (isPendingRef && typeof isPendingRef === 'object' && 'value' in isPendingRef) {
- watch(isPendingRef, (newPending) => {
- // Only update isPending if we don't have a session yet
- // This prevents white flash when switching tabs if session already exists
- if (!this.session || newPending === false) {
- this.isPending = newPending
- }
- }, { immediate: false })
- }
-
- } catch (error) {
- console.error('Error fetching session:', error)
- this.isPending = false
+ isPending: true,
}
},
@@ -154,25 +100,46 @@ export default {
}
return null
},
-
+
isLoading() {
- // Only show loading if we don't have a session yet
- // This prevents white flash when switching tabs if session already exists
return this.isPending && !this.session
},
-
+
isMobile() {
if (import.meta.client) {
return window.innerWidth < 768
}
return false
+ },
+ },
+
+ async mounted() {
+ try {
+ const { data: session, isPending } = await authClient.useSession(useFetch)
+ this.session = session.value
+ this.isPending = isPending.value
+
+ watch(session, (newSession) => {
+ this.session = newSession
+ })
+
+ watch(isPending, (newPending) => {
+ this.isPending = newPending
+ })
+ } catch (error) {
+ console.error('Error fetching session:', error)
+ this.isPending = false
}
},
methods: {
getInitials(name) {
if (!name) return ''
- return name.split(' ').map(n => n[0]).join('').toUpperCase()
+ return name
+ .split(' ')
+ .map((n) => n[0])
+ .join('')
+ .toUpperCase()
},
async handleLogout() {
@@ -182,7 +149,7 @@ export default {
} catch (error) {
console.error('Error signing out:', error)
}
- }
- }
+ },
+ },
}
-
\ No newline at end of file
+
diff --git a/components/sidebar/TeamSwitcher.vue b/components/sidebar/TeamSwitcher.vue
index f2be15b..1385c79 100644
--- a/components/sidebar/TeamSwitcher.vue
+++ b/components/sidebar/TeamSwitcher.vue
@@ -4,60 +4,39 @@