Fix org ownership (#1553)

pages/[type]/[id].vue

@@ -637,7 +637,9 @@
         >
           <Avatar :src="organization.icon_url" :alt="organization.name" size="sm" />
           <div class="member-info">
-            <p class="name">{{ organization.name }}</p>
+            <p class="name">
+              {{ organization.name }}
+            </p>
             <p class="role"><OrganizationIcon /> Organization</p>
           </div>
         </nuxt-link>
@@ -650,7 +652,9 @@
           <Avatar :src="member.avatar_url" :alt="member.username" size="sm" circle />
 
           <div class="member-info">
-            <p class="name">{{ member.name }}</p>
+            <p class="name">
+              {{ member.name }} <CrownIcon v-if="member.is_owner" v-tooltip="'Project owner'" />
+            </p>
             <p class="role">
               {{ member.role }}
             </p>
@@ -766,6 +770,7 @@ import {
   Checkbox,
   ChartIcon,
 } from 'omorphia'
+import CrownIcon from '~/assets/images/utils/crown.svg'
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
 import ClearIcon from '~/assets/images/utils/clear.svg'
 import DownloadIcon from '~/assets/images/utils/download.svg'
@@ -878,7 +883,7 @@ try {
     }),
     useAsyncData(
       `project/${route.params.id}/members`,
-      () => useBaseFetch(`project/${route.params.id}/members`),
+      () => useBaseFetch(`project/${route.params.id}/members`, { apiVersion: 3 }),
       {
         transform: (members) => {
           members.forEach((it, index) => {
@@ -939,8 +944,8 @@ if (project.value.project_type !== route.params.type || route.params.id !== proj
 // The rest of the members should be sorted by role, then by name
 const members = computed(() => {
   const acceptedMembers = allMembers.value.filter((x) => x.accepted)
-  const owner = acceptedMembers.find((x) => x.role === 'Owner')
-  const rest = acceptedMembers.filter((x) => x.role !== 'Owner') || []
+  const owner = acceptedMembers.find((x) => x.is_owner)
+  const rest = acceptedMembers.filter((x) => !x.is_owner) || []
 
   rest.sort((a, b) => {
     if (a.role === b.role) {
@@ -1017,9 +1022,7 @@ const description = computed(
   () =>
     `${project.value.description} - Download the Minecraft ${projectTypeDisplay.value} ${
       project.value.title
-    } by ${
-      members.value.find((x) => x.role === 'Owner')?.user?.username || 'a Creator'
-    } on Modrinth`
+    } by ${members.value.find((x) => x.is_owner)?.user?.username || 'a Creator'} on Modrinth`
 )
 
 if (!route.name.startsWith('type-id-settings')) {
@@ -1409,6 +1412,13 @@ const collapsedChecklist = ref(false)
 
     .name {
       font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+
+      svg {
+        color: var(--color-orange);
+      }
     }
 
     p {

pages/[type]/[id]/settings/members.vue

@@ -47,7 +47,7 @@
         </span>
         <button
           class="iconified-button danger-button"
-          :disabled="props.currentMember?.role === 'Owner'"
+          :disabled="props.currentMember?.is_owner"
           @click="leaveProject()"
         >
           <UserRemoveIcon />
@@ -67,6 +67,7 @@
           <div class="text">
             <nuxt-link :to="'/user/' + member.user.username" class="name">
               <p>{{ member.name }}</p>
+              <CrownIcon v-if="member.is_owner" v-tooltip="'Project owner'" />
             </nuxt-link>
             <p>{{ member.role }}</p>
           </div>
@@ -87,7 +88,7 @@
         </div>
       </div>
       <div class="content">
-        <div v-if="member.oldRole !== 'Owner'" class="adjacent-input">
+        <div class="adjacent-input">
           <label :for="`member-${allTeamMembers[index].user.username}-role`">
             <span class="label__title">Role</span>
             <span class="label__description">
@@ -98,7 +99,6 @@
             :id="`member-${allTeamMembers[index].user.username}-role`"
             v-model="allTeamMembers[index].role"
             type="text"
-            :class="{ 'known-error': member.role === 'Owner' }"
             :disabled="(props.currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
           />
         </div>
@@ -117,11 +117,7 @@
             :disabled="(props.currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
           />
         </div>
-        <p v-if="member.role === 'Owner' && member.oldRole !== 'Owner'" class="known-errors">
-          A project can only have one 'Owner'. Use the 'Transfer ownership' button below if you no
-          longer wish to be owner.
-        </p>
-        <template v-if="member.oldRole !== 'Owner'">
+        <template v-if="!member.is_owner">
           <span class="label">
             <span class="label__title">Permissions</span>
           </span>
@@ -225,7 +221,7 @@
             Save changes
           </button>
           <button
-            v-if="member.oldRole !== 'Owner'"
+            v-if="!member.is_owner"
             class="iconified-button danger-button"
             :disabled="(props.currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
             @click="removeTeamMember(index)"
@@ -234,9 +230,7 @@
             Remove member
           </button>
           <button
-            v-if="
-              member.oldRole !== 'Owner' && props.currentMember?.role === 'Owner' && member.accepted
-            "
+            v-if="!member.is_owner && props.currentMember?.is_owner && member.accepted"
             class="iconified-button"
             @click="transferOwnership(index)"
           >
@@ -300,7 +294,7 @@
           :show-labels="false"
           :allow-empty="false"
           :options="organizations || []"
-          :disabled="props.currentMember?.role !== 'Owner' || organizations?.length === 0"
+          :disabled="!props.currentMember?.is_owner || organizations?.length === 0"
         />
         <button class="btn btn-primary" :disabled="!selectedOrganization" @click="onAddToOrg">
           <CheckIcon />
@@ -324,6 +318,7 @@
           <div class="text">
             <nuxt-link :to="'/user/' + member.user.username" class="name">
               <p>{{ member.user.username }}</p>
+              <CrownIcon v-if="member.is_owner" v-tooltip="'Organization owner'" />
             </nuxt-link>
             <p>{{ member.role }}</p>
           </div>
@@ -344,7 +339,7 @@
         </div>
       </div>
       <div class="content">
-        <div v-if="!member.is_owner" class="adjacent-input">
+        <div class="adjacent-input">
           <label :for="`member-${allOrgMembers[index].user.username}-override-perms`">
             <span class="label__title">Override values</span>
             <span class="label__description">
@@ -529,6 +524,7 @@ import SaveIcon from '~/assets/images/utils/save.svg'
 import UserPlusIcon from '~/assets/images/utils/user-plus.svg'
 import UserRemoveIcon from '~/assets/images/utils/user-x.svg'
 import OrganizationIcon from '~/assets/images/utils/organization.svg'
+import CrownIcon from '~/assets/images/utils/crown.svg'
 
 import { removeSelfFromTeam } from '~/helpers/teams.js'
 
@@ -600,9 +596,9 @@ function initMembers() {
 
   allOrgMembers.value = selectedMembersForOrg
 
-  allTeamMembers.value = props.allMembers
-    .map((x) => ({ ...x, oldRole: x.role }))
-    .filter((x) => !selectedMembersForOrg.some((y) => y.user.id === x.user.id))
+  allTeamMembers.value = props.allMembers.filter(
+    (x) => !selectedMembersForOrg.some((y) => y.user.id === x.user.id)
+  )
 }
 
 watch(
@@ -737,16 +733,16 @@ const updateTeamMember = async (index) => {
   startLoading()
 
   try {
-    const data =
-      allTeamMembers.value[index].oldRole !== 'Owner'
-        ? {
-            permissions: allTeamMembers.value[index].permissions,
-            role: allTeamMembers.value[index].role,
-            payouts_split: allTeamMembers.value[index].payouts_split,
-          }
-        : {
-            payouts_split: allTeamMembers.value[index].payouts_split,
-          }
+    const data = !allTeamMembers.value[index].is_owner
+      ? {
+          permissions: allTeamMembers.value[index].permissions,
+          role: allTeamMembers.value[index].role,
+          payouts_split: allTeamMembers.value[index].payouts_split,
+        }
+      : {
+          payouts_split: allTeamMembers.value[index].payouts_split,
+          role: allTeamMembers.value[index].role,
+        }
 
     await useBaseFetch(
       `team/${props.project.team}/members/${allTeamMembers.value[index].user.id}`,
@@ -900,6 +896,14 @@ const updateMembers = async () => {
         font-size: var(--font-size-sm);
         .name {
           font-weight: bold;
+
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+
+          svg {
+            color: var(--color-orange);
+          }
         }
         p {
           margin: 0.2rem 0;