Files
lxd-app/app
..
2025-07-22 12:51:53 +02:00
2025-07-22 12:51:53 +02:00
2025-09-03 15:57:56 +02:00
2025-07-22 12:51:53 +02:00
2025-07-22 12:51:53 +02:00
2025-07-22 12:51:53 +02:00
2025-07-22 12:51:53 +02:00
2025-07-22 12:51:53 +02:00
2025-07-22 12:51:53 +02:00
2025-09-03 15:57:56 +02:00
2025-07-22 12:51:53 +02:00
2025-07-22 12:51:53 +02:00
2025-07-22 12:51:53 +02:00

LXD Frontend (Nuxt.js)

This is the frontend Nuxt.js application that works with the LXD Proxy API 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

    npm install
    
    
  2. Run the development server

    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