Merge pull request #4503 from advplyr/session_modal_user

Update sessions modal to show username & update legacy token input with warning

client/components/modals/ListeningSessionModal.vue

@@ -81,7 +81,7 @@
         </div>
         <div class="w-full md:w-1/3">
           <p v-if="!isMediaItemShareSession" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
-          <p v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ _session.userId }}</p>
+          <p v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ username }}</p>
 
           <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</p>
           <p class="mb-1">{{ playMethodName }}</p>
@@ -132,6 +132,9 @@ export default {
     _session() {
       return this.session || {}
     },
+    username() {
+      return this._session.user?.username || this._session.userId || ''
+    },
     deviceInfo() {
       return this._session.deviceInfo || {}
     },

client/pages/config/users/_id/index.vue

@@ -13,8 +13,10 @@
         <widgets-online-indicator :value="!!userOnline" />
         <h1 class="text-xl pl-2">{{ username }}</h1>
       </div>
-      <div v-if="legacyToken" class="flex text-xs mt-4">
+      <div v-if="legacyToken" class="text-xs space-y-2 mt-4">
         <ui-text-input-with-label label="Legacy API Token" :value="legacyToken" readonly show-copy />
+
+        <p class="text-warning" v-html="$strings.MessageAuthenticationLegacyTokenWarning" />
       </div>
       <div class="w-full h-px bg-white/10 my-2" />
       <div class="py-2">

client/strings/en-us.json

@@ -723,6 +723,7 @@
   "MessageAddToPlayerQueue": "Add to player queue",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
   "MessageAsinCheck": "Ensure you are using the ASIN from the correct Audible region, not Amazon.",
+  "MessageAuthenticationLegacyTokenWarning": "Legacy API tokens will be removed in the future. Use <a href=\"/config/api-keys\">API Keys</a> instead.",
   "MessageAuthenticationOIDCChangesRestart": "Restart your server after saving to apply OIDC changes.",
   "MessageAuthenticationSecurityMessage": "Authentication has been improved for security. All users are required to re-login.",
   "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.",

server/controllers/SessionController.js

@@ -57,26 +57,24 @@ class SessionController {
     }
 
     let where = null
-    const include = [
-      {
-        model: Database.models.device
-      }
-    ]
 
     if (userId) {
       where = {
         userId
       }
-    } else {
-      include.push({
-        model: Database.userModel,
-        attributes: ['id', 'username']
-      })
     }
 
     const { rows, count } = await Database.playbackSessionModel.findAndCountAll({
       where,
-      include,
+      include: [
+        {
+          model: Database.deviceModel
+        },
+        {
+          model: Database.userModel,
+          attributes: ['id', 'username']
+        }
+      ],
       order: [[orderKey, orderDesc]],
       limit: itemsPerPage,
       offset: itemsPerPage * page

server/controllers/UserController.js

@@ -439,7 +439,16 @@ class UserController {
     const page = toNumber(req.query.page, 0)
 
     const start = page * itemsPerPage
-    const sessions = listeningSessions.slice(start, start + itemsPerPage)
+    // Map user to sessions to match the format of the sessions endpoint
+    const sessions = listeningSessions.slice(start, start + itemsPerPage).map((session) => {
+      return {
+        ...session,
+        user: {
+          id: req.reqUser.id,
+          username: req.reqUser.username
+        }
+      }
+    })
 
     const payload = {
       total: listeningSessions.length,