@xenterprises/nuxt-x-auth-better 0.3.2 → 0.4.0

package/app/components/XAuth/TeamCreate.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="w-full space-y-6">
+    <div class="text-center">
+      <h2 class="text-lg font-semibold text-highlighted">Create team</h2>
+      <p class="text-sm text-muted mt-1">Add a new team to this organization.</p>
+    </div>
+
+    <UForm :schema="schema" :state="state" class="space-y-4" @submit="handleCreate">
+      <UFormField label="Name" name="name">
+        <UInput v-model="state.name" placeholder="Engineering" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Description" name="description">
+        <UInput v-model="state.description" placeholder="Team description" class="w-full" />
+      </UFormField>
+
+      <UButton
+        type="submit"
+        block
+        size="lg"
+        label="Create team"
+        :loading="creating"
+      />
+    </UForm>
+  </div>
+</template>
+
+<script setup>
+import { z } from "zod"
+
+const props = defineProps({
+  organization: {
+    type: Object,
+    required: true,
+  },
+})
+
+const router = useRouter()
+const { createTeam } = useOrganization()
+
+const creating = ref(false)
+
+const state = reactive({
+  name: '',
+  description: '',
+})
+
+const schema = z.object({
+  name: z.string().min(1, 'Team name is required'),
+  description: z.string().optional(),
+})
+
+async function handleCreate() {
+  creating.value = true
+  try {
+    const result = await createTeam(state.name, props.organization.id)
+    if (result && !result.error) {
+      router.push(`/org/${props.organization.slug}/teams/${result.id}`)
+    }
+  } finally {
+    creating.value = false
+  }
+}
+</script>

package/app/components/XAuth/TeamList.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="w-full space-y-6">
+    <div class="flex items-center justify-between">
+      <h2 class="text-lg font-semibold text-highlighted">Teams</h2>
+      <UButton
+        v-if="isOrgAdmin"
+        size="sm"
+        to="teams/create"
+        label="New team"
+        icon="i-lucide-plus"
+      />
+    </div>
+
+    <div v-if="teams.length === 0" class="text-center py-8 text-muted">
+      No teams yet.
+    </div>
+
+    <div v-else class="grid gap-3">
+      <NuxtLink
+        v-for="team in teams"
+        :key="team.id"
+        :to="`/org/${organization.slug}/teams/${team.id}`"
+        class="flex items-center justify-between p-4 rounded-lg border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-colors"
+      >
+        <div class="flex items-center gap-3">
+          <div class="flex size-10 items-center justify-center rounded-lg bg-secondary/10 text-secondary">
+            <UIcon name="i-lucide-users" class="size-5" />
+          </div>
+          <div>
+            <p class="font-medium text-highlighted">{{ team.name }}</p>
+            <p v-if="team.description" class="text-xs text-muted">{{ team.description }}</p>
+          </div>
+        </div>
+        <UIcon name="i-lucide-chevron-right" class="size-5 text-muted" />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  organization: {
+    type: Object,
+    required: true,
+  },
+})
+
+const { teams, isOrgAdmin } = useOrganization()
+</script>

package/app/components/XAuth/TeamMembers.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="w-full space-y-6">
+    <div class="flex items-center justify-between">
+      <h2 class="text-lg font-semibold text-highlighted">Team members</h2>
+      <UButton
+        v-if="isOrgAdmin"
+        size="sm"
+        label="Add member"
+        icon="i-lucide-plus"
+        @click="showAdd = true"
+      />
+    </div>
+
+    <div v-if="teamMembers.length === 0" class="text-center py-8 text-muted">
+      No members in this team yet.
+    </div>
+
+    <div v-else class="divide-y divide-neutral-200 dark:divide-neutral-800">
+      <div
+        v-for="member in teamMembers"
+        :key="member.id"
+        class="flex items-center justify-between py-3"
+      >
+        <div class="flex items-center gap-3">
+          <div class="flex size-9 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <UIcon name="i-lucide-user" class="size-4" />
+          </div>
+          <div>
+            <p class="text-sm font-medium text-highlighted">{{ member.name || member.email }}</p>
+            <p class="text-xs text-muted">{{ member.email }}</p>
+          </div>
+        </div>
+
+        <UButton
+          v-if="isOrgAdmin"
+          color="error"
+          variant="soft"
+          size="xs"
+          label="Remove"
+          icon="i-lucide-trash"
+          @click="removeTeamMember(team.id, member.id)"
+        />
+      </div>
+    </div>
+
+    <UModal v-model:open="showAdd">
+      <div class="p-6 space-y-4">
+        <h3 class="text-lg font-semibold text-highlighted">Add member to team</h3>
+        <USelect
+          v-model="selectedMemberId"
+          :items="availableMembers"
+          placeholder="Select a member"
+          class="w-full"
+        />
+        <div class="flex justify-end gap-2">
+          <UButton variant="outline" label="Cancel" @click="showAdd = false" />
+          <UButton label="Add" :loading="adding" @click="handleAdd" />
+        </div>
+      </div>
+    </UModal>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  team: {
+    type: Object,
+    required: true,
+  },
+  organization: {
+    type: Object,
+    required: true,
+  },
+})
+
+const { members, isOrgAdmin, listTeamMembers, addTeamMember, removeTeamMember } = useOrganization()
+
+const showAdd = ref(false)
+const selectedMemberId = ref('')
+const adding = ref(false)
+const teamMembers = ref([])
+const teamMembersLoading = ref(false)
+
+onMounted(async () => {
+  teamMembersLoading.value = true
+  const result = await listTeamMembers(props.team.id)
+  if (result && !result.error) {
+    teamMembers.value = result || []
+  }
+  teamMembersLoading.value = false
+})
+
+const availableMembers = computed(() => {
+  const teamMemberIds = teamMembers.value.map((m) => m.id)
+  return members.value
+    .filter((m) => !teamMemberIds.includes(m.id))
+    .map((m) => ({ label: m.name || m.email || m.id, value: m.id }))
+})
+
+async function handleAdd() {
+  if (!selectedMemberId.value) return
+  adding.value = true
+  try {
+    const result = await addTeamMember(props.team.id, selectedMemberId.value, props.organization.id)
+    if (!result?.error) {
+      showAdd.value = false
+      selectedMemberId.value = ''
+      const refreshed = await listTeamMembers(props.team.id)
+      teamMembers.value = refreshed || []
+    }
+  } finally {
+    adding.value = false
+  }
+}
+
+async function handleRemove(memberId) {
+  const result = await removeTeamMember(props.team.id, memberId)
+  if (!result?.error) {
+    const refreshed = await listTeamMembers(props.team.id)
+    teamMembers.value = refreshed || []
+  }
+}
+</script>

package/app/components/XAuth/TeamSettings.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="w-full space-y-6">
+    <div class="flex items-center justify-between">
+      <h2 class="text-lg font-semibold text-highlighted">Team settings</h2>
+      <UButton
+        v-if="isOrgAdmin"
+        color="error"
+        variant="soft"
+        size="sm"
+        label="Delete"
+        icon="i-lucide-trash"
+        @click="handleDelete"
+      />
+    </div>
+
+    <UForm :schema="schema" :state="state" class="space-y-4" @submit="handleUpdate">
+      <UFormField label="Name" name="name">
+        <UInput v-model="state.name" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Description" name="description">
+        <UInput v-model="state.description" class="w-full" />
+      </UFormField>
+
+      <UButton
+        type="submit"
+        size="sm"
+        label="Save changes"
+        :loading="updating"
+      />
+    </UForm>
+  </div>
+</template>
+
+<script setup>
+import { z } from "zod"
+
+const props = defineProps({
+  team: {
+    type: Object,
+    required: true,
+  },
+  organization: {
+    type: Object,
+    required: true,
+  },
+})
+
+const router = useRouter()
+const { updateTeam, deleteTeam, isOrgAdmin } = useOrganization()
+
+const updating = ref(false)
+
+const state = reactive({
+  name: props.team.name || '',
+  description: props.team.description || '',
+})
+
+const schema = z.object({
+  name: z.string().min(1, 'Team name is required'),
+  description: z.string().optional(),
+})
+
+async function handleUpdate() {
+  updating.value = true
+  try {
+    await updateTeam(props.team.id, { name: state.name, description: state.description }, props.organization.id)
+  } finally {
+    updating.value = false
+  }
+}
+
+async function handleDelete() {
+  if (!confirm('Are you sure you want to delete this team?')) {
+    return
+  }
+  const result = await deleteTeam(props.team.id, props.organization.id)
+  if (!result?.error) {
+    router.push(`/org/${props.organization.slug}`)
+  }
+}
+</script>

package/app/composables/types.ts

@@ -7,6 +7,61 @@ export interface AuthUser {
   metadata?: Record<string, any>;
 }
 
+export interface Organization {
+  id: string;
+  name: string;
+  slug: string;
+  logo?: string | null;
+  metadata?: Record<string, any>;
+  createdAt: Date | string;
+}
+
+export interface OrganizationMember {
+  id: string;
+  organizationId: string;
+  userId: string;
+  email?: string;
+  name?: string;
+  role: string;
+  createdAt: Date | string;
+}
+
+export type InvitationStatus = 'pending' | 'accepted' | 'rejected' | 'canceled';
+
+export interface OrganizationInvitation {
+  id: string;
+  organizationId: string;
+  email: string;
+  role: string;
+  status: InvitationStatus;
+  inviterId: string;
+  expiresAt: Date | string;
+  createdAt: Date | string;
+}
+
+export interface OrganizationTeam {
+  id: string;
+  organizationId: string;
+  name: string;
+  slug?: string;
+  description?: string;
+  createdAt: Date | string;
+  updatedAt: Date | string;
+}
+
+export interface PermissionCheck {
+  role: string;
+  permissions: Record<string, string[]>;
+}
+
+export interface OrganizationRoute {
+  path: string;
+  requireMember?: boolean;
+  requireAdmin?: boolean;
+  requireOwner?: boolean;
+  requiredPermissions?: PermissionCheck[];
+}
+
 export interface AuthResult {
   status: "ok" | "error";
   user?: AuthUser | null;
@@ -52,12 +107,30 @@ export interface AuthConfig {
     otp?: boolean;
     forgotPassword?: boolean;
     signup?: boolean;
+    organization?: boolean;
+    teams?: boolean;
   };
   oauthProviders?: Array<{
     id: string;
     label: string;
     icon: string;
   }>;
+  organization?: {
+    enabled?: boolean;
+    teams?: boolean;
+    allowUserToCreateOrganization?: boolean;
+    requireMemberEmailVerification?: boolean;
+    defaultRole?: 'owner' | 'admin' | 'member' | string;
+    protectedRoutes?: Array<string | OrganizationRoute>;
+    redirects?: {
+      create?: string;
+      list?: string;
+      settings?: string;
+      invitations?: string;
+      notMember?: string;
+      noPermission?: string;
+    };
+  };
   ui?: {
     showLogo?: boolean;
     logoUrl?: string;