forked from urvishpatelce/lxd-app
Compare commits
2 Commits
c67b6dfb6a
...
e96bcb7a94
| Author | SHA1 | Date | |
|---|---|---|---|
| e96bcb7a94 | |||
| 6c553bea8a |
@ -10,6 +10,7 @@ use Psr\Http\Message\ServerRequestInterface as Request;
|
||||
use Psr\Http\Message\ResponseInterface as Response;
|
||||
use App\Controllers\CaptchaController;
|
||||
use App\Controllers\LoginController;
|
||||
use App\Controllers\HandoffController;
|
||||
use App\Services\LxdService;
|
||||
use Zounar\PHPProxy\Proxy;
|
||||
use App\Utils\LogWriterHelper;
|
||||
@ -71,7 +72,7 @@ $app->group('/api', function ($group) {
|
||||
$group->get('/captcha', [CaptchaController::class, 'get']);
|
||||
$group->post('/login', [LoginController::class, 'index']);
|
||||
$group->get('/status', [LoginController::class, 'status']);
|
||||
|
||||
$group->get('/handoff/post', [HandoffController::class, 'post']);
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
85
api/src/Controllers/HandoffController.php
Normal file
85
api/src/Controllers/HandoffController.php
Normal file
@ -0,0 +1,85 @@
|
||||
<?php
|
||||
|
||||
namespace App\Controllers;
|
||||
|
||||
use App\Services\LxdService;
|
||||
use Psr\Http\Message\ResponseInterface;
|
||||
use Psr\Http\Message\ServerRequestInterface;
|
||||
|
||||
class HandoffController
|
||||
{
|
||||
public function post(ServerRequestInterface $req, ResponseInterface $res): ResponseInterface
|
||||
{
|
||||
// if (session_status() !== PHP_SESSION_ACTIVE) { session_start(); }
|
||||
|
||||
$q = $req->getQueryParams();
|
||||
$name = (string)($q['name'] ?? '');
|
||||
$id = (string)($q['handoff'] ?? '');
|
||||
$path = (string)($q['path'] ?? '/login');
|
||||
|
||||
if (!$name || !$id) {
|
||||
return $this->html($res, 400, '<h1>Bad request</h1>');
|
||||
}
|
||||
|
||||
$lxd = new LxdService();
|
||||
$ip = $lxd->getContainerIP($name);
|
||||
if (!$ip) {
|
||||
return $this->html($res, 503, '<h1>Container not ready</h1>');
|
||||
}
|
||||
|
||||
$key = "handoff:$name:$id";
|
||||
$data = $_SESSION[$key] ?? null;
|
||||
unset($_SESSION[$key]); // one-time use
|
||||
|
||||
if (!$data || empty($data['username']) || empty($data['password'])) {
|
||||
return $this->html($res, 410, '<h1>Handoff expired</h1>');
|
||||
}
|
||||
|
||||
// Restrict to relative paths
|
||||
$path = $this->sanitizePath($path);
|
||||
|
||||
// If your container has TLS, prefer https://
|
||||
$action = 'http://' . $ip . $path;
|
||||
|
||||
$html = <<<HTML
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head><meta charset="utf-8"><title>Signing you in…</title></head>
|
||||
<body>
|
||||
<form id="f" method="POST" action="{$this->e($action)}">
|
||||
<input type="hidden" name="username" value="{$this->e($data['username'])}">
|
||||
<input type="hidden" name="password" value="{$this->e($data['password'])}">
|
||||
</form>
|
||||
<script>document.getElementById('f').submit();</script>
|
||||
<noscript>
|
||||
<p>JavaScript is required to continue. Click the button below.</p>
|
||||
<button form="f" type="submit">Continue</button>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
HTML;
|
||||
|
||||
return $this->html($res, 200, $html);
|
||||
}
|
||||
|
||||
private function e(string $s): string
|
||||
{
|
||||
return htmlspecialchars($s, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
|
||||
}
|
||||
|
||||
private function html(ResponseInterface $res, int $code, string $html): ResponseInterface
|
||||
{
|
||||
$res->getBody()->write($html);
|
||||
return $res->withHeader('Content-Type', 'text/html; charset=utf-8')->withStatus($code);
|
||||
}
|
||||
|
||||
private function sanitizePath(string $raw): string
|
||||
{
|
||||
if (preg_match('#^https?://#i', $raw)) return '/login';
|
||||
if (!str_starts_with($raw, '/')) return '/login';
|
||||
$path = parse_url($raw, PHP_URL_PATH) ?? '/login';
|
||||
$allow = ['/', '/login', '/signin'];
|
||||
return in_array($path, $allow, true) ? $path : '/login';
|
||||
}
|
||||
}
|
||||
|
||||
@ -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="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);
|
||||
}
|
||||
|
||||
.error-text { color: #b91c1c; margin-top: .5rem; }
|
||||
</style>
|
||||
@ -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,53 +14,90 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
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 loading = ref(true);
|
||||
const status = ref('starting');
|
||||
const ip = ref(null);
|
||||
const interval = ref(null);
|
||||
const errorMessage = ref(null);
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const checkStatus = async () => {
|
||||
try {
|
||||
const res = await $fetch(`${window.location.origin}/api/status?name=${name}`);
|
||||
status.value = res.status;
|
||||
if (interval.value) {
|
||||
clearInterval(interval.value);
|
||||
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') {
|
||||
ip.value = res.ip;
|
||||
// Redirect or show login link
|
||||
window.location.href= 'http://'+ window.location.host;
|
||||
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!';
|
||||
clearInterval(interval.value);
|
||||
setTimeout( () => {
|
||||
router.replace(`/app/?auth=ok&redirect=${redirect}`);
|
||||
}, 5000);
|
||||
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, 3000); // Poll every 3s
|
||||
});
|
||||
checkStatus()
|
||||
interval.value = setInterval(checkStatus, POLL_MS)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (interval.value) {
|
||||
clearInterval(interval.value);
|
||||
}
|
||||
});
|
||||
if (interval.value) clearInterval(interval.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.waiting-container {
|
||||
max-width: 100%;
|
||||
@ -71,6 +108,5 @@ onUnmounted(() => {
|
||||
background: #f9fafb;
|
||||
box-shadow: 0 4px 10px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
.error-text { color: #b91c1c; }
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user