@nuxt-customer-portal/organizations 0.3.0

package/app/pages/settings/organization.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type {
+  Organization,
+  OrganizationInvitationsResponse,
+  OrganizationMemberWithUser,
+  ApiError,
+  MemberRole
+} from '@nuxt-customer-portal/core/shared/types/index'
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+import { canViewOrganizationDirectory as canViewDirectory } from '@nuxt-customer-portal/core/shared/feature-registry'
+
+const userStore = useUserStore()
+const { activeOrganizationId } = storeToRefs(userStore)
+const { hasPermission } = userStore
+
+const { t } = useI18n()
+
+useSeoMeta({
+  title: () => t('settings.organization')
+})
+
+const loading = ref(true)
+const error = ref('')
+const organization = ref<Organization | null>(null)
+const members = ref<OrganizationMemberWithUser[]>([])
+const invitations = ref<OrganizationInvitationsResponse>([])
+const showEditModal = ref(false)
+const userOrganizationRole = ref<MemberRole | null>(null)
+const canViewOrganizationDirectory = computed(() => canViewDirectory(userOrganizationRole.value))
+
+// Load organization details
+const loadOrganization = async () => {
+  if (!activeOrganizationId.value) {
+    loading.value = false
+    organization.value = null
+    userOrganizationRole.value = null
+    members.value = []
+    invitations.value = []
+    return
+  }
+  try {
+    loading.value = true
+    error.value = ''
+    userOrganizationRole.value = null
+    const { data: roleData, error: roleError } = await authClient.organization.getActiveMemberRole({
+      query: { organizationId: activeOrganizationId.value }
+    })
+    if (roleError) {
+      throw roleError
+    }
+    userOrganizationRole.value = (roleData?.role as MemberRole | undefined) ?? null
+    organization.value = await $fetch<Organization>(`/api/organizations/${activeOrganizationId.value}`)
+    if (organization.value && canViewOrganizationDirectory.value) {
+      await loadMembers()
+      await loadInvitations()
+    }
+  } catch (err) {
+    const apiError = err as ApiError
+    error.value = apiError.message || t('organization.settings.errors.loadFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Load members
+const loadMembers = async () => {
+  if (!organization.value) {
+    return
+  }
+
+  try {
+    const { listMembers } = useOrganization()
+    const result = await listMembers(organization.value.id)
+    if (result.error) {
+      throw result.error
+    }
+    const data = result.data
+    members.value = Array.isArray(data)
+      ? (data as OrganizationMemberWithUser[])
+      : ((data?.members || []) as OrganizationMemberWithUser[])
+  } catch (err) {
+    console.error('Failed to load members:', err)
+    members.value = []
+  }
+}
+
+// Load invitations
+const loadInvitations = async () => {
+  if (!organization.value) {
+    return
+  }
+
+  try {
+    invitations.value = await $fetch<OrganizationInvitationsResponse>(
+      `/api/organizations/${organization.value.id}/invitations`
+    )
+  } catch (err) {
+    console.error('Failed to load invitations:', err)
+    invitations.value = []
+  }
+}
+
+const handleOrganizationUpdated = async () => {
+  showEditModal.value = false
+  await userStore.refreshOrganizations()
+  await loadOrganization()
+}
+
+watch(
+  activeOrganizationId,
+  (id) => {
+    if (id) {
+      void loadOrganization()
+    } else {
+      loading.value = false
+      organization.value = null
+      userOrganizationRole.value = null
+      members.value = []
+      invitations.value = []
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div>
+    <!-- Loading State -->
+    <div v-if="loading" class="text-center py-8">
+      <UIcon name="i-lucide-loader-2" class="w-8 h-8 animate-spin mx-auto" />
+      <p class="text-gray-600 dark:text-gray-400 mt-2">
+        {{ t('organization.members.loading') }}
+      </p>
+    </div>
+
+    <!-- Error State -->
+    <UAlert v-else-if="error" color="error" :title="error" variant="outline" />
+
+    <!-- Organization Details -->
+    <div v-else-if="organization && hasPermission('organization', 'read')" class="space-y-6">
+      <OrganizationDetailsCard
+        :organization="organization"
+        :role="userOrganizationRole"
+        :can-edit="userOrganizationRole === 'owner'"
+        :editing="showEditModal"
+        @edit="showEditModal = true"
+      >
+        <template #edit>
+          <OrganizationSettings @updated="handleOrganizationUpdated" @canceled="showEditModal = false" />
+        </template>
+      </OrganizationDetailsCard>
+
+      <OrganizationMembersCard
+        v-if="canViewOrganizationDirectory"
+        :organization-id="organization.id"
+        :members="members"
+        :loading="loading"
+        :can-manage="true"
+        @refresh="loadMembers"
+      />
+      <OrganizationInvitationsCard
+        v-if="canViewOrganizationDirectory"
+        :organization-id="organization.id"
+        :invitations="invitations"
+        :loading="loading"
+        :can-manage="true"
+        @refresh="loadInvitations"
+      />
+    </div>
+  </div>
+</template>

package/app/pages/settings/security.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormError, FormSubmitEvent } from '@nuxt/ui'
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+
+const { t } = useI18n()
+const toast = useToast()
+
+useSeoMeta({
+  title: () => t('settings.security')
+})
+
+const passwordSchema = z
+  .object({
+    currentPassword: z
+      .string()
+      .min(1, t('security.password.validation.currentPasswordRequired'))
+      .min(8, t('login.validation.passwordMinLength')),
+    newPassword: z
+      .string()
+      .min(1, t('security.password.validation.newPasswordRequired'))
+      .min(8, t('login.validation.passwordMinLength'))
+  })
+  .refine((data) => data.currentPassword !== data.newPassword, {
+    message: t('security.password.validation.passwordsMustBeDifferent'),
+    path: ['newPassword']
+  })
+
+type PasswordSchema = z.output<typeof passwordSchema>
+
+const password = reactive<Partial<PasswordSchema>>({
+  currentPassword: '',
+  newPassword: ''
+})
+
+const userStore = useUserStore()
+const { changePasswordAllowed } = storeToRefs(userStore)
+
+const isLoading = ref(false)
+const showDeleteModal = ref(false)
+
+const validate = (state: Partial<PasswordSchema>): FormError[] => {
+  const errors: FormError[] = []
+  if (state.currentPassword && state.newPassword && state.currentPassword === state.newPassword) {
+    errors.push({ name: 'newPassword', message: t('security.password.validation.passwordsMustBeDifferentShort') })
+  }
+  return errors
+}
+
+const handleSubmit = async (event: FormSubmitEvent<PasswordSchema>) => {
+  if (!changePasswordAllowed.value) {
+    return
+  }
+
+  isLoading.value = true
+
+  try {
+    const { error } = await authClient.changePassword({
+      currentPassword: event.data.currentPassword,
+      newPassword: event.data.newPassword,
+      revokeOtherSessions: false // Keep other sessions active
+    })
+
+    if (error) {
+      throw error
+    }
+
+    toast.add({
+      title: t('common.success'),
+      description: t('security.password.success'),
+      color: 'success'
+    })
+
+    // Reset form
+    password.currentPassword = ''
+    password.newPassword = ''
+  } catch (err: unknown) {
+    let errorMessage = t('security.password.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'
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const isDeleteRequested = ref(false)
+const handleDeleteSuccess = () => {
+  // Account deletion handled in modal (redirects to home)
+  showDeleteModal.value = false
+  isDeleteRequested.value = true
+}
+
+const handleDeleteError = (message: string) => {
+  // Error already shown in modal via toast
+  console.error('Account deletion error:', message)
+}
+</script>
+
+<template>
+  <div>
+    <AppCard
+      v-if="changePasswordAllowed"
+      :title="t('security.password.title')"
+      :description="t('security.password.description')"
+    >
+      <UForm
+        :schema="passwordSchema"
+        :state="password"
+        :validate="validate"
+        class="flex flex-col gap-4 max-w-xs"
+        @submit="handleSubmit"
+      >
+        <UFormField :name="'currentPassword'" :label="t('security.password.currentPassword')">
+          <UInput
+            v-model="password.currentPassword"
+            type="password"
+            :placeholder="t('security.password.currentPasswordPlaceholder')"
+            class="w-full"
+            :disabled="isLoading"
+          />
+        </UFormField>
+
+        <UFormField :name="'newPassword'" :label="t('security.password.newPassword')">
+          <UInput
+            v-model="password.newPassword"
+            type="password"
+            :placeholder="t('security.password.newPasswordPlaceholder')"
+            class="w-full"
+            :disabled="isLoading"
+          />
+        </UFormField>
+
+        <UButton
+          :label="t('security.password.updateButton')"
+          class="w-fit"
+          type="submit"
+          :loading="isLoading"
+          :disabled="isLoading"
+        />
+      </UForm>
+    </AppCard>
+
+    <UCard
+      :title="t('security.account.title')"
+      :description="t('security.account.description')"
+      class="bg-linear-to-tl from-error/10 from-5% to-default mt-8"
+      variant="subtle"
+    >
+      <template #header>
+        <div>
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+            {{ t('security.account.title') }}
+          </h2>
+          <h6 class="text-sm text-gray-600 dark:text-gray-400">
+            {{ t('security.account.description') }}
+          </h6>
+        </div>
+      </template>
+      <template #footer>
+        <UButton
+          :label="t('security.account.deleteButton')"
+          :disabled="isDeleteRequested"
+          color="error"
+          @click="showDeleteModal = true"
+        />
+      </template>
+      <UAlert
+        v-if="isDeleteRequested"
+        color="warning"
+        :title="t('security.account.deleteRequested')"
+        :description="t('security.account.deleteRequestedDescription')"
+        variant="outline"
+      />
+    </UCard>
+
+    <!-- Delete Account Modal -->
+    <DeleteAccountModal
+      v-if="showDeleteModal"
+      v-model:open="showDeleteModal"
+      :requires-password="changePasswordAllowed"
+      @success="handleDeleteSuccess"
+      @error="handleDeleteError"
+    />
+  </div>
+</template>

package/app/pages/settings.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+// Mobile breakpoint detection
+const breakpoints = useBreakpoints({
+  mobile: 768
+})
+const isMobile = breakpoints.smaller('mobile')
+
+const links = [
+  [
+    {
+      label: t('settings.profile'),
+      icon: 'i-lucide-user',
+      to: '/settings',
+      exact: true
+    },
+    {
+      label: t('settings.organization'),
+      icon: 'i-lucide-users',
+      to: '/settings/organization'
+    },
+    {
+      label: t('settings.security'),
+      icon: 'i-lucide-shield',
+      to: '/settings/security'
+    }
+  ]
+] satisfies NavigationMenuItem[][]
+
+const flatLinks = computed(() => links[0] ?? [])
+
+const activeLink = computed(() => {
+  const items = flatLinks.value
+  if (!items.length) {
+    return undefined
+  }
+  const found = items.find((item) => {
+    const to = String(item.to || '')
+    if (!to) {
+      return false
+    }
+    // `/settings` should not match `/settings/*` (profile tab only on the root route)
+    if (to === '/settings') {
+      return route.path === to
+    }
+    return route.path === to || route.path.startsWith(`${to}/`)
+  })
+  return found || items[0]
+})
+
+useSeoMeta({
+  title: () => activeLink.value?.label || t('settings.title')
+})
+
+const mobileMenuItems = computed(() => [
+  flatLinks.value.map((item) => ({
+    label: item.label,
+    icon: item.icon,
+    onSelect: () => router.push(String(item.to))
+  }))
+])
+</script>
+
+<template>
+  <div class="h-[calc(100dvh-var(--ui-header-height))] min-h-0 overflow-y-auto bg-muted py-8">
+    <UContainer>
+      <div class="mb-4">
+        <UDropdownMenu
+          v-if="isMobile"
+          :items="mobileMenuItems"
+          :content="{ align: 'start', collisionPadding: 12 }"
+          :ui="{
+            // Match the trigger width (our button is full-width on mobile)
+            content: 'w-(--reka-dropdown-menu-trigger-width) bg-elevated border border-primary/30 shadow-xl rounded-lg',
+            // Improve contrast/visibility on dark backgrounds
+            item: 'text-highlighted data-highlighted:before:bg-elevated/80',
+            itemLabel: 'text-highlighted font-medium',
+            itemLeadingIcon: 'text-primary',
+            itemDescription: 'text-muted'
+          }"
+        >
+          <UButton color="neutral" variant="outline" class="w-full justify-between">
+            <span class="flex items-center gap-2 min-w-0">
+              <UIcon v-if="activeLink?.icon" :name="activeLink.icon" class="size-4 shrink-0" />
+              <span class="truncate">{{ activeLink?.label }}</span>
+            </span>
+            <UIcon name="i-lucide-chevron-down" class="size-4 opacity-60 shrink-0" />
+          </UButton>
+        </UDropdownMenu>
+
+        <UNavigationMenu v-else :items="links" highlight />
+      </div>
+      <NuxtPage />
+    </UContainer>
+  </div>
+</template>

package/app/plugins/account-organizations-feature.ts

@@ -0,0 +1,3 @@
+import { accountOrganizationsFeature } from '../../shared/feature'
+
+export default defineNuxtPlugin(() => usePortalFeatures().registerFeature(accountOrganizationsFeature))

package/i18n/locales/en.json

@@ -0,0 +1,208 @@
+{
+  "settings": {
+    "title": "Settings",
+    "profile": "Profile",
+    "organization": "Organization",
+    "security": "Security"
+  },
+  "security": {
+    "password": {
+      "title": "Password",
+      "description": "Confirm your current password before setting a new one.",
+      "currentPassword": "Current Password",
+      "currentPasswordPlaceholder": "Enter your current password",
+      "newPassword": "New Password",
+      "newPasswordPlaceholder": "Enter your new password",
+      "updateButton": "Update Password",
+      "validation": {
+        "currentPasswordRequired": "Current password is required",
+        "newPasswordRequired": "New password is required",
+        "passwordsMustBeDifferent": "New password must be different from current password",
+        "passwordsMustBeDifferentShort": "Passwords must be different"
+      },
+      "success": "Password changed successfully",
+      "error": "Failed to change password"
+    },
+    "account": {
+      "title": "Terminate Account",
+      "description": "No longer want to use our service? You can delete your account here. This action is not reversible. All information related to this account will be deleted permanently.",
+      "deleteButton": "Delete account",
+      "deleteRequested": "Account Deletion Requested",
+      "deleteRequestedDescription": "We have sent you a verification email. Please check your email and click the link to complete the account deletion process.",
+      "delete": {
+        "confirmTitle": "Confirm Account Deletion",
+        "confirmMessage": "Are you sure you want to delete your account? This action cannot be undone.",
+        "passwordRequired": "Please enter your password to confirm account deletion",
+        "passwordPlaceholder": "Enter your password",
+        "deleteButton": "Delete Account",
+        "cancelButton": "Cancel",
+        "error": "Failed to delete account",
+        "emailVerificationSent": "Verification email sent. Please check your email to complete account deletion."
+      }
+    }
+  },
+  "myOrganizations": {
+    "title": "My Organizations",
+    "description": "Manage your organizations and switch between them"
+  },
+  "organization": {
+    "details": {
+      "title": "Organization details",
+      "name": "Name",
+      "slug": "Slug",
+      "created": "Created"
+    },
+    "emailProvider": {
+      "title": "Email provider",
+      "description": "Configure this organization's Resend account for invoices, reminders, and other transactional email.",
+      "configured": "Resend is configured",
+      "notConfigured": "Resend is not configured",
+      "required": "Transactional email is blocked until an organization owner configures a key.",
+      "masked": "Active API key ending in {suffix}",
+      "verifiedDomains": "Verified sending domains",
+      "keyLabel": "Resend API key",
+      "replaceLabel": "New Resend API key",
+      "configure": "Configure and validate",
+      "replace": "Validate and replace",
+      "checkAgain": "Check domains again",
+      "remove": "Remove key",
+      "saved": "Resend API key saved",
+      "documentation": "Resend domain verification guide",
+      "invalid": "The Resend API key could not be validated",
+      "invalidDescription": "Check that the key is active and belongs to the intended Resend account.",
+      "permissionRequired": "This Resend key is send-only",
+      "permissionRequiredDescription": "Create a Full access API key in Resend. Domain access is required to verify that this organization may use its configured sender address.",
+      "checkFailed": "Could not check Resend domains",
+      "removed": "Resend API key removed",
+      "statusFailed": "Email provider status could not be loaded",
+      "statusFailedDescription": "Check the server and database migration before configuring a key.",
+      "removeTitle": "Remove Resend API key?",
+      "removeDescription": "Invoices and reminders cannot be sent until a new organization key is configured."
+    },
+    "settings": {
+      "editButton": "Edit organization",
+      "updateSuccess": "Organization updated successfully",
+      "nameLabel": "Organization Name",
+      "namePlaceholder": "Organization name",
+      "officialCompanyNameLabel": "Official company name",
+      "officialCompanyNamePlaceholder": "Company name as registered",
+      "officialCompanyNameHint": "The official name under which the organization is registered.",
+      "slugLabel": "Organization Slug",
+      "slugPlaceholder": "organization-slug",
+      "slugHint": "URL-friendly identifier for your organization",
+      "slugChecking": "Checking availability...",
+      "slugAvailable": "Slug is available",
+      "slugUnavailable": "Slug is already in use",
+      "slugError": "Unable to check slug availability",
+      "logoLabel": "Organization Logo",
+      "logoChoose": "Choose logo",
+      "logoRemove": "Remove logo",
+      "avatarLogoLabel": "Avatar logo",
+      "avatarLogoHint": "A compact logo for organization lists. Prefer a square image (PNG, JPG, GIF, or WebP, up to 2 MB).",
+      "invoiceLogoHint": "Upload the organization logo as PNG, JPG, GIF, or WebP.",
+      "logoHint": "Upload a PNG, JPG, or GIF. Recommended size: 280×160.",
+      "ownerOnly": "Only organization owners can edit name or slug.",
+      "errors": {
+        "loadFailed": "Failed to load organization",
+        "updateFailed": "Failed to update organization",
+        "slugTaken": "Organization slug is already taken"
+      },
+      "validation": {
+        "nameRequired": "Organization name is required",
+        "officialCompanyNameRequired": "Official company name is required",
+        "slugRequired": "Organization slug is required",
+        "slugInvalid": "Slug must be lowercase letters, numbers, and hyphens only",
+        "logoInvalid": "Logo must be a valid image",
+        "logoTooLarge": "Logo must be smaller than 2 MB"
+      }
+    },
+    "members": {
+      "loading": "Loading organization data...",
+      "title": "Members",
+      "empty": "No members yet",
+      "role": "Role",
+      "remove": "Remove member",
+      "removeSuccess": "Member removed successfully",
+      "roles": {
+        "owner": "Owner",
+        "admin": "Admin",
+        "member": "Member"
+      },
+      "confirmRemove": {
+        "title": "Remove member?",
+        "message": "Are you sure you want to remove {name} from this organization?",
+        "confirm": "Remove"
+      },
+      "invitations": {
+        "title": "Invitations",
+        "empty": "No pending invitations",
+        "expires": "Expires",
+        "resend": "Resend",
+        "delete": "Delete",
+        "inviteButton": "Invite Member",
+        "modalTitle": "Invite Member",
+        "emailLabel": "Email Address",
+        "emailPlaceholder": "Enter the email address of the member",
+        "roleLabel": "Role",
+        "roleMember": "Member",
+        "roleAdmin": "Admin",
+        "sendButton": "Send Invitation",
+        "sendSuccess": "Invitation sent successfully",
+        "cancel": "Cancel",
+        "resendSuccess": "Invitation resent successfully",
+        "deleteSuccess": "Invitation deleted successfully"
+      },
+      "errors": {
+        "sendInvitationFailed": "Failed to send invitation",
+        "resendFailed": "Failed to resend invitation",
+        "cancelFailed": "Failed to cancel invitation",
+        "removeFailed": "Failed to remove member"
+      },
+      "confirm": {
+        "cancelInvitation": "Are you sure you want to cancel this invitation?"
+      },
+      "validation": {
+        "emailInvalid": "Invalid email address",
+        "roleRequired": "Role is required"
+      }
+    }
+  },
+  "profile": {
+    "badges": {
+      "active": "Active"
+    },
+    "buttons": {
+      "setActive": "Set active"
+    },
+    "description": "Manage your personal information and profile settings",
+    "fields": {
+      "email": "Email",
+      "emailDescription": "Your email address cannot be changed",
+      "name": "Name",
+      "nameDescription": "Your display name",
+      "namePlaceholder": "Enter your name",
+      "profilePicture": "Profile Picture",
+      "profilePictureDescription": "JPG, GIF or PNG. 1MB Max.",
+      "chooseAvatar": "Choose"
+    },
+    "messages": {
+      "error": "Error",
+      "failedToActivateOrganization": "Failed to activate organization",
+      "organizationActivated": "Organization activated successfully",
+      "profileUpdated": "Your profile has been updated successfully",
+      "success": "Success",
+      "updateFailed": "Failed to update profile"
+    },
+    "sections": {
+      "organizations": "My organizations",
+      "profileInfo": "Profile Information"
+    },
+    "title": "Profile Settings",
+    "validation": {
+      "atLeastOneField": "At least one field (name or image) must be provided",
+      "imageInvalidUrl": "Image must be a valid URL",
+      "nameMaxLength": "Name must be less than 255 characters",
+      "nameRequired": "Name is required"
+    }
+  }
+}