feat: user details modal for moderators (#4764)

* feat: user details modal for moderators

* fix: casing

Author: IMB11

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

@@ -1781,6 +1781,9 @@
   "profile.details.label.email": {
     "message": "Email"
   },
+  "profile.details.label.email-verified": {
+    "message": "Email verified"
+  },
   "profile.details.label.has-password": {
     "message": "Has password"
   },

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

@@ -32,7 +32,7 @@
 		</NewModal>
 		<NewModal v-if="auth.user && isStaff(auth.user)" ref="userDetailsModal" header="User details">
 			<div class="flex flex-col gap-3">
-				<div class="flex flex-col gap-1">
+				<div v-if="isAdmin(auth.user)" class="flex flex-col gap-1">
 					<span class="text-lg font-bold text-primary">{{
 						formatMessage(messages.emailLabel)
 					}}</span>
@@ -52,14 +52,29 @@
 					</div>
 				</div>
 
-				<div class="flex flex-col gap-1">
+				<div v-if="!isAdmin(auth.user)" class="flex flex-col gap-1">
+					<span class="text-lg font-bold text-primary">{{
+						formatMessage(messages.emailVerifiedLabel)
+					}}</span>
+					<span class="flex w-fit items-center gap-1">
+						<CheckIcon v-if="user.email_verified" class="h-4 w-4 text-brand" />
+						<XIcon v-else class="h-4 w-4 text-red" />
+						{{
+							user.email_verified
+								? formatMessage(messages.yesLabel)
+								: formatMessage(messages.noLabel)
+						}}
+					</span>
+				</div>
+
+				<div v-if="isAdmin(auth.user)" class="flex flex-col gap-1">
 					<span class="text-lg font-bold text-primary">{{
 						formatMessage(messages.authProvidersLabel)
 					}}</span>
 					<span>{{ user.auth_providers.join(', ') }}</span>
 				</div>
 
-				<div class="flex flex-col gap-1">
+				<div v-if="isAdmin(auth.user)" class="flex flex-col gap-1">
 					<span class="text-lg font-bold text-primary">{{
 						formatMessage(messages.paymentMethodsLabel)
 					}}</span>
@@ -473,7 +488,7 @@ import {
 	TagItem,
 	useRelativeTime,
 } from '@modrinth/ui'
-import { isAdmin, UserBadge } from '@modrinth/utils'
+import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import TenMClubBadge from '~/assets/images/badges/10m-club.svg?component'
@@ -489,7 +504,6 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import NavTabs from '~/components/ui/NavTabs.vue'
 import ProjectCard from '~/components/ui/ProjectCard.vue'
-import { isStaff } from '~/helpers/users.js'
 import { reportUser } from '~/utils/report-helpers.ts'
 
 const data = useNuxtApp()
@@ -531,6 +545,10 @@ const messages = defineMessages({
 		id: 'profile.details.label.email',
 		defaultMessage: 'Email',
 	},
+	emailVerifiedLabel: {
+		id: 'profile.details.label.email-verified',
+		defaultMessage: 'Email verified',
+	},
 	emailVerifiedTooltip: {
 		id: 'profile.details.tooltip.email-verified',
 		defaultMessage: 'Email verified',