From b9248553be4813652ae1f5d40bccfa23f1ec2ad1 Mon Sep 17 00:00:00 2001
From: Mysterious_Dev <40738104+Mysterious-Dev@users.noreply.github.com>
Date: Fri, 29 Sep 2023 04:43:53 +0200
Subject: [PATCH] Add translation keys for Sessions page (#1377)

Co-authored-by: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
---
 locales/en-US/index.json    | 30 +++++++++++--
 pages/settings/sessions.vue | 90 ++++++++++++++++++++++++++++++-------
 pages/user/[id].vue         |  6 +--
 utils/common-messages.ts    |  4 ++
 4 files changed, 106 insertions(+), 24 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index dfeff26279..69181c9b36 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -50,9 +50,6 @@
   "profile.joined-at": {
     "message": "Joined {ago}"
   },
-  "profile.joined-at.tooltip": {
-    "message": "{date, date, long} at {time, time, short}"
-  },
   "profile.label.edit-bio": {
     "message": "Bio"
   },
@@ -163,5 +160,32 @@
   },
   "settings.language.title": {
     "message": "Language"
+  },
+  "settings.sessions.button.revoke-session": {
+    "message": "Revoke session"
+  },
+  "settings.sessions.description": {
+    "message": "Here are all the devices that are currently logged in with your Modrinth account. You can log out of each one individually.\n\n If you see an entry you don't recognize, log out of that device and change your Modrinth account password immediately."
+  },
+  "settings.sessions.label.current-session": {
+    "message": "Current session"
+  },
+  "settings.sessions.label.created-at": {
+    "message": "Created {ago}"
+  },
+  "settings.sessions.label.last-accessed-at": {
+    "message": "Last accessed {ago}"
+  },
+  "settings.sessions.label.unknown-os": {
+    "message": "Unknown OS"
+  },
+  "settings.sessions.label.unknown-platform": {
+    "message": "Unknown platform"
+  },
+  "settings.sessions.title": {
+    "message": "Sessions"
+  },
+  "tooltip.date-at-time": {
+    "message": "{date, date, long} at {time, time, short}"
   }
 }
diff --git a/pages/settings/sessions.vue b/pages/settings/sessions.vue
index 5340a76207..3f16344989 100644
--- a/pages/settings/sessions.vue
+++ b/pages/settings/sessions.vue
@@ -1,36 +1,55 @@
 <template>
   <div class="universal-card">
-    <h2>Sessions</h2>
-    <p>
-      Here are all the devices that are currently logged in with your Modrinth account. You can log
-      out of each one individually.
-      <br /><br />
-      If you see an entry you don't recognize, log out of that device and change your Modrinth
-      account password immediately.
+    <h2>{{ formatMessage(messages.sessionsTitle) }}</h2>
+    <p class="preserve-lines">
+      {{ formatMessage(messages.sessionsDescription) }}
     </p>
     <div v-for="session in sessions" :key="session.id" class="universal-card recessed session">
       <div>
         <div>
           <strong>
-            {{ session.os ?? 'Unknown OS' }} ⋅ {{ session.platform ?? 'Unknown platform' }} ⋅
+            {{ session.os ?? formatMessage(messages.unknownOsLabel) }} ⋅
+            {{ session.platform ?? formatMessage(messages.unknownPlatformLabel) }} ⋅
             {{ session.ip }}
           </strong>
         </div>
         <div>
           <template v-if="session.city">{{ session.city }}, {{ session.country }} ⋅</template>
-          <span v-tooltip="$dayjs(session.last_login).format('MMMM D, YYYY [at] h:mm A')">
-            Last accessed {{ fromNow(session.last_login) }}
+          <span
+            v-tooltip="
+              formatMessage(commonMessages.dateAtTimeTooltip, {
+                date: new Date(session.last_login),
+                time: new Date(session.last_login),
+              })
+            "
+          >
+            {{
+              formatMessage(messages.sessionsLastAccessedAt, {
+                ago: formatRelativeTime(session.last_login),
+              })
+            }}
           </span>
           ⋅
-          <span v-tooltip="$dayjs(session.created).format('MMMM D, YYYY [at] h:mm A')">
-            Created {{ fromNow(session.created) }}
+          <span
+            v-tooltip="
+              formatMessage(commonMessages.dateAtTimeTooltip, {
+                date: new Date(session.created),
+                time: new Date(session.created),
+              })
+            "
+          >
+            {{
+              formatMessage(messages.sessionsCreatedAt, {
+                ago: formatRelativeTime(session.created),
+              })
+            }}
           </span>
         </div>
       </div>
       <div class="input-group">
-        <i v-if="session.current">Current session</i>
+        <i v-if="session.current">{{ formatMessage(messages.currentSessionLabel) }}</i>
         <button v-else class="iconified-button raised-button" @click="revokeSession(session.id)">
-          <XIcon /> Revoke session
+          <XIcon /> {{ formatMessage(messages.revokeSessionButton) }}
         </button>
       </div>
     </div>
@@ -43,8 +62,47 @@ definePageMeta({
   middleware: 'auth',
 })
 
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+
+const messages = defineMessages({
+  currentSessionLabel: {
+    id: 'settings.sessions.label.current-session',
+    defaultMessage: 'Current session',
+  },
+  revokeSessionButton: {
+    id: 'settings.sessions.button.revoke-session',
+    defaultMessage: 'Revoke session',
+  },
+  sessionsCreatedAt: {
+    id: 'settings.sessions.label.created-at',
+    defaultMessage: 'Created {ago}',
+  },
+  sessionsDescription: {
+    id: 'settings.sessions.description',
+    defaultMessage:
+      "Here are all the devices that are currently logged in with your Modrinth account. You can log out of each one individually.\n\n If you see an entry you don't recognize, log out of that device and change your Modrinth account password immediately.",
+  },
+  sessionsLastAccessedAt: {
+    id: 'settings.sessions.label.last-accessed-at',
+    defaultMessage: 'Last accessed {ago}',
+  },
+  sessionsTitle: {
+    id: 'settings.sessions.title',
+    defaultMessage: 'Sessions',
+  },
+  unknownOsLabel: {
+    id: 'settings.sessions.label.unknown-os',
+    defaultMessage: 'Unknown OS',
+  },
+  unknownPlatformLabel: {
+    id: 'settings.sessions.label.unknown-platform',
+    defaultMessage: 'Unknown platform',
+  },
+})
+
 useHead({
-  title: 'Sessions - Modrinth',
+  title: () => `${formatMessage(messages.sessionsTitle)} - Modrinth'`,
 })
 
 const data = useNuxtApp()
@@ -63,7 +121,7 @@ async function revokeSession(id) {
   } catch (err) {
     data.$notify({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data.description,
       type: 'error',
     })
diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index 1bc694adff..a112596b0c 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -131,7 +131,7 @@
               <SunriseIcon class="secondary-stat__icon" aria-hidden="true" />
               <span
                 v-tooltip="
-                  formatMessage(messages.profileJoinedAtTooltip, {
+                  formatMessage(commonMessages.dateAtTimeTooltip, {
                     date: new Date(user.created),
                     time: new Date(user.created),
                   })
@@ -314,10 +314,6 @@ const messages = defineMessages({
     id: 'profile.joined-at',
     defaultMessage: 'Joined {ago}',
   },
-  profileJoinedAtTooltip: {
-    id: 'profile.joined-at.tooltip',
-    defaultMessage: '{date, date, long} at {time, time, short}',
-  },
   profileUserId: {
     id: 'profile.user-id',
     defaultMessage: 'User ID: {id}',
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index d4580dcb25..965175a299 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -7,6 +7,10 @@ export const commonMessages = defineMessages({
     id: 'button.cancel',
     defaultMessage: 'Cancel',
   },
+  dateAtTimeTooltip: {
+    id: 'tooltip.date-at-time',
+    defaultMessage: '{date, date, long} at {time, time, short}',
+  },
   editButton: {
     id: 'button.edit',
     defaultMessage: 'Edit',