feat: change structure
This commit is contained in:
172
app/pages/index.vue
Normal file
172
app/pages/index.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<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">
|
||||
<h2 class="title">Login</h2>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
v-model="username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
v-model="password"
|
||||
required
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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';
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
try {
|
||||
const res = await $fetch(`${window.location.origin}/api/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: {
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
source: 'login',
|
||||
panswer: captchaValue.value,
|
||||
redirect: encodedRedirect.toString()
|
||||
},
|
||||
credentials: 'include',
|
||||
throwHttpErrors: false, // important: do NOT throw on 401/4xx
|
||||
});
|
||||
|
||||
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;
|
||||
} else {
|
||||
captchaError.value = error?.data?.message || 'Internal server error!';
|
||||
// window.location.reload();
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
} finally {
|
||||
captchaRef.value?.refreshCaptcha();
|
||||
captchaValue.value = '';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.login-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);
|
||||
}
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
background-color: #3b82f6; /* blue-500 */
|
||||
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;
|
||||
}
|
||||
.input-group input {
|
||||
padding: 0.8rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.input-group input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
</style>
|
||||
74
app/pages/waiting.vue
Normal file
74
app/pages/waiting.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<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="`http://${ip}`" target="_blank">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 { 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 checkStatus = async () => {
|
||||
try {
|
||||
const res = await $fetch(`${window.location.origin}/api/status?name=${name}`);
|
||||
status.value = res.status;
|
||||
|
||||
if (res.status === 'ready') {
|
||||
ip.value = res.ip;
|
||||
clearInterval(interval.value);
|
||||
loading.value = false;
|
||||
// Redirect or show login link
|
||||
window.location.href= redirect ?? `http://${res.ip}`;
|
||||
}
|
||||
} catch (error) {
|
||||
loading.value = false;
|
||||
status.value = 'error';
|
||||
errorMessage.value = error?.data?.message || 'Internal server error!';
|
||||
clearInterval(interval.value);
|
||||
setTimeout( () => {
|
||||
router.replace(`/?auth=ok&redirect=${redirect}`);
|
||||
}, 3000);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
checkStatus();
|
||||
interval.value = setInterval(checkStatus, 3000); // Poll every 3s
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user