update api calls for Tool views

app/src/views/tool/ToolAdminpw.vue

@@ -40,20 +40,24 @@ export default {
   },
 
   methods: {
-    onSubmit ({ password, currentPassword }) {
+    onSubmit ({ currentPassword, password }) {
       this.serverError = ''
-      // Use `api.fetch` to avoid automatic redirect on 401 (Unauthorized).
-      api.fetch('POST', 'login', { password: currentPassword }).then(response => {
-        if (response.status === 401) {
-          // Dispatch `SERVER_RESPONDED` to hide waiting overlay and display error.
-          this.$store.dispatch('SERVER_RESPONDED', true)
+
+      api.fetchAll(
+        [['POST', 'login', { password: currentPassword }, { websocket: false }],
+         ['PUT', 'admisnpw', { new_password: password }]],
+        { wait: true }
+      ).then(() => {
+        this.$store.dispatch('DISCONNECT')
+      }).catch(err => {
+        if (err.name === 'APIUnauthorizedError') {
+          // Prevent automatic disconnect if error in current password.
           this.serverError = this.$i18n.t('wrong_password')
-        } else if (response.ok) {
-          api.put('adminpw', { new_password: password }).then(() => {
-            this.$store.dispatch('DISCONNECT')
-          }).catch(error => {
-            this.serverError = error.message
-          })
+        } else if (err.name === 'APIBadRequestError') {
+          // Display form error
+          this.serverError = err.message
+        } else {
+          throw err
         }
       })
     }

app/src/views/tool/ToolFirewall.vue

@@ -1,6 +1,6 @@
 <template>
   <view-base
-    :queries="queries" @queries-response="formatFirewallData"
+    :queries="queries" @queries-response="onQueriesResponse"
     ref="view" skeleton="card-form-skeleton"
   >
     <!-- PORTS -->
@@ -98,7 +98,9 @@ export default {
 
   data () {
     return {
-      queries: ['/firewall?raw'],
+      queries: [
+        ['GET', '/firewall?raw']
+      ],
       serverError: '',
 
       // Ports tables data
@@ -145,7 +147,7 @@ export default {
   },
 
   methods: {
-    formatFirewallData (data) {
+    onQueriesResponse (data) {
       const ports = Object.values(data).reduce((ports, protocols) => {
         for (const type of ['TCP', 'UDP']) {
           for (const port of protocols[type]) {
@@ -181,7 +183,11 @@ export default {
         ).then(confirmed => {
           if (confirmed) {
             const method = action === 'open' ? 'post' : 'delete'
-            api[method](`/firewall/port?${connection}_only`, { port, protocol }).then(() => {
+            api[method](
+              `/firewall/port?${connection}_only`,
+              { port, protocol },
+              { wait: false }
+            ).then(() => {
               resolve(confirmed)
             }).catch(error => {
               reject(error)
@@ -198,10 +204,11 @@ export default {
       const confirmed = await this.$askConfirmation(this.$i18n.t('confirm_upnp_' + action))
       if (!confirmed) return
 
-      api.get('firewall/upnp?action=' + action).then(() => {
+      api.get('firewall/upnp?action=' + action, null, { websocket: true, wait: true }).then(() => {
         // FIXME Couldn't test when it works.
         this.$refs.view.fetchQueries()
       }).catch(err => {
+        if (err.name !== 'APIBadRequestError') throw err
         this.upnpError = err.message
       })
     },

app/src/views/tool/ToolLog.vue

@@ -1,6 +1,6 @@
 <template>
   <view-base
-    :queries="queries" @queries-response="formatLogData"
+    :queries="queries" @queries-response="onQueriesResponse"
     ref="view" skeleton="card-info-skeleton"
   >
     <!-- INFO CARD -->
@@ -90,12 +90,12 @@ export default {
         with_suboperations: '',
         number: this.numberOfLines
       })
-      return [`logs/${this.name}?${queryString}`]
+      return [['GET', `logs/${this.name}?${queryString}`]]
     }
   },
 
   methods: {
-    formatLogData (log) {
+    onQueriesResponse (log) {
       if (log.logs.length === this.numberOfLines) {
         this.moreLogsAvailable = true
         this.numberOfLines *= 10
@@ -125,7 +125,7 @@ export default {
     },
 
     shareLogs () {
-      api.get(`/logs/${this.name}?share`).then(({ url }) => {
+      api.get(`logs/${this.name}?share`, null, { websocket: true }).then(({ url }) => {
         window.open(url, '_blank')
       })
     }

app/src/views/tool/ToolLogs.vue

@@ -5,7 +5,7 @@
     :filtered-items="filteredOperations"
     items-name="logs"
     :queries="queries"
-    @queries-response="formatLogsData"
+    @queries-response="onQueriesResponse"
     skeleton="card-list-skeleton"
   >
     <card :title="$t('logs_operation')" icon="wrench" no-body>
@@ -32,7 +32,9 @@ export default {
 
   data () {
     return {
-      queries: [`logs?limit=${25}&with_details`],
+      queries: [
+        ['GET', `logs?limit=${25}&with_details`]
+      ],
       search: '',
       operations: undefined
     }
@@ -50,7 +52,7 @@ export default {
   },
 
   methods: {
-    formatLogsData ({ operation }) {
+    onQueriesResponse ({ operation }) {
       operation.forEach((log, index) => {
         if (log.success === '?') {
           operation[index].icon = 'question'

app/src/views/tool/ToolMigrations.vue

@@ -1,5 +1,5 @@
 <template>
-  <view-base :queries="queries" @queries-response="formatMigrationsData" ref="view">
+  <view-base :queries="queries" @queries-response="onQueriesResponse" ref="view">
     <!-- PENDING MIGRATIONS -->
     <card :title="$t('migrations_pending')" icon="cogs" no-body>
       <template #header-buttons v-if="pending">
@@ -90,8 +90,8 @@ export default {
   data () {
     return {
       queries: [
-        'migrations?pending',
-        'migrations?done'
+        ['GET', 'migrations?pending'],
+        ['GET', 'migrations?done']
       ],
       pending: undefined,
       done: undefined,
@@ -100,7 +100,7 @@ export default {
   },
 
   methods: {
-    formatMigrationsData ({ migrations: pending }, { migrations: done }) {
+    onQueriesResponse ({ migrations: pending }, { migrations: done }) {
       this.done = done.length ? done.reverse() : null
       pending.forEach(migration => {
         if (migration.disclaimer) {

app/src/views/tool/ToolPower.vue

@@ -1,16 +1,17 @@
 <template>
   <div>
-    <div v-if="inProcess">
+    <template v-if="canReconnect">
+      <b-alert variant="success" v-t="'tools_power_up'" />
+      <login-view />
+    </template>
+
+    <div v-else-if="inProcess">
       <b-alert variant="info" v-t="'tools_' + action + '_done'" />
 
       <b-alert variant="warning">
         <icon :iname="action === 'reboot' ? 'refresh' : 'power-off'" />
         {{ $t(action === 'reboot' ? 'tools_rebooting' : 'tools_shuttingdown') }}
       </b-alert>
-      <template v-if="canReconnect">
-        <b-alert variant="success" v-t="'tools_power_up'" />
-        <login-view />
-      </template>
     </div>
 
     <card v-else :title="$t('operations')" icon="wrench">
@@ -45,6 +46,10 @@ import LoginView from '@/views/Login'
 export default {
   name: 'ToolPower',
 
+  components: {
+    LoginView
+  },
+
   data () {
     return {
       action: '',
@@ -65,29 +70,29 @@ export default {
         // Use 'RESET_CONNECTED' and not 'DISCONNECT' else user will be redirect to login
         this.$store.dispatch('RESET_CONNECTED')
         this.inProcess = true
-        this.tryToReconnect()
+        return this.tryToReconnect(4000)
+      }).then(() => {
+        this.canReconnect = true
       })
     },
 
-    tryToReconnect () {
+    tryToReconnect (delay = 2000) {
       // FIXME need to be tested out of webpack-dev-server
-      setTimeout(() => {
-        // Try to get a response from the server after boot/reboot
-        // use `api.fetch` to not trigger base response handlers
-        api.fetch('GET', 'logout').then(response => {
-          // Server responds with `Unauthorized`, we can display the login input
-          if (response.status === 401) {
-            this.canReconnect = true
-          } else {
-            this.tryToReconnect()
-          }
-        }).catch(() => {
-          this.tryToReconnect()
-        })
-      }, 1000)
+      return new Promise(resolve => {
+        setTimeout(() => {
+          // Try to get a response from the server after boot/reboot
+          api.get('logout').catch(err => {
+            if (err.name === 'APIUnauthorizedError') {
+              // Means the server is accessible
+              resolve()
+            } else {
+              // FIXME could be improved by checking error types since yunohost
+              resolve(this.tryToReconnect())
+            }
+          })
+        }, delay)
+      })
     }
-  },
-
-  components: { LoginView }
+  }
  }
 </script>