jostreff/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui.git synced 2025-04-19 19:59:13 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adjust AllowedIPs field to use input tag plugin

Browse source
This commit is contained in:
Khanh Ngo 2020-04-19 00:44:51 +07:00
parent c4e846ccd4
commit fe57993240
No known key found for this signature in database
GPG key ID: D5FAA6A16150E49E
1 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
templates/base.html
View file

@ -17,6 +17,8 @@
<link rel="stylesheet" href="static/plugins/select2/css/select2.min.css"> <link rel="stylesheet" href="static/plugins/select2/css/select2.min.css">
<!-- Toastr --> <!-- Toastr -->
<link rel="stylesheet" href="static/plugins/toastr/toastr.min.css"> <link rel="stylesheet" href="static/plugins/toastr/toastr.min.css">
<!-- Jquery Tags Input -->
<link rel="stylesheet" href="static/plugins/jquery-tags-input/jquery.tagsinput.css">
<!-- Ionicons --> <!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- overlayScrollbars --> <!-- overlayScrollbars -->
@ -140,7 +142,8 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="client_allowed_ips" class="control-label">Allowed IPs</label> <label for="client_allowed_ips" class="control-label">Allowed IPs</label>
<input type="text" class="form-control" id="client_allowed_ips" value="0.0.0.0/0"> <input type="text" data-role="tagsinput" class="form-control" id="client_allowed_ips"
value="0.0.0.0/0">
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="icheck-primary d-inline"> <div class="icheck-primary d-inline">
@ -208,6 +211,8 @@
<script src="static/plugins/jquery-validation/jquery.validate.min.js"></script> <script src="static/plugins/jquery-validation/jquery.validate.min.js"></script>
<!-- Toastr --> <!-- Toastr -->
<script src="static/plugins/toastr/toastr.min.js"></script> <script src="static/plugins/toastr/toastr.min.js"></script>
<!-- Jquery Tags Input -->
<script src="static/plugins/jquery-tags-input/jquery.tagsinput.js"></script>
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script src="static/dist/js/adminlte.min.js"></script> <script src="static/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes --> <!-- AdminLTE for demo purposes -->
@ -219,14 +224,14 @@
var name = $("#client_name").val(); var name = $("#client_name").val();
var email = $("#client_email").val(); var email = $("#client_email").val();
var allocated_ips = $("#client_allocated_ips").select2('val'); var allocated_ips = $("#client_allocated_ips").select2('val');
var allowed_ips = $("#client_allowed_ips").val(); var allowed_ips = $("#client_allowed_ips").val().split(",");
var enabled = false; var enabled = false;
if ($("#enabled").is(':checked')){ if ($("#enabled").is(':checked')){
enabled = true; enabled = true;
} }
var data = {"name": name, "email": email, "allocated_ips": [allocated_ips], "allowed_ips": [allowed_ips], var data = {"name": name, "email": email, "allocated_ips": [allocated_ips], "allowed_ips": allowed_ips,
"enabled": enabled}; "enabled": enabled};
console.log(data); console.log(data);
@ -249,6 +254,18 @@
//Initialize Select2 Elements //Initialize Select2 Elements
$('.select2').select2() $('.select2').select2()
// AllowedIPs tag input
$('#client_allowed_ips').tagsInput({
'width': '100%',
'height': '75%',
'interactive': true,
'defaultText': 'Add More',
'removeWithBackspace': true,
'minChars': 0,
'maxChars': 18,
'placeholderColor': '#666666'
});
// New client form validation // New client form validation
$(document).ready(function () { $(document).ready(function () {
$.validator.setDefaults({ $.validator.setDefaults({