mirror of
https://github.com/eduardogsilva/wireguard_webadmin.git
synced 2025-10-31 10:36:17 +00:00
174 lines
11 KiB
HTML
174 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="card card-primary card-outline">
|
|
|
|
<div class="card-body">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
{% for wgconf in wireguard_instances %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {%if wgconf == current_instance%}active{%endif%}" href="/server/manage/?uuid={{wgconf.uuid}}" role="tab" >
|
|
wg{{wgconf.instance_id}} {%if wgconf.name %}({{wgconf.name}}){%endif%}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {%if not current_instance%}active{%endif%}" href="/server/manage/?action=create" role="tab" >Create Instance</a>
|
|
</li>
|
|
|
|
</ul>
|
|
<div class="tab-content" id="custom-content-below-tabContent">
|
|
<div class="tab-pane fade show active" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<div class="card-body row">
|
|
<div class="col-lg-6">
|
|
<!-- Line 1: Name and peer_list_refresh_interval -->
|
|
<div class="form-row">
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
|
|
<input type="text" class="form-control" id="{{ form.name.id_for_label }}" name="{{ form.name.html_name }}" placeholder="Enter Name" value="{{ form.name.value|default_if_none:'' }}">
|
|
</div>
|
|
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.peer_list_refresh_interval.id_for_label }}">{{ form.peer_list_refresh_interval.label }}</label>
|
|
<input type="number" class="form-control" id="{{ form.peer_list_refresh_interval.id_for_label }}" name="{{ form.peer_list_refresh_interval.html_name }}" placeholder="Persistent Keepalive" value="{{ form.peer_list_refresh_interval.value|default_if_none:'' }}" required>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- Line 2: Hostname, Listen Port and instance id -->
|
|
<div class="form-row">
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.hostname.id_for_label }}">{{ form.hostname.label }}</label>
|
|
<input type="text" class="form-control" id="{{ form.hostname.id_for_label }}" name="{{ form.hostname.html_name }}" placeholder="Hostname" value="{{ form.hostname.value|default_if_none:'' }}" required>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="{{ form.listen_port.id_for_label }}">{{ form.listen_port.label }}</label>
|
|
<input type="number" class="form-control" id="{{ form.listen_port.id_for_label }}" name="{{ form.listen_port.html_name }}" placeholder="Listen Port" value="{{ form.listen_port.value|default_if_none:'' }}" required>
|
|
</div>
|
|
|
|
<div class="form-group col-md-3">
|
|
<label for="{{ form.instance_id.id_for_label }}">{{ form.instance_id.label }}</label>
|
|
<input type="number" class="form-control" id="{{ form.instance_id.id_for_label }}" name="{{ form.instance_id.html_name }}" placeholder="Instance ID" value="{{ form.instance_id.value|default_if_none:'' }}" required>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Line 3: Private Key and Persistent Keepalive -->
|
|
<div class="form-row">
|
|
{% comment %}
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.private_key.id_for_label }}">{{ form.private_key.label }}</label>
|
|
<input type="text" class="form-control" id="{{ form.private_key.id_for_label }}" name="{{ form.private_key.html_name }}" placeholder="Private Key" value="{{ form.private_key.value|default_if_none:'' }}" required>
|
|
</div>
|
|
{% endcomment %}
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.private_key.id_for_label }}">{{ form.private_key.label }}</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="{{ form.private_key.id_for_label }}" name="{{ form.private_key.html_name }}" placeholder="Private Key" value="{{ form.private_key.value|default_if_none:'' }}" required>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-secondary toggle-password" type="button"><i class="fas fa-eye"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.public_key.id_for_label }}">{{ form.public_key.label }}</label>
|
|
<input type="text" class="form-control" id="{{ form.public_key.id_for_label }}" name="{{ form.public_key.html_name }}" placeholder="public Key" value="{{ form.public_key.value|default_if_none:'' }}" required>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Line 4: Address and Netmask -->
|
|
<div class="form-row">
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.address.id_for_label }}">{{ form.address.label }}</label>
|
|
<input type="text" class="form-control" id="{{ form.address.id_for_label }}" name="{{ form.address.html_name }}" placeholder="Address" value="{{ form.address.value|default_if_none:'' }}" required>
|
|
</div>
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.netmask.id_for_label }}">{{ form.netmask.label }}</label>
|
|
<select class="form-control" id="{{ form.netmask.id_for_label }}" name="{{ form.netmask.html_name }}">
|
|
{% for value, display in form.netmask.field.choices %}
|
|
<option value="{{ value }}" {% if form.netmask.value == value %}selected{% endif %}>{{ display }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- Line 5: Primary and secondary DNS -->
|
|
<div class="form-row">
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.dns_primary.id_for_label }}">{{ form.dns_primary.label }}</label>
|
|
<input type="text" class="form-control" id="{{ form.dns_primary.id_for_label }}" name="{{ form.dns_primary.html_name }}" placeholder="1.1.1.1" value="{{ form.dns_primary.value|default_if_none:'' }}">
|
|
</div>
|
|
<div class="form-group col-md-6">
|
|
<label for="{{ form.dns_secondary.id_for_label }}">{{ form.dns_secondary.label }}</label>
|
|
<input type="text" class="form-control" id="{{ form.dns_secondary.id_for_label }}" name="{{ form.dns_secondary.html_name }}" placeholder="1.0.0.1" value="{{ form.dns_secondary.value|default_if_none:'' }}">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<!-- Line 1: Post Up -->
|
|
<div class="form-group">
|
|
<label for="{{ form.post_up.id_for_label }}">{{ form.post_up.label }}</label>
|
|
<textarea class="form-control" id="{{ form.post_up.id_for_label }}" name="{{ form.post_up.html_name }}" placeholder="Post Up" style="height: 150px;" readonly>{{ form.post_up.value|default_if_none:'' }}</textarea>
|
|
</div>
|
|
<!-- Line 2: Post Down -->
|
|
<div class="form-group">
|
|
<label for="{{ form.post_down.id_for_label }}">{{ form.post_down.label }}</label>
|
|
<textarea class="form-control" id="{{ form.post_down.id_for_label }}" name="{{ form.post_down.html_name }}" placeholder="Post Down" style="height: 150px;" readonly>{{ form.post_down.value|default_if_none:'' }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
{% if current_instance.uuid %}
|
|
<a href='javascript:void(0)' class='btn btn-outline-danger' data-command='delete' onclick='openCommandDialog(this)'>Delete Configuration</a>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% endblock %}
|
|
|
|
|
|
{% block custom_page_scripts %}
|
|
<script>
|
|
function openCommandDialog(element) {
|
|
var command = element.getAttribute('data-command');
|
|
var confirmation = prompt("Please type 'delete wg{{ current_instance.instance_id }}' to remove the configuration.");
|
|
if (confirmation) {
|
|
var url = "?uuid={{current_instance.uuid}}&action=delete&confirmation=" + encodeURIComponent(confirmation);
|
|
window.location.href = url;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelector('.toggle-password').addEventListener('click', function () {
|
|
let passwordInput = document.getElementById('{{ form.private_key.id_for_label }}');
|
|
let passStatus = passwordInput.getAttribute('type') === 'password';
|
|
passwordInput.setAttribute('type', passStatus ? 'text' : 'password');
|
|
this.innerHTML = passStatus ? '<i class="fas fa-eye-slash"></i>' : '<i class="fas fa-eye"></i>';
|
|
});
|
|
|
|
document.getElementById('{{ form.private_key.id_for_label }}').addEventListener('keypress', function () {
|
|
this.setAttribute('type', 'text');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
{% endblock %} |