Update .gitea/workflows/demo.yaml

.dockerignore

@@ -0,0 +1,25 @@
+node_modules
+npm-debug.log
+.git
+.gitignore
+*.md
+.vscode
+.idea
+*.log
+dist
+build
+coverage
+.nyc_output
+playwright-report
+test-results
+e2e
+*.test.ts
+*.test.tsx
+*.spec.ts
+*.spec.tsx
+vitest.config.ts
+playwright.config.ts
+eslint.config.js
+.qwen
+*.ico
+cgg-ico\ copy.png

.gitea/workflows/demo.yaml

@@ -0,0 +1,24 @@
+name: Gitea Actions Demo
+run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
+on: [push]
+
+jobs:
+  Explore-Gitea-Actions:
+    runs-on: [ubuntu-latest] 
+    steps:
+      - run: echo "🎉 The job was automatically triggered by a ${{ gitea.event_name }} event."
+      - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by Gitea!"
+      - run: echo "🔎 The name of your branch is ${{ gitea.ref }} and your repository is ${{ gitea.repository }}."
+      - run: whoami
+      - run: hostname
+      
+      - run: node -v
+      #- name: Check out repository code
+        #uses: actions/checkout@v6
+      
+      - run: echo "💡 The ${{ gitea.repository }} repository has been cloned to the runner."
+      - run: echo "🖥️ The workflow is now ready to test your code on the runner."
+      - name: List files in the repository
+        run: |
+          ls ${{ gitea.workspace }}
+      - run: echo "🍏 This job's status is ${{ job.status }}."

DEPLOYMENT.md

@@ -0,0 +1,317 @@
+# Configucci Docker Deployment Guide
+
+## Quick Start
+
+### Local Deployment (Windows/Linux/Mac)
+
+```bash
+# Make script executable (Linux/Mac only)
+chmod +x deploy-docker.sh
+
+# Deploy locally
+./deploy-docker.sh
+
+# Or on Windows (PowerShell)
+bash deploy-docker.sh
+```
+
+### Remote Deployment (Linux Server)
+
+```bash
+# Deploy to remote server
+./deploy-docker.sh user@your-server.com
+
+# Example
+./deploy-docker.sh root@192.168.1.100
+```
+
+---
+
+## Manual Deployment
+
+### 1. Build and Run Locally
+
+```bash
+# Build image
+docker-compose build
+
+# Start container
+docker-compose up -d
+
+# View logs
+docker-compose logs -f
+
+# Stop
+docker-compose down
+```
+
+### 2. Deploy to Linux Server
+
+#### Option A: Using Deployment Script (Recommended)
+
+```bash
+# From your local machine
+./deploy-docker.sh user@your-server.com
+```
+
+#### Option B: Manual Steps on Server
+
+```bash
+# SSH to server
+ssh user@your-server.com
+
+# Install Docker (if not installed)
+curl -fsSL https://get.docker.com -o get-docker.sh
+sudo sh get-docker.sh
+sudo usermod -aG docker $USER
+exit
+
+# SSH again (to apply group changes)
+ssh user@your-server.com
+
+# Clone repository
+git clone https://git.six83.ru/ssa/configucci.git
+cd configucci
+
+# Build and run
+docker-compose build
+docker-compose up -d
+
+# View logs
+docker-compose logs -f
+```
+
+---
+
+## Accessing the Application
+
+After deployment, access the app at:
+
+- **Local:** http://localhost:11088
+- **Server:** http://your-server-ip:11088
+
+---
+
+## Useful Docker Commands
+
+```bash
+# View running containers
+docker-compose ps
+
+# View logs
+docker-compose logs -f
+
+# Restart application
+docker-compose restart
+
+# Stop application
+docker-compose down
+
+# Rebuild and restart
+docker-compose build --no-cache
+docker-compose up -d
+
+# View resource usage
+docker stats configucci-app
+
+# Execute command in container
+docker exec -it configucci-app sh
+
+# Remove everything (container + image)
+docker-compose down --rmi all
+```
+
+---
+
+## Production Setup with SSL
+
+### 1. Install Nginx Proxy Manager (Recommended)
+
+```yaml
+# Add to docker-compose.yml
+version: '3.8'
+
+services:
+  proxy:
+    image: jc21/nginx-proxy-manager:latest
+    ports:
+      - "80:80"
+      - "81:81"
+      - "443:443"
+    volumes:
+      - ./data:/data
+      - ./letsencrypt:/etc/letsencrypt
+    restart: unless-stopped
+
+  configucci:
+    # ... existing configucci config
+```
+
+Then access `http://your-server:81` to configure SSL via web UI.
+
+### 2. Or Use Certbot Directly
+
+```bash
+# On host server (not in Docker)
+sudo apt install certbot -y
+
+# Get certificate
+sudo certbot certonly --standalone -d your-domain.com
+
+# Mount certificates in docker-compose.yml
+volumes:
+  - /etc/letsencrypt:/etc/letsencrypt:ro
+```
+
+---
+
+## Environment Variables
+
+You can customize the build by setting environment variables:
+
+```bash
+# In docker-compose.yml or .env file
+GIT_URL=https://git.six83.ru/ssa/configucci.git
+GIT_BRANCH=ai
+```
+
+---
+
+## Troubleshooting
+
+### Container Won't Start
+
+```bash
+# Check logs
+docker-compose logs
+
+# Check if port 80 is in use
+sudo netstat -tlnp | grep :80
+
+# Use different port
+# Edit docker-compose.yml: ports: - "8080:80"
+```
+
+### Build Fails
+
+```bash
+# Clean build cache
+docker-compose build --no-cache
+
+# Remove all Docker resources
+docker system prune -a
+```
+
+### Can't Access Application
+
+```bash
+# Check firewall
+sudo ufw status
+sudo ufw allow 80/tcp
+
+# Check container is running
+docker-compose ps
+
+# Test from server
+curl http://localhost
+```
+
+---
+
+## Automated Deployment with CI/CD
+
+Create `.gitlab-ci.yml` or GitHub Actions workflow:
+
+```yaml
+# Example: GitHub Actions
+name: Deploy
+
+on:
+  push:
+    branches: [ai]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Deploy to server
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          script: |
+            cd /opt/configucci
+            git pull
+            docker-compose build --no-cache
+            docker-compose up -d
+```
+
+---
+
+## Backup and Restore
+
+### Backup
+
+```bash
+# Backup configuration
+tar -czf configucci-backup.tar.gz docker-compose.yml nginx.conf
+```
+
+### Restore
+
+```bash
+tar -xzf configucci-backup.tar.gz
+docker-compose up -d
+```
+
+---
+
+## Monitoring
+
+### Install Docker Monitoring
+
+```bash
+# Install cAdvisor for container monitoring
+docker run \
+  --volume=/:/rootfs:ro \
+  --volume=/var/run:/var/run:ro \
+  --volume=/sys:/sys:ro \
+  --volume=/var/lib/docker/:/var/lib/docker:ro \
+  --volume=/dev/disk/:/dev/disk:ro \
+  --publish=8080:8080 \
+  --name=cadvisor \
+  google/cadvisor:latest
+```
+
+Access at: `http://your-server:8080`
+
+---
+
+## Security Recommendations
+
+1. **Use HTTPS** - Always use SSL in production
+2. **Firewall** - Only open necessary ports
+3. **Regular Updates** - Keep Docker and system updated
+4. **Non-root User** - Run container as non-root
+5. **Resource Limits** - Set CPU/memory limits in docker-compose.yml
+
+```yaml
+# Add resource limits
+deploy:
+  resources:
+    limits:
+      cpus: '0.5'
+      memory: 512M
+```
+
+---
+
+## Support
+
+For issues, check:
+- Docker logs: `docker-compose logs`
+- Nginx logs: `docker exec configucci-app cat /var/log/nginx/error.log`
+- Application health: `docker inspect --format='{{.State.Health.Status}}' configucci-app`

Dockerfile

@@ -0,0 +1,39 @@
+# Build stage
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+# Install git
+RUN apk add --no-cache git
+
+# Clone repository
+ARG GIT_URL=https://git.six83.ru/ssa/configucci.git
+ARG GIT_BRANCH=main
+RUN git clone --depth 1 --branch ${GIT_BRANCH} ${GIT_URL} .
+
+# Install dependencies
+COPY package*.json ./
+RUN npm ci
+
+# Copy source and build
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy custom nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy built files from build stage
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost/ || exit 1
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

deploy-docker.sh

@@ -0,0 +1,152 @@
+#!/bin/bash
+
+# Configucci Docker Deployment Script
+# Usage: ./deploy-docker.sh [server]
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Configuration
+SERVER="${1:-}"
+APP_NAME="configucci"
+GIT_BRANCH="main"
+
+echo -e "${GREEN}==================================${NC}"
+echo -e "${GREEN}  Configucci Docker Deployment   ${NC}"
+echo -e "${GREEN}==================================${NC}"
+
+# Function to deploy locally
+deploy_local() {
+    echo -e "${YELLOW}Building Docker image...${NC}"
+    docker-compose build --no-cache
+    
+    echo -e "${YELLOW}Stopping existing container (if any)...${NC}"
+    docker-compose down || true
+    
+    echo -e "${YELLOW}Starting new container...${NC}"
+    docker-compose up -d
+    
+    echo -e "${YELLOW}Waiting for application to start...${NC}"
+    sleep 5
+    
+    echo -e "${GREEN}==================================${NC}"
+    echo -e "${GREEN}  Deployment Complete!          ${NC}"
+    echo -e "${GREEN}==================================${NC}"
+    echo ""
+    echo -e "Application URL: ${GREEN}http://localhost${NC}"
+    echo ""
+    echo -e "Useful commands:"
+    echo -e "  View logs:        ${YELLOW}docker-compose logs -f${NC}"
+    echo -e "  Stop app:         ${YELLOW}docker-compose down${NC}"
+    echo -e "  Restart app:      ${YELLOW}docker-compose restart${NC}"
+    echo -e "  Rebuild:          ${YELLOW}docker-compose build && docker-compose up -d${NC}"
+}
+
+# Function to deploy to remote server
+deploy_remote() {
+    echo -e "${YELLOW}Deploying to server: ${SERVER}${NC}"
+    
+    # Check if server is accessible
+    if ! ping -c 1 "$SERVER" &> /dev/null; then
+        echo -e "${RED}Cannot connect to server: ${SERVER}${NC}"
+        exit 1
+    fi
+    
+    # Create deployment script on server
+    cat << 'EOF' > /tmp/deploy-configucci.sh
+#!/bin/bash
+set -e
+
+APP_DIR="/opt/configucci"
+GIT_URL="https://git.six83.ru/ssa/configucci.git"
+GIT_BRANCH="main"
+
+echo "Creating app directory..."
+mkdir -p \$APP_DIR
+cd \$APP_DIR
+
+echo "Pulling latest code..."
+if [ -d ".git" ]; then
+    git pull origin \$GIT_BRANCH
+else
+    git clone --depth 1 --branch \$GIT_BRANCH \$GIT_URL .
+fi
+
+echo "Building Docker image..."
+docker-compose build --no-cache
+
+echo "Stopping existing container..."
+docker-compose down || true
+
+echo "Starting new container..."
+docker-compose up -d
+
+echo "Cleaning up old images..."
+docker image prune -f
+
+echo "Deployment complete!"
+docker-compose ps
+EOF
+
+    # Copy docker-compose.yml to server
+    echo -e "${YELLOW}Copying files to server...${NC}"
+    scp docker-compose.yml Dockerfile nginx.conf "$SERVER:/tmp/"
+    
+    # Execute deployment on server
+    echo -e "${YELLOW}Executing deployment on server...${NC}"
+    ssh "$SERVER" << 'ENDSSH'
+#!/bin/bash
+set -e
+
+APP_DIR="/opt/configucci"
+cd $APP_DIR
+
+# Copy files from /tmp
+cp /tmp/docker-compose.yml .
+cp /tmp/Dockerfile .
+cp /tmp/nginx.conf .
+
+# Build and deploy
+docker-compose build --no-cache
+docker-compose down || true
+docker-compose up -d
+
+# Cleanup
+docker image prune -f
+docker-compose ps
+ENDSSH
+    
+    echo -e "${GREEN}==================================${NC}"
+    echo -e "${GREEN}  Remote Deployment Complete!   ${NC}"
+    echo -e "${GREEN}==================================${NC}"
+    echo ""
+    echo -e "Server: ${GREEN}http://${SERVER}${NC}"
+    echo ""
+    echo -e "Useful commands:"
+    echo -e "  SSH to server:    ${YELLOW}ssh ${SERVER}${NC}"
+    echo -e "  View logs:        ${YELLOW}ssh ${SERVER} 'docker-compose logs -f'${NC}"
+    echo -e "  Stop app:         ${YELLOW}ssh ${SERVER} 'docker-compose down'${NC}"
+}
+
+# Check if Docker is available
+if ! command -v docker &> /dev/null; then
+    echo -e "${RED}Docker is not installed or not in PATH${NC}"
+    exit 1
+fi
+
+if ! command -v docker-compose &> /dev/null; then
+    echo -e "${RED}docker-compose is not installed or not in PATH${NC}"
+    exit 1
+fi
+
+# Deploy
+if [ -z "$SERVER" ]; then
+    deploy_local
+else
+    deploy_remote
+fi

docker-compose.yml

@@ -0,0 +1,34 @@
+version: '3.8'
+
+services:
+  configucci:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        GIT_URL: https://git.six83.ru/ssa/configucci.git
+        GIT_BRANCH: main
+    container_name: configucci-app
+    ports:
+      - "11088:80"
+    restart: unless-stopped
+    networks:
+      - configucci-network
+    volumes:
+      # Optional: persist nginx logs
+      - nginx-logs:/var/log/nginx
+    environment:
+      - TZ=Europe/Moscow
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+
+networks:
+  configucci-network:
+    driver: bridge
+
+volumes:
+  nginx-logs:

e2e/environment.spec.ts

@@ -1,108 +1,190 @@
 import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
 
 test.describe('Environment Management', () => {
   test('should not allow removing DEFAULT environment', async ({ page }) => {
     await page.goto('/');
     await page.click('button:has-text("Create new")');
-
-    // Try to remove DEFAULT - should be blocked
     const removeButton = page.locator('button.btn-danger[title="Remove environment"]');
-    
-    // The button should be disabled for DEFAULT
     await expect(removeButton).toBeDisabled();
   });
 
   test('should remove non-DEFAULT environment', async ({ page }) => {
     await page.goto('/');
     await page.click('button:has-text("Create new")');
-
+    page.once('dialog', async dialog => { await dialog.accept('toRemove'); });
-    // Create a new environment
-    page.once('dialog', async dialog => {
-      await dialog.accept('toRemove');
-    });
     await page.click('button.btn-success[title="Add environment"]');
     await page.waitForTimeout(500);
-
-    // Verify we have 2 envs
     await expect(page.locator('#environments option')).toHaveCount(2);
-
+    page.once('dialog', async dialog => { await dialog.accept(); });
-    // Remove the new environment
-    page.once('dialog', async dialog => {
-      await dialog.accept(); // Confirm removal
-    });
     await page.click('button.btn-danger[title="Remove environment"]');
     await page.waitForTimeout(300);
-
-    // Verify we're back to 1 env (DEFAULT)
     await expect(page.locator('#environments option')).toHaveCount(1);
-    await expect(page.locator('#environments')).toContainText('DEFAULT');
   });
 
   test('should create new environment and switch without errors', async ({ page }) => {
     await page.goto('/');
     await page.click('button:has-text("Create new")');
-
+    page.once('dialog', async dialog => { await dialog.accept('env1'); });
-    // Verify DEFAULT environment is loaded
-    await expect(page.locator('#environments')).toContainText('DEFAULT');
-
-    // Create a new environment
-    page.once('dialog', async dialog => {
-      await dialog.accept('env1');
-    });
     await page.click('button.btn-success[title="Add environment"]');
     await page.waitForTimeout(500);
-
-    // Verify new environment is created
     await expect(page.locator('#environments option')).toHaveCount(2);
-
-    // Switch back to DEFAULT (by index 0)
     await page.locator('#environments').selectOption({ index: 0 });
     await page.waitForTimeout(300);
-
-    // Verify the page is still working
-    await expect(page.locator('#environments')).toBeVisible();
-
-    // Switch to env1 (by text) - this should NOT cause error
     await page.locator('#environments').selectOption('env1');
     await page.waitForTimeout(300);
-
-    // Verify the page is still working (no white screen of death)
     await expect(page.locator('#environments')).toBeVisible();
-    await expect(page.locator('#environments option')).toHaveCount(2);
   });
 
   test('should create multiple environments and switch between them', async ({ page }) => {
     await page.goto('/');
     await page.click('button:has-text("Create new")');
-
+    page.once('dialog', async dialog => { await dialog.accept('env1'); });
-    // Create env1
-    page.once('dialog', async dialog => {
-      await dialog.accept('env1');
-    });
     await page.click('button.btn-success[title="Add environment"]');
     await page.waitForTimeout(500);
-
+    page.once('dialog', async dialog => { await dialog.accept('env2'); });
-    // Create env2
-    page.once('dialog', async dialog => {
-      await dialog.accept('env2');
-    });
     await page.click('button.btn-success[title="Add environment"]');
     await page.waitForTimeout(500);
-
-    // Verify we have 3 envs (DEFAULT + env1 + env2)
     await expect(page.locator('#environments option')).toHaveCount(3);
-
-    // Switch to each env and verify page doesn't crash
     await page.locator('#environments').selectOption({ index: 0 });
     await page.waitForTimeout(200);
-    await expect(page.locator('#environments')).toBeVisible();
-
     await page.locator('#environments').selectOption('env1');
     await page.waitForTimeout(200);
-    await expect(page.locator('#environments')).toBeVisible();
-
     await page.locator('#environments').selectOption('env2');
     await page.waitForTimeout(200);
     await expect(page.locator('#environments')).toBeVisible();
   });
+
+  test('should add params and edit template manually', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    const nameInput = page.locator('input[placeholder="name"]').first();
+    const valueInput = page.locator('input[placeholder="value"]').first();
+    const addButton = page.locator('button.btn-success').first();
+    await nameInput.fill('host');
+    await valueInput.fill('localhost:8080');
+    await addButton.click();
+    await page.waitForTimeout(500);
+    await nameInput.fill('port');
+    await valueInput.fill('9090');
+    await addButton.click();
+    await page.waitForTimeout(500);
+    await page.click('a:has-text("Content Template")');
+    await page.waitForTimeout(500);
+    await expect(page.locator('button:has-text("Edit")')).toBeVisible();
+    await page.click('button:has-text("Edit")');
+    await page.waitForTimeout(500);
+    const textarea = page.locator('textarea');
+    await expect(textarea).toBeVisible();
+    await textarea.fill('{\n    "!!! host": "@host@",\n    "!!! port": "@port@",\n    "!!! custom": "@custom@"\n}');
+    await page.waitForTimeout(300);
+    await page.click('button:has-text("Save")');
+    await page.waitForTimeout(500);
+    await expect(page.locator('button:has-text("Edit")')).toBeVisible();
+    const pageContent = await page.content();
+    expect(pageContent).toContain('!!! custom');
+  });
+
+  test('should not duplicate params when placeholder already exists', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    const nameInput = page.locator('input[placeholder="name"]').first();
+    const valueInput = page.locator('input[placeholder="value"]').first();
+    const addButton = page.locator('button.btn-success').first();
+    await nameInput.fill('host');
+    await valueInput.fill('localhost:8080');
+    await addButton.click();
+    await page.waitForTimeout(500);
+    await page.click('a:has-text("Content Template")');
+    await page.waitForTimeout(500);
+    await page.click('button:has-text("Edit")');
+    await page.waitForTimeout(300);
+    const textarea = page.locator('textarea');
+    await textarea.fill('{\n    "!!! host": "@host@",\n    "apiUrl": "http://@host@/api"\n}');
+    await page.waitForTimeout(300);
+    await page.click('button:has-text("Save")');
+    await page.waitForTimeout(500);
+    await page.click('a:has-text("Env")');
+    await page.waitForTimeout(300);
+    await nameInput.fill('host');
+    await valueInput.fill('updated-host:9090');
+    await addButton.click();
+    await page.waitForTimeout(500);
+    await page.click('a:has-text("Content Template")');
+    await page.waitForTimeout(500);
+    const templateContent = await page.locator('.config-template-editor').textContent();
+    const hostKeyCount = (templateContent.match(/!!! host/g) || []).length;
+    expect(hostKeyCount).toBe(1);
+    const hostPlaceholderCount = (templateContent.match(/@host@/g) || []).length;
+    expect(hostPlaceholderCount).toBe(2);
+  });
+
+  test('should validate template with unquoted placeholders', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    await page.waitForTimeout(500);
+    
+    // Add a parameter
+    await page.click('button:has-text("✚")');
+    await page.waitForTimeout(300);
+    const nameInput = page.locator('input[placeholder="name"]');
+    const valueInput = page.locator('input[placeholder="value"]');
+    const addButton = page.locator('button:has-text("✓")');
+    await nameInput.fill('port');
+    await valueInput.fill('8080');
+    await addButton.click();
+    await page.waitForTimeout(500);
+    
+    // Go to Content Template and edit with unquoted placeholder
+    await page.click('a:has-text("Content Template")');
+    await page.waitForTimeout(300);
+    await page.click('button:has-text("Edit")');
+    await page.waitForTimeout(300);
+    
+    // Fill template with unquoted @port@ placeholder
+    const textarea = page.locator('textarea');
+    await textarea.fill('{\n    "Host": "@host@",\n    "Port": @port@,\n    "Url": "http://@host@:@port@/api"\n}');
+    await page.waitForTimeout(300);
+    
+    // Check that Save button is enabled (validation passed)
+    const saveButton = page.locator('button:has-text("Save")');
+    await expect(saveButton).toBeEnabled();
+    
+    // Check that there's no JSON error
+    const errorAlert = page.locator('.alert-danger');
+    await expect(errorAlert).not.toBeVisible();
+    
+    // Save the template
+    await saveButton.click();
+    await page.waitForTimeout(500);
+    
+    // Verify it was saved - should be in view mode with Edit button visible
+    const editButton = page.locator('button:has-text("Edit")');
+    await expect(editButton).toBeVisible();
+    
+    // Verify the template content is displayed correctly
+    const codeContent = page.locator('code');
+    await expect(codeContent).toBeVisible();
+    const content = await codeContent.textContent();
+    expect(content).toContain('@port@');
+  });
+
+  test('should download config file with correct filename', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    await page.waitForTimeout(500);
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      page.click('button:has-text("Download")')
+    ]);
+    const filename = download.suggestedFilename();
+    expect(filename).toMatch(/^config_\d{2}-\d{2}-\d{2}-\d{4}\.json\.xml$/);
+    // Save and read the file to verify content
+    await download.saveAs('temp-config.xml');
+    const contentStr = fs.readFileSync('temp-config.xml', 'utf8');
+    expect(contentStr).toContain('engine');
+    expect(contentStr).toContain('DEFAULT');
+    expect(contentStr).toContain('template');
+    fs.unlinkSync('temp-config.xml');
+  });
 });

nginx.conf

@@ -0,0 +1,36 @@
+server {
+    listen 80;
+    server_name localhost;
+    
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript application/json;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # SPA routing - all routes go to index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        access_log off;
+    }
+
+    # Disable cache for index.html
+    location = /index.html {
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+    }
+}

src/App.tsx

@@ -90,6 +90,15 @@ function App() {
     });
   }
 
+  function handleTemplateSaved(newContent: string) {
+    setConfig(prevConfig => {
+      const newConfig = new Config();
+      newConfig.envs = prevConfig.envs;
+      newConfig.addTemplate(newContent);
+      return newConfig;
+    });
+  }
+
   return (
     <>
       <main className="container-fluid m-2">
@@ -98,7 +107,7 @@ function App() {
             AppState.Instance.loadConfig(x);
             setEnvs(x.envs);
             setConfig(x);
-          }} />
+          }} config={config} />
         </div>
         {envs.length > 0 ?
           (<div className="row">
@@ -111,7 +120,7 @@ function App() {
                 onRemove={handleEnvRemoved} />
             </section>
             <section id="content" className="col-8 col-xl-7 border-start ms-1">
-              <Content env={currentEnv} config={config} />
+              <Content env={currentEnv} config={config} onTemplateSaved={handleTemplateSaved} />
             </section>
           </div>)
           :

src/builders/ConfigBuilder.ts

@@ -0,0 +1,39 @@
+import { Config } from "../models/Config";
+import { EnvBuilder } from "./EnvBuilder";
+
+export class ConfigBuilder {
+  /**
+   * Builds a full XML config file with all environments and template.
+   */
+  public static buildFullXml(config: Config): string {
+    const lines: string[] = [];
+    lines.push("<engine>");
+
+    // Add all environments
+    for (const env of config.envs) {
+      const envXml = new EnvBuilder().buildEnv(env);
+      lines.push(envXml);
+    }
+
+    // Add template
+    lines.push("    <template>");
+    lines.push(config.template.content);
+    lines.push("    </template>");
+
+    lines.push("</engine>");
+    return lines.join("\r\n");
+  }
+
+  /**
+   * Generates filename with timestamp: config_yy-dd-MM-HHmm.json.xml
+   */
+  public static generateFilename(): string {
+    const now = new Date();
+    const yy = now.getFullYear().toString().slice(-2);
+    const dd = String(now.getDate()).padStart(2, '0');
+    const MM = String(now.getMonth() + 1).padStart(2, '0');
+    const HH = String(now.getHours()).padStart(2, '0');
+    const mm = String(now.getMinutes()).padStart(2, '0');
+    return `config_${yy}-${dd}-${MM}-${HH}${mm}.json.xml`;
+  }
+}

src/builders/EnvBuilder.ts

@@ -16,6 +16,14 @@ export class EnvBuilder implements IBuilder<Env> {
         this._src = v;
     }
 
+    /**
+     * Builds XML for a single environment (static method for direct use)
+     */
+    public buildEnv(env: Env): string {
+        this.src = env;
+        return this.build();
+    }
+
     build(): string {
         return this
             .open()

src/builders/index.ts

@@ -1,9 +1,6 @@
 import { Env } from "../models/Env";
 import { EnvBuilder } from "./EnvBuilder";
-
+import { ConfigBuilder } from "./ConfigBuilder";
-
-
-
 
 export interface IBuilder<T> {
     get src(): T;
@@ -24,3 +21,5 @@ export class Builder {
     }
 }
 
+export { ConfigBuilder };
+

src/componets/FileChooser.tsx

@@ -1,9 +1,9 @@
 import { Env } from "../models/Env";
 import { ConfigReader } from "../models/ConfigReader";
 import { Config } from "../models/Config";
+import { ConfigBuilder } from "../builders/ConfigBuilder";
 
-
+export function FileChooser(props: { onSelected: (x: Config) => void, config?: Config }) {
-export function FileChooser(props: { onSelected: (x: Config) => void }) {
   async function handleFile(x: React.ChangeEvent<HTMLInputElement>) {
     let file = x.target.files![0];
 
@@ -23,11 +23,42 @@ export function FileChooser(props: { onSelected: (x: Config) => void }) {
     props.onSelected(cfg);
   }
 
+  function handleDownload() {
+    if (!props.config) {
+      alert("No configuration loaded");
+      return;
+    }
+
+    const xmlContent = ConfigBuilder.buildFullXml(props.config);
+    const filename = ConfigBuilder.generateFilename();
+    
+    // Create blob and download
+    const blob = new Blob([xmlContent], { type: "text/xml" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+
   return (
     <>
       <div className="col-2">
         <button className="btn btn-primary" onClick={handleNew} >Create new</button>
       </div>
+      <div className="col-auto">
+        <button 
+          className="btn btn-success" 
+          onClick={handleDownload}
+          disabled={!props.config}
+          title="Download full config template"
+        >
+          ⬇ Download
+        </button>
+      </div>
       <div className="col-1">or</div>
 
       <div className="col">

src/componets/content/ConfigTemplate.tsx

@@ -0,0 +1,145 @@
+import { useState, useEffect } from "react";
+import Highlight from 'react-highlight';
+import 'highlight.js/styles/far.css';
+import { Config } from "../../models/Config";
+
+interface ConfigTemplateProps {
+  config: Config;
+  onSaved: (newContent: string) => void;
+}
+
+export function ConfigTemplate(props: ConfigTemplateProps) {
+  const [mode, setMode] = useState<'view' | 'edit'>('view');
+  const [draftContent, setDraftContent] = useState(props.config.template.content);
+  const [originalContent, setOriginalContent] = useState(props.config.template.content);
+  const [jsonError, setJsonError] = useState<string | null>(null);
+
+  // Sync draft when config changes (only in view mode)
+  useEffect(() => {
+    if (mode === 'view') {
+      setDraftContent(props.config.template.content);
+    }
+  }, [props.config.template.content, mode]);
+
+  function handleEdit() {
+    setOriginalContent(props.config.template.content);
+    setDraftContent(props.config.template.content);
+    setJsonError(null);
+    setMode('edit');
+  }
+
+  function handleRevert() {
+    setDraftContent(originalContent);
+    setJsonError(null);
+    setMode('view');
+  }
+
+  function handleSave() {
+    // Validate JSON before saving (with placeholder support)
+    try {
+      const sanitizedValue = draftContent.replace(/@[^@]+@/g, '1');
+      JSON.parse(sanitizedValue);
+      setJsonError(null);
+      props.onSaved(draftContent);
+      setMode('view');
+    } catch (e) {
+      setJsonError((e as Error).message);
+    }
+  }
+
+  function handleDraftChange(value: string) {
+    setDraftContent(value);
+    // Validate JSON on every change
+    try {
+      if (value.trim()) {
+        // Replace @placeholders@ with valid JSON values for validation
+        // Strategy: Replace ALL @...@ patterns with "1" (valid for both string and numeric contexts)
+        const sanitizedValue = value.replace(/@[^@]+@/g, '1');
+        
+        JSON.parse(sanitizedValue);
+        setJsonError(null);
+      } else {
+        setJsonError(null);
+      }
+    } catch (e) {
+      setJsonError((e as Error).message);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const textarea = e.currentTarget;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const value = textarea.value;
+      
+      // Insert 2 spaces at cursor position
+      const newValue = value.substring(0, start) + '  ' + value.substring(end);
+      handleDraftChange(newValue);
+      
+      // Move cursor after the inserted spaces
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      }, 0);
+    }
+  }
+
+  const isValidJson = jsonError === null;
+
+  return (
+    <div className="config-template-editor">
+      {mode === 'view' ? (
+        <>
+          <div className="mb-2">
+            <button className="btn btn-primary btn-sm" onClick={handleEdit}>
+              ✎ Edit
+            </button>
+          </div>
+          <Highlight className="language-json">
+            {props.config.template.content || "{}"}
+          </Highlight>
+        </>
+      ) : (
+        <>
+          <div className="mb-2 d-flex gap-2 align-items-center">
+            <button 
+              className="btn btn-success btn-sm" 
+              onClick={handleSave}
+              disabled={!isValidJson}
+            >
+              ✓ Save
+            </button>
+            <button 
+              className="btn btn-secondary btn-sm" 
+              onClick={handleRevert}
+            >
+              × Revert
+            </button>
+            <span className={`ms-2 ${isValidJson ? 'text-success' : 'text-danger'}`}>
+              {isValidJson ? 'Valid JSON' : 'Invalid JSON'}
+            </span>
+          </div>
+          {jsonError && (
+            <div className="alert alert-danger py-1 px-2 mb-2" style={{ fontSize: '0.875rem' }}>
+              {jsonError}
+            </div>
+          )}
+          <textarea
+            className={`form-control font-monospace ${isValidJson ? 'border-success' : 'border-danger'}`}
+            value={draftContent}
+            onChange={(e) => handleDraftChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            rows={20}
+            style={{
+              fontFamily: 'monospace',
+              whiteSpace: 'pre',
+              overflowX: 'auto'
+            }}
+            spellCheck={false}
+          />
+        </>
+      )}
+    </div>
+  );
+}

src/componets/content/Content.css

@@ -1,4 +1,4 @@
 .highlihgt-scrolled {
     overflow-x: auto;
-    max-width: 90%;
+/    max-width: 90%;
 }

src/componets/content/Content.tsx

@@ -4,17 +4,22 @@ import Highlight from 'react-highlight'
 import 'highlight.js/styles/far.css'
 import { Builder } from "../../builders";
 import { Config } from "../../models/Config";
+import { ConfigTemplate } from "./ConfigTemplate";
 
 
-export function Content(props: { config: Config, env: Env }) {
+export function Content(props: { config: Config, env: Env, onTemplateSaved: (newContent: string) => void }) {
     const [selectTab, setTab] = useState(ContentType.Env);
 
+    // Validate placeholders for warning badge
+    const missingPlaceholders = props.config.validatePlaceholders();
+    const hasValidationWarnings = missingPlaceholders.length > 0;
+
     return (
         <>
-            <ContentTabs onSelected={(id) => setTab(id)} />
+            <ContentTabs onSelected={(id) => setTab(id)} selectedTab={selectTab} hasValidationWarnings={hasValidationWarnings} />
             <div className="">
                 {selectTab == ContentType.Env ? (<ContentParams env={props.env} />) : ""}
-                {selectTab == ContentType.Json ? (<ContentTemplate env={props.env} config={props.config} />) : ""}
+                {selectTab == ContentType.Json ? (<ConfigTemplate config={props.config} onSaved={props.onTemplateSaved} />) : ""}
                 {selectTab == ContentType.Raw ? (<ContentRaw config={props.config} env={props.env} />) : ""}
                 {selectTab == ContentType.Test ? (<ContentTest config={props.config} env={props.env} />) : ""}
             </div>
@@ -29,16 +34,13 @@ enum ContentType {
     Test = 3
 }
 
-function ContentTabs(props: { onSelected: (id: ContentType) => void }) {
+function ContentTabs(props: { onSelected: (id: ContentType) => void, selectedTab: ContentType, hasValidationWarnings: boolean }) {
-    const [selectTab, setSelect] = useState(ContentType.Env);
-
     function clickHandler(type: ContentType) {
-        setSelect(type);
         props.onSelected(type);
     }
 
     function isActive(type: ContentType): string {
-        return type == selectTab ? " active" : " ";
+        return type == props.selectedTab ? " active" : " ";
     }
 
     return (
@@ -47,7 +49,12 @@ function ContentTabs(props: { onSelected: (id: ContentType) => void }) {
                 <a className={"nav-link" + isActive(ContentType.Env)} aria-current="page" href="#" onClick={() => clickHandler(ContentType.Env)}>Env</a>
             </li>
             <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Json)} href="#" onClick={() => clickHandler(ContentType.Json)} >Content Template</a>
+                <a className={"nav-link" + isActive(ContentType.Json)} href="#" onClick={() => clickHandler(ContentType.Json)} >
+                    Content Template
+                    {props.hasValidationWarnings && (
+                        <span className="badge bg-warning text-dark ms-1">!</span>
+                    )}
+                </a>
             </li>
             <li className="nav-item">
                 <a className={"nav-link" + isActive(ContentType.Raw)} href="#" onClick={() => clickHandler(ContentType.Raw)}>Raw template</a>
@@ -139,18 +146,6 @@ function fillTemplate(config: Config, env: Env): string {
     return filledTemplate;
 }
 
-function ContentTemplate(props: { config: Config, env: Env }) {
-    
-    let text = props.config.getTemplateAsJson() ?? "{//no content. at all. tottaly empty!!!\n}";
-    return (
-        <>
-            <Highlight className="language-json" >
-                {text ?? ""}
-            </Highlight>
-        </>
-    )
-}
-
 function ContentParams(props: { env: Env }) {
     const bldr = Builder.getEnv(props.env);
 

src/models/Config.tsx

@@ -62,8 +62,9 @@ export class Config {
 
   /**
    * Updates the template JSON by adding/updating params from the given environment.
-   * Params are added as "paramName": "paramValue" pairs.
+   * Params are added as "!!! paramName": "@paramName@" placeholder pairs.
-   * Existing params in template are preserved if not in the env.
+   * If a param's @placeholder@ already exists in template, it won't be added.
+   * Existing template content is preserved.
    */
   updateTemplateFromEnv(env: Env) {
     let templateObj: Record<string, any> = {};
@@ -78,10 +79,18 @@ export class Config {
       console.warn("Template is not valid JSON, starting fresh");
     }
 
-    // Add/update params from the environment
+    // Add/update params from the environment as placeholders
     for (const param of env.params) {
       if (param.name && param.name.trim() !== "") {
-        templateObj[param.name] = param.value ?? "";
+        const placeholderValue = `@${param.name}@`;
+        
+        // Check if this placeholder already exists anywhere in the template
+        const placeholderAlreadyExists = this.template.content.includes(placeholderValue);
+        
+        if (!placeholderAlreadyExists) {
+          const placeholderKey = `!!! ${param.name}`;
+          templateObj[placeholderKey] = placeholderValue;
+        }
       }
     }
 
@@ -100,5 +109,50 @@ export class Config {
 
     return missingParams;
   }
+
+  /**
+   * Validates that all @placeholders@ in template have corresponding params.
+   * Checks DEFAULT env first, then all custom envs.
+   * Returns array of placeholder names that are not defined.
+   */
+  validatePlaceholders(): string[] {
+    const defaultEnv = this.envs.find(e => e.name === "DEFAULT");
+    const customEnvs = this.envs.filter(e => e.name !== "DEFAULT");
+    
+    // Collect all param names from DEFAULT
+    const defaultParamNames = new Set(
+      defaultEnv?.params.map(p => p.name).filter(n => n && n.trim() !== "") || []
+    );
+    
+    // Collect all param names from all custom envs
+    const customParamNames = new Set(
+      customEnvs.flatMap(e => e.params.map(p => p.name).filter(n => n && n.trim() !== ""))
+    );
+    
+    // Extract all @placeholders@ from template
+    const placeholderRegex = /@(\w+)@/g;
+    const placeholdersInTemplate = new Set<string>();
+    let match;
+    while ((match = placeholderRegex.exec(this.template.content)) !== null) {
+      placeholdersInTemplate.add(match[1]);
+    }
+    
+    // Find placeholders that don't have matching params
+    const missingParams: string[] = [];
+    for (const placeholder of placeholdersInTemplate) {
+      if (placeholder === Config.ENV_NAME_PARAM) continue; // Skip built-in
+      
+      // Check if exists in DEFAULT or in ANY custom env
+      const inDefault = defaultParamNames.has(placeholder);
+      const inCustom = customParamNames.has(placeholder);
+      
+      // Valid if: in DEFAULT, or in at least one custom env
+      if (!inDefault && !inCustom) {
+        missingParams.push(placeholder);
+      }
+    }
+    
+    return missingParams;
+  }
 }
 

src/test/ConfigBuilder.test.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { ConfigBuilder } from '../builders/ConfigBuilder';
+
+describe('ConfigBuilder', () => {
+  describe('generateFilename', () => {
+    it('should generate filename with correct format', () => {
+      const filename = ConfigBuilder.generateFilename();
+      expect(filename).toMatch(/^config_\d{2}-\d{2}-\d{2}-\d{4}\.json\.xml$/);
+    });
+  });
+});

src/test/ConfigTemplate.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest';
+
+describe('JSON Validation with @placeholders@', () => {
+  /**
+   * Helper function that mimics the validation logic in ConfigTemplate.tsx
+   */
+  function validateJsonWithPlaceholders(value: string): { valid: boolean; error?: string } {
+    try {
+      if (!value.trim()) {
+        return { valid: true };
+      }
+
+      // This is the current implementation from ConfigTemplate.tsx
+      // Replace ALL @...@ patterns with "1" (valid for both string and numeric contexts)
+      const sanitizedValue = value.replace(/@[^@]+@/g, '1');
+
+      JSON.parse(sanitizedValue);
+      return { valid: true };
+    } catch (e) {
+      return { valid: false, error: (e as Error).message };
+    }
+  }
+
+  it('should validate quoted placeholders', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": "@port@"
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should validate unquoted placeholders', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": @port@
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should validate mixed quoted and unquoted placeholders', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": @port@,
+      "ApiPath": "@host@:@port@/v1/data",
+      "MessageBroker": {
+        "hosts": @MessageBrokerHosts@
+      }
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should validate placeholders inside strings (URLs)', () => {
+    const json = `{
+      "ApiUrl": "http://@host@:@port@/api"
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should validate complex real-world template', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": @port@,
+
+      "ApiPath": "@host@:@port@/v1/data",
+
+      "MessageBroker": {
+        "hosts": @MessageBrokerHosts@
+      },
+
+      "basePath": "./@env_name@/in",
+
+      "NoParam": "@no_param@"
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should reject invalid JSON structure', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": @port@
+      "Missing": "comma"
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(false);
+    expect(result.error).toContain('Expected');
+  });
+
+  it('should handle empty value', () => {
+    const result = validateJsonWithPlaceholders('');
+    expect(result.valid).toBe(true);
+  });
+
+  it('should handle whitespace only', () => {
+    const result = validateJsonWithPlaceholders('   \n\t  ');
+    expect(result.valid).toBe(true);
+  });
+});