forked from urvishpatelce/lxd-app
112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<template>
|
|
<div class="page-wrapper">
|
|
<div class="waiting-container">
|
|
<h2>Container Status: {{ status }}</h2>
|
|
<p v-if="status === 'ready'">
|
|
Your container is ready! <a :href="openLink" target="_blank" rel="noopener">Open it</a>
|
|
</p>
|
|
<p v-else-if="status === 'running'">Waiting for services to be ready...</p>
|
|
<p v-else-if="status === 'starting'">Starting container...</p>
|
|
<p v-else-if="status === 'error'" class="error-text">{{ errorMessage }}</p>
|
|
</div>
|
|
<Spinner :loading="loading" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const name = String(route.query.name || '')
|
|
const handoff = typeof route.query.handoff === 'string' ? route.query.handoff : ''
|
|
const rawPath = typeof route.query.path === 'string' ? route.query.path : '/login'
|
|
|
|
function sanitizePath(p) {
|
|
if (typeof p !== 'string') return '/login'
|
|
if (p.startsWith('http://') || p.startsWith('https://')) return '/login'
|
|
if (!p.startsWith('/')) return '/login'
|
|
const allowed = new Set(['/', '/login', '/signin'])
|
|
const pathOnly = p.split('?')[0]
|
|
return allowed.has(pathOnly) ? p : '/login'
|
|
}
|
|
const safePath = sanitizePath(rawPath)
|
|
|
|
const loading = ref(true)
|
|
const status = ref('starting')
|
|
const ip = ref(null)
|
|
const interval = ref(null)
|
|
const errorMessage = ref(null)
|
|
|
|
const POLL_MS = 5000
|
|
|
|
const openLink = computed(() => (ip.value ? `http://${ip.value}` : '#'))
|
|
|
|
async function checkStatus () {
|
|
try {
|
|
const res = await $fetch(`${window.location.origin}/api/status?name=${encodeURIComponent(name)}`, {
|
|
method: 'GET',
|
|
cache: 'no-store'
|
|
})
|
|
|
|
status.value = res.status
|
|
if (res.ip) ip.value = res.ip
|
|
|
|
if (res.status === 'ready') {
|
|
if (interval.value) clearInterval(interval.value)
|
|
loading.value = false
|
|
|
|
// Prefer bridge handoff if we have an id; otherwise, just open container root.
|
|
if (handoff) {
|
|
const bridge = new URL(`${window.location.origin}/api/handoff/post`)
|
|
bridge.searchParams.set('name', name)
|
|
bridge.searchParams.set('handoff', handoff)
|
|
bridge.searchParams.set('path', safePath)
|
|
// Replace to avoid creating a back entry with sensitive navigation
|
|
window.location.replace(bridge.toString())
|
|
} else if (ip.value) {
|
|
window.location.replace(`http://${ip.value}`)
|
|
} else {
|
|
window.location.replace(`http://${window.location.host}`)
|
|
}
|
|
} else {
|
|
loading.value = true
|
|
}
|
|
} catch (error) {
|
|
loading.value = false
|
|
status.value = 'error'
|
|
errorMessage.value = error?.data?.message || 'Internal server error!'
|
|
|
|
if (interval.value) clearInterval(interval.value)
|
|
|
|
// Bounce back to app without leaking anything sensitive
|
|
setTimeout(() => {
|
|
router.replace(`/app/`)
|
|
}, 5000)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
checkStatus()
|
|
interval.value = setInterval(checkStatus, POLL_MS)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (interval.value) clearInterval(interval.value)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.waiting-container {
|
|
max-width: 100%;
|
|
width: 400px;
|
|
margin: 5rem auto;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
background: #f9fafb;
|
|
box-shadow: 0 4px 10px rgb(0 0 0 / 0.1);
|
|
}
|
|
.error-text { color: #b91c1c; }
|
|
</style> |