From fe579932403289b31457e2b4eaa00892507828f1 Mon Sep 17 00:00:00 2001
From: Khanh Ngo <k@ndk.name>
Date: Sun, 19 Apr 2020 00:44:51 +0700
Subject: [PATCH] Adjust AllowedIPs field to use input tag plugin

---
 templates/base.html | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 08b0107..a1e6393 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,6 +17,8 @@
     <link rel="stylesheet" href="static/plugins/select2/css/select2.min.css">
     <!-- Toastr -->
     <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 -->
     <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
     <!-- overlayScrollbars -->
@@ -140,7 +142,8 @@
                             </div>
                             <div class="form-group">
                                 <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 class="form-group">
                                 <div class="icheck-primary d-inline">
@@ -208,6 +211,8 @@
     <script src="static/plugins/jquery-validation/jquery.validate.min.js"></script>
     <!-- Toastr -->
     <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 -->
     <script src="static/dist/js/adminlte.min.js"></script>
     <!-- AdminLTE for demo purposes -->
@@ -219,14 +224,14 @@
             var name = $("#client_name").val();
             var email = $("#client_email").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;
 
             if ($("#enabled").is(':checked')){
                 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};
             console.log(data);
 
@@ -249,6 +254,18 @@
         //Initialize Select2 Elements
         $('.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
         $(document).ready(function () {
             $.validator.setDefaults({