92 lines
2.0 KiB
Markdown
92 lines
2.0 KiB
Markdown
# 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 |