@nuxt-customer-portal/organizations 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @nuxt-customer-portal/organizations
+
+## 0.3.0
+
+Declare the Nuxt UI dependency used by the package's public components and types,
+so npm installations do not depend on another package's dependency layout.
+
+### Patch Changes
+
+- @nuxt-customer-portal/core@0.3.0
+- @nuxt-customer-portal/ui@0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nuxt Customer Portal contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Account and organizations layer
+
+Owns profile, security, organization membership, invitations, and organization settings.

package/app/components/DeleteAccountModal.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+
+const props = defineProps<{
+  requiresPassword: boolean
+}>()
+
+const emit = defineEmits<{
+  success: []
+  error: [message: string]
+}>()
+
+const open = defineModel<boolean>('open', { default: false })
+const { t } = useI18n()
+const toast = useToast()
+
+const isLoading = ref(false)
+
+const passwordSchema = computed(() => {
+  if (!props.requiresPassword) {
+    return z.object({})
+  }
+  return z.object({
+    password: z.string().min(1, t('security.account.delete.passwordRequired'))
+  })
+})
+
+type PasswordSchema = z.output<typeof passwordSchema.value>
+
+const passwordForm = reactive({
+  password: '' as string | undefined
+})
+
+const handleDelete = async (event?: FormSubmitEvent<PasswordSchema>) => {
+  isLoading.value = true
+
+  try {
+    type DeleteParams = { password?: string; callbackURL?: string }
+    const deleteParams: DeleteParams = {
+      callbackURL: '/'
+    }
+
+    const hasPassword = props.requiresPassword && event?.data?.password
+    if (hasPassword && event.data.password && typeof event.data.password === 'string') {
+      deleteParams.password = event.data.password
+    }
+
+    const { error } = await authClient.deleteUser(deleteParams)
+
+    if (error) {
+      throw error
+    }
+
+    // No password - email verification was sent
+    toast.add({
+      title: t('common.success'),
+      description: t('security.account.delete.emailVerificationSent'),
+      color: 'success'
+    })
+
+    // Don't logout - user needs to click email link
+    emit('success')
+    open.value = false
+    passwordForm.password = undefined
+  } catch (err: unknown) {
+    let errorMessage = t('security.account.delete.error')
+
+    if (err instanceof Error) {
+      errorMessage = err.message
+    } else if (err && typeof err === 'object' && 'message' in err) {
+      errorMessage = String(err.message)
+    }
+
+    toast.add({
+      title: t('common.error'),
+      description: errorMessage,
+      color: 'error'
+    })
+    emit('error', errorMessage)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const handleCancel = () => {
+  open.value = false
+  passwordForm.password = undefined
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('security.account.delete.confirmTitle')" :ui="{ footer: 'justify-end' }">
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
+          {{ t('security.account.delete.confirmMessage') }}
+        </p>
+
+        <UForm
+          v-if="requiresPassword"
+          :schema="passwordSchema"
+          :state="passwordForm as unknown as PasswordSchema"
+          class="space-y-4"
+          @submit="handleDelete"
+        >
+          <UFormField name="password" :label="t('security.account.delete.passwordRequired')">
+            <UInput
+              v-model="passwordForm.password"
+              type="password"
+              :placeholder="t('security.account.delete.passwordPlaceholder')"
+              class="w-full"
+              :disabled="isLoading"
+            />
+          </UFormField>
+
+          <div class="flex gap-4 justify-end pt-4">
+            <UButton type="button" variant="outline" :disabled="isLoading" @click="handleCancel">
+              {{ t('security.account.delete.cancelButton') }}
+            </UButton>
+            <UButton type="submit" color="error" :loading="isLoading" :disabled="isLoading">
+              {{ t('security.account.delete.deleteButton') }}
+            </UButton>
+          </div>
+        </UForm>
+
+        <div v-else class="flex gap-4 justify-end pt-4">
+          <UButton type="button" variant="outline" :disabled="isLoading" @click="handleCancel">
+            {{ t('security.account.delete.cancelButton') }}
+          </UButton>
+          <UButton type="button" color="error" :loading="isLoading" :disabled="isLoading" @click="handleDelete()">
+            {{ t('security.account.delete.deleteButton') }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/OrganizationMembers.vue

@@ -0,0 +1,298 @@
+<template>
+  <div>
+    <h1>Organization Members</h1>
+  </div>
+</template>
+<!-- <script setup lang="ts">
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+import type { OrganizationMemberWithUser, OrganizationInvitationsResponse, MemberRole, ApiError } from '@nuxt-customer-portal/core/shared/types/index'
+
+const showInviteModal = defineModel<boolean>('showInviteModal', { required: false })
+const members = ref<OrganizationMemberWithUser[]>([])
+const invitations = ref<OrganizationInvitationsResponse>([])
+const loading = ref(true)
+const error = ref('')
+const inviteEmail = ref('')
+const inviteRole = ref<MemberRole>('member')
+const inviting = ref(false)
+
+const loadMembers = async () => {
+  if (!organizationId.value) return
+
+  try {
+    loading.value = true
+    const { data, error: membersError } = await authClient.organization.listMembers({
+      query: { organizationId: organizationId.value }
+    })
+    if (membersError) throw membersError
+    // Handle both array response and object response with members property
+    if (Array.isArray(data)) {
+      members.value = data as OrganizationMemberWithUser[]
+    } else if (data?.members) {
+      members.value = data.members as OrganizationMemberWithUser[]
+    } else {
+      members.value = []
+    }
+  } catch (err) {
+    const apiError = err as ApiError
+    error.value = apiError.message || 'Failed to load members'
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadInvitations = async () => {
+  if (!organizationId.value) return
+
+  try {
+    // Better-auth doesn't have a direct list invitations endpoint,
+    // so we'll need to create a custom API endpoint or fetch from the database
+    // For now, we'll fetch from a custom endpoint
+    const data = await $fetch<OrganizationInvitationsResponse>(`/api/organizations/${organizationId.value}/invitations`)
+    invitations.value = data || []
+  } catch (err) {
+    const apiError = err as ApiError
+    console.error('Failed to load invitations:', apiError)
+    invitations.value = []
+  }
+}
+
+const inviteMember = async () => {
+  if (!organizationId.value) return
+
+  try {
+    inviting.value = true
+    await authClient.organization.inviteMember({
+      email: inviteEmail.value,
+      organizationId: organizationId.value,
+      role: inviteRole.value
+    })
+    showInviteModal.value = false
+    inviteEmail.value = ''
+    inviteRole.value = 'member'
+    await loadInvitations()
+    // Show success message - you might want to add a toast notification here
+  } catch (err) {
+    const apiError = err as ApiError
+    error.value = apiError.message || 'Failed to send invitation'
+  } finally {
+    inviting.value = false
+  }
+}
+
+const updateMemberRole = async (member: OrganizationMemberWithUser, newRole: MemberRole) => {
+  try {
+    await authClient.organization.updateMemberRole({
+      memberId: member.id,
+      organizationId: organizationId.value!,
+      role: newRole
+    })
+    await loadMembers()
+  } catch (err) {
+    const apiError = err as ApiError
+    error.value = apiError.message || 'Failed to update member role'
+  }
+}
+
+const removeMember = async (member: OrganizationMemberWithUser) => {
+  if (!confirm(`Remove ${member.user.email} from organization?`)) return
+
+  try {
+    await authClient.organization.removeMember({
+      memberIdOrEmail: member.user.email,
+      organizationId: organizationId.value!
+    })
+    await loadMembers()
+  } catch (err) {
+    const apiError = err as ApiError
+    error.value = apiError.message || 'Failed to remove member'
+  }
+}
+
+onMounted(() => {
+  loadMembers()
+  loadInvitations()
+})
+</script>
+
+<template>
+  <div class="organization-members">
+    <div class="members-header">
+      <h3>Organization Members</h3>
+      <button class="btn-primary" @click="showInviteModal = true">
+        Invite Member
+      </button>
+    </div>
+
+    <div v-if="loading" class="loading">Loading members...</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <div v-else class="members-list">
+      <div v-for="member in members" :key="member.id" class="member-card">
+        <div class="member-info">
+          <div class="member-name">{{ member.user.name || member.user.email }}</div>
+          <div class="member-email">{{ member.user.email }}</div>
+          <div class="member-role">
+            <UBadge
+              :color="member.role === 'owner' ? 'primary' : member.role === 'admin' ? 'info' : 'neutral'"
+              variant="soft"
+            >
+              {{ Array.isArray(member.role) ? member.role.join(', ') : member.role }}
+            </UBadge>
+          </div>
+        </div>
+        <div class="member-actions">
+          <UDropdownMenu :items="[
+            {
+              label: 'Member',
+              onClick: () => updateMemberRole(member, 'member')
+            },
+            {
+              label: 'Admin',
+              onClick: () => updateMemberRole(member, 'admin')
+            },
+            {
+              label: 'Owner',
+              onClick: () => updateMemberRole(member, 'owner')
+            }
+          ]">
+            <UButton variant="outline" size="sm">
+              Change Role
+            </UButton>
+          </UDropdownMenu>
+          <UButton
+            color="error"
+            variant="outline"
+            size="sm"
+            @click="removeMember(member)"
+          >
+            Remove
+          </UButton>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="invitations.length > 0" class="mt-6">
+      <h4 class="text-lg font-semibold mb-4">Pending Invitations</h4>
+      <div class="space-y-2">
+        <div
+          v-for="invitation in invitations"
+          :key="invitation.id"
+          class="member-card"
+        >
+          <div class="member-info">
+            <div class="member-email">{{ invitation.email }}</div>
+            <div class="member-role">{{ invitation.role || 'member' }}</div>
+            <div class="text-xs text-gray-500">
+              Expires: {{ new Date(invitation.expiresAt).toLocaleDateString() }}
+            </div>
+          </div>
+          <div class="member-actions">
+            <UBadge color="warning" variant="soft">Pending</UBadge>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <UModal v-model="showInviteModal" @close="showInviteModal = false">
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">Invite Member</h3>
+        </template>
+
+        <form class="space-y-4" @submit.prevent="inviteMember">
+          <UFormGroup label="Email" required>
+            <UInput
+              id="invite-email"
+              v-model="inviteEmail"
+              type="email"
+              placeholder="user@example.com"
+              required
+            />
+          </UFormGroup>
+
+          <UFormGroup label="Role">
+            <USelect
+              v-model="inviteRole"
+              :options="[
+                { label: 'Member', value: 'member' },
+                { label: 'Admin', value: 'admin' },
+                { label: 'Owner', value: 'owner' }
+              ]"
+              option-attribute="label"
+              value-attribute="value"
+            />
+          </UFormGroup>
+
+          <UAlert
+            v-if="error"
+            color="error"
+            :title="error" variant="outline" />
+
+          <div class="flex gap-4 justify-end">
+            <UButton
+              type="button"
+              variant="outline"
+              @click="showInviteModal = false"
+            >
+              Cancel
+            </UButton>
+            <UButton
+              type="submit"
+              :disabled="inviting"
+              :loading="inviting"
+            >
+              {{ inviting ? 'Sending...' : 'Send Invitation' }}
+            </UButton>
+          </div>
+        </form>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+
+<style scoped>
+.organization-members {
+  padding: 1rem;
+}
+
+.members-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.member-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.member-info {
+  flex: 1;
+}
+
+.member-name {
+  font-weight: 500;
+}
+
+.member-email {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.member-role {
+  color: #3b82f6;
+  font-size: 0.875rem;
+}
+
+.member-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+</style> -->