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., 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

Install dependencies
```
npm install
```
Run the development server
```
npm run dev
```
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

2.0 KiB Raw Blame History

LXD Frontend (Nuxt.js)

🌐 Overview

🧩 Features

🛠 Project Setup

2.0 KiB

Raw Blame History