@nuxt-customer-portal/organizations 0.3.0

package/app/components/organization/InviteMemberModal.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { useOrganization } from '@nuxt-customer-portal/core/app/composables/useOrganization'
+
+const props = defineProps<{
+  organizationId: string
+}>()
+
+const emit = defineEmits<{
+  success: []
+  error: [message: string]
+}>()
+
+const open = defineModel<boolean>('open', { default: false })
+const { t } = useI18n()
+const toast = useToast()
+const { inviteMember } = useOrganization()
+
+const formSchema = computed(() =>
+  z.object({
+    email: z.string().email(t('organization.members.validation.emailInvalid')),
+    role: z.enum(['member', 'admin'], { error: t('organization.members.validation.roleRequired') })
+  })
+)
+
+const form = reactive({
+  email: '',
+  role: 'member' as 'member' | 'admin'
+})
+
+const inviting = ref(false)
+
+const handleSubmit = async (event: FormSubmitEvent<z.output<typeof formSchema.value>>) => {
+  try {
+    inviting.value = true
+
+    const result = await inviteMember(event.data.email, props.organizationId, event.data.role)
+
+    if (result.error) {
+      throw new Error(result.error.message || t('organization.members.errors.sendInvitationFailed'))
+    }
+
+    toast.add({
+      title: t('common.success'),
+      description: t('organization.members.invitations.sendSuccess'),
+      color: 'success'
+    })
+    open.value = false
+    emit('success')
+  } catch (err: unknown) {
+    const errorMessage = err instanceof Error ? err.message : t('organization.members.errors.sendInvitationFailed')
+    toast.add({
+      title: t('common.error'),
+      description: errorMessage,
+      color: 'error'
+    })
+    emit('error', errorMessage)
+  } finally {
+    inviting.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('organization.members.invitations.modalTitle')" :ui="{ footer: 'justify-end' }">
+    <template #body>
+      <UForm :state="form" :schema="formSchema" class="space-y-4" @submit="handleSubmit">
+        <UFormField name="email" :label="t('organization.members.invitations.emailLabel')" required>
+          <UInput
+            v-model="form.email"
+            type="email"
+            :placeholder="t('organization.members.invitations.emailPlaceholder')"
+            size="lg"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField name="role" :label="t('organization.members.invitations.roleLabel')" required>
+          <USelect
+            v-model="form.role"
+            :items="[
+              { label: t('organization.members.invitations.roleMember'), value: 'member' },
+              { label: t('organization.members.invitations.roleAdmin'), value: 'admin' }
+            ]"
+            value-key="value"
+            size="lg"
+            class="w-full"
+          />
+        </UFormField>
+        <div class="flex flex-col sm:flex-row gap-4 justify-end pt-4">
+          <UButton type="button" variant="outline" class="flex-1 sm:flex-none" @click="open = false">
+            {{ t('organization.members.invitations.cancel') }}
+          </UButton>
+          <UButton type="submit" :loading="inviting" color="primary" class="flex-1 sm:flex-none">
+            {{ t('organization.members.invitations.sendButton') }}
+          </UButton>
+        </div>
+      </UForm>
+    </template>
+  </UModal>
+</template>

package/app/components/organization/MembersCard.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { OrganizationMemberWithUser } from '@nuxt-customer-portal/core/shared/types/index'
+
+const props = withDefaults(
+  defineProps<{
+    organizationId: string
+    members: OrganizationMemberWithUser[]
+    loading?: boolean
+    canManage?: boolean
+  }>(),
+  {
+    loading: false,
+    canManage: false
+  }
+)
+
+const emit = defineEmits<{ refresh: [] }>()
+const { t } = useI18n()
+const { currentUser } = storeToRefs(useUserStore())
+const { removeMember } = useOrganization()
+const toast = useToast()
+const selectedMember = ref<OrganizationMemberWithUser | null>(null)
+const showRemoveModal = ref(false)
+const removing = ref(false)
+
+const requestRemove = (member: OrganizationMemberWithUser) => {
+  selectedMember.value = member
+  showRemoveModal.value = true
+}
+
+const handleRemove = async () => {
+  if (!selectedMember.value) {
+    return
+  }
+  try {
+    removing.value = true
+    const result = await removeMember(selectedMember.value.user.email, props.organizationId)
+    if (result.error) {
+      throw result.error
+    }
+    toast.add({ title: t('common.success'), description: t('organization.members.removeSuccess'), color: 'success' })
+    emit('refresh')
+  } catch (error) {
+    const message = error instanceof Error ? error.message : t('organization.members.errors.removeFailed')
+    toast.add({ title: t('common.error'), description: message, color: 'error' })
+  } finally {
+    removing.value = false
+    selectedMember.value = null
+  }
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="text-xl font-semibold">{{ t('organization.members.title') }} ({{ members.length }})</h2>
+    </template>
+
+    <div v-if="loading" class="py-8 text-center text-muted">{{ t('organization.members.loading') }}</div>
+    <div v-else-if="members.length === 0" class="py-8 text-center text-muted">
+      {{ t('organization.members.empty') }}
+    </div>
+    <div v-else class="divide-y divide-default">
+      <div
+        v-for="member in members"
+        :key="member.id"
+        class="flex flex-wrap items-center justify-between gap-3 py-4 first:pt-0 last:pb-0"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <UAvatar :src="member.user.image || undefined" :alt="member.user.name || member.user.email" size="md" />
+          <div class="min-w-0">
+            <p class="truncate font-medium">{{ member.user.name || member.user.email }}</p>
+            <p class="truncate text-sm text-muted">{{ member.user.email }}</p>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <UBadge
+            :color="member.role === 'owner' ? 'primary' : member.role === 'admin' ? 'info' : 'neutral'"
+            variant="soft"
+          >
+            {{ t(`organization.members.roles.${Array.isArray(member.role) ? member.role[0] : member.role}`) }}
+          </UBadge>
+          <UButton
+            v-if="canManage && member.userId !== currentUser?.id && member.role !== 'owner'"
+            icon="i-lucide-user-minus"
+            color="error"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('organization.members.remove')"
+            @click="requestRemove(member)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <ConfirmationModal
+      v-if="showRemoveModal && selectedMember"
+      v-model:open="showRemoveModal"
+      title="organization.members.confirmRemove.title"
+      message="organization.members.confirmRemove.message"
+      :message-params="{ name: selectedMember.user.name || selectedMember.user.email }"
+      confirm-text="organization.members.confirmRemove.confirm"
+      confirm-color="error"
+      :loading="removing"
+      @confirm="handleRemove"
+    />
+  </UCard>
+</template>

package/app/pages/my-organizations.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { Organization } from '@nuxt-customer-portal/core/shared/types/index'
+
+const { t } = useI18n()
+
+const userStore = useUserStore()
+const { activeOrganizationId, myOrganizations } = storeToRefs(userStore)
+const { setActiveOrganizationId } = userStore
+const toast = useToast()
+
+// Type for organization with role
+type OrganizationWithRole = Organization & { role?: string | null }
+
+if (!userStore.isAdmin) {
+  throw createError({ statusCode: 403, message: 'Access denied. You must be an admin to view this page.' })
+}
+
+// Page metadata
+useSeoMeta({
+  title: t('myOrganizations.title'),
+  description: t('myOrganizations.description')
+})
+
+const isActiveOrganization = (organizationId: string) => {
+  if (!activeOrganizationId.value) {
+    return false
+  }
+  return activeOrganizationId.value === organizationId
+}
+
+const handleSetActive = async (organizationId: string) => {
+  try {
+    await setActiveOrganizationId(organizationId)
+    toast.add({
+      title: t('profile.messages.success'),
+      description: t('profile.messages.organizationActivated'),
+      color: 'success'
+    })
+  } catch (error) {
+    console.error('Error setting active organization:', error)
+    toast.add({
+      title: t('profile.messages.error'),
+      description: t('profile.messages.failedToActivateOrganization'),
+      color: 'error'
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <!-- Page Header -->
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
+          {{ $t('myOrganizations.title') }}
+        </h1>
+        <p class="mt-2 hidden text-sm text-gray-600 dark:text-gray-400 sm:block">
+          {{ $t('myOrganizations.description') }}
+        </p>
+      </div>
+
+      <UCard>
+        <template #header>
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+            {{ $t('profile.sections.organizations') }}
+          </h2>
+        </template>
+        <div v-if="myOrganizations === null || myOrganizations === undefined">Loading...</div>
+        <div v-else-if="myOrganizations.length === 0">No organizations found.</div>
+        <div v-else class="space-y-6">
+          <NuxtLink
+            v-for="organization in myOrganizations"
+            :key="organization.id"
+            :to="`/admin/organizations/${organization.slug}?from=my-organizations`"
+            class="flex items-start justify-between p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
+          >
+            <div class="flex-1">
+              <div class="flex items-center justify-between mb-1">
+                <div class="flex items-center gap-2">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ organization.name }}</h3>
+                  <UBadge
+                    v-if="(organization as OrganizationWithRole).role"
+                    :color="
+                      (organization as OrganizationWithRole).role === 'owner'
+                        ? 'primary'
+                        : (organization as OrganizationWithRole).role === 'admin'
+                          ? 'info'
+                          : 'neutral'
+                    "
+                    variant="soft"
+                  >
+                    {{
+                      String((organization as OrganizationWithRole).role)
+                        .charAt(0)
+                        .toUpperCase() + String((organization as OrganizationWithRole).role).slice(1)
+                    }}
+                  </UBadge>
+                </div>
+                <div class="flex items-center gap-2" @click.stop>
+                  <UBadge v-if="isActiveOrganization(organization.id)" color="success" variant="subtle">
+                    {{ $t('profile.badges.active') }}
+                  </UBadge>
+                  <UButton
+                    v-else
+                    size="sm"
+                    variant="outline"
+                    :loading="userStore.isLoading"
+                    @click="handleSetActive(organization.id)"
+                  >
+                    {{ $t('profile.buttons.setActive') }}
+                  </UButton>
+                </div>
+              </div>
+              <p class="text-sm text-gray-600 dark:text-gray-400">{{ organization.slug }}</p>
+              <p class="text-xs text-gray-500 mt-1">
+                {{ $t('common.createdAt') }}: {{ new Date(organization.createdAt).toLocaleDateString() }}
+              </p>
+            </div>
+          </NuxtLink>
+        </div>
+      </UCard>
+    </div>
+  </div>
+</template>

package/app/pages/settings/index.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const { t } = useI18n()
+
+const userStore = useUserStore()
+const { currentUser } = storeToRefs(userStore)
+const { setCurrentUser } = userStore
+const toast = useToast()
+
+const fileRef = ref<HTMLInputElement>()
+
+// Zod schema for profile form validation
+const schema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .min(1, t('profile.validation.nameRequired'))
+      .max(255, t('profile.validation.nameMaxLength')),
+    image: z
+      .union([z.string().url(t('profile.validation.imageInvalidUrl')), z.literal('').transform(() => null), z.null()])
+      .optional()
+  })
+  .refine((data) => data.name !== undefined || data.image !== undefined, {
+    message: t('profile.validation.atLeastOneField')
+  })
+
+type Schema = z.output<typeof schema>
+
+// Form state
+const form = reactive<Partial<Schema>>({
+  name: '',
+  image: ''
+})
+
+const isLoading = ref(false)
+const isDirty = ref(false)
+const selectedFile = ref<File | null>(null)
+
+// Initialize form with current user data
+watchEffect(() => {
+  if (currentUser.value) {
+    form.name = currentUser.value.name || ''
+    form.image = currentUser.value.image || ''
+    isDirty.value = false
+  }
+})
+
+// Watch for form changes
+watch(
+  () => [form.name, form.image],
+  () => {
+    if (currentUser.value) {
+      const nameChanged = form.name !== (currentUser.value.name || '')
+      const imageChanged = form.image !== (currentUser.value.image || '')
+      isDirty.value = nameChanged || imageChanged
+    }
+  },
+  { deep: true }
+)
+
+// Page metadata
+useSeoMeta({
+  title: t('profile.title'),
+  description: t('profile.description')
+})
+
+const handleSubmit = async (event: FormSubmitEvent<Schema>) => {
+  if (!currentUser.value) {
+    return
+  }
+
+  isLoading.value = true
+  try {
+    let imageUrl = event.data.image === null || event.data.image === '' ? null : event.data.image
+
+    // If a file was selected, convert it to base64 data URL
+    if (selectedFile.value) {
+      const reader = new FileReader()
+      imageUrl = await new Promise<string>((resolve, reject) => {
+        reader.onload = () => resolve(reader.result as string)
+        reader.onerror = reject
+        reader.readAsDataURL(selectedFile.value!)
+      })
+    }
+
+    const response = await $fetch<{
+      success: boolean
+      message: string
+      user?: {
+        id: string
+        name: string
+        email: string
+        image: string | null
+      }
+    }>('/api/profile', {
+      method: 'PATCH',
+      body: {
+        name: event.data.name?.trim(),
+        image: imageUrl
+      }
+    })
+
+    if (response.success && response.user) {
+      // Update the user store with new data
+      setCurrentUser({
+        ...currentUser.value,
+        name: response.user.name,
+        image: response.user.image || undefined
+      })
+
+      toast.add({
+        title: t('profile.messages.success'),
+        description: t('profile.messages.profileUpdated'),
+        color: 'success'
+      })
+
+      isDirty.value = false
+      selectedFile.value = null
+      // Revoke the blob URL if it was created
+      if (form.image && form.image.startsWith('blob:')) {
+        URL.revokeObjectURL(form.image)
+      }
+      // Update form.image with the saved URL
+      form.image = response.user.image || ''
+    }
+  } catch (error: unknown) {
+    console.error('Error updating profile:', error)
+    const errorMessage =
+      (error as { data?: { message?: string }; message?: string })?.data?.message ||
+      (error as { message?: string })?.message ||
+      t('profile.messages.updateFailed')
+    toast.add({
+      title: t('profile.messages.error'),
+      description: errorMessage,
+      color: 'error'
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const handleReset = () => {
+  if (currentUser.value) {
+    // Revoke blob URL if it exists
+    if (form.image && form.image.startsWith('blob:')) {
+      URL.revokeObjectURL(form.image)
+    }
+    form.name = currentUser.value.name || ''
+    form.image = currentUser.value.image || ''
+    isDirty.value = false
+    selectedFile.value = null
+    if (fileRef.value) {
+      fileRef.value.value = ''
+    }
+  }
+}
+
+function onFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+
+  if (!input.files?.length) {
+    return
+  }
+
+  const file = input.files[0]!
+
+  // Revoke previous blob URL if it exists
+  if (form.image && form.image.startsWith('blob:')) {
+    URL.revokeObjectURL(form.image)
+  }
+
+  selectedFile.value = file
+
+  // Create preview URL
+  form.image = URL.createObjectURL(file)
+  isDirty.value = true
+}
+
+function onFileClick() {
+  fileRef.value?.click()
+}
+
+// Cleanup blob URLs on unmount
+onUnmounted(() => {
+  if (form.image && form.image.startsWith('blob:')) {
+    URL.revokeObjectURL(form.image)
+  }
+})
+</script>
+
+<template>
+  <AppCard class="mb-8" :title="$t('profile.sections.profileInfo')">
+    <UForm :state="form" :schema="schema" class="space-y-6" @submit="handleSubmit">
+      <!-- Profile Picture Section -->
+      <UFormField
+        :label="$t('profile.fields.profilePicture')"
+        :description="$t('profile.fields.profilePictureDescription')"
+        name="image"
+        class="flex max-sm:flex-col justify-between sm:items-center gap-4"
+      >
+        <div class="flex flex-wrap items-center gap-3">
+          <UAvatar
+            :src="form.image || undefined"
+            :alt="form.name || currentUser?.email || 'User'"
+            :text="form.name ? form.name.charAt(0).toUpperCase() : currentUser?.email?.charAt(0).toUpperCase() || 'U'"
+            size="xl"
+            class="ring-2 ring-gray-200 dark:ring-gray-700"
+          />
+          <UButton :label="$t('profile.fields.chooseAvatar')" color="primary" variant="outline" @click="onFileClick" />
+          <input ref="fileRef" type="file" class="hidden" accept=".jpg, .jpeg, .png, .gif" @change="onFileChange" />
+        </div>
+      </UFormField>
+
+      <UFormField
+        :label="$t('profile.fields.name')"
+        :description="$t('profile.fields.nameDescription')"
+        name="name"
+        required
+      >
+        <UInput
+          v-model="form.name"
+          type="text"
+          :placeholder="$t('profile.fields.namePlaceholder')"
+          icon="i-lucide-user"
+          class="w-full"
+          required
+        />
+      </UFormField>
+
+      <UFormField :label="$t('profile.fields.email')" :description="$t('profile.fields.emailDescription')" name="email">
+        <UInput :model-value="currentUser?.email || ''" type="email" disabled icon="i-lucide-mail" class="w-full" />
+      </UFormField>
+
+      <!-- Form Actions -->
+      <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <UButton type="button" variant="ghost" color="neutral" :disabled="!isDirty || isLoading" @click="handleReset">
+          {{ $t('common.reset') }}
+        </UButton>
+        <UButton type="submit" :loading="isLoading" :disabled="!isDirty">
+          {{ $t('common.save') }}
+        </UButton>
+      </div>
+    </UForm>
+  </AppCard>
+</template>