update ViewBase to use api.fetchAll, Login and PostInstall

This commit is contained in:
axolotle 2021-02-19 18:38:57 +01:00
parent 9bc365f32a
commit 90636231e2
3 changed files with 49 additions and 63 deletions

View file

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

View file

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

View file

@ -48,28 +48,25 @@
<p class="alert alert-success"> <p class="alert alert-success">
<icon iname="thumbs-up" /> {{ $t('installation_complete') }} <icon iname="thumbs-up" /> {{ $t('installation_complete') }}
</p> </p>
<login-view /> <login />
</template> </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> </div>
</template> </template>
<script> <script>
import api from '@/api' import api from '@/api'
import { DomainForm, PasswordForm } from '@/views/_partials' import { DomainForm, PasswordForm } from '@/views/_partials'
import LoginView from '@/views/Login' import Login from '@/views/Login'
export default { export default {
name: 'PostInstall', name: 'PostInstall',
components: {
DomainForm,
PasswordForm,
Login
},
data () { data () {
return { return {
step: 'start', step: 'start',
@ -84,9 +81,13 @@ export default {
this.step = 'password' this.step = 'password'
}, },
setPassword ({ password }) { async setPassword ({ password }) {
this.password = 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 () { performPostInstall () {
@ -104,12 +105,6 @@ export default {
this.$router.push({ name: 'home' }) this.$router.push({ name: 'home' })
} }
}) })
},
components: {
DomainForm,
PasswordForm,
LoginView
} }
} }
</script> </script>