From 75f0b2b82cb8e6fe661ec8435dfa18976bd92e85 Mon Sep 17 00:00:00 2001
From: Mysterious_Dev <40738104+Mysterious-Dev@users.noreply.github.com>
Date: Thu, 18 Jan 2024 18:05:54 +0100
Subject: [PATCH] Add translation keys for welcome page (#1499)

* Begin Work

* WIP

* Add long title key

* Finish work (for now)

* Fix lint error

* Add continue button key

* Make continue button key generic
---
 locales/en-US/index.json | 18 +++++++++++++
 pages/auth/welcome.vue   | 55 ++++++++++++++++++++++++++++++++--------
 utils/common-messages.ts |  4 +++
 3 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 805adae2..5ef558f2 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -1,7 +1,25 @@
 {
+  "auth.welcome.checkbox.subscribe": {
+    "message": "Subscribe to updates about Modrinth"
+  },
+  "auth.welcome.description": {
+    "message": "Thank you for creating an account. You can now follow and create projects, receive updates about your favorite projects, and more!"
+  },
+  "auth.welcome.label.tos": {
+    "message": "By creating an account, you have agreed to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
+  },
+  "auth.welcome.long-title": {
+    "message": "Welcome to Modrinth!"
+  },
+  "auth.welcome.title": {
+    "message": "Welcome"
+  },
   "button.cancel": {
     "message": "Cancel"
   },
+  "button.continue": {
+    "message": "Continue"
+  },
   "button.edit": {
     "message": "Edit"
   },
diff --git a/pages/auth/welcome.vue b/pages/auth/welcome.vue
index 2ce152fc..fa4486c3 100644
--- a/pages/auth/welcome.vue
+++ b/pages/auth/welcome.vue
@@ -1,28 +1,36 @@
 <template>
   <div>
-    <h1>Welcome to Modrinth!</h1>
+    <h1>{{ formatMessage(messages.welcomeLongTitle) }}</h1>
 
     <section class="auth-form">
       <p>
-        Thank you for creating an account. You can now follow and create projects, receive updates
-        about your favorite projects, and more!
+        {{ formatMessage(messages.welcomeDescription) }}
       </p>
 
       <Checkbox
         v-model="subscribe"
         class="subscribe-btn"
-        label="Subscribe to updates about Modrinth"
-        description="Subscribe to updates about Modrinth"
+        :label="formatMessage(messages.subscribeCheckbox)"
+        :description="formatMessage(messages.subscribeCheckbox)"
       />
 
       <button class="btn btn-primary continue-btn centered-btn" @click="continueSignUp">
-        Continue <RightArrowIcon />
+        {{ formatMessage(commonMessages.continueButton) }} <RightArrowIcon />
       </button>
 
       <p>
-        By creating an account, you have agreed to Modrinth's
-        <NuxtLink to="/legal/terms" class="text-link">Terms</NuxtLink> and
-        <NuxtLink to="/legal/privacy" class="text-link">Privacy Policy</NuxtLink>.
+        <IntlFormatted :message-id="messages.tosLabel">
+          <template #terms-link="{ children }">
+            <NuxtLink to="/legal/terms" class="text-link">
+              <component :is="() => children" />
+            </NuxtLink>
+          </template>
+          <template #privacy-policy-link="{ children }">
+            <NuxtLink to="/legal/privacy" class="text-link">
+              <component :is="() => children" />
+            </NuxtLink>
+          </template>
+        </IntlFormatted>
       </p>
     </section>
   </div>
@@ -30,8 +38,35 @@
 <script setup>
 import { Checkbox, RightArrowIcon } from 'omorphia'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  subscribeCheckbox: {
+    id: 'auth.welcome.checkbox.subscribe',
+    defaultMessage: 'Subscribe to updates about Modrinth',
+  },
+  tosLabel: {
+    id: 'auth.welcome.label.tos',
+    defaultMessage:
+      "By creating an account, you have agreed to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
+  },
+  welcomeDescription: {
+    id: 'auth.welcome.description',
+    defaultMessage:
+      'Thank you for creating an account. You can now follow and create projects, receive updates about your favorite projects, and more!',
+  },
+  welcomeLongTitle: {
+    id: 'auth.welcome.long-title',
+    defaultMessage: 'Welcome to Modrinth!',
+  },
+  welcomeTitle: {
+    id: 'auth.welcome.title',
+    defaultMessage: 'Welcome',
+  },
+})
+
 useHead({
-  title: 'Welcome - Modrinth',
+  title: () => `${formatMessage(messages.welcomeTitle)} - Modrinth`,
 })
 
 const subscribe = ref(true)
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index 965175a2..9c146018 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -7,6 +7,10 @@ export const commonMessages = defineMessages({
     id: 'button.cancel',
     defaultMessage: 'Cancel',
   },
+  continueButton: {
+    id: 'button.continue',
+    defaultMessage: 'Continue',
+  },
   dateAtTimeTooltip: {
     id: 'tooltip.date-at-time',
     defaultMessage: '{date, date, long} at {time, time, short}',