Add translation keys for sign-in page (#1551)

* Begin Work

* WIP

* WIP

* WIP

* Use error notification keys

* Finish & fix error

* Fix lint error

* Normalize message IDs (#9)

It makes sense to compose message IDs in order:
- Place (page, sub page / "modal")
- Thing
- (optionally) Relation to the thing

For example, a label for a password field would be:
- auth.sign-in (on sign-in subpage of auth)
- password (password field)
- label (is a label for the field)

Another example - button to sign in:
- auth.sign-in
- action (this is an action to do something)
- sign-in (action to sign in)

This helps keep the IDs closer to the actual structure of the page,
oftentimes smaller in the code, and easier to understand by translators.

---------

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,34 @@
 {
+  "auth.sign-in.2fa.description": {
+    "message": "Please enter a two-factor code to proceed."
+  },
+  "auth.sign-in.2fa.label": {
+    "message": "Enter two-factor code"
+  },
+  "auth.sign-in.2fa.placeholder": {
+    "message": "Enter code..."
+  },
+  "auth.sign-in.action.sign-in": {
+    "message": "Sign in"
+  },
+  "auth.sign-in.additional-options": {
+    "message": "<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>"
+  },
+  "auth.sign-in.email-username.label": {
+    "message": "Email or username"
+  },
+  "auth.sign-in.password.label": {
+    "message": "Password"
+  },
+  "auth.sign-in.sign-in-with": {
+    "message": "Sign in with"
+  },
+  "auth.sign-in.title": {
+    "message": "Sign In"
+  },
+  "auth.sign-in.use-password": {
+    "message": "Or use a password"
+  },
   "auth.sign-up.action.create-account": {
     "message": "Create account"
   },

pages/auth/sign-in.vue

@@ -2,26 +2,28 @@
   <div>
     <template v-if="flow">
       <label for="two-factor-code">
-        <span class="label__title">Enter two-factor code</span>
+        <span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
-        <span class="label__description">Please enter a two-factor code to proceed.</span>
+        <span class="label__description">
+          {{ formatMessage(messages.twoFactorCodeLabelDescription) }}
+        </span>
       </label>
       <input
         id="two-factor-code"
         v-model="twoFactorCode"
         maxlength="11"
         type="text"
-        placeholder="Enter code..."
+        :placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
         autocomplete="one-time-code"
         autofocus
         @keyup.enter="begin2FASignIn"
       />
 
       <button class="btn btn-primary continue-btn" @click="begin2FASignIn">
-        Sign in <RightArrowIcon />
+        {{ formatMessage(messages.signInButton) }} <RightArrowIcon />
       </button>
     </template>
     <template v-else>
-      <h1>Sign in with</h1>
+      <h1>{{ formatMessage(messages.signInWithLabel) }}</h1>
 
       <section class="third-party">
         <a class="btn" :href="getAuthUrl('discord', redirectTarget)">
@@ -50,11 +52,11 @@
         </a>
       </section>
 
-      <h1>Or use a password</h1>
+      <h1>{{ formatMessage(messages.usePasswordLabel) }}</h1>
 
       <section class="auth-form">
         <div class="iconified-input">
-          <label for="email" hidden>Email or username</label>
+          <label for="email" hidden>{{ formatMessage(messages.emailUsernameLabel) }}</label>
           <MailIcon />
           <input
             id="email"
@@ -62,12 +64,12 @@
             type="text"
             autocomplete="username"
             class="auth-form__input"
-            placeholder="Email or username"
+            :placeholder="formatMessage(messages.emailUsernameLabel)"
           />
         </div>
 
         <div class="iconified-input">
-          <label for="password" hidden>Password</label>
+          <label for="password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
           <KeyIcon />
           <input
             id="password"
@@ -75,20 +77,29 @@
             type="password"
             autocomplete="current-password"
             class="auth-form__input"
-            placeholder="Password"
+            :placeholder="formatMessage(messages.passwordLabel)"
           />
         </div>
 
         <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
 
         <button class="btn btn-primary continue-btn centered-btn" @click="beginPasswordSignIn()">
-          Sign in <RightArrowIcon />
+          {{ formatMessage(messages.signInButton) }} <RightArrowIcon />
         </button>
 
         <div class="auth-form__additional-options">
-          <NuxtLink class="text-link" to="/auth/reset-password">Forgot password?</NuxtLink>
+          <IntlFormatted :message-id="messages.additionalOptionsLabel">
-          <p>•</p>
+            <template #forgot-password-link="{ children }">
-          <NuxtLink class="text-link" :to="signUpLink"> Create an account</NuxtLink>
+              <NuxtLink class="text-link" to="/auth/reset-password">
+                <component :is="() => children" />
+              </NuxtLink>
+            </template>
+            <template #create-account-link="{ children }">
+              <NuxtLink class="text-link" :to="signUpLink">
+                <component :is="() => children" />
+              </NuxtLink>
+            </template>
+          </IntlFormatted>
         </div>
       </section>
     </template>
@@ -106,8 +117,56 @@ import KeyIcon from 'assets/icons/auth/key.svg'
 import MailIcon from 'assets/icons/auth/mail.svg'
 import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  additionalOptionsLabel: {
+    id: 'auth.sign-in.additional-options',
+    defaultMessage:
+      '<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>',
+  },
+  emailUsernameLabel: {
+    id: 'auth.sign-in.email-username.label',
+    defaultMessage: 'Email or username',
+  },
+  passwordLabel: {
+    id: 'auth.sign-in.password.label',
+    defaultMessage: 'Password',
+  },
+  signInButton: {
+    id: 'auth.sign-in.action.sign-in',
+    defaultMessage: 'Sign in',
+  },
+  signInWithLabel: {
+    id: 'auth.sign-in.sign-in-with',
+    defaultMessage: 'Sign in with',
+  },
+  signInTitle: {
+    id: 'auth.sign-in.title',
+    defaultMessage: 'Sign In',
+  },
+  twoFactorCodeInputPlaceholder: {
+    id: 'auth.sign-in.2fa.placeholder',
+    defaultMessage: 'Enter code...',
+  },
+  twoFactorCodeLabel: {
+    id: 'auth.sign-in.2fa.label',
+    defaultMessage: 'Enter two-factor code',
+  },
+  twoFactorCodeLabelDescription: {
+    id: 'auth.sign-in.2fa.description',
+    defaultMessage: 'Please enter a two-factor code to proceed.',
+  },
+  usePasswordLabel: {
+    id: 'auth.sign-in.use-password',
+    defaultMessage: 'Or use a password',
+  },
+})
+
 useHead({
-  title: 'Sign In - Modrinth',
+  title() {
+    return `${formatMessage(messages.signInTitle)} - Modrinth`
+  },
 })
 
 const auth = await useAuth()
@@ -161,7 +220,7 @@ async function beginPasswordSignIn() {
   } catch (err) {
     addNotification({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: 'error',
     })
@@ -186,7 +245,7 @@ async function begin2FASignIn() {
   } catch (err) {
     addNotification({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: 'error',
     })