urvishpatelce/lxd-app
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update pass credentials to container

Browse Source
This commit is contained in:
Urvish Patel
2025-08-21 11:41:30 +02:00
parent 6c553bea8a
commit e96bcb7a94
4 changed files with 190 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
app/pages/index.vue
View File

@ -2,39 +2,41 @@
<div class="page-wrapper">
<Spinner :loading="loading" />
<div v-html="output" />
<!-- 👇 Only show form if access is allowed -->
<div v-if="!loading">
<div v-if="!loading">
<div v-if="allowAccess" class="login-container">
<form @submit.prevent="submitForm" class="login-form">
<form @submit.prevent="submitForm" class="login-form" autocomplete="on">
<h2 class="title">Login</h2>
<div class="input-group">
<input
type="text"
placeholder="Username"
v-model="username"
required
autocomplete="username"
inputmode="email"
/>
</div>
<div class="input-group">
<input
type="password"
placeholder="Password"
v-model="password"
required
autocomplete="current-password"
/>
</div>
<!-- Include Captcha -->
<Captcha ref="captchaRef" v-model:captcha="captchaValue" />
<button type="submit" :disabled="loading || !captchaValue" class="btn">
<span v-if="!loading">Login</span>
<span v-else>Loading...</span>
</button>
<br/>
<p v-if="captchaError" class="error-text">{{ captchaError }}</p>
</form>
</div>
<!-- 👇 Show this if the user did not come from an approved source -->
<div v-else class="login-container">
<h2 class="title">Access Denied</h2>
<p>You must access this page through the proper login flow.</p>
@ -44,83 +46,83 @@
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import Spinner from '@/components/Spinner.vue';
import Captcha from '@/components/Captcha.vue';
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Spinner from '@/components/Spinner.vue'
import Captcha from '@/components/Captcha.vue'
const output = ref('')
const router = useRouter()
const route = useRoute()
const loading = ref(true)
const username = ref('')
const password = ref('')
const captchaRef = ref(null)
const captchaValue = ref('')
const captchaError = ref('')
const allowAccess = ref(false)
const ALLOWED_REDIRECTS = new Set(['/', '/login', '/signin'])
function sanitizeRedirect(raw) {
if (typeof raw !== 'string') return '/login'
if (raw.startsWith('http://') || raw.startsWith('https://')) return '/login'
if (!raw.startsWith('/')) return '/login'
const pathOnly = raw.split('?')[0]
return ALLOWED_REDIRECTS.has(pathOnly) ? raw : '/login'
}
const output = ref('');
const router = useRouter();
const route = useRoute();
const loading = ref(true);
const username = ref('');
const password = ref('');
const captchaRef = ref(null);
const captchaValue = ref('');
const captchaError = ref('');
const redirectTo = ref('/');
const allowAccess = ref(false) // 🔐 This controls what to show
// 🟡 Grab redirect param on load
onMounted(() => {
const redirectParam = route.query.redirect;
const authParam = route.query.auth;
if (redirectParam && typeof redirectParam === 'string') {
redirectTo.value = decodeURIComponent(redirectParam);
}
// ✅ More reliable than document.referrer
if (authParam === 'ok') {
allowAccess.value = true;
}
loading.value = false;
});
allowAccess.value = true
loading.value = false
})
const submitForm = async () => {
loading.value = true;
output.value = '';
const encodedRedirect = new URL(redirectTo.value, window.location.origin);
encodedRedirect.searchParams.set('username', username.value);
encodedRedirect.searchParams.set('password', password.value);
loading.value = true
output.value = ''
captchaError.value = ''
// Read optional redirect from query but sanitize strictly
const requested = sanitizeRedirect(String(route.query.redirect || '/login'))
try {
// Optional CSRF token if you set one in a meta tag
const csrf = document.querySelector('meta[name="csrf-token"]')?.content
const res = await $fetch(`${window.location.origin}/api/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...(csrf ? { 'X-CSRF-Token': csrf } : {})
},
credentials: 'include',
body: {
username: username.value,
password: password.value,
source: 'login',
panswer: captchaValue.value,
redirect: encodedRedirect.toString()
redirect: requested
},
credentials: 'include',
throwHttpErrors: false, // important: do NOT throw on 401/4xx
});
throwHttpErrors: false
})
captchaError.value = '';
router.push(res.redirect);
// window.location.href = encodedRedirect.toString();
} catch (error) {
if (error.statusCode === 400) {
captchaError.value = error?.data?.message || 'Invalid CAPTCHA';
loading.value = false;
if (res?.status === 'success' && res?.redirect) {
router.push(res.redirect) // e.g. /waiting?name=...&handoff=...&path=/login
} else {
captchaError.value = error?.data?.message || 'Internal server error!';
// window.location.reload();
loading.value = false;
captchaError.value = res?.message || 'Login failed'
loading.value = false
}
} catch (error) {
captchaError.value = error?.data?.message || 'Internal server error!'
loading.value = false
} finally {
captchaRef.value?.refreshCaptcha();
captchaValue.value = '';
// scrub sensitive inputs
password.value = ''
captchaRef.value?.refreshCaptcha()
captchaValue.value = ''
}
};
}
</script>
<style scoped>
.login-container {
max-width: 100%;
@ -141,22 +143,15 @@ const submitForm = async () => {
padding: 0.8rem;
font-weight: 600;
font-size: 1.1rem;
background-color: #3b82f6; /* blue-500 */
background-color: #3b82f6;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover:not(:disabled) {
background-color: #2563eb; /* blue-600 */
}
.btn:disabled {
background-color: #93c5fd; /* blue-300 */
cursor: not-allowed;
}
.btn:hover:not(:disabled) { background-color: #2563eb; }
.btn:disabled { background-color: #93c5fd; cursor: not-allowed; }
.input-group input {
padding: 0.8rem;
border: 1px solid #ccc;
@ -166,7 +161,7 @@ const submitForm = async () => {
.input-group input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
box-shadow: 0 0 0 2px rgba(59,130,246,.3);
}
</style>
.error-text { color: #b91c1c; margin-top: .5rem; }
</style>

65
app/pages/waiting.vue
View File

@ -3,7 +3,7 @@
<div class="waiting-container">
<h2>Container Status: {{ status }}</h2>
<p v-if="status === 'ready'">
Your container is ready! <a :href="`http://${ip}`" target="_blank">Open it</a>
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>
@ -14,13 +14,25 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue' // <— sicher importieren
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const name = route.query.name
const redirect = route.query.redirect
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')
@ -28,41 +40,38 @@ const ip = ref(null)
const interval = ref(null)
const errorMessage = ref(null)
const POLL_MS = 3000
const POLL_MS = 5000
const checkStatus = async () => {
const openLink = computed(() => (ip.value ? `http://${ip.value}` : '#'))
async function checkStatus () {
try {
const res = await $fetch(`${window.location.origin}/api/status?name=${name}`, {
const res = await $fetch(`${window.location.origin}/api/status?name=${encodeURIComponent(name)}`, {
method: 'GET',
cache: 'no-store' // Browser-Cache umgehen
cache: 'no-store'
})
status.value = res.status
ip.value = res.ip ?? ip.value
// Optional: wenn der Container "aus" ist, hier Start triggern (API abhängig)
// if (res.status === 'stopped' || res.status === 'not_found') {
// await $fetch(`${window.location.origin}/api/start?name=${name}`, { method: 'POST' })
// status.value = 'starting'
// }
if (res.ip) ip.value = res.ip
if (res.status === 'ready') {
// Polling nur bei success beenden
if (interval.value) clearInterval(interval.value)
loading.value = false
ip.value = res.ip
// Redirect-Logik: wenn redirect gesetzt -> dahin; sonst zur Root oder zur IP
if (redirect) {
window.location.href = redirect.toString();
// 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 {
// Entweder auf die IP oder auf die Host-Root
// window.location.href = `http://${ip.value}`
window.location.href = `http://${window.location.host}`
window.location.replace(`http://${window.location.host}`)
}
} else {
// solange nicht ready: weiterladen anzeigen
loading.value = true
}
} catch (error) {
@ -72,17 +81,15 @@ const checkStatus = async () => {
if (interval.value) clearInterval(interval.value)
// nach kurzer Pause zurück zur App (Redirect-Param übernehmen)
// Bounce back to app without leaking anything sensitive
setTimeout(() => {
router.replace(`/app/?auth=ok&redirect=${redirect ?? ''}`)
router.replace(`/app/`)
}, 5000)
}
}
onMounted(() => {
checkStatus()
// WICHTIG: Intervall NICHT im checkStatus selbst löschen,
// sondern nur bei ready/error oder beim Unmount.
interval.value = setInterval(checkStatus, POLL_MS)
})