update SystemUpgrade and ToolPower component to use ReconnectingDisplay

app/src/i18n/locales/en.json

@@ -27,6 +27,8 @@
           "failed": "Looks like the server is not responding. You can try to reconnect again or try to run `systemctl restart yunohost-api` thru ssh.",
           "reason": {
             "unknown": "Connection with the server has been closed for unknown reasons.",
+            "reboot": "Your server is rebooting and will not be reachable for some time. A login prompt will be available as soon as the server is reachable.",
+            "shutdown": "Your server is shutting down and is no longer reachable. Turn it back on and a login prompt will be available as soon as the server is reachable.",
             "upgrade_system": "Connection with the server has been closed due to yunohost upgrade. Waiting for the server to be reachable again…"
           },
           "success": "The server is now reachable! You can try to login"
@@ -484,15 +486,10 @@
     "tools_adminpw": "Change administration password",
     "tools_adminpw_current": "Current password",
     "tools_adminpw_current_placeholder": "Enter your current password",
-    "tools_power_up": "Your server seems to be accessible, you can now try to login.",
     "tools_reboot": "Reboot your server",
     "tools_reboot_btn": "Reboot",
-    "tools_reboot_done": "Rebooting...",
-    "tools_rebooting": "Your server is rebooting. To return to the web administration interface you need to wait for your server to be up. You can wait for the login form to show up or check by refreshing this page (F5).",
     "tools_shutdown": "Shutdown your server",
     "tools_shutdown_btn": "Shutdown",
-    "tools_shutdown_done": "Shutting down...",
-    "tools_shuttingdown": "Your server is powering off. As long as your server is off, you won't be able to use the web administration.",
     "tools_shutdown_reboot": "Shutdown/Reboot",
     "tools_webadmin": {
         "language": "Language",

app/src/views/tool/ToolPower.vue

@@ -1,63 +1,35 @@
 <template>
-  <div>
-    <template v-if="canReconnect">
-      <b-alert variant="success" v-t="'tools_power_up'" />
-      <login-view />
-    </template>
+  <card :title="$t('operations')" icon="wrench">
+    <!-- REBOOT -->
+    <b-form-group
+      label-cols="5" label-cols-md="4" label-cols-lg="3"
+      :label="$t('tools_reboot')" label-for="reboot"
+    >
+      <b-button @click="triggerAction('reboot')" variant="danger" id="reboot">
+        <icon iname="refresh" /> {{ $t('tools_reboot_btn') }}
+      </b-button>
+    </b-form-group>
+    <hr>
 
-    <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>
-    </div>
-
-    <card v-else :title="$t('operations')" icon="wrench">
-      <!-- REBOOT -->
-      <b-form-group
-        label-cols="5" label-cols-md="4" label-cols-lg="3"
-        :label="$t('tools_reboot')" label-for="reboot"
-      >
-        <b-button @click="triggerAction('reboot')" variant="danger" id="reboot">
-          <icon iname="refresh" /> {{ $t('tools_reboot_btn') }}
-        </b-button>
-      </b-form-group>
-      <hr>
-
-      <!-- SHUTDOWN -->
-      <b-form-group
-        label-cols="5" label-cols-md="4" label-cols-lg="3"
-        :label="$t('tools_shutdown')" label-for="shutdown"
-      >
-        <b-button @click="triggerAction('shutdown')" variant="danger" id="shutdown">
-          <icon iname="power-off" /> {{ $t('tools_shutdown_btn') }}
-        </b-button>
-      </b-form-group>
-    </card>
-  </div>
+    <!-- SHUTDOWN -->
+    <b-form-group
+      label-cols="5" label-cols-md="4" label-cols-lg="3"
+      :label="$t('tools_shutdown')" label-for="shutdown"
+    >
+      <b-button @click="triggerAction('shutdown')" variant="danger" id="shutdown">
+        <icon iname="power-off" /> {{ $t('tools_shutdown_btn') }}
+      </b-button>
+    </b-form-group>
+  </card>
 </template>
 
 <script>
 import api from '@/api'
-import LoginView from '@/views/Login'
+
 
 export default {
   name: 'ToolPower',
 
-  components: {
-    LoginView
-  },
-
-  data () {
-    return {
-      action: '',
-      inProcess: false,
-      canReconnect: false
-    }
-  },
-
   methods: {
     async triggerAction (action) {
       const confirmed = await this.$askConfirmation(
@@ -67,30 +39,8 @@ export default {
 
       this.action = action
       api.put(action + '?force', {}, action).then(() => {
-        // Use 'RESET_CONNECTED' and not 'DISCONNECT' else user will be redirect to login
-        this.$store.dispatch('RESET_CONNECTED')
-        this.inProcess = true
-        return this.tryToReconnect(4000)
-      }).then(() => {
-        this.canReconnect = true
-      })
-    },
-
-    tryToReconnect (delay = 2000) {
-      // FIXME need to be tested out of webpack-dev-server
-      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)
+        const delay = action === 'reboot' ? 4000 : 10000
+        this.$store.dispatch('TRY_TO_RECONNECT', { attemps: Infinity, origin: action, delay })
       })
     }
   }

app/src/views/update/SystemUpdate.vue

@@ -103,7 +103,7 @@ export default {
           this.apps = null
         } else {
           if (this.system.some(({ name }) => name.includes('yunohost'))) {
-            this.$store.dispatch('TRY_TO_RECONNECT')
+            this.$store.dispatch('TRY_TO_RECONNECT', { attemps: 1, origin: 'upgrade_system', initialDelay: 2000 })
           }
           this.system = null
         }