From 08d4a23fdb1ed0652678c8c9163c933614c20bfd Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Wed, 3 Jan 2024 17:47:29 +0100
Subject: [PATCH 1/8] Begin Work

---
 locales/en-US/index.json      | 18 +++++++++++++
 pages/auth/reset-password.vue | 49 ++++++++++++++++++++++++++++-------
 2 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index f4c551f2c5..e9917fc44d 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -1,4 +1,22 @@
 {
+  "auth.reset-password.button.reset-password": {
+    "message": "Reset password"
+  },
+  "auth.reset-password.input.confirm-password.placeholder": {
+    "message": "Confirm password"
+  },
+  "auth.reset-password.label.email-username": {
+    "message": "Email or username"
+  },
+  "auth.reset-password.label.password": {
+    "message": "Password"
+  },
+  "auth.reset-password.long-title": {
+    "message": "Reset your password"
+  },
+  "auth.reset-password.title": {
+    "message": "Reset Password"
+  },
   "button.cancel": {
     "message": "Cancel"
   },
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index 62374b4af5..05265539ad 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>Reset your password</h1>
+    <h1>{{ formatMessage(messages.resetPasswordLongTitle) }}</h1>
     <section class="auth-form">
       <template v-if="step === 'choose_method'">
         <p>
@@ -10,7 +10,7 @@
         </p>
 
         <div class="iconified-input">
-          <label for="email" hidden>Email or username</label>
+          <label for="email" hidden>{{ formatMessage(messages.emailUsernameLabel) }}</label>
           <MailIcon />
           <input
             id="email"
@@ -30,7 +30,7 @@
         <p>Enter your new password below to gain access to your account.</p>
 
         <div class="iconified-input">
-          <label for="password" hidden>Password</label>
+          <label for="password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
           <KeyIcon />
           <input
             id="password"
@@ -38,12 +38,12 @@
             type="password"
             autocomplete="new-password"
             class="auth-form__input"
-            placeholder="Password"
+            :placeholder="formatMessage(messages.passwordLabel)"
           />
         </div>
 
         <div class="iconified-input">
-          <label for="confirm-password" hidden>Password</label>
+          <label for="confirm-password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
           <KeyIcon />
           <input
             id="confirm-password"
@@ -51,12 +51,12 @@
             type="password"
             autocomplete="new-password"
             class="auth-form__input"
-            placeholder="Confirm password"
+            :placeholder="formatMessage(messages.confirmPasswordInputPlaceholder)"
           />
         </div>
 
         <button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
-          Reset password
+          {{ formatMessage(messages.resetPasswordButton) }}
         </button>
       </template>
     </section>
@@ -67,8 +67,37 @@ import { SendIcon } from 'omorphia'
 import MailIcon from 'assets/icons/auth/mail.svg'
 import KeyIcon from 'assets/icons/auth/key.svg'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  confirmPasswordInputPlaceholder: {
+    id: 'auth.reset-password.input.confirm-password.placeholder',
+    defaultMessage: 'Confirm password',
+  },
+  emailUsernameLabel: {
+    id: 'auth.reset-password.label.email-username',
+    defaultMessage: 'Email or username',
+  },
+  passwordLabel: {
+    id: 'auth.reset-password.label.password',
+    defaultMessage: 'Password',
+  },
+  resetPasswordButton: {
+    id: 'auth.reset-password.button.reset-password',
+    defaultMessage: 'Reset password',
+  },
+  resetPasswordLongTitle: {
+    id: 'auth.reset-password.long-title',
+    defaultMessage: 'Reset your password',
+  },
+  resetPasswordTitle: {
+    id: 'auth.reset-password.title',
+    defaultMessage: 'Reset Password',
+  },
+})
+
 useHead({
-  title: 'Reset Password - Modrinth',
+  title: () => `${formatMessage(messages.resetPasswordTitle)} - Modrinth`,
 })
 
 const auth = await useAuth()
@@ -109,7 +138,7 @@ async function recovery() {
   } catch (err) {
     addNotification({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: 'error',
     })
@@ -142,7 +171,7 @@ async function changePassword() {
   } catch (err) {
     addNotification({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: 'error',
     })

From 51021a6b7b9c8662c08665f151c32707174bb82b Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Thu, 4 Jan 2024 10:09:50 +0100
Subject: [PATCH 2/8] Add email sent notification keys

---
 locales/en-US/index.json      |  6 ++++++
 pages/auth/reset-password.vue | 12 ++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index e9917fc44d..c8d94a0b2a 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -14,6 +14,12 @@
   "auth.reset-password.long-title": {
     "message": "Reset your password"
   },
+  "auth.reset-password.notification.email-sent.text": {
+    "message": "An email with instructions has been sent to you if the email was previously saved on your account."
+  },
+  "auth.reset-password.notification.email-sent.title": {
+    "message": "Email sent"
+  },
   "auth.reset-password.title": {
     "message": "Reset Password"
   },
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index 05265539ad..9f68225a36 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -74,6 +74,14 @@ const messages = defineMessages({
     id: 'auth.reset-password.input.confirm-password.placeholder',
     defaultMessage: 'Confirm password',
   },
+  emailSentNotificationText: {
+    id: 'auth.reset-password.notification.email-sent.text',
+    defaultMessage: 'An email with instructions has been sent to you if the email was previously saved on your account.',
+  },
+  emailSentNotificationTitle: {
+    id: 'auth.reset-password.notification.email-sent.title',
+    defaultMessage: 'Email sent',
+  },
   emailUsernameLabel: {
     id: 'auth.reset-password.label.email-username',
     defaultMessage: 'Email or username',
@@ -131,8 +139,8 @@ async function recovery() {
 
     addNotification({
       group: 'main',
-      title: 'Email sent',
-      text: 'An email with instructions has been sent to you if the email was previously saved on your account.',
+      title: formatMessage(messages.emailSentNotificationTitle),
+      text: formatMessage(messages.emailSentNotificationText),
       type: 'success',
     })
   } catch (err) {

From 4718f96f585d71ac736eb4937125aae03e40d7d3 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Thu, 4 Jan 2024 10:13:13 +0100
Subject: [PATCH 3/8] Finish adding notification keys

---
 locales/en-US/index.json      |  6 ++++++
 pages/auth/reset-password.vue | 12 ++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index c8d94a0b2a..cfdf5d281e 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -20,6 +20,12 @@
   "auth.reset-password.notification.email-sent.title": {
     "message": "Email sent"
   },
+  "auth.reset-password.notification.password-reset.text": {
+    "message": "You can now log-in into your account with your new password."
+  },
+  "auth.reset-password.notification.password-reset.title": {
+    "message": "Password successfully reset"
+  },
   "auth.reset-password.title": {
     "message": "Reset Password"
   },
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index 9f68225a36..85a482f3bc 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -90,6 +90,14 @@ const messages = defineMessages({
     id: 'auth.reset-password.label.password',
     defaultMessage: 'Password',
   },
+  passwordResetNotificationText: {
+    id: 'auth.reset-password.notification.password-reset.text',
+    defaultMessage: 'You can now log-in into your account with your new password.',
+  },
+  passwordResetNotificationTitle: {
+    id: 'auth.reset-password.notification.password-reset.title',
+    defaultMessage: 'Password successfully reset',
+  },
   resetPasswordButton: {
     id: 'auth.reset-password.button.reset-password',
     defaultMessage: 'Reset password',
@@ -171,8 +179,8 @@ async function changePassword() {
 
     addNotification({
       group: 'main',
-      title: 'Password successfully reset',
-      text: 'You can now log-in into your account with your new password.',
+      title: formatMessage(messages.passwordResetNotificationTitle),
+      text: formatMessage(messages.passwordResetNotificationText),
       type: 'success',
     })
     await navigateTo('/auth/sign-in')

From 284e339bf9b966291a27eb8936e6354f67f50799 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Thu, 4 Jan 2024 10:14:00 +0100
Subject: [PATCH 4/8] Fix lint error

---
 pages/auth/reset-password.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index 85a482f3bc..e9f37bfd9f 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -76,7 +76,8 @@ const messages = defineMessages({
   },
   emailSentNotificationText: {
     id: 'auth.reset-password.notification.email-sent.text',
-    defaultMessage: 'An email with instructions has been sent to you if the email was previously saved on your account.',
+    defaultMessage:
+      'An email with instructions has been sent to you if the email was previously saved on your account.',
   },
   emailSentNotificationTitle: {
     id: 'auth.reset-password.notification.email-sent.title',

From aec84f975a372bbf3f6e135c2528367715fbcecf Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Thu, 4 Jan 2024 11:14:41 +0100
Subject: [PATCH 5/8] Finish work (I think)

---
 locales/en-US/index.json      | 12 ++++++++++++
 pages/auth/reset-password.vue | 25 ++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index cfdf5d281e..673ea90cbf 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -2,9 +2,21 @@
   "auth.reset-password.button.reset-password": {
     "message": "Reset password"
   },
+  "auth.reset-password.button.send-recovery-email": {
+    "message": "Send recovery email"
+  },
+  "auth.reset-password.description.choose-method": {
+    "message": "Enter your email below and we'll send a recovery link to allow you to recover your account."
+  },
+  "auth.reset-password.description.passed-challenge": {
+    "message": "Enter your new password below to gain access to your account."
+  },
   "auth.reset-password.input.confirm-password.placeholder": {
     "message": "Confirm password"
   },
+  "auth.reset-password.input.email.placeholder": {
+    "message": "Email"
+  },
   "auth.reset-password.label.email-username": {
     "message": "Email or username"
   },
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index e9f37bfd9f..9ece5e1ce1 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -4,8 +4,7 @@
     <section class="auth-form">
       <template v-if="step === 'choose_method'">
         <p>
-          Enter your email below and we'll send a recovery link to allow you to recover your
-          account.
+          {{ formatMessage(messages.chooseMethodDescription) }}
           <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
         </p>
 
@@ -18,16 +17,16 @@
             type="text"
             autocomplete="username"
             class="auth-form__input"
-            placeholder="Email"
+            :placeholder="formatMessage(messages.emailInputPlaceholder)"
           />
         </div>
 
         <button class="btn btn-primary centered-btn" @click="recovery">
-          <SendIcon /> Send recovery email
+          <SendIcon /> {{ formatMessage(messages.sendRecoveryEmailButton) }}
         </button>
       </template>
       <template v-else-if="step === 'passed_challenge'">
-        <p>Enter your new password below to gain access to your account.</p>
+        <p>{{ formatMessage(messages.passedChallengeDescription) }}</p>
 
         <div class="iconified-input">
           <label for="password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
@@ -70,10 +69,18 @@ import KeyIcon from 'assets/icons/auth/key.svg'
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
+  chooseMethodDescription: {
+    id: 'auth.reset-password.description.choose-method',
+    defaultMessage: "Enter your email below and we'll send a recovery link to allow you to recover your account.",
+  },
   confirmPasswordInputPlaceholder: {
     id: 'auth.reset-password.input.confirm-password.placeholder',
     defaultMessage: 'Confirm password',
   },
+  emailInputPlaceholder: {
+    id: 'auth.reset-password.input.email.placeholder',
+    defaultMessage: 'Email',
+  },
   emailSentNotificationText: {
     id: 'auth.reset-password.notification.email-sent.text',
     defaultMessage:
@@ -87,6 +94,10 @@ const messages = defineMessages({
     id: 'auth.reset-password.label.email-username',
     defaultMessage: 'Email or username',
   },
+  passedChallengeDescription: {
+    id: 'auth.reset-password.description.passed-challenge',
+    defaultMessage: 'Enter your new password below to gain access to your account.',
+  },
   passwordLabel: {
     id: 'auth.reset-password.label.password',
     defaultMessage: 'Password',
@@ -111,6 +122,10 @@ const messages = defineMessages({
     id: 'auth.reset-password.title',
     defaultMessage: 'Reset Password',
   },
+  sendRecoveryEmailButton: {
+    id: 'auth.reset-password.button.send-recovery-email',
+    defaultMessage: 'Send recovery email',
+  },
 })
 
 useHead({

From 714fe2c5eb798630fde1b67b82240e121b83f97c Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Thu, 4 Jan 2024 11:36:38 +0100
Subject: [PATCH 6/8] Remove password label (generic)

---
 locales/en-US/index.json      |  3 ---
 pages/auth/reset-password.vue | 10 +++-------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 673ea90cbf..02a7b47162 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -20,9 +20,6 @@
   "auth.reset-password.label.email-username": {
     "message": "Email or username"
   },
-  "auth.reset-password.label.password": {
-    "message": "Password"
-  },
   "auth.reset-password.long-title": {
     "message": "Reset your password"
   },
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index 9ece5e1ce1..58a9b5afb2 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -29,7 +29,7 @@
         <p>{{ formatMessage(messages.passedChallengeDescription) }}</p>
 
         <div class="iconified-input">
-          <label for="password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
+          <label for="password" hidden>Password</label>
           <KeyIcon />
           <input
             id="password"
@@ -37,12 +37,12 @@
             type="password"
             autocomplete="new-password"
             class="auth-form__input"
-            :placeholder="formatMessage(messages.passwordLabel)"
+            placeholder="Password"
           />
         </div>
 
         <div class="iconified-input">
-          <label for="confirm-password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
+          <label for="confirm-password" hidden>Password</label>
           <KeyIcon />
           <input
             id="confirm-password"
@@ -98,10 +98,6 @@ const messages = defineMessages({
     id: 'auth.reset-password.description.passed-challenge',
     defaultMessage: 'Enter your new password below to gain access to your account.',
   },
-  passwordLabel: {
-    id: 'auth.reset-password.label.password',
-    defaultMessage: 'Password',
-  },
   passwordResetNotificationText: {
     id: 'auth.reset-password.notification.password-reset.text',
     defaultMessage: 'You can now log-in into your account with your new password.',

From e2e1a98876ab34498f7701a4538c2381c2163e0b Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Thu, 4 Jan 2024 16:53:55 +0100
Subject: [PATCH 7/8] Add password label key

---
 locales/en-US/index.json      |  3 +++
 pages/auth/reset-password.vue | 11 +++++++----
 utils/common-messages.ts      |  4 ++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 02a7b47162..a171f6464d 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -71,6 +71,9 @@
   "input.view.list": {
     "message": "List view"
   },
+  "label.password": {
+    "message": "Password"
+  },
   "notification.error.title": {
     "message": "An error occurred"
   },
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index 58a9b5afb2..425dc90e04 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -29,7 +29,7 @@
         <p>{{ formatMessage(messages.passedChallengeDescription) }}</p>
 
         <div class="iconified-input">
-          <label for="password" hidden>Password</label>
+          <label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
           <KeyIcon />
           <input
             id="password"
@@ -37,12 +37,14 @@
             type="password"
             autocomplete="new-password"
             class="auth-form__input"
-            placeholder="Password"
+            :placeholder="formatMessage(commonMessages.passwordLabel)"
           />
         </div>
 
         <div class="iconified-input">
-          <label for="confirm-password" hidden>Password</label>
+          <label for="confirm-password" hidden>{{
+            formatMessage(commonMessages.passwordLabel)
+          }}</label>
           <KeyIcon />
           <input
             id="confirm-password"
@@ -71,7 +73,8 @@ const { formatMessage } = useVIntl()
 const messages = defineMessages({
   chooseMethodDescription: {
     id: 'auth.reset-password.description.choose-method',
-    defaultMessage: "Enter your email below and we'll send a recovery link to allow you to recover your account.",
+    defaultMessage:
+      "Enter your email below and we'll send a recovery link to allow you to recover your account.",
   },
   confirmPasswordInputPlaceholder: {
     id: 'auth.reset-password.input.confirm-password.placeholder',
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index 965175a299..f10fd39b9a 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -31,6 +31,10 @@ export const commonMessages = defineMessages({
     id: 'notification.error.title',
     defaultMessage: 'An error occurred',
   },
+  passwordLabel: {
+    id: 'label.password',
+    defaultMessage: 'Password',
+  },
   saveButton: {
     id: 'button.save',
     defaultMessage: 'Save',

From e9037172e1903a9d15de210125cdc628b65d971a Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
Date: Fri, 26 Jan 2024 13:31:50 +0100
Subject: [PATCH 8/8] Re-organize Reset password page messages (#11)

- Group messages by their use
- Change some of the keys for clarity
- Change some keys to conform to conventions
---
 locales/en-US/index.json      |  34 +++++-----
 pages/auth/reset-password.vue | 121 +++++++++++++++++++---------------
 2 files changed, 86 insertions(+), 69 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 04388d6356..b55a1dbfff 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -1,27 +1,15 @@
 {
-  "auth.reset-password.button.reset-password": {
-    "message": "Reset password"
-  },
-  "auth.reset-password.button.send-recovery-email": {
+  "auth.reset-password.method-choice.action": {
     "message": "Send recovery email"
   },
-  "auth.reset-password.description.choose-method": {
+  "auth.reset-password.method-choice.description": {
     "message": "Enter your email below and we'll send a recovery link to allow you to recover your account."
   },
-  "auth.reset-password.description.passed-challenge": {
-    "message": "Enter your new password below to gain access to your account."
-  },
-  "auth.reset-password.input.confirm-password.placeholder": {
-    "message": "Confirm password"
-  },
-  "auth.reset-password.input.email.placeholder": {
-    "message": "Email"
-  },
-  "auth.reset-password.label.email-username": {
+  "auth.reset-password.method-choice.email-username.label": {
     "message": "Email or username"
   },
-  "auth.reset-password.long-title": {
-    "message": "Reset your password"
+  "auth.reset-password.method-choice.email-username.placeholder": {
+    "message": "Email"
   },
   "auth.reset-password.notification.email-sent.text": {
     "message": "An email with instructions has been sent to you if the email was previously saved on your account."
@@ -35,9 +23,21 @@
   "auth.reset-password.notification.password-reset.title": {
     "message": "Password successfully reset"
   },
+  "auth.reset-password.post-challenge.action": {
+    "message": "Reset password"
+  },
+  "auth.reset-password.post-challenge.confirm-password.label": {
+    "message": "Confirm password"
+  },
+  "auth.reset-password.post-challenge.description": {
+    "message": "Enter your new password below to gain access to your account."
+  },
   "auth.reset-password.title": {
     "message": "Reset Password"
   },
+  "auth.reset-password.title.long": {
+    "message": "Reset your password"
+  },
   "auth.welcome.checkbox.subscribe": {
     "message": "Subscribe to updates about Modrinth"
   },
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index 425dc90e04..8977c04792 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -1,15 +1,17 @@
 <template>
   <div>
-    <h1>{{ formatMessage(messages.resetPasswordLongTitle) }}</h1>
+    <h1>{{ formatMessage(messages.longTitle) }}</h1>
     <section class="auth-form">
       <template v-if="step === 'choose_method'">
         <p>
-          {{ formatMessage(messages.chooseMethodDescription) }}
+          {{ formatMessage(methodChoiceMessages.description) }}
           <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
         </p>
 
         <div class="iconified-input">
-          <label for="email" hidden>{{ formatMessage(messages.emailUsernameLabel) }}</label>
+          <label for="email" hidden>
+            {{ formatMessage(methodChoiceMessages.emailUsernameLabel) }}
+          </label>
           <MailIcon />
           <input
             id="email"
@@ -17,16 +19,16 @@
             type="text"
             autocomplete="username"
             class="auth-form__input"
-            :placeholder="formatMessage(messages.emailInputPlaceholder)"
+            :placeholder="formatMessage(methodChoiceMessages.emailUsernamePlaceholder)"
           />
         </div>
 
         <button class="btn btn-primary centered-btn" @click="recovery">
-          <SendIcon /> {{ formatMessage(messages.sendRecoveryEmailButton) }}
+          <SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
         </button>
       </template>
       <template v-else-if="step === 'passed_challenge'">
-        <p>{{ formatMessage(messages.passedChallengeDescription) }}</p>
+        <p>{{ formatMessage(postChallengeMessages.description) }}</p>
 
         <div class="iconified-input">
           <label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
@@ -42,9 +44,9 @@
         </div>
 
         <div class="iconified-input">
-          <label for="confirm-password" hidden>{{
-            formatMessage(commonMessages.passwordLabel)
-          }}</label>
+          <label for="confirm-password" hidden>
+            {{ formatMessage(commonMessages.passwordLabel) }}
+          </label>
           <KeyIcon />
           <input
             id="confirm-password"
@@ -52,12 +54,12 @@
             type="password"
             autocomplete="new-password"
             class="auth-form__input"
-            :placeholder="formatMessage(messages.confirmPasswordInputPlaceholder)"
+            :placeholder="formatMessage(postChallengeMessages.confirmPasswordLabel)"
           />
         </div>
 
         <button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
-          {{ formatMessage(messages.resetPasswordButton) }}
+          {{ formatMessage(postChallengeMessages.action) }}
         </button>
       </template>
     </section>
@@ -70,65 +72,80 @@ import KeyIcon from 'assets/icons/auth/key.svg'
 
 const { formatMessage } = useVIntl()
 
-const messages = defineMessages({
-  chooseMethodDescription: {
-    id: 'auth.reset-password.description.choose-method',
+const methodChoiceMessages = defineMessages({
+  description: {
+    id: 'auth.reset-password.method-choice.description',
     defaultMessage:
       "Enter your email below and we'll send a recovery link to allow you to recover your account.",
   },
-  confirmPasswordInputPlaceholder: {
-    id: 'auth.reset-password.input.confirm-password.placeholder',
-    defaultMessage: 'Confirm password',
+  emailUsernameLabel: {
+    id: 'auth.reset-password.method-choice.email-username.label',
+    defaultMessage: 'Email or username',
   },
-  emailInputPlaceholder: {
-    id: 'auth.reset-password.input.email.placeholder',
+  emailUsernamePlaceholder: {
+    id: 'auth.reset-password.method-choice.email-username.placeholder',
     defaultMessage: 'Email',
   },
-  emailSentNotificationText: {
-    id: 'auth.reset-password.notification.email-sent.text',
-    defaultMessage:
-      'An email with instructions has been sent to you if the email was previously saved on your account.',
+  action: {
+    id: 'auth.reset-password.method-choice.action',
+    defaultMessage: 'Send recovery email',
   },
-  emailSentNotificationTitle: {
-    id: 'auth.reset-password.notification.email-sent.title',
-    defaultMessage: 'Email sent',
+})
+
+const postChallengeMessages = defineMessages({
+  description: {
+    id: 'auth.reset-password.post-challenge.description',
+    defaultMessage: 'Enter your new password below to gain access to your account.',
   },
-  emailUsernameLabel: {
-    id: 'auth.reset-password.label.email-username',
-    defaultMessage: 'Email or username',
+  confirmPasswordLabel: {
+    id: 'auth.reset-password.post-challenge.confirm-password.label',
+    defaultMessage: 'Confirm password',
   },
-  passedChallengeDescription: {
-    id: 'auth.reset-password.description.passed-challenge',
-    defaultMessage: 'Enter your new password below to gain access to your account.',
+  action: {
+    id: 'auth.reset-password.post-challenge.action',
+    defaultMessage: 'Reset password',
   },
-  passwordResetNotificationText: {
-    id: 'auth.reset-password.notification.password-reset.text',
-    defaultMessage: 'You can now log-in into your account with your new password.',
+})
+
+// NOTE(Brawaru): Vite uses esbuild for minification so can't combine these
+// because it'll keep the original prop names compared to consts, which names
+// will be mangled.
+const emailSentNotificationMessages = defineMessages({
+  title: {
+    id: 'auth.reset-password.notification.email-sent.title',
+    defaultMessage: 'Email sent',
+  },
+  text: {
+    id: 'auth.reset-password.notification.email-sent.text',
+    defaultMessage:
+      'An email with instructions has been sent to you if the email was previously saved on your account.',
   },
-  passwordResetNotificationTitle: {
+})
+
+const passwordResetNotificationMessages = defineMessages({
+  title: {
     id: 'auth.reset-password.notification.password-reset.title',
     defaultMessage: 'Password successfully reset',
   },
-  resetPasswordButton: {
-    id: 'auth.reset-password.button.reset-password',
-    defaultMessage: 'Reset password',
-  },
-  resetPasswordLongTitle: {
-    id: 'auth.reset-password.long-title',
-    defaultMessage: 'Reset your password',
+  text: {
+    id: 'auth.reset-password.notification.password-reset.text',
+    defaultMessage: 'You can now log-in into your account with your new password.',
   },
-  resetPasswordTitle: {
+})
+
+const messages = defineMessages({
+  title: {
     id: 'auth.reset-password.title',
     defaultMessage: 'Reset Password',
   },
-  sendRecoveryEmailButton: {
-    id: 'auth.reset-password.button.send-recovery-email',
-    defaultMessage: 'Send recovery email',
+  longTitle: {
+    id: 'auth.reset-password.title.long',
+    defaultMessage: 'Reset your password',
   },
 })
 
 useHead({
-  title: () => `${formatMessage(messages.resetPasswordTitle)} - Modrinth`,
+  title: () => `${formatMessage(messages.title)} - Modrinth`,
 })
 
 const auth = await useAuth()
@@ -162,8 +179,8 @@ async function recovery() {
 
     addNotification({
       group: 'main',
-      title: formatMessage(messages.emailSentNotificationTitle),
-      text: formatMessage(messages.emailSentNotificationText),
+      title: formatMessage(emailSentNotificationMessages.title),
+      text: formatMessage(emailSentNotificationMessages.text),
       type: 'success',
     })
   } catch (err) {
@@ -194,8 +211,8 @@ async function changePassword() {
 
     addNotification({
       group: 'main',
-      title: formatMessage(messages.passwordResetNotificationTitle),
-      text: formatMessage(messages.passwordResetNotificationText),
+      title: formatMessage(passwordResetNotificationMessages.title),
+      text: formatMessage(passwordResetNotificationMessages.text),
       type: 'success',
     })
     await navigateTo('/auth/sign-in')