Add translation keys for authorize page

locales/en-US/index.json

@@ -1,4 +1,19 @@
 {
+  "auth.authorize.button.authorize": {
+    "message": "Authorize"
+  },
+  "auth.authorize.error.not-location-found": {
+    "message": "No redirect location found in response"
+  },
+  "auth.authorize.label.app-info": {
+    "message": "<strong>{app_name}</strong> by <creator-link>{creator_username}</creator-link> will be able to:"
+  },
+  "auth.authorize.label.authorize-app-name": {
+    "message": "Authorize {app_name}"
+  },
+  "auth.authorize.label.redirect-url": {
+    "message": "You will be redirected to <redirect-url>{url}</redirect-url>"
+  },
   "auth.welcome.checkbox.subscribe": {
     "message": "Subscribe to updates about Modrinth"
   },
@@ -20,6 +35,9 @@
   "button.continue": {
     "message": "Continue"
   },
+  "button.decline": {
+    "message": "Decline"
+  },
   "button.edit": {
     "message": "Edit"
   },
@@ -50,6 +68,9 @@
   "input.view.list": {
     "message": "List view"
   },
+  "label.error": {
+    "message": "Error"
+  },
   "notification.error.title": {
     "message": "An error occurred"
   },

pages/auth/authorize.vue

@@ -2,7 +2,7 @@
   <div>
     <div v-if="error" class="oauth-items">
       <div>
-        <h1>Error</h1>
+        <h1>{{ formatMessage(commonMessages.errorLabel) }}</h1>
       </div>
       <p>
         <span>{{ error.data.error }}: </span>
@@ -20,15 +20,28 @@
         </div>
       </div>
       <div class="title">
-        <h1>Authorize {{ app.name }}</h1>
+        <h1>{{ formatMessage(messages.authorizeAppNameLabel, { app_name: app.name }) }}</h1>
       </div>
       <div class="auth-info">
         <div class="scope-heading">
-          <strong>{{ app.name }}</strong> by
-          <nuxt-link class="text-link" :to="'/user/' + createdBy.id">{{
-            createdBy.username
-          }}</nuxt-link>
-          will be able to:
+          <IntlFormatted
+            :message-id="messages.appInfoLabel"
+            :values="{
+              app_name: app.name,
+              creator_username: createdBy.username,
+            }"
+          >
+            <template #strong="{ children }">
+              <strong>
+                <component :is="() => normalizeChildren(children)" />
+              </strong>
+            </template>
+            <template #creator-link="{ children }">
+              <nuxt-link class="text-link" :to="'/user/' + createdBy.id">
+                <component :is="() => normalizeChildren(children)" />
+              </nuxt-link>
+            </template>
+          </IntlFormatted>
         </div>
         <div class="scope-items">
           <div v-for="scopeItem in scopeDefinitions" :key="scopeItem">
@@ -44,17 +57,22 @@
       <div class="button-row">
         <Button class="wide-button" large :action="onReject" :disabled="pending">
           <XIcon />
-          Decline
+          {{ formatMessage(commonMessages.declineButton) }}
         </Button>
         <Button class="wide-button" color="primary" large :action="onAuthorize" :disabled="pending">
           <CheckIcon />
-          Authorize
+          {{ formatMessage(messages.authorizeButton) }}
         </Button>
       </div>
       <div class="redirection-notice">
         <p class="redirect-instructions">
-          You will be redirected to
-          <span class="redirect-url">{{ redirectUri }}</span>
+          <IntlFormatted :message-id="messages.redirectUrlLabel" :values="{ url: redirectUri }">
+            <template #redirect-url="{ children }">
+              <span class="redirect-url">
+                <component :is="() => normalizeChildren(children)" />
+              </span>
+            </template>
+          </IntlFormatted>
         </p>
       </div>
     </div>
@@ -68,6 +86,32 @@ import { useAuth } from '@/composables/auth.js'
 
 import { useScopes } from '@/composables/auth/scopes.ts'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  appInfoLabel: {
+    id: 'auth.authorize.label.app-info',
+    defaultMessage:
+      '<strong>{app_name}</strong> by <creator-link>{creator_username}</creator-link> will be able to:',
+  },
+  authorizeAppNameLabel: {
+    id: 'auth.authorize.label.authorize-app-name',
+    defaultMessage: 'Authorize {app_name}',
+  },
+  authorizeButton: {
+    id: 'auth.authorize.button.authorize',
+    defaultMessage: 'Authorize',
+  },
+  noLocationFoundError: {
+    id: 'auth.authorize.error.not-location-found',
+    defaultMessage: 'No redirect location found in response',
+  },
+  redirectUrlLabel: {
+    id: 'auth.authorize.label.redirect-url',
+    defaultMessage: 'You will be redirected to <redirect-url>{url}</redirect-url>',
+  },
+})
+
 const data = useNuxtApp()
 
 const router = useRoute()
@@ -143,11 +187,11 @@ const onAuthorize = async () => {
       return
     }
 
-    throw new Error('No redirect location found in response')
+    throw new Error(formatMessage(messages.noLocationFoundError))
   } catch (error) {
     data.$notify({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: 'error',
     })
@@ -170,11 +214,11 @@ const onReject = async () => {
       return
     }
 
-    throw new Error('No redirect location found in response')
+    throw new Error(formatMessage(messages.noLocationFoundError))
   } catch (error) {
     data.$notify({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: 'error',
     })

utils/common-messages.ts

@@ -15,10 +15,18 @@ export const commonMessages = defineMessages({
     id: 'tooltip.date-at-time',
     defaultMessage: '{date, date, long} at {time, time, short}',
   },
+  declineButton: {
+    id: 'button.decline',
+    defaultMessage: 'Decline',
+  },
   editButton: {
     id: 'button.edit',
     defaultMessage: 'Edit',
   },
+  errorLabel: {
+    id: 'label.error',
+    defaultMessage: 'Error',
+  },
   galleryInputView: {
     id: 'input.view.gallery',
     defaultMessage: 'Gallery view',