Update server connections list to show warning for connections with an old user id #1411

components/connection/ServerConnectForm.vue

@@ -3,12 +3,19 @@
     <div v-show="!loggedIn" class="mt-8 bg-primary overflow-hidden shadow rounded-lg px-4 py-6 w-full">
       <!-- list of server connection configs -->
       <template v-if="!showForm">
-        <div v-for="config in serverConnectionConfigs" :key="config.id" class="flex items-center py-4 my-1 border-b border-fg/10 relative" @click="connectToServer(config)">
+        <div v-for="config in serverConnectionConfigs" :key="config.id" class="border-b border-fg/10 py-4">
-          <span class="material-icons-outlined text-xl text-fg-muted">dns</span>
+          <div class="flex items-center my-1 relative" @click="connectToServer(config)">
-          <p class="pl-3 pr-6 text-base text-fg">{{ config.name }}</p>
+            <span class="material-icons-outlined text-xl text-fg-muted">dns</span>
+            <p class="pl-3 pr-6 text-base text-fg">{{ config.name }}</p>
 
-          <div class="absolute top-0 right-0 h-full px-4 flex items-center" @click.stop="editServerConfig(config)">
+            <div class="absolute top-0 right-0 h-full px-4 flex items-center" @click.stop="editServerConfig(config)">
-            <span class="material-icons text-lg text-fg-muted">more_vert</span>
+              <span class="material-icons text-lg text-fg-muted">more_vert</span>
+            </div>
+          </div>
+          <!-- warning message if server connection config is using an old user id -->
+          <div v-if="!checkIdUuid(config.userId)" class="flex flex-nowrap justify-between items-center space-x-4 pt-4">
+            <p class="text-xs text-warning">{{ $strings.MessageOldServerConnectionWarning }}</p>
+            <ui-btn class="text-xs whitespace-nowrap" :padding-x="2" :padding-y="1" @click="showOldUserIdWarningDialog">{{ $strings.LabelMoreInfo }}</ui-btn>
           </div>
         </div>
         <div class="my-1 py-4 w-full">
@@ -141,6 +148,16 @@ export default {
     }
   },
   methods: {
+    showOldUserIdWarningDialog() {
+      Dialog.alert({
+        title: 'Old Server Connection Warning',
+        message: this.$strings.MessageOldServerConnectionWarningHelp,
+        cancelText: 'OK'
+      })
+    },
+    checkIdUuid(userId) {
+      return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(userId)
+    },
     /**
      * Initiates the login process using OpenID via OAuth2.0.
      * 1. Verifying the server's address

strings/en-us.json

@@ -308,6 +308,8 @@
   "MessageNoSeries": "No series",
   "MessageNoUpdatesWereNecessary": "No updates were necessary",
   "MessageNoUserPlaylists": "You have no playlists",
+  "MessageOldServerConnectionWarning": "Server connection config is using an old user ID. Please delete and re-add this server connection.",
+  "MessageOldServerConnectionWarningHelp": "You originally set up the connection to this server prior to the database migration in 2.3.0, released June 2023. A future server update will remove the ability to sign in with this old connection. Please delete the existing server connection and connect again (using the same server address and credentials). If you have any downloaded media on this device, the media will need to be downloaded again to sync with the server.",
   "MessagePodcastSearchField": "Enter search term or RSS feed URL",
   "MessageReportBugsAndContribute": "Report bugs, request features, and contribute on",
   "MessageSeriesAlreadyDownloaded": "You have already downloaded all books in this series.",