Port forwarding to peers! :)

templates/base.html

@@ -151,6 +151,7 @@
     <!-- Content Header (Page header) -->
     <div class="content-header">
       <div class="container-fluid">
+        {% if page_title %}
         <div class="row mb-2">
           <div class="col-sm-6">
             <h1 class="m-0">{{ page_title }}</h1>
@@ -173,6 +174,7 @@
             </ol>
           </div><!-- /.col -->
         </div><!-- /.row -->
+        {% endif %}
       </div><!-- /.container-fluid -->
     </div>
     <!-- /.content-header -->

templates/firewall/manage_redirect_rule.html

@@ -1,3 +1,163 @@
 {% extends 'base.html' %}
 
-{% block content %}gerenciar regra{%endblock%}
+{% block content %}
+
+<div class="container mt-3">
+    <div class="card card-primary card-outline">
+        <div class="card-header">
+            <h3 class="card-title">{{ form.instance.pk|yesno:"Edit User,Create New User" }}</h3>
+        </div>
+        <div class="card-body">
+<div class="row">
+    <div class="col-md-4">
+
+<form method="post">
+    {% csrf_token %}
+    <div class="form-group">
+        <label for="id_description">Description</label>
+        <input type="text" class="form-control" id="id_description" name="description" placeholder="Description" value="{{ form.description.value|default_if_none:'' }}">
+    </div>
+        <div class="form-group">
+            <label for="id_protocol">Protocol</label>
+            <select class="form-control" id="id_protocol" name="protocol">
+                <option value="tcp" {% if form.protocol.value == "tcp" %}selected{% endif %}>TCP</option>
+                <option value="udp" {% if form.protocol.value == "udp" %}selected{% endif %}>UDP</option>
+            </select>
+        </div>
+
+    
+        <div class="form-group">
+            <label for="id_port">Port</label>
+            <input type="number" class="form-control" id="id_port" name="port" value="{{ form.port.value|default_if_none:'' }}">
+        </div>
+
+    
+    
+    
+    <div class="form-group">
+        <label for="destinationType">Destination Type:</label>
+        <select class="form-control" name="destinationType" id="destinationType">
+            <option value="peer">Peer</option>
+            <option value="ipAddress" {% if instance.ip_address %}selected{% endif %}>IP Address</option>
+        </select>
+
+
+    </div>
+    <div class="form-group">
+        <label for="id_peer">Peer</label>
+        <select class="form-control" id="id_peer" name="peer">
+            <option value="">---------</option>
+            {% for peer in form.fields.peer.queryset %}
+            <option value="{{ peer.pk }}" {% if form.instance.peer_id == peer.pk %}selected{% endif %}>{{ peer }}</option>
+            {% endfor %}
+        </select>
+    </div>
+    <div class="form-group">
+        <label for="id_wireguard_instance">WireGuard Instance</label>
+        <select class="form-control" id="id_wireguard_instance" name="wireguard_instance">
+            {% comment %}<option value="">---------</option>{% endcomment %}
+            {% for instance in form.fields.wireguard_instance.queryset %}
+            <option value="{{ instance.pk }}" {% if form.instance.wireguard_instance_id == instance.pk %}selected{% endif %}>{{ instance }}</option>
+            {% endfor %}
+        </select>
+    </div>
+    <div class="form-group">
+        <label for="id_ip_address">IP Address</label>
+        <input type="text" class="form-control" id="id_ip_address" name="ip_address" placeholder="IP Address" value="{{ form.ip_address.value|default_if_none:'' }}">
+    </div>
+
+    <div class="form-group">
+        <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="id_add_forward_rule" name="add_forward_rule" {% if form.add_forward_rule.value %}checked{% endif %}>
+            <label class="form-check-label" for="id_add_forward_rule">Add Forward Rule (allow)</label>
+        </div>
+    </div>
+    <div class="form-group">
+        <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="id_masquerade_source" name="masquerade_source" {% if form.masquerade_source.value %}checked{% endif %}>
+            <label class="form-check-label" for="id_masquerade_source">Masquerade Source</label>
+        </div>
+    </div>
+
+    <button type="submit" class="btn btn-primary">Submit</button>
+    <a href="/firewall/port_forward/" class="btn btn-secondary">Cancel</a>
+    {% if instance %}<a href='javascript:void(0)' class='btn btn-outline-danger' data-command='delete' onclick='openCommandDialog(this)'>Delete Rule</a>{% endif %}
+    
+</form>
+
+        
+    </div>
+        
+    
+    <div class="col-md-8">
+        <h5>Default Ports</h5>
+        <p>The default <code>docker-compose.yml</code> file specifies the <b>TCP</b> port range <b>8080-8089</b>. If you wish to change the port forwarding to a different range, you must manually edit the <code>docker-compose.yml</code> file and rerun the Docker Compose step outlined in the <a href="https://github.com/eduardogsilva/wireguard_webadmin?tab=readme-ov-file#deployment">deployment instructions</a>.</p>
+
+        <h5>Destination Type: Peer</h5>
+        <p>Port redirection will prioritize the first Peer IP address assigned a priority of Zero.</p>
+
+        <h5>Destination Type: IP Address</h5>
+        <p>Port forwarding rules will redirect to the specified IP address. Remember to allocate the IP address or network to a Peer.</p>
+
+        <h5>Adding a Forward Rule</h5>
+        <p>Automatically generates a forwarding rule to accommodate stricter firewall settings.</p>
+
+        <h5>Masquerade Source</h5>
+        <p>This serves as a temporary solution when a peer does not use the VPN as its default gateway. It's important to note that this configuration is not recommended, as it alters the source address of all connections to match the IP address of the WireGuard instance.</p>        
+
+    </div>
+
+
+</div>
+        
+    </div>
+    </div>
+</div>
+
+
+
+{% endblock %}
+
+{% block custom_page_scripts %}
+<script>
+    function adjustVisibilityBasedOnDestinationType() {
+        var selectedType = document.getElementById("destinationType").value;
+        var peerField = document.getElementById("id_peer").closest(".form-group");
+        var wireguardInstanceField = document.getElementById("id_wireguard_instance").closest(".form-group");
+        var ipAddressField = document.getElementById("id_ip_address").closest(".form-group");
+
+        if (selectedType === "peer") {
+            peerField.style.display = "";
+            wireguardInstanceField.style.display = "none";
+            ipAddressField.style.display = "none";
+            //document.getElementById("id_wireguard_instance").value = "";
+            document.getElementById("id_ip_address").value = "";
+        } else if (selectedType === "ipAddress") {
+            peerField.style.display = "none";
+            wireguardInstanceField.style.display = "";
+            ipAddressField.style.display = "";
+            document.getElementById("id_peer").value = "";
+        }
+    }
+
+    // Chama a função no carregamento da página
+    document.addEventListener("DOMContentLoaded", adjustVisibilityBasedOnDestinationType);
+
+    // E também na mudança do campo
+    document.getElementById("destinationType").addEventListener("change", adjustVisibilityBasedOnDestinationType);
+</script>
+
+
+
+<script>
+    function openCommandDialog(element) {
+        var command = element.getAttribute('data-command');
+        var confirmation = prompt("Please type '{{ instance.protocol }}{{ instance.port }}' to remove this rule.");
+        if (confirmation) {
+            var url = "?uuid={{ instance.uuid }}&action=delete&confirmation=" + encodeURIComponent(confirmation);
+            window.location.href = url;
+        }
+    }
+</script>
+
+{% endblock %}

templates/firewall/redirect_rule_list.html

@@ -1,3 +1,66 @@
 {% extends 'base.html' %}
 
-{% block content %}Lista{%endblock%}
+{% block content %}
+
+<table class="table table-striped">
+    <thead>
+        <tr>
+            <th>Instance</th>
+            <th>Protocol</th>
+            <th>Port</th>
+            <th>Destination</th>
+            <th>Allow Forward</th>
+            <th>Masquerade Source</th>
+            <th>Actions</th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for redirect_rule in redirect_rule_list %}
+            <tr>
+                <td>{{ redirect_rule.wireguard_instance }}</td>
+                <td>{{ redirect_rule.protocol }}</td>
+                <td>{{ redirect_rule.port }}</td>
+                <td>
+                    {% if redirect_rule.peer %}
+                        <a href="/peer/manage/?peer={{ redirect_rule.peer.uuid }}">
+                        {% if redirect_rule.peer.name %}
+                            {{ redirect_rule.peer.name }}
+                        {% else %}
+                            {{ redirect_rule.peer.public_key|slice:":16" }}{% if redirect_rule.peer.public_key|length > 16 %}...{% endif %}
+                        {% endif %}
+                        </a>                    
+                    {% else %}
+                        {{ redirect_rule.ip_address }}
+                    {% endif %}
+                </td>
+                <td>
+                    
+                    {% if redirect_rule.add_forward_rule %}
+                        <i class="fas fa-check"></i>
+                    {% else %}
+                        <i class="fas fa-times"></i>
+
+                    {% endif %}
+                
+                </td>
+                <td>
+                    {% if redirect_rule.masquerade_source %}
+                        <i class="fas fa-check"></i>
+                        <i class="fas fa-exclamation-triangle" title="This serves as a temporary solution when a peer does not use the VPN as its default gateway. It's important to note that this configuration is not recommended, as it alters the source address of all connections to match the IP address of the WireGuard instance."></i>
+                    {% else %}
+                        <i class="fas fa-times"></i>
+
+                    {% endif %}
+
+                </td>
+                <td style="width: 1%; white-space: nowrap;">
+                    <a href="/firewall/manage_port_forward_rule/?uuid={{ redirect_rule.uuid }}" ><i class="far fa-edit"></i></a>
+                </td>
+            </tr>
+        {% endfor %}
+
+    </tbody>
+</table>
+
+<a href="/firewall/manage_port_forward_rule/" class='btn btn-primary'>Create Port forwarding Rule</a>
+{% endblock %}

templates/user_manager/manage_user.html

@@ -68,11 +68,6 @@
     </div>
 
 
-</div>
-<div class="row">
-    <div class="col-md-12">
-        
-    </div>
 </div>
         
     </div>

templates/wireguard/welcome.html

@@ -1,17 +1,28 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>Welcome to wireguard_webadmin</h1>
-    <p>I've been working hard on it over the past week and plan to continue making corrections and finishing it in the coming days.</p>
-    <p>Currently, it's quite functional, but there's still a need to polish various aspects of the interface to enhance usability.</p>
-    <p>If you encounter any issues or have suggestions, please open an issue on GitHub so I can review it.</p>
-    <h2>TODO list</h2>
-    <ul>
-        <li>AllowedIPs on client configuration side.</li>
-        <li>Allow peer portforwarding</li>
-    </ul>
-    
 
-    <p>Keep checking the GitHub page, I will be updating this project very soon.</p>
+<h1>Welcome to WireGuard WebAdmin</h1>
+<p>WireGuard WebAdmin is a web-based interface designed for managing WireGuard VPN, a remarkably simple, fast, and modern VPN that employs cutting-edge cryptography.</p>
+<p>I have dedicated significant effort to this project over the past few weeks and am thrilled to announce that the primary functionalities are performing as anticipated!</p>
+
+<p>I just introduced the port forwarding feature. It is functioning well, aside from a few minor issues that I intend to resolve shortly.</p>
+<h3>Known Port Forwarding Issues</h3>
+<ul>
+    <li>Upon creating a port forwarding rule and updating the service, an initial reload may trigger a warning. This is due to the PostDown script's inability to remove a rule that does not yet exist.</li>
+    <li>Unchecking "Allow Forward" or "Masquerade Source" and then updating the service, fails to properly remove the corresponding iptables rules.</li>
+    <li>Deleting a rule and reloading the service does not properly remove the corresponding iptables rules.</li>
+</ul>
+<p>These issues are on my radar for fixes in the near future. In the meantime, restarting the main Docker container will cause the firewall to rebuild as expected, eliminating any lingering rules.</p>
+<br>
+<h3>Upcoming Enhancements</h3>
+<ul>
+    <li>Implementing AllowedIPs in the client configuration.</li>
+    <li>Revising the firewall logic for PostUp/PostDown scripts.</li>
+    <li>Developing a straightforward firewall management interface.</li>
+</ul>
+
+<p>Stay tuned to our GitHub page for imminent updates to this project.</p>
+
 
 {% endblock %}