Merge remote-tracking branch 'josh-vin/master' into feat/ChaptersEnhancments

2025-12-23 04:09:38 +00:00 · 2025-07-30 16:51:12 -06:00 · 2025-07-30 16:51:12 -06:00 · 77d7a50b99
commit 77d7a50b99
parent 9da0be6d36 32da0f1224
125 changed files with 4909 additions and 1379 deletions
--- a/client/pages/account.vue
+++ b/client/pages/account.vue
@ -182,18 +182,19 @@ export default {
          password: this.password,
          newPassword: this.newPassword
        })
-        .then((res) => {
-          if (res.success) {
-            this.$toast.success(this.$strings.ToastUserPasswordChangeSuccess)
-            this.resetForm()
-          } else {
-            this.$toast.error(res.error || this.$strings.ToastUnknownError)
-          }
-          this.changingPassword = false
+        .then(() => {
+          this.$toast.success(this.$strings.ToastUserPasswordChangeSuccess)
+          this.resetForm()
        })
        .catch((error) => {
-          console.error(error)
-          this.$toast.error(this.$strings.ToastUnknownError)
+          console.error('Failed to change password', error)
+          let errorMessage = this.$strings.ToastUnknownError
+          if (error.response?.data && typeof error.response.data === 'string') {
+            errorMessage = error.response.data
+          }
+          this.$toast.error(errorMessage)
+        })
+        .finally(() => {
          this.changingPassword = false
        })
    },
--- a/client/pages/audiobook/_id/manage.vue
+++ b/client/pages/audiobook/_id/manage.vue
@ -28,14 +28,14 @@
    <div class="flex justify-center flex-wrap lg:flex-nowrap gap-4">
      <div class="w-full max-w-2xl border border-white/10 bg-bg">
        <div class="flex py-2 px-4">
-          <div class="w-1/3 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelMetaTag }}</div>
-          <div class="w-2/3 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelValue }}</div>
+          <div class="w-28 min-w-28 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelMetaTag }}</div>
+          <div class="grow text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelValue }}</div>
        </div>
        <div class="w-full max-h-72 overflow-auto">
          <template v-for="(value, key, index) in metadataObject">
            <div :key="key" class="flex py-1 px-4 text-sm" :class="index % 2 === 0 ? 'bg-primary/25' : ''">
-              <div class="w-1/3 font-semibold">{{ key }}</div>
-              <div class="w-2/3">
+              <div class="w-28 min-w-28 font-semibold">{{ key }}</div>
+              <div class="grow">
                {{ value }}
              </div>
            </div>
@ -45,18 +45,18 @@
      <div class="w-full max-w-2xl border border-white/10 bg-bg">
        <div class="flex py-2 px-4 bg-primary/25">
          <div class="grow text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelChapterTitle }}</div>
-          <div class="w-24 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelStart }}</div>
-          <div class="w-24 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelEnd }}</div>
+          <div class="w-16 min-w-16 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelStart }}</div>
+          <div class="w-16 min-w-16 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelEnd }}</div>
        </div>
        <div class="w-full max-h-72 overflow-auto">
          <p v-if="!metadataChapters.length" class="py-5 text-center text-gray-200">{{ $strings.MessageNoChapters }}</p>
          <template v-for="(chapter, index) in metadataChapters">
            <div :key="index" class="flex py-1 px-4 text-sm" :class="index % 2 === 1 ? 'bg-primary/25' : ''">
              <div class="grow font-semibold">{{ chapter.title }}</div>
-              <div class="w-24">
+              <div class="w-16 min-w-16">
                {{ $secondsToTimestamp(chapter.start) }}
              </div>
-              <div class="w-24">
+              <div class="w-16 min-w-16">
                {{ $secondsToTimestamp(chapter.end) }}
              </div>
            </div>
--- a/client/pages/config.vue
+++ b/client/pages/config.vue
@ -53,6 +53,7 @@ export default {
        else if (pageName === 'sessions') return this.$strings.HeaderListeningSessions
        else if (pageName === 'stats') return this.$strings.HeaderYourStats
        else if (pageName === 'users') return this.$strings.HeaderUsers
+        else if (pageName === 'api-keys') return this.$strings.HeaderApiKeys
        else if (pageName === 'item-metadata-utils') return this.$strings.HeaderItemMetadataUtils
        else if (pageName === 'rss-feeds') return this.$strings.HeaderRSSFeeds
        else if (pageName === 'email') return this.$strings.HeaderEmail
--- a/client/pages/config/api-keys/index.vue
+++ b/client/pages/config/api-keys/index.vue
@ -0,0 +1,84 @@
+<template>
+  <div>
+    <app-settings-content :header-text="$strings.HeaderApiKeys">
+      <template #header-items>
+        <div v-if="numApiKeys" class="mx-2 px-1.5 rounded-lg bg-primary/50 text-gray-300/90 text-sm inline-flex items-center justify-center">
+          <span>{{ numApiKeys }}</span>
+        </div>
+
+        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a href="https://www.audiobookshelf.org/guides/api-keys" target="_blank" class="inline-flex">
+            <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+
+        <div class="grow" />
+
+        <ui-btn color="bg-primary" :disabled="loadingUsers || users.length === 0" small @click="setShowApiKeyModal()">{{ $strings.ButtonAddApiKey }}</ui-btn>
+      </template>
+
+      <tables-api-keys-table ref="apiKeysTable" class="pt-2" @edit="setShowApiKeyModal" @numApiKeys="(count) => (numApiKeys = count)" />
+    </app-settings-content>
+    <modals-api-key-modal ref="apiKeyModal" v-model="showApiKeyModal" :api-key="selectedApiKey" :users="users" @created="apiKeyCreated" @updated="apiKeyUpdated" />
+    <modals-api-key-created-modal ref="apiKeyCreatedModal" v-model="showApiKeyCreatedModal" :api-key="selectedApiKey" />
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
+  data() {
+    return {
+      loadingUsers: false,
+      selectedApiKey: null,
+      showApiKeyModal: false,
+      showApiKeyCreatedModal: false,
+      numApiKeys: 0,
+      users: []
+    }
+  },
+  methods: {
+    apiKeyCreated(apiKey) {
+      this.numApiKeys++
+      this.selectedApiKey = apiKey
+      this.showApiKeyCreatedModal = true
+      if (this.$refs.apiKeysTable) {
+        this.$refs.apiKeysTable.addApiKey(apiKey)
+      }
+    },
+    apiKeyUpdated(apiKey) {
+      if (this.$refs.apiKeysTable) {
+        this.$refs.apiKeysTable.updateApiKey(apiKey)
+      }
+    },
+    setShowApiKeyModal(selectedApiKey) {
+      this.selectedApiKey = selectedApiKey
+      this.showApiKeyModal = true
+    },
+    loadUsers() {
+      this.loadingUsers = true
+      this.$axios
+        .$get('/api/users')
+        .then((res) => {
+          this.users = res.users.sort((a, b) => {
+            return a.createdAt - b.createdAt
+          })
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+        })
+        .finally(() => {
+          this.loadingUsers = false
+        })
+    }
+  },
+  mounted() {
+    this.loadUsers()
+  },
+  beforeDestroy() {}
+}
+</script>
--- a/client/pages/config/rss-feeds.vue
+++ b/client/pages/config/rss-feeds.vue
@ -78,10 +78,10 @@ export default {
  },
  computed: {
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
+      return this.$store.getters['getServerSetting']('timeFormat')
    }
  },
  methods: {
--- a/client/pages/config/sessions.vue
+++ b/client/pages/config/sessions.vue
@ -6,80 +6,82 @@
      </div>

      <div v-if="listeningSessions.length" class="block max-w-full relative">
-        <table class="userSessionsTable">
-          <tr class="bg-primary/40">
-            <th class="w-6 min-w-6 text-left hidden md:table-cell h-11">
-              <ui-checkbox v-model="isAllSelected" :partial="numSelected > 0 && !isAllSelected" small checkbox-bg="bg" />
-            </th>
-            <th v-if="numSelected" class="grow text-left" :colspan="7">
-              <div class="flex items-center">
-                <p>{{ $getString('MessageSelected', [numSelected]) }}</p>
-                <div class="grow" />
-                <ui-btn small color="bg-error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="grow sm:grow-0 sm:w-48 sm:max-w-48 text-left group cursor-pointer" @click.stop="sortColumn('displayTitle')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelItem }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('displayTitle') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th>
-            <th v-if="!numSelected" class="w-26 min-w-26 text-left hidden md:table-cell group cursor-pointer" @click.stop="sortColumn('playMethod')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelPlayMethod }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('playMethod') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
-            <th v-if="!numSelected" class="w-24 min-w-24 sm:w-32 sm:min-w-32 group cursor-pointer" @click.stop="sortColumn('timeListening')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelTimeListened }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('timeListening') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="w-24 min-w-24 group cursor-pointer" @click.stop="sortColumn('currentTime')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelLastTime }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('currentTime') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="grow hidden sm:table-cell cursor-pointer group" @click.stop="sortColumn('updatedAt')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelLastUpdate }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('updatedAt') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-          </tr>
+        <div class="overflow-x-auto">
+          <table class="userSessionsTable">
+            <tr class="bg-primary/40">
+              <th class="w-6 min-w-6 text-left hidden md:table-cell h-11">
+                <ui-checkbox v-model="isAllSelected" :partial="numSelected > 0 && !isAllSelected" small checkbox-bg="bg" />
+              </th>
+              <th v-if="numSelected" class="grow text-left" :colspan="7">
+                <div class="flex items-center">
+                  <p>{{ $getString('MessageSelected', [numSelected]) }}</p>
+                  <div class="grow" />
+                  <ui-btn small color="bg-error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="grow sm:grow-0 sm:w-48 sm:max-w-48 text-left group cursor-pointer" @click.stop="sortColumn('displayTitle')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelItem }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('displayTitle') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th>
+              <th v-if="!numSelected" class="w-26 min-w-26 text-left hidden md:table-cell group cursor-pointer" @click.stop="sortColumn('playMethod')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelPlayMethod }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('playMethod') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
+              <th v-if="!numSelected" class="w-24 min-w-24 sm:w-32 sm:min-w-32 group cursor-pointer" @click.stop="sortColumn('timeListening')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelTimeListened }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('timeListening') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="w-24 min-w-24 group cursor-pointer" @click.stop="sortColumn('currentTime')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelLastTime }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('currentTime') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="grow hidden sm:table-cell cursor-pointer group" @click.stop="sortColumn('updatedAt')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelLastUpdate }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('updatedAt') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+            </tr>

-          <tr v-for="session in listeningSessions" :key="session.id" :class="{ selected: session.selected }" class="cursor-pointer" @click="clickSessionRow(session)">
-            <td class="hidden md:table-cell py-1 max-w-6 relative">
-              <ui-checkbox v-model="session.selected" small checkbox-bg="bg" />
-              <!-- overlay of the checkbox so that the entire box is clickable -->
-              <div class="absolute inset-0 w-full h-full" @click.stop="session.selected = !session.selected" />
-            </td>
-            <td class="py-1 grow sm:grow-0 sm:w-48 sm:max-w-48">
-              <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
-              <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
-            </td>
-            <td class="hidden md:table-cell w-20 min-w-20">
-              <p v-if="filteredUserUsername" class="text-xs">{{ filteredUserUsername }}</p>
-              <p v-else class="text-xs">{{ session.user ? session.user.username : 'N/A' }}</p>
-            </td>
-            <td class="hidden md:table-cell w-26 min-w-26">
-              <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
-            </td>
-            <td class="hidden sm:table-cell max-w-32 min-w-32">
-              <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
-            </td>
-            <td class="text-center w-24 min-w-24 sm:w-32 sm:min-w-32">
-              <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
-            </td>
-            <td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)">
-              <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
-            </td>
-            <td class="text-center hidden sm:table-cell">
-              <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
-                <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
-              </ui-tooltip>
-            </td>
-          </tr>
-        </table>
+            <tr v-for="session in listeningSessions" :key="session.id" :class="{ selected: session.selected }" class="cursor-pointer" @click="clickSessionRow(session)">
+              <td class="hidden md:table-cell py-1 max-w-6 relative">
+                <ui-checkbox v-model="session.selected" small checkbox-bg="bg" />
+                <!-- overlay of the checkbox so that the entire box is clickable -->
+                <div class="absolute inset-0 w-full h-full" @click.stop="session.selected = !session.selected" />
+              </td>
+              <td class="py-1 grow sm:grow-0 sm:w-48 sm:max-w-48">
+                <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
+                <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
+              </td>
+              <td class="hidden md:table-cell w-20 min-w-20">
+                <p v-if="filteredUserUsername" class="text-xs">{{ filteredUserUsername }}</p>
+                <p v-else class="text-xs">{{ session.user ? session.user.username : 'N/A' }}</p>
+              </td>
+              <td class="hidden md:table-cell w-26 min-w-26">
+                <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
+              </td>
+              <td class="hidden sm:table-cell max-w-32 min-w-32">
+                <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
+              </td>
+              <td class="text-center w-24 min-w-24 sm:w-32 sm:min-w-32">
+                <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
+              </td>
+              <td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)">
+                <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
+              </td>
+              <td class="text-center hidden sm:table-cell">
+                <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
+                  <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
+                </ui-tooltip>
+              </td>
+            </tr>
+          </table>
+        </div>
        <!-- table bottom options -->
        <div class="flex items-center my-2">
          <div class="grow" />
@ -250,10 +252,10 @@ export default {
      return user?.username || null
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
+      return this.$store.getters['getServerSetting']('timeFormat')
    },
    numSelected() {
      return this.listeningSessions.filter((s) => s.selected).length
--- a/client/pages/config/users/_id/index.vue
+++ b/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="userToken" class="flex text-xs mt-4">
-        <ui-text-input-with-label :label="$strings.LabelApiToken" :value="userToken" readonly show-copy />
+      <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">
@ -100,9 +102,12 @@ export default {
    }
  },
  computed: {
-    userToken() {
+    legacyToken() {
      return this.user.token
    },
+    userToken() {
+      return this.user.accessToken
+    },
    bookCoverAspectRatio() {
      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
@ -129,10 +134,10 @@ export default {
      return this.listeningSessions.sessions[0]
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
+      return this.$store.getters['getServerSetting']('timeFormat')
    }
  },
  methods: {
--- a/client/pages/config/users/_id/sessions.vue
+++ b/client/pages/config/users/_id/sessions.vue
@ -19,39 +19,41 @@
      <div class="py-2">
        <h1 class="text-lg mb-2 text-white/90 px-2 sm:px-0">{{ $strings.HeaderListeningSessions }}</h1>
        <div v-if="listeningSessions.length">
-          <table class="userSessionsTable">
-            <tr class="bg-primary/40">
-              <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
-              <th class="w-32 min-w-32 text-left hidden md:table-cell">{{ $strings.LabelPlayMethod }}</th>
-              <th class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
-              <th class="w-32 min-w-32">{{ $strings.LabelTimeListened }}</th>
-              <th class="w-16 min-w-16">{{ $strings.LabelLastTime }}</th>
-              <th class="grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
-            </tr>
-            <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
-              <td class="py-1 max-w-48">
-                <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
-                <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
-              </td>
-              <td class="hidden md:table-cell">
-                <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
-              </td>
-              <td class="hidden sm:table-cell min-w-32 max-w-32">
-                <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
-              </td>
-              <td class="text-center">
-                <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
-              </td>
-              <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
-                <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
-              </td>
-              <td class="text-center hidden sm:table-cell">
-                <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
-                  <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
-                </ui-tooltip>
-              </td>
-            </tr>
-          </table>
+          <div class="overflow-x-auto">
+            <table class="userSessionsTable">
+              <tr class="bg-primary/40">
+                <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
+                <th class="w-32 min-w-32 text-left hidden md:table-cell">{{ $strings.LabelPlayMethod }}</th>
+                <th class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
+                <th class="w-32 min-w-32">{{ $strings.LabelTimeListened }}</th>
+                <th class="w-16 min-w-16">{{ $strings.LabelLastTime }}</th>
+                <th class="grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
+              </tr>
+              <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
+                <td class="py-1 max-w-48">
+                  <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
+                  <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
+                </td>
+                <td class="hidden md:table-cell">
+                  <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
+                </td>
+                <td class="hidden sm:table-cell min-w-32 max-w-32">
+                  <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
+                </td>
+                <td class="text-center">
+                  <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
+                </td>
+                <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
+                  <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
+                </td>
+                <td class="text-center hidden sm:table-cell">
+                  <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
+                    <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
+                  </ui-tooltip>
+                </td>
+              </tr>
+            </table>
+          </div>
          <div class="flex items-center justify-end py-1">
            <ui-icon-btn icon="arrow_back_ios_new" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
            <p class="text-sm mx-1">{{ $getString('LabelPaginationPageXOfY', [currentPage + 1, numPages]) }}</p>
@ -98,10 +100,10 @@ export default {
      return this.$store.getters['users/getIsUserOnline'](this.user.id)
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
+      return this.$store.getters['getServerSetting']('timeFormat')
    }
  },
  methods: {
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@ -193,7 +193,7 @@ export default {
      return `${process.env.serverUrl}/api/items/${this.libraryItemId}/download?token=${this.userToken}`
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
--- a/client/pages/library/_library/narrators.vue
+++ b/client/pages/library/_library/narrators.vue
@ -10,7 +10,7 @@
        </tr>
        <tr v-for="narrator in narrators" :key="narrator.id">
          <td>
-            <p v-if="selectedNarrator?.id !== narrator.id" class="text-sm md:text-base text-gray-100">{{ narrator.name }}</p>
+            <nuxt-link v-if="selectedNarrator?.id !== narrator.id" :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${narrator.id}`" class="text-sm md:text-base text-gray-100 hover:underline">{{ narrator.name }}</nuxt-link>
            <form v-else @submit.prevent="saveClick">
              <ui-text-input v-model="newNarratorName" />
            </form>
--- a/client/pages/library/_library/podcast/latest.vue
+++ b/client/pages/library/_library/podcast/latest.vue
@ -141,7 +141,7 @@ export default {
      return episodeIds
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    }
  },
  methods: {
--- a/client/pages/login.vue
+++ b/client/pages/login.vue
@ -40,6 +40,15 @@

          <p v-if="error" class="text-error text-center py-2">{{ error }}</p>

+          <div v-if="showNewAuthSystemMessage" class="mb-4">
+            <widgets-alert type="warning">
+              <div>
+                <p>{{ $strings.MessageAuthenticationSecurityMessage }}</p>
+                <a v-if="showNewAuthSystemAdminMessage" href="https://github.com/advplyr/audiobookshelf/discussions/4460" target="_blank" class="underline">{{ $strings.LabelMoreInfo }}</a>
+              </div>
+            </widgets-alert>
+          </div>
+
          <form v-show="login_local" @submit.prevent="submitForm">
            <label class="text-xs text-gray-300 uppercase">{{ $strings.LabelUsername }}</label>
            <ui-text-input v-model.trim="username" :disabled="processing" class="mb-3 w-full" inputName="username" />
@ -85,7 +94,10 @@ export default {
      MetadataPath: '',
      login_local: true,
      login_openid: false,
-      authFormData: null
+      authFormData: null,
+      // New JWT auth system re-login flags
+      showNewAuthSystemMessage: false,
+      showNewAuthSystemAdminMessage: false
    }
  },
  watch: {
@ -179,11 +191,17 @@ export default {

      this.$store.commit('libraries/setCurrentLibrary', userDefaultLibraryId)
      this.$store.commit('user/setUser', user)
+      // Access token only returned from login, not authorize
+      if (user.accessToken) {
+        this.$store.commit('user/setAccessToken', user.accessToken)
+      }

      this.$store.dispatch('user/loadUserSettings')
    },
    async submitForm() {
      this.error = null
+      this.showNewAuthSystemMessage = false
+      this.showNewAuthSystemAdminMessage = false
      this.processing = true

      const payload = {
@ -210,6 +228,8 @@ export default {

      this.processing = true

+      this.$store.commit('user/setAccessToken', token)
+
      return this.$axios
        .$post('/api/authorize', null, {
          headers: {
@ -217,15 +237,25 @@ export default {
          }
        })
        .then((res) => {
+          // Force re-login if user is using an old token with no expiration
+          if (res.user.isOldToken) {
+            this.username = res.user.username
+            this.showNewAuthSystemMessage = true
+            // Admin user sees link to github discussion
+            this.showNewAuthSystemAdminMessage = res.user.type === 'admin' || res.user.type === 'root'
+            return false
+          }
+
          this.setUser(res)
-          this.processing = false
          return true
        })
        .catch((error) => {
          console.error('Authorize error', error)
-          this.processing = false
          return false
        })
+        .finally(() => {
+          this.processing = false
+        })
    },
    checkStatus() {
      this.processing = true
@ -280,8 +310,9 @@ export default {
    }
  },
  async mounted() {
-    if (this.$route.query?.setToken) {
-      localStorage.setItem('token', this.$route.query.setToken)
+    // Token passed as query parameter after successful oidc login
+    if (this.$route.query?.accessToken) {
+      localStorage.setItem('token', this.$route.query.accessToken)
    }
    if (localStorage.getItem('token')) {
      if (await this.checkAuth()) return // if valid user no need to check status