fix: Invited member can't access team projects

apps/lp/app/pages/[...slug].vue

@@ -94,7 +94,7 @@ const communityLinks = computed(() => [
       </UPageBody>
 
       <template v-if="page?.body?.toc?.links?.length" #right>
-        <UContentToc :links="page.body.toc.links" class="z-[2] bg-white dark:bg-neutral-950">
+        <UContentToc highlight :links="page.body.toc.links" class="z-[2] bg-white dark:bg-neutral-950">
           <template #default>
             <div class="flex items-center gap-2">
               <UIcon name="i-lucide-align-left" />

apps/shelve/app/components/project/MainSection.vue

@@ -94,10 +94,12 @@ const items = [
         a.click()
       }
     },
+  ],
+  [
     {
       label: 'Delete project',
       icon: 'lucide:trash',
-      iconClass: 'text-red-500 dark:text-red-500',
+      color: 'error',
       disabled: teamRole.value !== TeamRole.OWNER,
       onSelect: () => showDelete.value = !showDelete.value
     }

apps/shelve/app/components/team/AddMember.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { type Member, Role, TeamRole } from '@shelve/types'
+import { cleanString } from '~~/server/utils/string'
 
 type TeamMemberProps = { members: Member[] }
 
@@ -38,7 +39,7 @@ const loadingMembers = ref(false)
 
 function addMemberFunction(email: string, role: TeamRole) {
   loadingMembers.value = true
-  toast.promise(addMember(email, role), {
+  toast.promise(addMember(cleanString(email), role), {
     loading: 'Adding member...',
     success: 'Member added successfully',
     error: 'Error adding member',

apps/shelve/app/components/variable/Item.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { type Environment, type Variable } from '@shelve/types'
+import { type Environment, TeamRole, type Variable } from '@shelve/types'
 
 const { variable, environments } = defineProps<{
   variable: Variable
   environments: Environment[]
   isSelected: boolean
 }>()
 
-const teamRole = useTeamRole() //TODO handle roles
+const teamRole = useTeamRole()
+const canDelete = computed(() => hasAccess(teamRole.value, TeamRole.OWNER))
+const canUpdate = computed(() => hasAccess(teamRole.value, TeamRole.ADMIN))
 
 const {
   updateLoading,
@@ -121,18 +123,19 @@ const showEdit = ref(false)
         </div>
         <div class="flex justify-between gap-4">
           <UButton
+            v-if="canDelete"
             color="error"
             variant="ghost"
             :loading="deleteLoading"
             @click="deleteVariable(variable.id)"
           >
             Delete
           </UButton>
-          <div class="flex gap-2">
+          <div class="flex justify-end w-full gap-2">
             <UButton variant="soft" @click="showEdit = false">
-              Cancel
+              Close
             </UButton>
-            <UButton type="submit" trailing :loading="updateLoading" trailing-icon="lucide:save">
+            <UButton v-if="canUpdate" type="submit" trailing :loading="updateLoading" trailing-icon="lucide:save">
               Save
             </UButton>
           </div>

apps/shelve/app/pages/[teamSlug]/members.vue

@@ -63,7 +63,7 @@ const items = (row: Member) => [
     {
       label: 'Delete',
       icon: 'heroicons:trash-20-solid',
-      iconClass: 'text-red-500 dark:text-red-500',
+      color: 'error',
       disabled: !canDelete.value,
       onSelect: () => {
         if (row.role === TeamRole.OWNER) {

apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index/settings.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { TeamRole } from '@shelve/types'
 import { useCurrentLoading } from '~/composables/useProjects'
 import type { FormSubmitEvent } from '#ui/types'
 import { type UpdateProjectSchema, updateProjectSchema } from '~/utils/zod/project'
@@ -9,6 +10,9 @@ const project = useProject(projectId)
 
 const currentLoading = useCurrentLoading()
 
+const teamRole = useTeamRole()
+const canUpdate = computed(() => hasAccess(teamRole.value, TeamRole.ADMIN))
+
 async function onSubmit(event: FormSubmitEvent<UpdateProjectSchema>) {
   await useProjectsService().updateProject(event.data)
 }
@@ -50,21 +54,21 @@ async function onSubmit(event: FormSubmitEvent<UpdateProjectSchema>) {
                 :ui="{ help: 'text-xs' }"
               >
                 <div class="flex items-center gap-1">
-                  <UInput v-model="project.repository" class="md:w-2/3" />
+                  <UInput v-model="project.repository" class="md:w-2/3" :disabled="!canUpdate" />
                   <ProjectRepoSelector v-model="project.repository" />
                 </div>
               </UFormField>
             </div>
             <div>
               <USkeleton v-if="currentLoading" class="h-8" />
               <UFormField v-else name="projectManager" label="Project Manager">
-                <UInput v-model="project.projectManager" class="md:w-2/3" />
+                <UInput v-model="project.projectManager" class="md:w-2/3" :disabled="!canUpdate" />
               </UFormField>
             </div>
             <div>
               <USkeleton v-if="currentLoading" class="h-8" />
               <UFormField v-else name="homepage" label="Homepage">
-                <UInput v-model="project.homepage" class="md:w-2/3" />
+                <UInput v-model="project.homepage" class="md:w-2/3" :disabled="!canUpdate" />
               </UFormField>
             </div>
           </div>
@@ -82,7 +86,9 @@ async function onSubmit(event: FormSubmitEvent<UpdateProjectSchema>) {
           <div class="my-2 flex flex-col gap-4">
             <div>
               <USkeleton v-if="currentLoading" class="h-8" />
-              <FormGroup v-else v-model="project.variablePrefix" type="textarea" label="Prefix" class="md:w-2/3" />
+              <UFormField v-else v-model="project.variablePrefix" label="Prefix" class="md:w-2/3">
+                <UTextarea v-model="project.variablePrefix" class="w-full" :disabled="!canUpdate" :rows="4" />
+              </UFormField>
               <UTooltip text="Yes this will be improved in the future 😅">
                 <p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
                   Write your prefix separated by a comma, for example: <code>NUXT_PUBLIC_, REACT_APP_</code>
@@ -92,7 +98,7 @@ async function onSubmit(event: FormSubmitEvent<UpdateProjectSchema>) {
           </div>
         </div>
       </div>
-      <template #footer>
+      <template v-if="canUpdate" #footer>
         <div class="flex justify-end gap-4">
           <UButton type="submit" trailing loading-auto>
             Save

apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index/variables.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Variable } from '@shelve/types'
+import { TeamRole, type Variable } from '@shelve/types'
 
 const route = useRoute()
 const projectId = route.params.projectId as string

apps/shelve/app/pages/admin/index.vue

@@ -122,7 +122,7 @@ const items = (row: User) => [
     {
       label: 'Delete',
       icon: 'heroicons:trash-20-solid',
-      iconClass: 'text-red-500 dark:text-red-500',
+      color: 'error',
       onSelect: () => {
         if (row.role === Role.ADMIN) {
           toast.error('Cannot delete admin')

apps/shelve/server/api/teams/[slug]/members/[id].delete.ts

@@ -8,6 +8,7 @@ export default eventHandler(async (event) => {
 
   await new MembersService().removeMember({
     teamId: team.id,
+    slug: team.slug,
     memberId: id,
   })
 

apps/shelve/server/api/teams/[slug]/members/[id].put.ts

@@ -15,6 +15,7 @@ export default eventHandler(async (event) => {
 
   return new MembersService().updateMember({
     teamId: team.id,
+    slug: team.slug,
     memberId: id,
     role
   })

apps/shelve/server/api/teams/[slug]/members/index.post.ts

@@ -18,6 +18,7 @@ export default eventHandler(async (event) => {
 
   return await new MembersService().addMember({
     teamId: team.id,
+    slug: team.slug, // use for caching
     email,
     role
   })

apps/shelve/server/services/members.ts

@@ -3,11 +3,12 @@ import type { AddMemberInput, Member, RemoveMemberInput, UpdateMemberInput, User
 export class MembersService {
 
   async addMember(input: AddMemberInput): Promise<Member> {
-    const { teamId, email, role } = input
+    const { teamId, email, role, slug } = input
     const foundedMember = await this.isUserAlreadyMember(teamId, email)
     if (foundedMember) {
       return await this.updateMember({
         teamId,
+        slug,
         memberId: foundedMember.id,
         role
       })
@@ -23,12 +24,12 @@ export class MembersService {
       .returning()
     if (!newMember) throw createError({ statusCode: 422, message: 'Failed to add member' })
     const member = await this.findMemberById(newMember.id)
-    await clearCache('Team', teamId)
+    await clearCache('Team', slug)
     return member
   }
 
   async updateMember(input: UpdateMemberInput): Promise<Member> {
-    const { teamId, memberId, role } = input
+    const { slug, memberId, role } = input
 
     await useDrizzle().update(tables.members)
       .set({
@@ -37,15 +38,15 @@ export class MembersService {
       .where(eq(tables.members.id, memberId))
 
     const member = await this.findMemberById(memberId)
-    await clearCache('Team', teamId)
+    await clearCache('Team', slug)
     return member
   }
 
   async removeMember(input: RemoveMemberInput): Promise<void> {
-    const { teamId, memberId } = input
+    const { memberId, slug } = input
 
     const member = await this.findMemberById(memberId)
-    await clearCache('Team', teamId)
+    await clearCache('Team', slug)
     await useDrizzle().delete(tables.members).where(eq(tables.members.id, member.id))
   }
 

apps/shelve/server/utils/string.ts

@@ -0,0 +1,6 @@
+export const cleanString = (str: string) => {
+  return str
+    .replace(/[\t\r\n]/g, '') // Remove tabs, line breaks
+    .replace(/\s+/g, ' ') // Replace multiple spaces with a single space
+    .trim()
+}

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shelve/types",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "type": "module",
   "publishConfig": {
     "access": "public"

packages/types/src/Team.ts

@@ -46,17 +46,20 @@ export type DeleteTeamInput = {
 
 export type AddMemberInput = {
   teamId: number;
+  slug: string;
   email: string;
   role: TeamRole;
 }
 
 export type UpdateMemberInput = {
   teamId: number;
+  slug: string;
   memberId: number;
   role: TeamRole;
 }
 
 export type RemoveMemberInput = {
   teamId: number;
+  slug: string;
   memberId: number;
 }