Enable the Vue 3 front-end

This commit is contained in:
Bubka
2023-12-01 15:29:26 +01:00
parent ffde1723d4
commit 9efb54adf4
146 changed files with 2000 additions and 9387 deletions

View File

@ -1,42 +1,44 @@
<script setup>
import systemService from '@/services/systemService'
import { useAppSettingsStore } from '@/stores/appSettings'
const appSettings = useAppSettingsStore()
const isScanning = ref(false)
const isUpToDate = ref()
async function getLatestRelease() {
isScanning.value = true;
isUpToDate.value = undefined
await systemService.getLastRelease({returnError: true})
.then(response => {
appSettings.latestRelease = response.data.newRelease
isUpToDate.value = response.data.newRelease === false
})
.catch(() => {
isUpToDate.value = null
})
isScanning.value = false;
}
</script>
<template>
<div class="columns is-mobile is-vcentered">
<div class="column is-narrow">
<button type="button" :class="isScanning ? 'is-loading' : ''" class="button is-link is-rounded is-small" @click="getLatestRelease">Check now</button>
</div>
<div class="column">
<span v-if="$root.appSettings.latestRelease" class="mt-2 has-text-warning">
<span class="release-flag"></span>{{ $root.appSettings.latestRelease }} is available <a class="is-size-7" href="https://github.com/Bubka/2FAuth/releases">View on Github</a>
<span v-if="appSettings.latestRelease" class="mt-2 has-text-warning">
<span class="release-flag"></span>{{ appSettings.latestRelease }} is available <a class="is-size-7" href="https://github.com/Bubka/2FAuth/releases">View on Github</a>
</span>
<span v-if="isUpToDate" class="has-text-grey">
{{ $t('commons.you_are_up_to_date') }}
<FontAwesomeIcon :icon="['fas', 'check']" class="mr-1 has-text-success" /> {{ $t('commons.you_are_up_to_date') }}
</span>
<span v-else-if="isUpToDate === null" class="has-text-grey">
<FontAwesomeIcon :icon="['fas', 'times']" class="mr-1 has-text-danger" />{{ $t('errors.check_failed_try_later') }}
</span>
</div>
</div>
</template>
<script>
export default {
name: 'VersionChecker',
data() {
return {
isScanning: false,
isUpToDate: null,
}
},
methods: {
async getLatestRelease() {
this.isScanning = true;
await this.axios.get('/latestRelease').then(response => {
this.$root.appSettings['latestRelease'] = response.data.newRelease
this.isUpToDate = response.data.newRelease === false
})
this.isScanning = false;
},
}
}
</script>