ots/src/app.vue
Knut Ahlers 8c0807d486
Port frontend to Bootstrap 5.3, split components
Signed-off-by: Knut Ahlers <knut@ahlers.me>
2023-09-30 23:18:34 +02:00

93 lines
1.7 KiB
Vue

<!-- eslint-disable vue/no-v-html -->
<template>
<div id="app">
<app-navbar />
<div class="container mt-4">
<div
v-if="error"
class="row justify-content-center"
>
<div class="col-8">
<div
class="alert alert-danger"
role="alert"
v-html="error"
/>
</div>
</div>
<div class="row">
<div class="col">
<router-view @error="displayError" />
</div>
</div>
<div class="row mt-4">
<div class="col form-text text-center">
{{ $t('text-powered-by') }}
<a href="https://github.com/Luzifer/ots"><i class="fab fa-github" /> OTS</a>
{{ $root.version }}
</div>
</div>
</div>
</div>
</template>
<script>
import AppNavbar from './components/navbar.vue'
export default {
components: {
AppNavbar,
},
created() {
this.$root.navigate('/')
},
data() {
return {
error: '',
}
},
methods: {
displayError(error) {
this.error = error
},
// hashLoad reacts on a changed window hash an starts the diplaying of the secret
hashLoad() {
const hash = decodeURIComponent(window.location.hash)
if (hash.length === 0) {
return
}
const parts = hash.substring(1).split('|')
const secretId = parts[0]
let securePassword = null
if (parts.length === 2) {
securePassword = parts[1]
}
this.$root.navigate({
path: '/secret',
query: {
secretId,
securePassword,
},
})
},
},
// Trigger initialization functions
mounted() {
window.onhashchange = this.hashLoad
this.hashLoad()
},
name: 'App',
}
</script>