# 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