Refactor Docker configs and frontend styles

Removed unused environment variables and IPAM config from docker-compose files, added healthchecks, and made WireGuard port configurable. Updated frontend styles for user info and links, improved group and stats tables to show IPv6 ranges, and deleted unused dev agent config.

Author: Arthur2500

.github/agents/dev.agent.md

@@ -6,7 +6,7 @@ A production-ready web-based management interface for WireGuard VPN, featuring m
 ![Docker](https://img.shields.io/badge/docker-ready-blue.svg)
 ![Security](https://img.shields.io/badge/security-hardened-green.svg)
 
-## 📸 Screenshots
+## Screenshots
 
 > **Note**: Screenshots showing the application interface will be added here. The application features:
 > - Modern, responsive web interface
@@ -15,7 +15,7 @@ A production-ready web-based management interface for WireGuard VPN, featuring m
 > - Client management with configuration download
 > - Real-time traffic statistics and monitoring
 
-## ✨ Features
+## Features
 
 ### 1. Account Management System
 - **Admin Role**: Full system access, user management, global settings
@@ -69,7 +69,7 @@ A production-ready web-based management interface for WireGuard VPN, featuring m
 - Rate limiting on authentication endpoints
 - Health check endpoints for monitoring
 
-## 🚀 Quick Start with Docker
+## Quick Start with Docker
 
 ### Prerequisites
 - Docker and Docker Compose
@@ -99,8 +99,8 @@ docker-compose up -d
 5. Login with default credentials:
    - Username: `admin`
    - Password: `admin`
-   
-   **⚠️ Change the admin password immediately after first login!**
+
+   **Change the admin password immediately after first login!**
 
 ## Configuration
 
@@ -179,15 +179,15 @@ cd backend
 python -m pytest tests/ -v
 ```
 
-## 📚 Documentation
+## Documentation
 
 - **[Production Deployment Guide](DEPLOYMENT.md)** - Complete guide for production deployment
 - **[Security Best Practices](SECURITY.md)** - Security hardening and best practices
 - **[Security Audit Report](SECURITY-AUDIT.md)** - Comprehensive security assessment
 - **[FAQ](FAQ.md)** - Frequently Asked Questions
 - **[API Documentation](#api-endpoints)** - API endpoint reference below
 
-## 🔒 Security
+## Security
 
 This application implements multiple security layers:
 
@@ -198,7 +198,7 @@ This application implements multiple security layers:
 - **Rate Limiting**: Protection against brute force attacks
 - **Command Injection Prevention**: Validated interface names and commands
 
-**⚠️ Important**: Before deploying to production, read [SECURITY.md](SECURITY.md) and follow all recommendations.
+**Important**: Before deploying to production, read [SECURITY.md](SECURITY.md) and follow all recommendations.
 
 ### Quick Security Checklist
 
@@ -209,7 +209,7 @@ This application implements multiple security layers:
 - [ ] Set up regular backups
 - [ ] Review [SECURITY.md](SECURITY.md) completely
 
-## 📊 Health Checks
+## Health Checks
 
 The application provides health check endpoints for monitoring:
 
@@ -279,7 +279,7 @@ Use these endpoints with Docker health checks, load balancers, or monitoring sys
            └─────────────────┘      └─────────────────┘
 ```
 
-## 🔧 Troubleshooting
+## Troubleshooting
 
 ### Container Issues
 
@@ -320,12 +320,12 @@ cp data/app.db data/app.db.backup
 
 For more troubleshooting, see [DEPLOYMENT.md](DEPLOYMENT.md).
 
-## 📈 Performance
+## Performance
 
 ### Recommended Resources
 
 - **Small Deployment** (< 50 users): 1 CPU, 1GB RAM
-- **Medium Deployment** (50-500 users): 2 CPU, 2GB RAM  
+- **Medium Deployment** (50-500 users): 2 CPU, 2GB RAM
 - **Large Deployment** (500+ users): 4 CPU, 4GB RAM, PostgreSQL
 
 ### Optimization Tips
@@ -337,7 +337,7 @@ For more troubleshooting, see [DEPLOYMENT.md](DEPLOYMENT.md).
 
 See [DEPLOYMENT.md](DEPLOYMENT.md) for scaling details.
 
-## 🤝 Contributing
+## Contributing
 
 1. Fork the repository
 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
@@ -347,25 +347,25 @@ See [DEPLOYMENT.md](DEPLOYMENT.md) for scaling details.
 
 Please ensure your code follows the existing style and includes appropriate tests.
 
-## 📝 License
+## License
 
 This project is licensed under the GNU General Public License v3.0 - see the [LICENSE](LICENSE) file for details.
 
-## 🔐 Security
+## Security
 
 If you discover a security vulnerability, please report it responsibly:
 
 1. **Do not** open a public GitHub issue
 2. Create an issue with **[SECURITY]** in the title
 3. See [SECURITY.md](SECURITY.md) for full security policy
 
-## 🙏 Acknowledgments
+## Acknowledgments
 
 - [WireGuard](https://www.wireguard.com/) - Fast, modern, secure VPN tunnel
 - Built with Flask, React, and Docker
 - Inspired by the need for secure, multi-tenant VPN management
 
-## 📞 Support
+## Support
 
 - **Documentation**: [README.md](README.md), [SECURITY.md](SECURITY.md), [DEPLOYMENT.md](DEPLOYMENT.md), [FAQ.md](FAQ.md)
 - **Issues**: [GitHub Issues](https://github.com/Arthur2500/wireguard-multiclient-webui/issues)
@@ -374,4 +374,4 @@ If you discover a security vulnerability, please report it responsibly:
 
 ---
 
-**Made with ❤️ for the WireGuard community**
+**Made for the WireGuard community**

README.md

@@ -7,14 +7,8 @@ services:
     restart: unless-stopped
     env_file:
       - .env
-    environment:
-      - FLASK_ENV=production
-      - SECRET_KEY=${SECRET_KEY:-change-this-secret-key}
-      - JWT_SECRET_KEY=${JWT_SECRET_KEY:-change-this-jwt-secret}
-      - DATABASE_URL=sqlite:////data/app.db
-      - WG_CONFIG_PATH=/etc/wireguard
     ports:
-      - "51820:51820/udp"
+      - "${WG_DEFAULT_PORT:-51820}:${WG_DEFAULT_PORT:-51820}/udp"
     volumes:
       - ./data:/data
       - ./wireguard:/etc/wireguard
@@ -28,6 +22,12 @@ services:
       - net.ipv4.conf.all.src_valid_mark=1
       - net.ipv6.conf.all.forwarding=1
       - net.ipv6.conf.default.forwarding=1
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:5000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
 
   frontend:
     build:
@@ -38,14 +38,18 @@ services:
     ports:
       - "8088:80"
     depends_on:
-      - backend
+      backend:
+        condition: service_healthy
     networks:
       - wg-network
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:80"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
 
 networks:
   wg-network:
     driver: bridge
-    enable_ipv6: true
-    ipam:
-      config:
-        - subnet: fd00::/64
+    enable_ipv6: true

docker-compose.local.yml

@@ -5,14 +5,8 @@ services:
     restart: unless-stopped
     env_file:
       - .env
-    environment:
-      - FLASK_ENV=production
-      - SECRET_KEY=${SECRET_KEY:-change-this-secret-key}
-      - JWT_SECRET_KEY=${JWT_SECRET_KEY:-change-this-jwt-secret}
-      - DATABASE_URL=sqlite:////data/app.db
-      - WG_CONFIG_PATH=/etc/wireguard
     ports:
-      - "51820:51820/udp"
+      - "${WG_DEFAULT_PORT:-51820}:${WG_DEFAULT_PORT:-51820}/udp"
     volumes:
       - ./data:/data
       - ./wireguard:/etc/wireguard
@@ -55,6 +49,3 @@ networks:
   wg-network:
     driver: bridge
     enable_ipv6: true
-    ipam:
-      config:
-        - subnet: fd00::/64

docker-compose.yml

@@ -167,16 +167,17 @@
 .client-name {
   display: block;
   font-weight: 500;
-  color: var(--text-primary);
+  color: var(--primary);
   margin-bottom: 2px;
 }
 
-.client-name-link {
+.group-link {
   text-decoration: none;
   color: inherit;
 }
 
-.client-name-link:hover .client-name {
+.group-link:hover
+{
   color: var(--primary);
   text-decoration: underline;
 }
@@ -187,13 +188,12 @@
   color: var(--text-secondary);
 }
 
-.group-link {
-  color: var(--primary);
+.client-name-link {
   text-decoration: none;
   font-weight: 500;
 }
 
-.group-link:hover {
+.client-name-link:hover .client-name{
   text-decoration: underline;
 }
 

frontend/src/components/clients/ClientList.css

@@ -114,11 +114,18 @@
   border-top: 1px solid var(--border);
 }
 
-.user-info {
+.user-info-wrapper {
   display: flex;
   align-items: center;
   margin-bottom: var(--spacing-md);
   gap: 12px;
+}
+
+.user-info {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  gap: 12px;
   text-decoration: none;
   color: inherit;
   cursor: pointer;

frontend/src/components/dashboard/Layout.css

@@ -97,16 +97,18 @@ const Layout: React.FC<LayoutProps> = ({ children, user, onLogout }) => {
         </ul>
 
         <div className="sidebar-footer">
-          <Link to={user ? `/users/${user.id}/edit-profile` : '#'} className="user-info">
-            <div className="user-avatar">{user?.username.charAt(0).toUpperCase()}</div>
-            <div className="user-details">
-              <span className="user-name">{user?.username}</span>
-              <span className="user-role">{user?.role}</span>
-            </div>
+          <div className="user-info-wrapper">
+            <Link to={user ? `/users/${user.id}/edit-profile` : '#'} className="user-info">
+              <div className="user-avatar">{user?.username.charAt(0).toUpperCase()}</div>
+              <div className="user-details">
+                <span className="user-name">{user?.username}</span>
+                <span className="user-role">{user?.role}</span>
+              </div>
+            </Link>
             <button onClick={toggleDarkMode} className="theme-toggle" aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}>
               {darkMode ? <Sun size={16} /> : <Moon size={16} />}
             </button>
-          </Link>
+          </div>
           <button onClick={handleLogout} className="logout-btn">
             <LogOut size={16} /> Logout
           </button>

frontend/src/components/dashboard/Layout.tsx

@@ -59,7 +59,8 @@ const GroupList: React.FC = () => {
               <tr>
                 <th>Name</th>
                 <th>Owner</th>
-                <th>IP Range</th>
+                <th>IP Range (IPv4)</th>
+                <th>IPv6 Range</th>
                 <th>Server IP</th>
                 <th>Port</th>
                 <th>Clients</th>
@@ -80,6 +81,7 @@ const GroupList: React.FC = () => {
                   </td>
                   <td>{group.owner_username || 'Unknown'}</td>
                   <td className="mono">{group.ip_range}</td>
+                  <td className="mono">{group.ip_range_v6 || '-'}</td>
                   <td className="mono">{group.server_ip}</td>
                   <td>{group.listen_port}</td>
                   <td>{group.client_count}</td>

frontend/src/components/groups/GroupList.tsx

@@ -273,7 +273,7 @@
   color: var(--text-primary);
 }
 
-.stats-table .group-name, .stats-table .group-owner {
+.stats-table .group-name, .stats-table {
   font-weight: 500;
   color: var(--primary);
 }

frontend/src/components/stats/Stats.css

@@ -294,7 +294,7 @@ const Stats: React.FC = () => {
                     {group.name}
                   </Link>
                 </td>
-                <td className="group-owner">
+                <td>
                   <Link to={`/users/${group.owner_id}`} className="stats-link">
                     {group.owner}
                   </Link>
@@ -345,7 +345,7 @@ const Stats: React.FC = () => {
                     {client.name}
                   </Link>
                 </td>
-                <td className="group-owner">
+                <td>
                   <Link to={`/groups/${client.group_id}`} className="stats-link">
                     {client.group_name}
                   </Link>