initialize Project

frontend/.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

frontend/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., `customer1.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/v1/proxy`
+
+---
+
+## 🛠 Project Setup
+
+1. **Install dependencies**
+   ```bash
+   npm install
+
+2. **Run the development server**
+    ```bash
+    npm run dev
+
+3. **Visit the subdomain**
+
+    http://customer1.lxdapp.local:3000
+
+    ⚠️ Make sure this domain is mapped in /etc/hosts and that the backend is running on the correct origin.
+
+
+**🗂 Project Structure**
+    
+frontend/
+├── 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: customer1.lxdapp.local
+
+Enters the CAPTCHA value
+
+Form submits:
+
+POST /api/v1/proxy with JSON payload:
+        
+    {
+    "source": "login",
+    "panswer": "abc123"
+    }
+
+Adds header:
+
+    Origin: http://customer1.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

frontend/app.vue

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

frontend/assets/css/common.css

@@ -0,0 +1,9 @@
+*{
+  box-sizing: border-box;
+}
+body{
+  position: relative;
+  padding: 0px;
+  margin: 0px;
+  overflow-x: hidden;
+}

frontend/comman-file.txt

@@ -0,0 +1,6 @@
+Manually start a dnsmasq instance on localhost only
+==========
+
+sudo dnsmasq --no-daemon --keep-in-foreground --conf-dir=/etc/dnsmasq-local --listen-address=127.0.0.1 --bind-interfaces
+
+==========

frontend/components/Captcha.vue

@@ -0,0 +1,130 @@
+<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)
+});
+</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>

frontend/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>

frontend/lxd-app.code-workspace

@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": ".."
+		}
+	]
+}

frontend/nginx.conf

@@ -0,0 +1,94 @@
+server {
+    listen 8080;
+    server_name lxdapp.local *.lxdapp.local;
+
+    root /var/www/html/lxd-app/backend/app/public;
+    index index.php index.html;
+
+    access_log /var/log/nginx/lxdapp.access.log;
+    error_log /var/log/nginx/lxdapp.error.log;
+
+    location / {
+        try_files $uri /index.php$is_args$args;
+    }
+
+    location ~ \.php$ {
+        try_files $uri =404;
+        fastcgi_split_path_info ^(.+\.php)(/.+)$;
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+        fastcgi_param SCRIPT_NAME $fastcgi_script_name;
+        fastcgi_index index.php;
+        fastcgi_pass unix:/run/php/php8.4-fpm.sock;
+    }
+
+    location ~ /\.ht {
+        deny all;
+    }
+}
+
+
+server {
+    listen 8081 ssl;
+    server_name lxdapp.local;
+
+    ssl_certificate /etc/ssl/certs/lxdapp.local.crt;
+    ssl_certificate_key /etc/ssl/private/lxdapp.local.key;
+
+    root /var/www/html/lxd-app/backend/app/public;
+    index index.php index.html;
+
+    access_log /var/log/nginx/lxdapp.access.log;
+    error_log /var/log/nginx/lxdapp.error.log;
+
+    location / {
+        try_files $uri /index.php$is_args$args;
+    }
+
+    location ~ \.php$ {
+        try_files $uri =404;
+        fastcgi_split_path_info ^(.+\.php)(/.+)$;
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+        fastcgi_param SCRIPT_NAME $fastcgi_script_name;
+        fastcgi_index index.php;
+        fastcgi_pass unix:/run/php/php8.4-fpm.sock;
+    }
+
+    location ~ /\.ht {
+        deny all;
+    }
+}
+
+public function forward(Request $request, Response $response)
+{
+    $source = $request->getQueryParams()['source'] ?? null;
+    $domain = $request->getUri()->getHost(); // e.g. customer1.lxdapp.local
+
+    $name = $this->mapDomainToContainer($domain); // Use your config mapping
+    $ip = $this->getContainerIP($name);
+
+    if ($source === 'login') {
+        // Trigger provisioning if requested from login
+        if (!$this->containerExists($name)) {
+            $this->createContainer($name);
+            $this->startContainer($name);
+            $this->installPackages($name);
+
+            // Wait for container to be ready
+            if (!$this->waitForPort($ip, 80)) {
+                return $this->json($response, ['status' => 'error', 'message' => 'Container not ready'], 500);
+            }
+        }
+
+        return $this->json($response, ['status' => 'success', 'ip' => $ip]);
+    }
+
+    // For non-login (main page access)
+    if (!$this->containerExists($name)) {
+        return $this->json($response, ['status' => 'not-found']);
+    }
+
+    // Otherwise proxy the request to container (assuming already up)
+    return $this->proxyToContainer($request, $response, $ip);
+}

frontend/nuxt.config.ts

@@ -0,0 +1,16 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-05-15',
+  devtools: { enabled: true },
+  runtimeConfig: {
+    public: {
+      siteUrl: process.env.SITE_URL,
+      backendUrl: process.env.BACKEND_URL,
+      apiVersion: process.env.API_VERSION,
+      apiUrl: `${process.env.BACKEND_URL}/${process.env.API_VERSION}`
+    }
+  },
+  css: [
+    '~/assets/css/common.css'  // Path to your global CSS file
+  ],
+})

frontend/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"
+  }
+}

frontend/pages/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="page-wrapper">
+    <Spinner :loading="loading" />
+    <div v-html="output" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import Spinner from '@/components/Spinner.vue';
+
+const router = useRouter();
+
+const loading = ref(true);
+const output = ref('');
+
+onMounted(async () => {
+  try {
+    const config = useRuntimeConfig();
+    // fetch without forcing responseType to text, so it defaults to JSON if possible
+    const res = await $fetch(`${config.public.apiUrl}/proxy`);
+
+    if (typeof res === 'object') {
+      if(res?.status === "not-found"){
+        router.push('/login');
+      }else{
+        // pretty print JSON response
+        output.value = `<pre>${JSON.stringify(res, null, 2)}</pre>`;
+      }
+    } else {
+      // treat as plain text or HTML
+      output.value = res;
+    }
+  } catch (error) {
+    output.value = `<p style="color:red;">Container access failed.</p>`;
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped>
+.page-wrapper {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0px;
+  margin: 0px;
+  text-align: center;
+}
+</style>

frontend/pages/login.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="page-wrapper">
+    <Spinner :loading="loading" />
+    <div v-html="output" />
+    <div class="login-container">
+      <form @submit.prevent="submitForm" class="login-form">
+        <h2 class="title">Login</h2>
+         <!-- Include Captcha -->
+        <Captcha 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>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Spinner from '@/components/Spinner.vue';
+import Captcha from '@/components/Captcha.vue';
+
+const output = ref('');
+const router = useRouter();
+const loading = ref(false);
+const captchaValue = ref('');
+const captchaError = ref('');
+
+const submitForm = async () => {
+  loading.value = true;
+  output.value = '';
+  const config = useRuntimeConfig();
+  try {
+    
+    const res = await $fetch(`${config.public.apiUrl}/proxy`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        source: 'login',
+        panswer: captchaValue.value
+      },
+      credentials: 'include',
+      
+    });
+
+    if (res?.status === 'success') {
+      captchaError.value = '';
+      router.push('/');
+    } else if (res?.error === 'invalid_captcha') {
+      captchaError.value = '❌ Invalid CAPTCHA. Please try again.';
+    } else {
+      captchaError.value = res.message;
+    }
+  
+  } catch (error) {
+    captchaError.value = res.message;
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.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;
+}
+.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);
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+  font-size: 1.8rem;
+  color: #222;
+}
+.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;
+}
+.error-text {
+  color: red;
+  font-size: 0.95rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+</style>

frontend/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)
+})

frontend/public/robots.txt

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

frontend/server/tsconfig.json

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

frontend/tsconfig.json

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