Finished developing add config

This commit is contained in:
Donald Cheng Hong Zou
2022-03-24 02:10:52 -04:00
parent cc1dd682e8
commit 46efe2b8dd
6 changed files with 381 additions and 135 deletions

View File

@@ -13,12 +13,16 @@
<div style="display: flex; flex-direction: row; align-items: center;">
<h1 class="pb-4 mt-4">Home</h1>
</div>
{% if msg != "" %}
<!-- {% if msg != "" %}
<div class="alert alert-danger" role="alert">
Configuration toggle failed. Please check the following error message:
</div>
<pre class="index-alert"><code>{{ msg }}</code></pre>
{% endif %}
{% endif %} -->
<div class="index-alert alert alert-danger d-none" role="alert">
Configuration toggle failed. Please check the following error message:
</div>
<pre class="index-alert index-alert-full d-none"><code></code></pre>
{% if conf == [] %}
<p class="text-muted">You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard".</p>
@@ -48,17 +52,11 @@
<input type="checkbox" class="toggle--switch" id="{{i['conf']}}-switch" {{i['checked']}} data-conf-id="{{i['conf']}}">
<label for="{{i['conf']}}-switch" class="toggleLabel"></label>
</div>
<!-- {% if i['checked'] == "checked" %}
<a href="#" id="{{i['conf']}}" class="switch text-primary tt"><i class="bi bi-toggle2-on"></i></a>
{% else %}
<a href="#" id="{{i['conf']}}" {{i['checked']}} class="switch text-secondary"><i class="bi bi-toggle2-off"></i></a>
{% endif %} -->
<!-- <div class="spinner-border text-primary" role="status" style="display: none">
<span class="sr-only">Loading...</span>
</div> -->
</div>
</div>
<div class="card-message"></div>
</div>
</div>
{%endfor%}
</main>
@@ -84,53 +82,49 @@
</button>
<div class="alert-body"></div>
</div>
<form id="add_peer_form">
<pre id="addCconfigurationAlertMessage" class="index-alert d-none"></pre>
<form id="add_configuration_form">
<div class="form-group">
<div>
<label for="addConfigurationPrivateKey">Private Key</label>
<label for="addConfigurationPrivateKey">Private Key <code>*</code></label>
</div>
<div class="input-group">
<input type="text" class="form-control codeFont" id="addConfigurationPrivateKey" aria-describedby="addConfigurationPrivateKey">
<input type="text" class="form-control codeFont" id="addConfigurationPrivateKey" name="addConfigurationPrivateKey" required>
<div class="input-group-append">
<button type="button" class="btn btn-danger" id="reGeneratePrivateKey" data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i class="bi bi-arrow-repeat"></i></button>
</div>
</div>
</div>
<div class="form-group">
<div>
<label for="addConfigurationPublicKey">Public Key</label>
</div>
<div class="input-group">
<input type="text" class="form-control codeFont" id="addConfigurationPublicKey" aria-describedby="addConfigurationPublicKey" disabled>
<div id="addConfigurationPrivateKeyFeedback" class="input-feedback"></div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="form-group">
<label for="addConfigurationName">Configuration Name <code>(Required)</code></label>
<input type="text" class="form-control" id="addConfigurationName">
<label for="addConfigurationName">Configuration Name <code>*</code></label>
<input type="text" class="form-control" id="addConfigurationName" name="addConfigurationName" required>
<div id="addConfigurationNameFeedback" class="input-feedback"></div>
</div>
</div>
<div class="col-sm">
<div class="form-group">
<label for="addConfigurationListenPort">Listen Port <code>(Required)</code></label>
<input type="number" class="form-control codeFont" id="addConfigurationListenPort">
<label for="addConfigurationListenPort">Listen Port <code>*</code></label>
<input type="number" class="form-control codeFont" id="addConfigurationListenPort" name="addConfigurationListenPort" required>
<div id="addConfigurationListenPortFeedback" class="input-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="form-group">
<label for="addConfigurationAddress">Address <code>(Required)</code></label>
<input type="text" class="form-control codeFont" id="addConfigurationAddress" placeholder="Ex: 192.168.0.1/24">
<div id="addConfigurationAddressFeedback" class="input-feedback">
Please provide a valid city.
</div>
<label for="addConfigurationAddress">Address <code>*</code>
</label>
<input type="text" class="form-control codeFont" id="addConfigurationAddress" placeholder="Ex: 192.168.0.1/24" name="addConfigurationAddress" required>
<div id="addConfigurationAddressFeedback" class="input-feedback"></div>
</div>
</div>
<div class="col-sm">
<div class="form-group">
<label for="">Available IPs for peers</label>
<label for=""># of available IPs</label>
<p class="addConfigurationAvailableIPs">N/A</p>
</div>
</div>
@@ -139,28 +133,26 @@
<hr>
<div class="form-group">
<label for="addConfigurationPreUp">PreUp</label>
<input type="text" class="form-control codeFont" id="addConfigurationPreUp">
<input type="text" class="form-control codeFont" id="addConfigurationPreUp" name="addConfigurationPreUp">
</div>
<div class="form-group">
<label for="addConfigurationPreDown">PreDown</label>
<input type="text" class="form-control codeFont" id="addConfigurationPreDown">
<input type="text" class="form-control codeFont" id="addConfigurationPreDown" name="addConfigurationPreDown">
</div>
<div class="form-group">
<label for="addConfigurationPostUp">PostUp</label>
<input type="text" class="form-control codeFont" id="addConfigurationPostUp">
<input type="text" class="form-control codeFont" id="addConfigurationPostUp" name="addConfigurationPostUp">
</div>
<div class="form-group">
<label for="addConfigurationPostDown">PostDown</label>
<input type="text" class="form-control codeFont" id="addConfigurationPostDown">
<input type="text" class="form-control codeFont" id="addConfigurationPostDown" name="addConfigurationPostDown">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="add_configuration">Add</button>
<button type="button" class="btn btn-primary" id="addConfigurationBtn">Add</button>
<p class="text-primary addConfigurationStatus d-none"></p>
</div>
</div>
</div>