feat: more details linked account info for support/moderation (#6897)

* feat: show discord + steam ID + github profile in "Show details" user modal

* pnpm intl:extract

apps/frontend/src/locales/en-US/index.json

@@ -3374,6 +3374,15 @@
   "profile.collection.projects-count": {
     "message": "{count, plural, one {# project} other {# projects}}"
   },
+  "profile.details.error.github-popup-blocked": {
+    "message": "Allow pop-ups for Modrinth, then try again."
+  },
+  "profile.details.error.github-profile-message": {
+    "message": "The GitHub profile could not be retrieved. Please try again."
+  },
+  "profile.details.error.github-profile-title": {
+    "message": "Unable to open GitHub profile"
+  },
   "profile.details.label.auth-providers": {
     "message": "Auth providers"
   },
@@ -3389,9 +3398,15 @@
   "profile.details.label.has-totp": {
     "message": "Has TOTP"
   },
+  "profile.details.label.loading-github-profile": {
+    "message": "Loading..."
+  },
   "profile.details.label.payment-methods": {
     "message": "Payment methods"
   },
+  "profile.details.label.view-github-profile": {
+    "message": "View profile"
+  },
   "profile.details.tooltip.email-not-verified": {
     "message": "Email not verified"
   },

apps/frontend/src/pages/user/[user].vue

@@ -71,7 +71,37 @@
 					<span class="text-lg font-bold text-primary">{{
 						formatMessage(messages.authProvidersLabel)
 					}}</span>
-					<span>{{ user.auth_providers.join(', ') }}</span>
+					<div class="flex flex-col">
+						<span
+							v-for="provider in user.auth_providers ?? []"
+							:key="provider"
+							class="flex items-center"
+						>
+							<span>{{ authProviderNames[provider] ?? provider }}</span>
+							<span v-if="provider === 'discord' && user.discord_id" class="ml-1">
+								({{ user.discord_id }})
+							</span>
+							<template v-else-if="provider === 'github' && user.github_id">
+								<span class="ml-1">(</span>
+								<button
+									type="button"
+									class="m-0 appearance-none border-0 bg-transparent p-0 font-[inherit] text-link disabled:cursor-wait disabled:opacity-70"
+									:disabled="isLoadingGithubProfile"
+									@click="openGithubProfile"
+								>
+									{{
+										isLoadingGithubProfile
+											? formatMessage(messages.loadingGithubProfileLabel)
+											: formatMessage(messages.viewGithubProfileLabel)
+									}}
+								</button>
+								<span>)</span>
+							</template>
+							<span v-else-if="provider === 'steam' && user.steam_id" class="ml-1">
+								({{ user.steam_id }})
+							</span>
+						</span>
+					</div>
 				</div>
 
 				<div v-if="isAdmin(auth.user)" class="flex flex-col gap-1">
@@ -437,6 +467,26 @@ const messages = defineMessages({
 		id: 'profile.details.label.auth-providers',
 		defaultMessage: 'Auth providers',
 	},
+	viewGithubProfileLabel: {
+		id: 'profile.details.label.view-github-profile',
+		defaultMessage: 'View profile',
+	},
+	loadingGithubProfileLabel: {
+		id: 'profile.details.label.loading-github-profile',
+		defaultMessage: 'Loading...',
+	},
+	githubProfileErrorTitle: {
+		id: 'profile.details.error.github-profile-title',
+		defaultMessage: 'Unable to open GitHub profile',
+	},
+	githubProfileErrorMessage: {
+		id: 'profile.details.error.github-profile-message',
+		defaultMessage: 'The GitHub profile could not be retrieved. Please try again.',
+	},
+	githubPopupBlockedMessage: {
+		id: 'profile.details.error.github-popup-blocked',
+		defaultMessage: 'Allow pop-ups for Modrinth, then try again.',
+	},
 	paymentMethodsLabel: {
 		id: 'profile.details.label.payment-methods',
 		defaultMessage: 'Payment methods',
@@ -518,6 +568,16 @@ const messages = defineMessages({
 const client = injectModrinthClient()
 
 const userId = useRouteId('user')
+const authProviderNames = {
+	github: 'GitHub',
+	discord: 'Discord',
+	microsoft: 'Microsoft',
+	gitlab: 'GitLab',
+	google: 'Google',
+	steam: 'Steam',
+	paypal: 'PayPal',
+}
+const isLoadingGithubProfile = ref(false)
 
 const {
 	data: user,
@@ -664,6 +724,50 @@ async function copyPermalink() {
 	await navigator.clipboard.writeText(`${config.public.siteUrl}/user/${user.value.id}`)
 }
 
+async function openGithubProfile() {
+	const githubId = user.value?.github_id
+	if (!githubId || isLoadingGithubProfile.value) return
+
+	const profileWindow = window.open('about:blank', '_blank')
+	if (!profileWindow) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.githubProfileErrorTitle),
+			message: formatMessage(messages.githubPopupBlockedMessage),
+		})
+		return
+	}
+
+	profileWindow.opener = null
+	isLoadingGithubProfile.value = true
+
+	try {
+		const githubUser = await client.request(`/${githubId}`, {
+			api: 'https://api.github.com',
+			version: 'user',
+			method: 'GET',
+			headers: { 'Content-Type': '' },
+			skipAuth: true,
+		})
+
+		if (!githubUser?.login) {
+			throw new Error('GitHub user response did not include a login')
+		}
+
+		profileWindow.location.replace(`https://github.com/${encodeURIComponent(githubUser.login)}`)
+	} catch (error) {
+		profileWindow.close()
+		console.error('Failed to retrieve GitHub profile:', error)
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.githubProfileErrorTitle),
+			message: formatMessage(messages.githubProfileErrorMessage),
+		})
+	} finally {
+		isLoadingGithubProfile.value = false
+	}
+}
+
 function reportProfileFromHeader() {
 	if (!user.value) return
 	if (auth.value.user) {