Add translation keys for verify email page (#1503)

* Begin Work

* Begin Work

* WIP

* Finish Work

* Fix lint error

* Re-organize keys on E-mail verification page (#12)

- Group messages by the step
- Use simpler keys for message properties as they're not public
- Change message 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,37 @@
 {
+  "auth.verify-email.action.account-settings": {
+    "message": "Account settings"
+  },
+  "auth.verify-email.action.sign-in": {
+    "message": "Sign in"
+  },
+  "auth.verify-email.already-verified.description": {
+    "message": "Your email is already verified!"
+  },
+  "auth.verify-email.already-verified.title": {
+    "message": "Email already verified"
+  },
+  "auth.verify-email.failed-verification.action": {
+    "message": "Resend verification email"
+  },
+  "auth.verify-email.failed-verification.description": {
+    "message": "We were unable to verify your email. Try re-sending the verification email through your dashboard by signing in."
+  },
+  "auth.verify-email.failed-verification.description.logged-in": {
+    "message": "We were unable to verify your email. Try re-sending the verification email through the button below."
+  },
+  "auth.verify-email.failed-verification.title": {
+    "message": "Email verification failed"
+  },
+  "auth.verify-email.post-verification.description": {
+    "message": "Your email address has been successfully verified!"
+  },
+  "auth.verify-email.post-verification.title": {
+    "message": "Email verification"
+  },
+  "auth.verify-email.title": {
+    "message": "Verify Email"
+  },
   "auth.reset-password.method-choice.action": {
     "message": "Send recovery email"
   },

pages/auth/verify-email.vue

@@ -1,50 +1,51 @@
 <template>
   <div>
     <template v-if="auth.user && auth.user.email_verified && !success">
-      <h1>Email already verified</h1>
+      <h1>{{ formatMessage(alreadyVerifiedMessages.title) }}</h1>
 
       <section class="auth-form">
-        <p>Your email is already verified!</p>
+        <p>{{ formatMessage(alreadyVerifiedMessages.description) }}</p>
 
-        <NuxtLink class="btn" to="/settings/account"> <SettingsIcon /> Account settings </NuxtLink>
+        <NuxtLink class="btn" to="/settings/account">
+          <SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
+        </NuxtLink>
       </section>
     </template>
 
     <template v-else-if="success">
-      <h1>Email verification</h1>
+      <h1>{{ formatMessage(postVerificationMessages.title) }}</h1>
 
       <section class="auth-form">
-        <p>Your email address has been successfully verified!</p>
+        <p>{{ formatMessage(postVerificationMessages.description) }}</p>
 
         <NuxtLink v-if="auth.user" class="btn" link="/settings/account">
-          <SettingsIcon /> Account settings
+          <SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
         </NuxtLink>
         <NuxtLink v-else to="/auth/sign-in" class="btn btn-primary continue-btn centered-btn">
-          Sign in <RightArrowIcon />
+          {{ formatMessage(messages.signIn) }} <RightArrowIcon />
         </NuxtLink>
       </section>
     </template>
 
     <template v-else>
-      <h1>Email verification failed</h1>
+      <h1>{{ formatMessage(failedVerificationMessages.title) }}</h1>
 
       <section class="auth-form">
         <p>
-          We were unable to verify your email.
           <template v-if="auth.user">
-            Try re-sending the verification email through the button below.
+            {{ formatMessage(failedVerificationMessages.loggedInDescription) }}
           </template>
           <template v-else>
-            Try re-sending the verification email through your dashboard by signing in.
+            {{ formatMessage(failedVerificationMessages.description) }}
           </template>
         </p>
 
         <button v-if="auth.user" class="btn btn-primary continue-btn" @click="resendVerifyEmail">
-          Resend verification email <RightArrowIcon />
+          {{ formatMessage(failedVerificationMessages.action) }} <RightArrowIcon />
         </button>
 
         <NuxtLink v-else to="/auth/sign-in" class="btn btn-primary continue-btn centered-btn">
-          Sign in <RightArrowIcon />
+          {{ formatMessage(messages.signIn) }} <RightArrowIcon />
         </NuxtLink>
       </section>
     </template>
@@ -53,8 +54,68 @@
 <script setup>
 import { SettingsIcon, RightArrowIcon } from 'omorphia'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  title: {
+    id: 'auth.verify-email.title',
+    defaultMessage: 'Verify Email',
+  },
+  accountSettings: {
+    id: 'auth.verify-email.action.account-settings',
+    defaultMessage: 'Account settings',
+  },
+  signIn: {
+    id: 'auth.verify-email.action.sign-in',
+    defaultMessage: 'Sign in',
+  },
+})
+
+const alreadyVerifiedMessages = defineMessages({
+  title: {
+    id: 'auth.verify-email.already-verified.title',
+    defaultMessage: 'Email already verified',
+  },
+  description: {
+    id: 'auth.verify-email.already-verified.description',
+    defaultMessage: 'Your email is already verified!',
+  },
+})
+
+const postVerificationMessages = defineMessages({
+  title: {
+    id: 'auth.verify-email.post-verification.title',
+    defaultMessage: 'Email verification',
+  },
+  description: {
+    id: 'auth.verify-email.post-verification.description',
+    defaultMessage: 'Your email address has been successfully verified!',
+  },
+})
+
+const failedVerificationMessages = defineMessages({
+  title: {
+    id: 'auth.verify-email.failed-verification.title',
+    defaultMessage: 'Email verification failed',
+  },
+  description: {
+    id: 'auth.verify-email.failed-verification.description',
+    defaultMessage:
+      'We were unable to verify your email. Try re-sending the verification email through your dashboard by signing in.',
+  },
+  loggedInDescription: {
+    id: 'auth.verify-email.failed-verification.description.logged-in',
+    defaultMessage:
+      'We were unable to verify your email. Try re-sending the verification email through the button below.',
+  },
+  action: {
+    id: 'auth.verify-email.failed-verification.action',
+    defaultMessage: 'Resend verification email',
+  },
+})
+
 useHead({
-  title: 'Verify Email - Modrinth',
+  title: () => `${formatMessage(messages.title)} - Modrinth`,
 })
 
 const auth = await useAuth()