feat: change structure

app/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

app/README.md

@@ -0,0 +1,92 @@
+# LXD Frontend (Nuxt.js)
+
+This is the **frontend Nuxt.js** application that works with the [LXD Proxy API](../backend/README.md) to dynamically provision LXD containers based on subdomain access and user CAPTCHA validation.
+
+---
+
+## 🌐 Overview
+
+- Each user has a subdomain (e.g., `testone.lxdapp.local`)
+- On visiting the subdomain, a login page prompts for CAPTCHA
+- Upon successful CAPTCHA, a request is made to the backend to:
+  - Create or start an LXD container
+  - Wait until it's ready
+  - Proxy user to the container
+
+---
+
+## 🧩 Features
+
+- Subdomain-aware dynamic environment provisioning
+- CAPTCHA login screen for triggering container creation
+- API integration with backend (Slim PHP) service
+- Axios-based POST to `/api/`
+
+---
+
+## 🛠 Project Setup
+
+1. **Install dependencies**
+   ```bash
+   npm install
+
+2. **Run the development server**
+    ```bash
+    npm run dev
+
+3. **Visit the subdomain**
+
+    http://testone.lxdapp.local:3000
+
+    ⚠️ Make sure this domain is mapped in /etc/hosts and that the backend is running on the correct origin.
+
+
+**🗂 Project Structure**
+    
+app/
+├── pages/
+│   └── index.vue            # Login screen
+├── plugins/
+│   └── axios.js             # Axios config (if used)
+├── nuxt.config.js           # App config
+├── static/
+│   └── favicon.ico
+├── package.json
+└── README.md
+
+
+**🔐 CAPTCHA Flow**
+
+User opens subdomain: testone.lxdapp.local
+
+Enters the CAPTCHA value
+
+Form submits:
+
+POST /api/login with JSON payload:
+        
+    {
+    "source": "login",
+    "panswer": "abc123"
+    }
+
+Adds header:
+
+    Origin: http://testone.lxdapp.local
+
+**Backend:**
+
+    Validates CAPTCHA
+
+    Creates or starts container
+
+    Responds with container IP proxy
+
+
+**🧪 Development Notes**
+
+    config.json in backend maps subdomain to LXD container
+
+    This frontend app assumes the backend is on the same subdomain
+
+    If needed, configure proxy in nuxt.config.js or use relative API paths

app/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtPage />
+  </div>
+</template>

app/assets/css/common.css

@@ -0,0 +1,33 @@
+*{
+  box-sizing: border-box;
+}
+body{
+  position: relative;
+  padding: 0px;
+  margin: 0px;
+  overflow-x: hidden;
+}
+.page-wrapper {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+}
+.title {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+  font-size: 1.8rem;
+  color: #222;
+}
+.error-text {
+  color: red;
+  font-size: 0.95rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}

app/components/Captcha.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="captcha-wrapper">
+    <div class="captcha-container">
+      <input v-model="captchaInput" placeholder="Enter code" class="form-control"/>
+      
+      <img
+        v-show="captchaLoaded"
+        :src="captchaUrl"
+        alt="CAPTCHA"
+        @load="onCaptchaLoad"
+      />
+      
+      <FontAwesomeIcon icon="fa-solid fa-sync-alt" class="refresh-icon" @click="refreshCaptcha" />
+    </div>
+  </div>
+</template>
+
+
+
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+
+// 👇 Use apiUrl from runtime config
+const captchaUrl = ref('');  // initially empty
+const captchaLoaded = ref(false);
+const captchaInput = ref('');
+
+onMounted(() => {
+  loadCaptcha();
+});
+
+const loadCaptcha = () => {
+  captchaLoaded.value = false;
+  captchaUrl.value = `${window.location.origin}/api/captcha?${Date.now()}`;
+};
+
+const refreshCaptcha = () => {
+  loadCaptcha();
+};
+
+const onCaptchaLoad = () => {
+  captchaLoaded.value = true;
+};
+
+// Emit to parent whenever input changes
+const emit = defineEmits(['update:captcha']);
+
+watch(captchaInput, (newVal) => {
+  emit('update:captcha', newVal)
+});
+
+defineExpose({
+  refreshCaptcha
+});
+</script>
+
+<style scoped>
+.captcha-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.captcha-container {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  gap:10px;
+}
+
+.captcha-container img {
+  max-height: 40px;
+  border-radius: 4px;
+}
+
+.refresh-icon {
+  font-size: 1.2rem;
+  cursor: pointer;
+  color: #3b82f6;
+}
+
+.refresh-icon:hover {
+  color: #2563eb;
+}
+.form-control {
+  display: inline-block;
+  width: 50%;
+  flex:1;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control:focus {
+  color: #212529;
+  background-color: #fff;
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.btn {
+  width: 100%;
+  padding: 0.8rem;
+  font-weight: 600;
+  font-size: 1.1rem;
+  background-color: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.btn:hover:not(:disabled) {
+  background-color: #2563eb;
+}
+
+.btn:disabled {
+  background-color: #93c5fd;
+  cursor: not-allowed;
+}
+</style>

app/components/Spinner.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="loader-overlay" v-if="loading">
+    <div class="spinner"></div>
+  </div>
+</template>
+
+<script setup>
+// Accept a `loading` prop to control visibility
+defineProps({
+  loading: {
+    type: Boolean,
+    default: true
+  }
+});
+</script>
+
+<style scoped>
+.loader-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(255, 255, 255, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.spinner {
+  border: 5px solid #ccc;
+  border-top-color: #1e88e5; /* blue color */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+}
+
+/* Spin animation */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

app/nuxt.config.ts

@@ -0,0 +1,19 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  app: {
+    baseURL: '/app/'  // This replaces router.base from Nuxt 2
+  },
+  ssr: true,
+  compatibilityDate: '2025-05-15',
+  devtools: { enabled: true },
+  runtimeConfig: {
+    public: {
+      siteUrl: process.env.SITE_URL,
+      backendUrl: process.env.BACKEND_URL,
+      apiUrl: `${process.env.BACKEND_URL}/api`
+    }
+  },
+  css: [
+    '~/assets/css/common.css'  // Path to your global CSS file
+  ],
+})

app/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --host 0.0.0.0",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "nuxt": "^3.17.6",
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
+  }
+}

app/pages/index.vue

@@ -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>

app/pages/waiting.vue

@@ -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>
+
+

app/plugins/fontawesome.client.ts

@@ -0,0 +1,10 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
+
+// Add the icons you need
+library.add(faSyncAlt)
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('FontAwesomeIcon', FontAwesomeIcon)
+})

app/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

app/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

app/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}