feat: confirm transfer project/org modals (#5532)

* feat: implement confirm transfer project/org modals

* pnpm prepr

* update warning banner copy

* update warning banner again

apps/frontend/src/pages/[type]/[id]/settings/members.vue

@@ -1,5 +1,17 @@
 <template>
 	<div>
+		<ConfirmTransferProjectModal
+			v-if="transferData && project"
+			ref="transferModal"
+			:project="{ name: project.title, icon_url: project.icon_url }"
+			:current-owner="{
+				avatar_url: currentMember?.avatar_url,
+				username: currentMember?.user?.username ?? '',
+				role: currentMember?.role ?? 'Owner',
+			}"
+			:transfer-to="transferData.target"
+			:on-confirm="transferData.onConfirm"
+		/>
 		<ConfirmModal
 			ref="modal_remove"
 			title="Are you sure you want to remove this project from the organization?"
@@ -233,7 +245,7 @@
 					<button
 						v-if="!member.is_owner && currentMember?.is_owner && member.accepted"
 						class="iconified-button"
-						@click="transferOwnership(index)"
+						@click="openTransferModal(index, $event)"
 					>
 						<TransferIcon />
 						Transfer ownership
@@ -298,7 +310,11 @@
 					:options="organizations || []"
 					:disabled="!currentMember?.is_owner || organizations?.length === 0"
 				/>
-				<button class="btn btn-primary" :disabled="!selectedOrganization" @click="onAddToOrg">
+				<button
+					class="btn btn-primary"
+					:disabled="!selectedOrganization"
+					@click="openTransferToOrgModal($event)"
+				>
 					<CheckIcon />
 					Transfer management
 				</button>
@@ -553,6 +569,7 @@ import {
 } from '@modrinth/ui'
 import { Multiselect } from 'vue-multiselect'
 
+import ConfirmTransferProjectModal from '~/components/ui/ConfirmTransferProjectModal.vue'
 import { removeSelfFromTeam } from '~/helpers/teams.js'
 
 const { addNotification } = injectNotificationManager()
@@ -604,6 +621,8 @@ initMembers()
 const currentUsername = ref('')
 const openTeamMembers = ref([])
 const selectedOrganization = ref(null)
+const transferData = ref(null)
+const transferModal = ref(null)
 
 const { data: organizations } = useAsyncData('organizations', () => {
 	return useBaseFetch('user/' + auth.value?.user.id + '/organizations', {
@@ -758,6 +777,34 @@ const updateTeamMember = async (index) => {
 	stopLoading()
 }
 
+const openTransferModal = (index, e) => {
+	transferData.value = {
+		target: {
+			avatar_url: allTeamMembers.value[index]?.avatar_url,
+			username: allTeamMembers.value[index]?.user?.username,
+			role: allTeamMembers.value[index]?.role || 'Member',
+		},
+		onConfirm: () => transferOwnership(index),
+	}
+	nextTick(() => {
+		transferModal.value?.show(e)
+	})
+}
+
+const openTransferToOrgModal = (e) => {
+	if (!selectedOrganization.value) return
+	transferData.value = {
+		target: {
+			avatar_url: selectedOrganization.value.icon_url,
+			name: selectedOrganization.value.name,
+		},
+		onConfirm: () => onAddToOrg(),
+	}
+	nextTick(() => {
+		transferModal.value?.show(e)
+	})
+}
+
 const transferOwnership = async (index) => {
 	startLoading()
 

apps/frontend/src/pages/organization/[id]/settings/members.vue

@@ -1,5 +1,21 @@
 <template>
 	<div class="normal-page__content">
+		<ConfirmTransferOrgModal
+			v-if="transferTargetMember"
+			ref="transferModal"
+			:organization="{ name: organization.name, icon_url: organization.icon_url }"
+			:current-owner="{
+				avatar_url: currentMember.user?.avatar_url,
+				username: currentMember.user?.username ?? '',
+				role: currentMember.role ?? 'Owner',
+			}"
+			:transfer-to="{
+				avatar_url: transferTargetMember.user?.avatar_url,
+				username: transferTargetMember.user?.username ?? '',
+				role: transferTargetMember.role || 'Member',
+			}"
+			:on-confirm="() => onTransferOwnership(organization.team_id, transferTargetMember.user.id)"
+		/>
 		<div class="universal-card">
 			<div class="label">
 				<h3>
@@ -205,7 +221,7 @@
 					</Button>
 					<Button
 						v-if="!member.is_owner && currentMember.is_owner && member.accepted"
-						@click="() => onTransferOwnership(organization.team_id, member.user.id)"
+						@click="(e) => openTransferModal(member, e)"
 					>
 						<TransferIcon />
 						Transfer ownership
@@ -233,8 +249,9 @@ import {
 	injectNotificationManager,
 	StyledInput,
 } from '@modrinth/ui'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
+import ConfirmTransferOrgModal from '~/components/ui/ConfirmTransferOrgModal.vue'
 import { removeTeamMember } from '~/helpers/teams.js'
 import { injectOrganizationContext } from '~/providers/organization-context.ts'
 import { isPermission } from '~/utils/permissions.ts'
@@ -246,6 +263,8 @@ const auth = await useAuth()
 
 const currentUsername = ref('')
 const openTeamMembers = ref([])
+const transferTargetMember = ref(null)
+const transferModal = ref(null)
 
 const allTeamMembers = ref(organization.value.members)
 
@@ -344,6 +363,13 @@ const onUpdateTeamMember = useClientTry(async (teamId, member) => {
 	})
 })
 
+const openTransferModal = (member, e) => {
+	transferTargetMember.value = member
+	nextTick(() => {
+		transferModal.value?.show(e)
+	})
+}
+
 const onTransferOwnership = useClientTry(async (teamId, uid) => {
 	const data = {
 		user_id: uid,