Skip to content

Commit 0e17427

Browse files
IMB11IMB11
authored
fix: #4568 & i18n on user page (#4572)
* fix: #4568 * fix: lint
1 parent ad3b5ae commit 0e17427

File tree

2 files changed

+160
-45
lines changed

2 files changed

+160
-45
lines changed

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

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1112,6 +1112,12 @@
11121112
"moderation.technical.search.placeholder": {
11131113
"message": "Search tech reviews..."
11141114
},
1115+
"profile.bio.fallback.creator": {
1116+
"message": "A Modrinth creator."
1117+
},
1118+
"profile.bio.fallback.user": {
1119+
"message": "A Modrinth user."
1120+
},
11151121
"profile.button.billing": {
11161122
"message": "Manage user billing"
11171123
},
@@ -1124,18 +1130,48 @@
11241130
"profile.button.manage-projects": {
11251131
"message": "Manage projects"
11261132
},
1133+
"profile.details.label.auth-providers": {
1134+
"message": "Auth providers"
1135+
},
1136+
"profile.details.label.email": {
1137+
"message": "Email"
1138+
},
1139+
"profile.details.label.has-password": {
1140+
"message": "Has password"
1141+
},
1142+
"profile.details.label.has-totp": {
1143+
"message": "Has TOTP"
1144+
},
1145+
"profile.details.label.payment-methods": {
1146+
"message": "Payment methods"
1147+
},
1148+
"profile.details.tooltip.email-not-verified": {
1149+
"message": "Email not verified"
1150+
},
1151+
"profile.details.tooltip.email-verified": {
1152+
"message": "Email verified"
1153+
},
11271154
"profile.error.not-found": {
11281155
"message": "User not found"
11291156
},
1130-
"profile.joined-at": {
1131-
"message": "Joined <date>{ago}</date>"
1132-
},
11331157
"profile.label.badges": {
11341158
"message": "Badges"
11351159
},
1160+
"profile.label.collection": {
1161+
"message": "Collection"
1162+
},
11361163
"profile.label.details": {
11371164
"message": "Details"
11381165
},
1166+
"profile.label.downloads": {
1167+
"message": "{count} {count, plural, one {download} other {downloads}}"
1168+
},
1169+
"profile.label.joined": {
1170+
"message": "Joined"
1171+
},
1172+
"profile.label.no": {
1173+
"message": "No"
1174+
},
11391175
"profile.label.no-collections": {
11401176
"message": "This user has no collections!"
11411177
},
@@ -1151,18 +1187,21 @@
11511187
"profile.label.organizations": {
11521188
"message": "Organizations"
11531189
},
1190+
"profile.label.projects": {
1191+
"message": "{count} {count, plural, one {project} other {projects}}"
1192+
},
1193+
"profile.label.saving": {
1194+
"message": "Saving..."
1195+
},
1196+
"profile.label.yes": {
1197+
"message": "Yes"
1198+
},
11541199
"profile.meta.description": {
11551200
"message": "Download {username}'s projects on Modrinth"
11561201
},
11571202
"profile.meta.description-with-bio": {
11581203
"message": "{bio} - Download {username}'s projects on Modrinth"
11591204
},
1160-
"profile.stats.downloads": {
1161-
"message": "{count, plural, one {<stat>{count}</stat> project download} other {<stat>{count}</stat> project downloads}}"
1162-
},
1163-
"profile.stats.projects": {
1164-
"message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
1165-
},
11661205
"profile.stats.projects-followers": {
11671206
"message": "{count, plural, one {<stat>{count}</stat> project follower} other {<stat>{count}</stat> project followers}}"
11681207
},

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

Lines changed: 112 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<ButtonStyled>
1717
<button @click="cancelRoleEdit">
1818
<XIcon />
19-
Cancel
19+
{{ formatMessage(commonMessages.cancelButton) }}
2020
</button>
2121
</ButtonStyled>
2222
<ButtonStyled color="brand">
@@ -25,9 +25,11 @@
2525
@click="saveRoleEdit"
2626
>
2727
<template v-if="isSavingRole">
28-
<SpinnerIcon class="animate-spin" /> Saving...
28+
<SpinnerIcon class="animate-spin" /> {{ formatMessage(messages.savingLabel) }}
29+
</template>
30+
<template v-else>
31+
<SaveIcon /> {{ formatMessage(commonMessages.saveChangesButton) }}
2932
</template>
30-
<template v-else> <SaveIcon /> Save changes </template>
3133
</button>
3234
</ButtonStyled>
3335
</div>
@@ -36,10 +38,16 @@
3638
<NewModal v-if="auth.user && isStaff(auth.user)" ref="userDetailsModal" header="User details">
3739
<div class="flex flex-col gap-3">
3840
<div class="flex flex-col gap-1">
39-
<span class="text-lg font-bold text-primary">Email</span>
41+
<span class="text-lg font-bold text-primary">{{
42+
formatMessage(messages.emailLabel)
43+
}}</span>
4044
<div>
4145
<span
42-
v-tooltip="user.email_verified ? 'Email verified' : 'Email not verified'"
46+
v-tooltip="
47+
user.email_verified
48+
? formatMessage(messages.emailVerifiedTooltip)
49+
: formatMessage(messages.emailNotVerifiedTooltip)
50+
"
4351
class="flex w-fit items-center gap-1"
4452
>
4553
<span>{{ user.email }}</span>
@@ -50,12 +58,16 @@
5058
</div>
5159

5260
<div class="flex flex-col gap-1">
53-
<span class="text-lg font-bold text-primary"> Auth providers </span>
61+
<span class="text-lg font-bold text-primary">{{
62+
formatMessage(messages.authProvidersLabel)
63+
}}</span>
5464
<span>{{ user.auth_providers.join(', ') }}</span>
5565
</div>
5666

5767
<div class="flex flex-col gap-1">
58-
<span class="text-lg font-bold text-primary"> Payment methods</span>
68+
<span class="text-lg font-bold text-primary">{{
69+
formatMessage(messages.paymentMethodsLabel)
70+
}}</span>
5971
<span>
6072
<template v-if="user.payout_data?.paypal_address">
6173
Paypal ({{ user.payout_data.paypal_address }} - {{ user.payout_data.paypal_country }})
@@ -70,16 +82,22 @@
7082
</div>
7183

7284
<div class="flex flex-col gap-1">
73-
<span class="text-lg font-bold text-primary"> Has password </span>
85+
<span class="text-lg font-bold text-primary">{{
86+
formatMessage(messages.hasPasswordLabel)
87+
}}</span>
7488
<span>
75-
{{ user.has_password ? 'Yes' : 'No' }}
89+
{{
90+
user.has_password ? formatMessage(messages.yesLabel) : formatMessage(messages.noLabel)
91+
}}
7692
</span>
7793
</div>
7894

7995
<div class="flex flex-col gap-1">
80-
<span class="text-lg font-bold text-primary"> Has TOTP </span>
96+
<span class="text-lg font-bold text-primary">{{
97+
formatMessage(messages.hasTotpLabel)
98+
}}</span>
8199
<span>
82-
{{ user.has_totp ? 'Yes' : 'No' }}
100+
{{ user.has_totp ? formatMessage(messages.yesLabel) : formatMessage(messages.noLabel) }}
83101
</span>
84102
</div>
85103
</div>
@@ -98,25 +116,31 @@
98116
user.bio
99117
? user.bio
100118
: projects.length === 0
101-
? 'A Modrinth user.'
102-
: 'A Modrinth creator.'
119+
? formatMessage(messages.bioFallbackUser)
120+
: formatMessage(messages.bioFallbackCreator)
103121
}}
104122
</template>
105123
<template #stats>
106124
<div
107125
class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
108126
>
109127
<BoxIcon class="h-6 w-6 text-secondary" />
110-
{{ formatCompactNumber(projects?.length || 0) }}
111-
projects
128+
{{
129+
formatMessage(messages.profileProjectsLabel, {
130+
count: formatCompactNumber(projects?.length || 0),
131+
})
132+
}}
112133
</div>
113134
<div
114135
v-tooltip="sumDownloads.toLocaleString()"
115136
class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
116137
>
117138
<DownloadIcon class="h-6 w-6 text-secondary" />
118-
{{ formatCompactNumber(sumDownloads) }}
119-
downloads
139+
{{
140+
formatMessage(messages.profileDownloadsLabel, {
141+
count: formatCompactNumber(sumDownloads),
142+
})
143+
}}
120144
</div>
121145
<div
122146
v-tooltip="
@@ -128,7 +152,7 @@
128152
class="flex items-center gap-2 font-semibold"
129153
>
130154
<CalendarIcon class="h-6 w-6 text-secondary" />
131-
Joined
155+
{{ formatMessage(messages.profileJoinedLabel) }}
132156
{{ formatRelativeTime(user.created) }}
133157
</div>
134158
</template>
@@ -287,7 +311,7 @@
287311
<h2 class="title">{{ collection.name }}</h2>
288312
<div class="stats">
289313
<LibraryIcon aria-hidden="true" />
290-
Collection
314+
{{ formatMessage(messages.collectionLabel) }}
291315
</div>
292316
</div>
293317
</div>
@@ -298,25 +322,27 @@
298322
<div class="stats">
299323
<BoxIcon />
300324
{{
301-
`${$formatNumber(collection.projects?.length || 0, false)} project${(collection.projects?.length || 0) !== 1 ? 's' : ''}`
325+
`${$formatNumber(collection.projects?.length || 0, false)} project${
326+
(collection.projects?.length || 0) !== 1 ? 's' : ''
327+
}`
302328
}}
303329
</div>
304330
<div class="stats">
305331
<template v-if="collection.status === 'listed'">
306332
<GlobeIcon />
307-
<span> Public </span>
333+
<span> {{ formatMessage(commonMessages.publicLabel) }} </span>
308334
</template>
309335
<template v-else-if="collection.status === 'unlisted'">
310336
<LinkIcon />
311-
<span> Unlisted </span>
337+
<span> {{ formatMessage(commonMessages.unlistedLabel) }} </span>
312338
</template>
313339
<template v-else-if="collection.status === 'private'">
314340
<LockIcon />
315-
<span> Private </span>
341+
<span> {{ formatMessage(commonMessages.privateLabel) }} </span>
316342
</template>
317343
<template v-else-if="collection.status === 'rejected'">
318344
<XIcon />
319-
<span> Rejected </span>
345+
<span> {{ formatMessage(commonMessages.rejectedLabel) }} </span>
320346
</template>
321347
</div>
322348
</div>
@@ -450,25 +476,75 @@ const formatRelativeTime = useRelativeTime()
450476
const { addNotification } = injectNotificationManager()
451477
452478
const messages = defineMessages({
453-
profileProjectsStats: {
454-
id: 'profile.stats.projects',
455-
defaultMessage:
456-
'{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}',
479+
profileProjectsLabel: {
480+
id: 'profile.label.projects',
481+
defaultMessage: '{count} {count, plural, one {project} other {projects}}',
457482
},
458-
profileDownloadsStats: {
459-
id: 'profile.stats.downloads',
460-
defaultMessage:
461-
'{count, plural, one {<stat>{count}</stat> project download} other {<stat>{count}</stat> project downloads}}',
483+
profileDownloadsLabel: {
484+
id: 'profile.label.downloads',
485+
defaultMessage: '{count} {count, plural, one {download} other {downloads}}',
486+
},
487+
profileJoinedLabel: {
488+
id: 'profile.label.joined',
489+
defaultMessage: 'Joined',
490+
},
491+
savingLabel: {
492+
id: 'profile.label.saving',
493+
defaultMessage: 'Saving...',
494+
},
495+
emailLabel: {
496+
id: 'profile.details.label.email',
497+
defaultMessage: 'Email',
498+
},
499+
emailVerifiedTooltip: {
500+
id: 'profile.details.tooltip.email-verified',
501+
defaultMessage: 'Email verified',
502+
},
503+
emailNotVerifiedTooltip: {
504+
id: 'profile.details.tooltip.email-not-verified',
505+
defaultMessage: 'Email not verified',
506+
},
507+
authProvidersLabel: {
508+
id: 'profile.details.label.auth-providers',
509+
defaultMessage: 'Auth providers',
510+
},
511+
paymentMethodsLabel: {
512+
id: 'profile.details.label.payment-methods',
513+
defaultMessage: 'Payment methods',
514+
},
515+
hasPasswordLabel: {
516+
id: 'profile.details.label.has-password',
517+
defaultMessage: 'Has password',
518+
},
519+
hasTotpLabel: {
520+
id: 'profile.details.label.has-totp',
521+
defaultMessage: 'Has TOTP',
522+
},
523+
yesLabel: {
524+
id: 'profile.label.yes',
525+
defaultMessage: 'Yes',
526+
},
527+
noLabel: {
528+
id: 'profile.label.no',
529+
defaultMessage: 'No',
530+
},
531+
bioFallbackUser: {
532+
id: 'profile.bio.fallback.user',
533+
defaultMessage: 'A Modrinth user.',
534+
},
535+
bioFallbackCreator: {
536+
id: 'profile.bio.fallback.creator',
537+
defaultMessage: 'A Modrinth creator.',
538+
},
539+
collectionLabel: {
540+
id: 'profile.label.collection',
541+
defaultMessage: 'Collection',
462542
},
463543
profileProjectsFollowersStats: {
464544
id: 'profile.stats.projects-followers',
465545
defaultMessage:
466546
'{count, plural, one {<stat>{count}</stat> project follower} other {<stat>{count}</stat> project followers}}',
467547
},
468-
profileJoinedAt: {
469-
id: 'profile.joined-at',
470-
defaultMessage: 'Joined <date>{ago}</date>',
471-
},
472548
profileUserId: {
473549
id: 'profile.user-id',
474550
defaultMessage: 'User ID: {id}',

0 commit comments

Comments
 (0)