From 5924154a62c4cb4abcf7bbfb67fadc4b0aabc86e Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:13:37 -0500
Subject: [PATCH] Fix org ownership (#1553)

---
 assets/images/utils/crown.svg                |  1 +
 pages/[type]/[id].vue                        | 26 +++++---
 pages/[type]/[id]/settings/members.vue       | 58 +++++++++--------
 pages/organization/[id].vue                  | 18 +++++-
 pages/organization/[id]/settings/members.vue | 66 ++++++++++----------
 5 files changed, 98 insertions(+), 71 deletions(-)
 create mode 100644 assets/images/utils/crown.svg

diff --git a/assets/images/utils/crown.svg b/assets/images/utils/crown.svg
new file mode 100644
index 000000000..7772c5b55
--- /dev/null
+++ b/assets/images/utils/crown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-crown"><path d="m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14"/></svg>
diff --git a/pages/[type]/[id].vue b/pages/[type]/[id].vue
index a8afcad88..184d6dac1 100644
--- a/pages/[type]/[id].vue
+++ b/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 {
diff --git a/pages/[type]/[id]/settings/members.vue b/pages/[type]/[id]/settings/members.vue
index 7112ca8b3..24850da8e 100644
--- a/pages/[type]/[id]/settings/members.vue
+++ b/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;
diff --git a/pages/organization/[id].vue b/pages/organization/[id].vue
index 3d61740d2..27e5c8323 100644
--- a/pages/organization/[id].vue
+++ b/pages/organization/[id].vue
@@ -107,7 +107,10 @@
           <template v-for="member in acceptedMembers" :key="member.user.id">
             <nuxt-link class="creator button-base" :to="`/user/${member.user.username}`">
               <Avatar :src="member.user.avatar_url" circle />
-              <p class="name">{{ member.user.username }}</p>
+              <p class="name">
+                {{ member.user.username }}
+                <CrownIcon v-if="member.is_owner" v-tooltip="'Organization owner'" />
+              </p>
               <p class="role">{{ member.role }}</p>
             </nuxt-link>
           </template>
@@ -226,6 +229,7 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg'
 import ProjectCard from '~/components/ui/ProjectCard.vue'
 
 import OrganizationIcon from '~/assets/images/utils/organization.svg'
+import CrownIcon from '~/assets/images/utils/crown.svg'
 import { acceptTeamInvite, removeTeamMember } from '~/helpers/teams.js'
 
 const vintl = useVIntl()
@@ -269,8 +273,8 @@ if (!organization.value) {
 // Filter accepted, sort by role, then by name and Owner role always goes first
 const acceptedMembers = computed(() => {
   const acceptedMembers = organization.value.members?.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) {
@@ -446,6 +450,14 @@ useSeoMeta({
       align-self: flex-end;
       margin-left: var(--gap-xs);
       font-weight: bold;
+
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+
+      svg {
+        color: var(--color-orange);
+      }
     }
 
     .role {
diff --git a/pages/organization/[id]/settings/members.vue b/pages/organization/[id]/settings/members.vue
index 8c2d5e737..4ea759ffa 100644
--- a/pages/organization/[id]/settings/members.vue
+++ b/pages/organization/[id]/settings/members.vue
@@ -51,7 +51,7 @@
         </span>
         <Button
           color="danger"
-          :disabled="currentMember.role === 'Owner'"
+          :disabled="currentMember.is_owner"
           @click="() => onLeaveProject(organization.team_id, auth.user.id)"
         >
           <UserRemoveIcon />
@@ -71,6 +71,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>
@@ -93,7 +94,7 @@
         </div>
       </div>
       <div class="content">
-        <div v-if="member.oldRole !== 'Owner'" class="adjacent-input">
+        <div class="adjacent-input">
           <label :for="`member-${member.user.id}-role`">
             <span class="label__title">Role</span>
             <span class="label__description">
@@ -104,7 +105,6 @@
             :id="`member-${member.user.id}-role`"
             v-model="member.role"
             type="text"
-            :class="{ 'known-error': member.role === 'Owner' }"
             :disabled="
               !isPermission(
                 currentMember.organization_permissions,
@@ -133,11 +133,7 @@
             "
           />
         </div>
-        <p v-if="member.role === 'Owner' && member.oldRole !== 'Owner'" class="known-errors">
-          A organization 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">Project permissions</span>
           </span>
@@ -157,7 +153,7 @@
             />
           </div>
         </template>
-        <template v-if="member.oldRole !== 'Owner'">
+        <template v-if="!member.is_owner">
           <span class="label">
             <span class="label__title">Organization permissions</span>
           </span>
@@ -192,7 +188,7 @@
             Save changes
           </Button>
           <Button
-            v-if="member.oldRole !== 'Owner'"
+            v-if="!member.is_owner"
             color="danger"
             :disabled="
               !isPermission(
@@ -210,7 +206,7 @@
             Remove member
           </Button>
           <Button
-            v-if="member.oldRole !== 'Owner' && currentMember.role === 'Owner' && member.accepted"
+            v-if="!member.is_owner && currentMember.is_owner && member.accepted"
             @click="() => onTransferOwnership(organization.team_id, member.user.id)"
           >
             <TransferIcon />
@@ -234,8 +230,9 @@ import {
   DropdownIcon,
   Button,
 } from 'omorphia'
-
 import { ref } from 'vue'
+import CrownIcon from '~/assets/images/utils/crown.svg'
+
 import { removeTeamMember } from '~/helpers/teams.js'
 import { isPermission } from '~/utils/permissions.ts'
 
@@ -246,20 +243,13 @@ const auth = await useAuth()
 const currentUsername = ref('')
 const openTeamMembers = ref([])
 
-const processMembers = (members) => {
-  return members
-    .map((x) => ({ ...x, oldRole: x.role }))
-    .sort((a, b) => a.user.username.localeCompare(b.user.username))
-}
-
-const allTeamMembers = ref(processMembers(organization.value.members))
+const allTeamMembers = ref(organization.value.members)
 
 watch(
   () => organization.value,
   () => {
-    allTeamMembers.value = processMembers(organization.value.members)
-  },
-  { deep: true, immediate: true }
+    allTeamMembers.value = organization.value.members
+  }
 )
 
 const projectPermissions = {
@@ -329,17 +319,17 @@ const onRemoveMember = useClientTry(async (teamId, member) => {
 })
 
 const onUpdateTeamMember = useClientTry(async (teamId, member) => {
-  const data =
-    member.oldRole !== 'Owner'
-      ? {
-          permissions: member.permissions,
-          organization_permissions: member.organization_permissions,
-          role: member.role,
-          payouts_split: member.payouts_split,
-        }
-      : {
-          payouts_split: member.payouts_split,
-        }
+  const data = !member.is_owner
+    ? {
+        permissions: member.permissions,
+        organization_permissions: member.organization_permissions,
+        role: member.role,
+        payouts_split: member.payouts_split,
+      }
+    : {
+        payouts_split: member.payouts_split,
+        role: member.role,
+      }
   await useBaseFetch(`team/${teamId}/members/${member.user.id}`, {
     method: 'PATCH',
     body: data,
@@ -381,9 +371,19 @@ const onTransferOwnership = useClientTry(async (teamId, uid) => {
       .text {
         margin: auto 0 auto 0.5rem;
         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;
         }