yunohost-admin/app/src/views/_partials/ReconnectingDisplay.vue

<template>
  <!-- This card receives style from `ViewLockOverlay` if used inside it -->
  <BCardBody>
    <BCardTitle class="text-center my-4" v-t="'api.reconnecting.title'" />

    <template v-if="status === 'reconnecting'">
      <YSpinner class="mb-4" />

      <BAlert
        v-if="origin"
        v-t="'api.reconnecting.reason.' + origin"
        :variant="origin === 'unknow' ? 'warning' : 'info'"
      />
    </template>

    <template v-if="status === 'failed'">
      <BAlert variant="danger">
        <MarkdownItem :label="$t('api.reconnecting.failed')" />
      </BAlert>

      <div class="d-flex justify-content-end">
        <BButton
          variant="success" v-t="'retry'" class="ml-auto"
          @click="tryToReconnect()"
        />
      </div>
    </template>

    <template v-if="status === 'success'">
      <BAlert variant="success" v-t="'api.reconnecting.success'" />

      <LoginView force-reload />
    </template>
  </BCardBody>
</template>

<script>
import { mapGetters } from 'vuex'

import api from '@/api'
import LoginView from '@/views/LoginView.vue'


export default {
  name: 'ReconnectingDisplay',

  components: {
    LoginView
  },

  data () {
    return {
      status: 'reconnecting',
      origin: undefined
    }
  },

  computed: {
    ...mapGetters(['reconnecting'])
  },

  methods: {
    tryToReconnect (initialDelay = 0) {
      this.status = 'reconnecting'
      api.tryToReconnect({ ...this.reconnecting, initialDelay }).then(() => {
        this.status = 'success'
      }).catch(() => {
        this.status = 'failed'
      })
    }
  },

  created () {
    this.origin = this.reconnecting.origin || 'unknown'
    this.tryToReconnect(this.reconnecting.initialDelay)
  }
}
</script>