feat: add output on connection dialog for unauthorized (#1996)

src/components/TheConnectingDialog.vue

@@ -1,35 +1,30 @@
-<style scoped></style>
-
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
-        <v-card>
+        <panel :title="titleText" :icon="mdiConnection" card-class="the-connection-dialog" :margin-bottom="false">
-            <v-toolbar flat dense>
-                <v-toolbar-title>
-                    <span class="subheading">
-                        <v-icon left>{{ mdiConnection }}</v-icon>
-                        {{ titleText }}
-                    </span>
-                </v-toolbar-title>
-            </v-toolbar>
             <v-card-text v-if="connectingFailed" class="pt-5">
-                <connection-status :moonraker="false"></connection-status>
+                <connection-status :moonraker="false" />
-                <p class="text-center mt-3">{{ $t('ConnectionDialog.CannotConnectTo', { host: formatHostname }) }}</p>
+                <p class="text-center mt-3 mb-0">
+                    {{ $t('ConnectionDialog.CannotConnectTo', { host: formatHostname }) }}
+                </p>
+                <p v-if="connectionFailedMessage" class="text-center mt-1 red--text">
+                    {{ $t('ConnectionDialog.ErrorMessage', { message: connectionFailedMessage }) }}
+                </p>
                 <template v-if="counter > 2">
-                    <v-divider class="my-3"></v-divider>
+                    <v-divider class="my-3" />
                     <p>{{ $t('ConnectionDialog.CheckMoonrakerLog') }}</p>
                     <ul>
                         <li>~/printer_data/logs/moonraker.log</li>
                     </ul>
-                    <v-divider class="mt-4 mb-5"></v-divider>
+                    <v-divider class="mt-4 mb-5" />
                 </template>
-                <div class="text-center">
+                <div class="text-center mt-3">
                     <v-btn class="primary--text" @click="reconnect">{{ $t('ConnectionDialog.TryAgain') }}</v-btn>
                 </div>
             </v-card-text>
             <v-card-text v-else class="pt-5">
-                <v-progress-linear :color="progressBarColor" indeterminate></v-progress-linear>
+                <v-progress-linear :color="progressBarColor" indeterminate />
             </v-card-text>
-        </v-card>
+        </panel>
     </v-dialog>
 </template>
 
@@ -52,10 +47,6 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
 
     counter = 0
 
-    get protocol() {
-        return this.$store.state.socket.protocol
-    }
-
     get hostname() {
         return this.$store.state.socket.hostname
     }
@@ -94,6 +85,10 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
         return this.formatHostname
     }
 
+    get connectionFailedMessage() {
+        return this.$store.state.socket.connectionFailedMessage ?? null
+    }
+
     reconnect() {
         this.counter++
         this.$store.dispatch('socket/setData', { connectingFailed: false })

src/locales/en.json

@@ -154,6 +154,7 @@
         "CannotConnectTo": "Cannot connect to Moonraker ({host}).",
         "CheckMoonrakerLog": "If this message appears repeatedly, please have a look in the log file located at:",
         "Connecting": "Connecting to {host}",
+        "ErrorMessage": "Error message: {message}",
         "Failed": "Connection failed",
         "Initializing": "Initializing",
         "TryAgain": "try again"

src/plugins/webSocketClient.ts

@@ -36,6 +36,11 @@ export class WebSocketClient {
                 window.console.error(`Response Error: ${data.error.message} (${wait?.action ?? 'no action'})`)
             }
 
+            if (data.error.message === 'Unauthorized' && wait?.action === 'server/setConnectionId') {
+                this.close()
+                this.store?.dispatch('socket/setConnectionFailed', data.error.message)
+            }
+
             if (wait?.id) {
                 const modulename = wait.action?.split('/')[1] ?? null
 

src/store/socket/actions.ts

@@ -173,4 +173,8 @@ export const actions: ActionTree<SocketState, RootState> = {
     reportDebug(_, payload) {
         window.console.log(payload)
     },
+
+    setConnectionFailed({ commit }, payload) {
+        commit('setDisconnected', payload)
+    },
 }

src/store/socket/index.ts

@@ -20,6 +20,7 @@ export const getDefaultState = (): SocketState => {
         isConnected: false,
         isConnecting: false,
         connectingFailed: false,
+        connectionFailedMessage: null,
         loadings: [],
         initializationList: ['server'],
         connection_id: null,

src/store/socket/mutations.ts

@@ -16,11 +16,13 @@ export const mutations: MutationTree<SocketState> = {
         Vue.set(state, 'connectingFailed', false)
     },
 
-    setDisconnected(state) {
+    setDisconnected(state, message?: string) {
         Vue.set(state, 'isConnected', false)
         Vue.set(state, 'isConnecting', false)
         Vue.set(state, 'connectingFailed', true)
         Vue.set(state, 'connection_id', null)
+
+        if (message) Vue.set(state, 'connectionFailedMessage', message)
     },
 
     setData(state, payload) {

src/store/socket/types.ts

@@ -7,6 +7,7 @@ export interface SocketState {
     isConnected: boolean
     isConnecting: boolean
     connectingFailed: boolean
+    connectionFailedMessage: string | null
     loadings: string[]
     initializationList: string[]
     connection_id: number | null