Add translation keys for Sessions page (#1377)

Co-authored-by: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>

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}"
   }
 }

pages/settings/sessions.vue

@@ -1,36 +1,55 @@
 <template>
   <div class="universal-card">
-    <h2>Sessions</h2>
+    <h2>{{ formatMessage(messages.sessionsTitle) }}</h2>
-    <p>
+    <p class="preserve-lines">
-      Here are all the devices that are currently logged in with your Modrinth account. You can log
+      {{ formatMessage(messages.sessionsDescription) }}
-      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.
     </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')">
+          <span
-            Last accessed {{ fromNow(session.last_login) }}
+            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')">
+          <span
-            Created {{ fromNow(session.created) }}
+            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',
     })

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}',

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',