Add translation keys for reset password page (#1502)

* Begin Work

* Add email sent notification keys

* Finish adding notification keys

* Fix lint error

* Finish work (I think)

* Remove password label (generic)

* Add password label key

* 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

---------

Co-authored-by: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

locales/en-US/index.json

@@ -1,4 +1,43 @@
 {
+  "auth.reset-password.method-choice.action": {
+    "message": "Send recovery email"
+  },
+  "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.method-choice.email-username.label": {
+    "message": "Email or username"
+  },
+  "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."
+  },
+  "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.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"
   },
@@ -122,6 +161,9 @@
   "input.view.list": {
     "message": "List view"
   },
+  "label.password": {
+    "message": "Password"
+  },
   "label.collections": {
     "message": "Collections"
   },

pages/auth/reset-password.vue

@@ -1,16 +1,17 @@
 <template>
   <div>
-    <h1>Reset your password</h1>
+    <h1>{{ formatMessage(messages.longTitle) }}</h1>
     <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
+          {{ formatMessage(methodChoiceMessages.description) }}
-          account.
           <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
         </p>
 
         <div class="iconified-input">
-          <label for="email" hidden>Email or username</label>
+          <label for="email" hidden>
+            {{ formatMessage(methodChoiceMessages.emailUsernameLabel) }}
+          </label>
           <MailIcon />
           <input
             id="email"
@@ -18,19 +19,19 @@
             type="text"
             autocomplete="username"
             class="auth-form__input"
-            placeholder="Email"
+            :placeholder="formatMessage(methodChoiceMessages.emailUsernamePlaceholder)"
           />
         </div>
 
         <button class="btn btn-primary centered-btn" @click="recovery">
-          <SendIcon /> Send recovery email
+          <SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
         </button>
       </template>
       <template v-else-if="step === 'passed_challenge'">
-        <p>Enter your new password below to gain access to your account.</p>
+        <p>{{ formatMessage(postChallengeMessages.description) }}</p>
 
         <div class="iconified-input">
-          <label for="password" hidden>Password</label>
+          <label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
           <KeyIcon />
           <input
             id="password"
@@ -38,12 +39,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"
@@ -51,12 +54,12 @@
             type="password"
             autocomplete="new-password"
             class="auth-form__input"
-            placeholder="Confirm password"
+            :placeholder="formatMessage(postChallengeMessages.confirmPasswordLabel)"
           />
         </div>
 
         <button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
-          Reset password
+          {{ formatMessage(postChallengeMessages.action) }}
         </button>
       </template>
     </section>
@@ -67,8 +70,82 @@ import { SendIcon } from 'omorphia'
 import MailIcon from 'assets/icons/auth/mail.svg'
 import KeyIcon from 'assets/icons/auth/key.svg'
 
+const { formatMessage } = useVIntl()
+
+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.",
+  },
+  emailUsernameLabel: {
+    id: 'auth.reset-password.method-choice.email-username.label',
+    defaultMessage: 'Email or username',
+  },
+  emailUsernamePlaceholder: {
+    id: 'auth.reset-password.method-choice.email-username.placeholder',
+    defaultMessage: 'Email',
+  },
+  action: {
+    id: 'auth.reset-password.method-choice.action',
+    defaultMessage: 'Send recovery email',
+  },
+})
+
+const postChallengeMessages = defineMessages({
+  description: {
+    id: 'auth.reset-password.post-challenge.description',
+    defaultMessage: 'Enter your new password below to gain access to your account.',
+  },
+  confirmPasswordLabel: {
+    id: 'auth.reset-password.post-challenge.confirm-password.label',
+    defaultMessage: 'Confirm password',
+  },
+  action: {
+    id: 'auth.reset-password.post-challenge.action',
+    defaultMessage: 'Reset 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.',
+  },
+})
+
+const passwordResetNotificationMessages = defineMessages({
+  title: {
+    id: 'auth.reset-password.notification.password-reset.title',
+    defaultMessage: 'Password successfully reset',
+  },
+  text: {
+    id: 'auth.reset-password.notification.password-reset.text',
+    defaultMessage: 'You can now log-in into your account with your new password.',
+  },
+})
+
+const messages = defineMessages({
+  title: {
+    id: 'auth.reset-password.title',
+    defaultMessage: 'Reset Password',
+  },
+  longTitle: {
+    id: 'auth.reset-password.title.long',
+    defaultMessage: 'Reset your password',
+  },
+})
+
 useHead({
-  title: 'Reset Password - Modrinth',
+  title: () => `${formatMessage(messages.title)} - Modrinth`,
 })
 
 const auth = await useAuth()
@@ -102,14 +179,14 @@ async function recovery() {
 
     addNotification({
       group: 'main',
-      title: 'Email sent',
+      title: formatMessage(emailSentNotificationMessages.title),
-      text: 'An email with instructions has been sent to you if the email was previously saved on your account.',
+      text: formatMessage(emailSentNotificationMessages.text),
       type: 'success',
     })
   } catch (err) {
     addNotification({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: 'error',
     })
@@ -134,15 +211,15 @@ async function changePassword() {
 
     addNotification({
       group: 'main',
-      title: 'Password successfully reset',
+      title: formatMessage(passwordResetNotificationMessages.title),
-      text: 'You can now log-in into your account with your new password.',
+      text: formatMessage(passwordResetNotificationMessages.text),
       type: 'success',
     })
     await navigateTo('/auth/sign-in')
   } catch (err) {
     addNotification({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: 'error',
     })

utils/common-messages.ts

@@ -63,6 +63,10 @@ export const commonMessages = defineMessages({
     id: 'label.rejected',
     defaultMessage: 'Rejected',
   },
+  passwordLabel: {
+    id: 'label.password',
+    defaultMessage: 'Password',
+  },
   saveButton: {
     id: 'button.save',
     defaultMessage: 'Save',