forked from urvishpatelce/lxd-app
55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<div class="page-wrapper">
|
|
<Spinner :loading="loading" />
|
|
<div v-html="output" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import Spinner from '@/components/Spinner.vue';
|
|
|
|
const router = useRouter();
|
|
|
|
const loading = ref(true);
|
|
const output = ref('');
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const config = useRuntimeConfig();
|
|
// fetch without forcing responseType to text, so it defaults to JSON if possible
|
|
const res = await $fetch(`${config.public.apiUrl}/proxy`);
|
|
|
|
if (typeof res === 'object') {
|
|
if(res?.status === "not-found"){
|
|
router.push('/login');
|
|
}else{
|
|
// pretty print JSON response
|
|
output.value = `<pre>${JSON.stringify(res, null, 2)}</pre>`;
|
|
}
|
|
} else {
|
|
// treat as plain text or HTML
|
|
output.value = res;
|
|
}
|
|
} catch (error) {
|
|
output.value = `<p style="color:red;">Container access failed.</p>`;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-wrapper {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
text-align: center;
|
|
}
|
|
</style> |