update ViewBase to use api.fetchAll, Login and PostInstall

app/src/components/globals/ViewBase.vue

@@ -33,6 +33,7 @@ export default {
 
   props: {
     queries: { type: Array, default: null },
+    queriesWait: { type: Boolean, default: false },
     skeleton: { type: [String, Array], default: null },
     // Optional prop to take control of the loading value
     loading: { type: Boolean, default: null }
@@ -61,16 +62,11 @@ export default {
         this.fallback_loading = true
       }
 
-      const [apiQueries, storeQueries] = this.queries.reduce((types, query) => {
-        types[typeof query === 'string' ? 0 : 1].push(query)
-        return types
-      }, [[], []])
-
-      Promise.all([
-        api.getAll(apiQueries),
-        this.$store.dispatch('FETCH_ALL', storeQueries)
-      ]).then(([apiResponses, storeResponses]) => {
-        this.$emit('queries-response', ...apiResponses, ...storeResponses)
+      api.fetchAll(
+        this.queries,
+        { wait: this.queriesWait, initial: true }
+      ).then(responses => {
+        this.$emit('queries-response', ...responses)
         this.fallback_loading = false
       })
     }

app/src/views/Login.vue

@@ -1,35 +1,31 @@
 <template>
-  <div class="login">
-    <b-alert v-if="apiError" variant="danger">
-      <icon iname="exclamation-triangle" /> {{ $t(apiError) }}
-    </b-alert>
+  <b-form @submit.prevent="login">
+    <b-input-group>
+      <template v-slot:prepend>
+        <b-input-group-text>
+          <label class="sr-only" for="input-password">{{ $t('password') }}</label>
+          <icon iname="lock" class="sm" />
+        </b-input-group-text>
+      </template>
 
-    <b-form @submit.prevent="login">
-      <!-- FIXME add hidden domain input ? -->
-      <b-input-group>
-        <template v-slot:prepend>
-          <b-input-group-text>
-            <label class="sr-only" for="input-password">{{ $t('password') }}</label>
-            <icon iname="lock" class="sm" />
-          </b-input-group-text>
-        </template>
-        <b-form-input
-          id="input-password"
-          required type="password"
-          v-model="password" :disabled="disabled"
-          :placeholder="$t('administration_password')" :state="isValid"
-        />
-        <template v-slot:append>
-          <b-button type="submit" variant="success" :disabled="disabled">
-            {{ $t('login') }}
-          </b-button>
-        </template>
-      </b-input-group>
-      <b-form-invalid-feedback :state="isValid">
-        {{ $t('wrong_password') }}
-      </b-form-invalid-feedback>
-    </b-form>
-  </div>
+      <b-form-input
+        id="input-password"
+        required type="password"
+        v-model="password"
+        :placeholder="$t('administration_password')" :state="isValid"
+      />
+
+      <template v-slot:append>
+        <b-button type="submit" variant="success" :disabled="disabled">
+          {{ $t('login') }}
+        </b-button>
+      </template>
+    </b-input-group>
+
+    <b-form-invalid-feedback :state="isValid">
+      {{ $t('wrong_password') }}
+    </b-form-invalid-feedback>
+  </b-form>
 </template>
 
 <script>
@@ -38,7 +34,7 @@ export default {
 
   data () {
     return {
-      disabled: false,
+      disabled: true,
       password: '',
       isValid: null,
       apiError: undefined
@@ -47,7 +43,8 @@ export default {
 
   methods: {
     login () {
-      this.$store.dispatch('LOGIN', this.password).catch(() => {
+      this.$store.dispatch('LOGIN', this.password).catch(err => {
+        if (err.name !== 'APIUnauthorizedError') throw err
         this.isValid = false
       })
     }
@@ -60,8 +57,6 @@ export default {
       } else {
         this.$router.push({ name: 'post-install' })
       }
-    }).catch(err => {
-      this.apiError = err.message
     })
   }
 }

app/src/views/PostInstall.vue

@@ -48,28 +48,25 @@
       <p class="alert alert-success">
         <icon iname="thumbs-up" /> {{ $t('installation_complete') }}
       </p>
-      <login-view />
+      <login />
     </template>
-
-    <!-- CONFIRM POST-INSTALL MODAL -->
-    <b-modal
-      ref="post-install-modal" id="post-install-modal" centered
-      body-bg-variant="danger" body-text-variant="light"
-      @ok="performPostInstall" hide-header
-    >
-      {{ $t('confirm_postinstall', { domain }) }}
-    </b-modal>
   </div>
 </template>
 
 <script>
 import api from '@/api'
 import { DomainForm, PasswordForm } from '@/views/_partials'
-import LoginView from '@/views/Login'
+import Login from '@/views/Login'
 
 export default {
   name: 'PostInstall',
 
+  components: {
+    DomainForm,
+    PasswordForm,
+    Login
+  },
+
   data () {
     return {
       step: 'start',
@@ -84,9 +81,13 @@ export default {
       this.step = 'password'
     },
 
-    setPassword ({ password }) {
+    async setPassword ({ password }) {
       this.password = password
-      this.$refs['post-install-modal'].show()
+      const confirmed = await this.$askConfirmation(
+        this.$i18n.t('confirm_postinstall', { domain: this.domain })
+      )
+      if (!confirmed) return
+      this.performPostInstall()
     },
 
     performPostInstall () {
@@ -104,12 +105,6 @@ export default {
         this.$router.push({ name: 'home' })
       }
     })
-  },
-
-  components: {
-    DomainForm,
-    PasswordForm,
-    LoginView
   }
 }
 </script>