YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: rework ModalReconnecting to new requests

Browse source
This commit is contained in:
axolotle 2024-08-05 17:15:19 +02:00
parent 24b28b397f
commit 0cf60eab98
1 changed files with 51 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
app/src/components/modals/ModalReconnecting.vue
View file

@ -1,74 +1,84 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import api from '@/api' import api from '@/api'
import { useStoreGetters } from '@/store/utils' import ModalOverlay from '@/components/modals/ModalOverlay.vue'
import type { APIRequest, ReconnectingArgs } from '@/composables/useRequests'
import LoginView from '@/views/LoginView.vue' import LoginView from '@/views/LoginView.vue'
const store = useStore() const props = defineProps<{
reconnecting: ReconnectingArgs
}>()
const { reconnecting } = useStoreGetters() const emit = defineEmits<{
const status = ref('reconnecting') dismiss: [value: boolean]
const origin = ref(reconnecting.value.origin || 'unknown') }>()
function tryToReconnect(initialDelay = 0) { const request = reactive<{
status.value = 'reconnecting' humanRoute: APIRequest['humanRoute']
status: APIRequest['status']
subStatus?: 'expired' | 'failed'
}>({
status: 'pending',
// FIXME translate
humanRoute: 'reconnecting',
})
function tryToReconnect() {
request.status = 'pending'
request.subStatus = undefined
api api
.tryToReconnect({ ...reconnecting.value, initialDelay }) .tryToReconnect(props.reconnecting)
.then(() => { .then(() => {
store.commit('SET_RECONNECTING', null) emit('dismiss', true)
}) })
.catch((err) => { .catch((err) => {
if (err.name === 'APIUnauthorizedError') { if (err.name === 'APIUnauthorizedError') {
status.value = 'expired' request.status = 'success'
request.subStatus = 'expired'
} else { } else {
status.value = 'failed' request.status = 'error'
request.subStatus = 'failed'
} }
}) })
} }
tryToReconnect(reconnecting.value.initialDelay) onMounted(() => {
tryToReconnect()
})
</script> </script>
<template> <template>
<!-- This card receives style from `ViewLockOverlay` if used inside it --> <ModalOverlay
<BCardBody> :request="request as APIRequest"
<BCardTitle class="text-center my-4" v-t="'api.reconnecting.title'" /> footer-variant="danger"
:hide-footer="request.subStatus !== 'failed'"
>
<h5 v-t="'api.reconnecting.title'" class="text-center my-4" />
<template v-if="status === 'reconnecting'"> <template v-if="request.status === 'pending'">
<YSpinner class="mb-4" /> <YSpinner class="mb-4" />
<BAlert <YAlert
:modelValue="!!origin" v-if="!!reconnecting.origin"
v-t="'api.reconnecting.reason.' + origin" v-t="'api.reconnecting.reason.' + reconnecting.origin"
:variant="origin === 'unknow' ? 'warning' : 'info'" :variant="reconnecting.origin === 'unknown' ? 'warning' : 'info'"
/> />
</template> </template>
<template v-if="status === 'failed'"> <template v-if="request.subStatus === 'failed'">
<BAlert :modelValue="true" variant="danger"> <YAlert variant="danger">
<MarkdownItem :label="$t('api.reconnecting.failed')" /> <MarkdownItem :label="$t('api.reconnecting.failed')" />
</BAlert> </YAlert>
</template>
<div class="d-flex justify-content-end"> <template v-if="request.subStatus === 'failed'" #footer>
<BButton <BButton v-t="'retry'" variant="light" @click="tryToReconnect()" />
variant="success"
v-t="'retry'"
class="ms-auto"
@click="tryToReconnect()"
/>
</div>
</template> </template>
<template v-if="status === 'expired'"> <template v-if="request.subStatus === 'expired'">
<BAlert <YAlert v-t="'api.reconnecting.success'" variant="success" />
:modelValue="true"
variant="success"
v-t="'api.reconnecting.session_expired'"
/>
<LoginView force-reload /> <LoginView force-reload />
</template> </template>
</BCardBody> </ModalOverlay>
</template> </template>