diff --git a/src/api.py b/src/api.py
index ca15d70..da40482 100644
--- a/src/api.py
+++ b/src/api.py
@@ -1,43 +1,49 @@
 import ipaddress, subprocess, datetime, os, util
 from util import *
+
 notEnoughParameter = {"status": False, "reason": "Please provide all required parameters."}
 good = {"status": True, "reason": ""}
 
+
 def togglePeerAccess(data, g):
     checkUnlock = g.cur.execute(f"SELECT * FROM {data['config']} WHERE id='{data['peerID']}'").fetchone()
     if checkUnlock:
-        moveUnlockToLock = g.cur.execute(f"INSERT INTO {data['config']}_restrict_access SELECT * FROM {data['config']} WHERE id = '{data['peerID']}'")
+        moveUnlockToLock = g.cur.execute(
+            f"INSERT INTO {data['config']}_restrict_access SELECT * FROM {data['config']} WHERE id = '{data['peerID']}'")
         if g.cur.rowcount == 1:
             print(g.cur.rowcount)
             print(util.deletePeers(data['config'], [data['peerID']], g.cur, g.db))
     else:
-        moveLockToUnlock = g.cur.execute(f"SELECT * FROM {data['config']}_restrict_access WHERE id='{data['peerID']}'").fetchone()
+        moveLockToUnlock = g.cur.execute(
+            f"SELECT * FROM {data['config']}_restrict_access WHERE id = '{data['peerID']}'").fetchone()
         try:
             if len(moveLockToUnlock[-1]) == 0:
-                status = subprocess.check_output(f"wg set {data['config']} peer {moveLockToUnlock[0]} allowed-ips {moveLockToUnlock[11]}",
-                                            shell=True, stderr=subprocess.STDOUT)
+                status = subprocess.check_output(
+                    f"wg set {data['config']} peer {moveLockToUnlock[0]} allowed-ips {moveLockToUnlock[11]}",
+                    shell=True, stderr=subprocess.STDOUT)
             else:
                 now = str(datetime.datetime.now().strftime("%m%d%Y%H%M%S"))
                 f_name = now + "_tmp_psk.txt"
                 f = open(f_name, "w+")
                 f.write(moveLockToUnlock[-1])
                 f.close()
-                subprocess.check_output(f"wg set {data['config']} peer {moveLockToUnlock[0]} allowed-ips {moveLockToUnlock[11]} preshared-key {f_name}",
-                                            shell=True, stderr=subprocess.STDOUT)
+                subprocess.check_output(
+                    f"wg set {data['config']} peer {moveLockToUnlock[0]} allowed-ips {moveLockToUnlock[11]} preshared-key {f_name}",
+                    shell=True, stderr=subprocess.STDOUT)
                 os.remove(f_name)
             status = subprocess.check_output(f"wg-quick save {data['config']}", shell=True, stderr=subprocess.STDOUT)
-            g.cur.execute(f"INSERT INTO {data['config']} SELECT * FROM {data['config']}_restrict_access WHERE id = '{data['peerID']}'")
+            g.cur.execute(
+                f"INSERT INTO {data['config']} SELECT * FROM {data['config']}_restrict_access WHERE id = '{data['peerID']}'")
             if g.cur.rowcount == 1:
                 g.cur.execute(f"DELETE FROM {data['config']}_restrict_access WHERE id = '{data['peerID']}'")
-                
+
         except subprocess.CalledProcessError as exc:
             return {"status": False, "reason": str(exc.output.strip())}
     return good
 
 
-
 class addConfiguration:
-    def AddressCheck(data):
+    def AddressCheck(self, data):
         address = data['address']
         address = address.replace(" ", "")
         address = address.split(',')
@@ -49,11 +55,11 @@ class addConfiguration:
             except ValueError as e:
                 return {"status": False, "reason": str(e)}
         if amount >= 1:
-            return {"status": True, "reason":"", "data":f"Total of {amount} IPs"}
+            return {"status": True, "reason": "", "data": f"Total of {amount} IPs"}
         else:
-            return {"status": True, "reason":"", "data":f"0 available IPs"}
-    
-    def PortCheck(data, configs):
+            return {"status": True, "reason": "", "data": f"0 available IPs"}
+
+    def PortCheck(self, data, configs):
         port = data['port']
         if (not port.isdigit()) or int(port) < 1 or int(port) > 65535:
             return {"status": False, "reason": f"Invalid port."}
@@ -61,20 +67,28 @@ class addConfiguration:
             if i['port'] == port:
                 return {"status": False, "reason": f"{port} used by {i['conf']}."}
         return good
-    
-    def NameCheck(data, configs):
+
+    def NameCheck(self, data, configs):
         name = data['name']
         name = name.replace(" ", "")
         for i in configs:
             if name == i['conf']:
-               return {"status": False, "reason":f"{name} already existed."}
+                return {"status": False, "reason": f"{name} already existed."}
+        illegal_filename = ["(Space)", " ", ".", ",", "/", "?", "<", ">", "\\", ":", "*", '|' '\"', "com1", "com2",
+                            "com3",
+                            "com4", "com5", "com6", "com7", "com8", "com9", "lpt1", "lpt2", "lpt3", "lpt4",
+                            "lpt5", "lpt6", "lpt7", "lpt8", "lpt9", "con", "nul", "prn"]
+        for i in illegal_filename:
+            name = name.replace(i, "")
+        if len(name) == 0:
+            return {"status": False, "reason": "Invalid name."}
         return good
 
-    def addConfiguration(data, configs, WG_CONF_PATH):
+    def addConfiguration(self, data, configs, WG_CONF_PATH):
         output = ["[Interface]", "SaveConfig = true"]
-        required = ['addConfigurationPrivateKey', 'addConfigurationListenPort', 
-                'addConfigurationAddress', 'addConfigurationPreUp', 'addConfigurationPreDown', 
-                'addConfigurationPostUp', 'addConfigurationPostDown']
+        required = ['addConfigurationPrivateKey', 'addConfigurationListenPort',
+                    'addConfigurationAddress', 'addConfigurationPreUp', 'addConfigurationPreDown',
+                    'addConfigurationPostUp', 'addConfigurationPostDown']
         for i in required:
             e = data[i]
             if len(e) != 0:
@@ -82,14 +96,42 @@ class addConfiguration:
                 o = f"{key} = {e}"
                 output.append(o)
         name = data['addConfigurationName']
-        illegal_filename = [" ",".", ",", "/", "?", "<", ">", "\\", ":", "*", '|' '\"', "com1", "com2", "com3",
-                                    "com4", "com5", "com6", "com7", "com8", "com9", "lpt1", "lpt2", "lpt3", "lpt4",
-                                    "lpt5", "lpt6", "lpt7", "lpt8", "lpt9", "con", "nul", "prn"]
+        illegal_filename = ["(Space)", " ", ".", ",", "/", "?", "<", ">", "\\", ":", "*", '|' '\"', "com1", "com2",
+                            "com3",
+                            "com4", "com5", "com6", "com7", "com8", "com9", "lpt1", "lpt2", "lpt3", "lpt4",
+                            "lpt5", "lpt6", "lpt7", "lpt8", "lpt9", "con", "nul", "prn"]
         for i in illegal_filename:
             name = name.replace(i, "")
+
         try:
             newFile = open(f"{WG_CONF_PATH}/{name}.conf", "w+")
             newFile.write("\n".join(output))
         except Exception as e:
-            return {"status": False, "reason":str(e)}
-        return {"status": True, "reason":"", "data": name}
\ No newline at end of file
+            return {"status": False, "reason": str(e)}
+        return {"status": True, "reason": "", "data": name}
+
+    def deleteConfiguration(self, data, config, g, WG_CONF_PATH):
+        confs = []
+        for i in config:
+            confs.append(i['conf'])
+        print(confs)
+        if data['name'] not in confs:
+            return {"status": False, "reason": "Configuration does not exist", "data": ""}
+        for i in config:
+            if i['conf'] == data['name']:
+                if i['status'] == "running":
+                    try:
+                        subprocess.check_output("wg-quick down " + data['name'], shell=True, stderr=subprocess.STDOUT)
+                    except subprocess.CalledProcessError as exc:
+                        return {"status": False, "reason": "Can't stop peer", "data": str(exc.output.strip().decode("utf-8"))}
+
+            g.cur.execute(f'DROP TABLE {data["name"]}')
+            g.cur.execute(f'DROP TABLE {data["name"]}_restrict_access')
+            g.db.commit()
+
+            try:
+                os.remove(f'{WG_CONF_PATH}/{data["name"]}.conf')
+            except Exception as e:
+                return {"status": False, "reason": "Can't delete peer", "data": str(e)}
+
+            return good
\ No newline at end of file
diff --git a/src/dashboard.py b/src/dashboard.py
index 33671b9..1bce24c 100644
--- a/src/dashboard.py
+++ b/src/dashboard.py
@@ -1011,7 +1011,7 @@ def configuration(config_name):
         conf_data['checked'] = "checked"
     config_list = get_conf_list()
     if config_name not in [conf['conf'] for conf in config_list]:
-        return render_template('index.html', conf=get_conf_list())
+        return redirect('/')
 
     refresh_interval = int(config.get("Server", "dashboard_refresh_interval"))
     dns_address = config.get("Peers", "peer_global_DNS")
@@ -1110,14 +1110,14 @@ def switch(config_name):
                                             shell=True, stderr=subprocess.STDOUT)
         except subprocess.CalledProcessError as exc:
             # session["switch_msg"] = exc.output.strip().decode("utf-8")
-            return jsonify({"status": False, "reason":"Can't stop peer", "message": str(exc.output.strip().decode("utf-8"))})
+            return jsonify({"status": False, "reason":"Can't stop configuration", "message": str(exc.output.strip().decode("utf-8"))})
     elif status == "stopped":
         try:
             subprocess.check_output("wg-quick up " + config_name,
                                     shell=True, stderr=subprocess.STDOUT)
         except subprocess.CalledProcessError as exc:
             # session["switch_msg"] = exc.output.strip().decode("utf-8")
-            return jsonify({"status": False, "reason":"Can't turn on peer", "message": str(exc.output.strip().decode("utf-8"))})
+            return jsonify({"status": False, "reason":"Can't turn on configuration", "message": str(exc.output.strip().decode("utf-8"))})
     return jsonify({"status": True, "reason":""})
 
 @app.route('/add_peer_bulk/<config_name>', methods=['POST'])
@@ -1556,7 +1556,7 @@ def addConfigurationAddressCheck():
     returnData = {"status": True, "reason": ""}
     required = ['address']
     if checkJSONAllParameter(required, data):
-        returnData = api.addConfiguration.AddressCheck(data)
+        returnData = api.addConfiguration.AddressCheck(api.addConfiguration, data)
     else:
         return jsonify(api.notEnoughParameter)
     return jsonify(returnData)
@@ -1567,7 +1567,7 @@ def addConfigurationPortCheck():
     returnData = {"status": True, "reason": ""}
     required = ['port']
     if checkJSONAllParameter(required, data):
-        returnData = api.addConfiguration.PortCheck(data, get_conf_list())
+        returnData = api.addConfiguration.PortCheck(api.addConfiguration, data, get_conf_list())
     else:
         return jsonify(api.notEnoughParameter)
     return jsonify(returnData)
@@ -1578,7 +1578,7 @@ def addConfigurationNameCheck():
     returnData = {"status": True, "reason": ""}
     required = ['name']
     if checkJSONAllParameter(required, data):
-        returnData = api.addConfiguration.NameCheck(data, get_conf_list())
+        returnData = api.addConfiguration.NameCheck(api.addConfiguration, data, get_conf_list())
     else:
         return jsonify(api.notEnoughParameter)
     return jsonify(returnData)
@@ -1597,11 +1597,36 @@ def addConfiguration():
     for i in required:
         if i not in data.keys():
             return jsonify(api.notEnoughParameter)
+    config = get_conf_list()
+    nameCheck = api.addConfiguration.NameCheck(api.addConfiguration, {"name": data['addConfigurationName']}, config)
+    if not nameCheck['status']:
+        return nameCheck
 
-    returnData = api.addConfiguration.addConfiguration(data, get_conf_list(), WG_CONF_PATH)
+    portCheck = api.addConfiguration.PortCheck(api.addConfiguration, {"port": data['addConfigurationListenPort']}, config)
+    if not portCheck['status']:
+        return portCheck
+
+    addressCheck = api.addConfiguration.AddressCheck(api.addConfiguration, {"address": data['addConfigurationAddress']})
+    if not addressCheck['status']:
+        return addressCheck
+
+    returnData = api.addConfiguration.addConfiguration(api.addConfiguration, data, config, WG_CONF_PATH)
     return jsonify(returnData)
-    
 
+@app.route('/api/deleteConfiguration', methods=['POST'])
+def deleteConfiguration():
+    data = request.get_json()
+    returnData = {"status": True, "reason": "", "data":""}
+    required = ['name']
+    if not checkJSONAllParameter(required, data):
+        return jsonify(api.notEnoughParameter)
+
+    returnData = api.addConfiguration.deleteConfiguration(api.addConfiguration, data, get_conf_list(), g, WG_CONF_PATH)
+
+
+
+
+    return returnData
 
 """
 Dashboard Tools Related
diff --git a/src/static/css/dashboard.css b/src/static/css/dashboard.css
index 39ce07c..c793458 100644
--- a/src/static/css/dashboard.css
+++ b/src/static/css/dashboard.css
@@ -272,7 +272,6 @@ body {
 }
 
 .index-switch {
-    text-align: right;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -671,7 +670,7 @@ pre.index-alert {
 }
 
 #switch{
-    transition: all 350ms ease-in;
+    transition: all 200ms ease-in;
 }
 
 .toggle--switch{
@@ -686,7 +685,7 @@ pre.index-alert {
     position: relative;
     border: 2px solid #6c757d8c;
     border-radius: 100px;
-    transition: all 350ms ease-in;
+    transition: all 200ms ease-in;
     cursor: pointer;
     margin: 0;
 }
@@ -706,10 +705,15 @@ pre.index-alert {
     animation-name: off;
     animation-duration: 350ms;
     animation-fill-mode: forwards;
-    transition: all 350ms ease-in;
+    transition: all 200ms ease-in;
     cursor: pointer;
 }
 
+.toggleLabel:hover::before{
+    filter: brightness(1.2);
+}
+
+
 .toggle--switch:checked + .toggleLabel{
     background-color: #007bff17 !important;
     border: 2px solid #007bff8c;
@@ -787,4 +791,12 @@ pre.index-alert {
 #reGeneratePrivateKey{
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
-}
\ No newline at end of file
+}
+
+.addConfigurationToggleStatus.waiting{
+    opacity: 0.5;
+}
+
+/*.conf_card .card-body .row .card-col{*/
+/*    margin-bottom: 0.5rem;*/
+/*}*/
\ No newline at end of file
diff --git a/src/static/css/dashboard.min.css b/src/static/css/dashboard.min.css
index 6459c8b..3ae3133 100644
--- a/src/static/css/dashboard.min.css
+++ b/src/static/css/dashboard.min.css
@@ -1 +1 @@
-body{font-size:.875rem}.feather{height:16px;vertical-align:text-bottom;width:16px}.btn-primary{font-weight:700}.sidebar{bottom:0;box-shadow:inset -1px 0 0 rgba(0,0,0,.1);left:0;padding:48px 0 0;position:fixed;top:0;z-index:100}.sidebar-sticky{height:calc(100vh - 48px);overflow-x:hidden;overflow-y:auto;padding-top:.5rem;position:relative;top:0}@supports ((position:-webkit-sticky) or (position:sticky)){.sidebar-sticky{position:-webkit-sticky;position:sticky}}.sidebar .nav-link{color:#333;font-weight:500;transition:.2s cubic-bezier(.82,-.07,0,1.01)}.nav-link:hover{background-color:#dfdfdf;padding-left:30px}.sidebar .nav-link .feather{color:#999;margin-right:4px}.sidebar .nav-link.active{color:#007bff}.sidebar .nav-link.active .feather,.sidebar .nav-link:hover .feather{color:inherit}.sidebar-heading{font-size:.75rem;text-transform:uppercase}.navbar-brand{background-color:rgba(0,0,0,.25);box-shadow:inset -1px 0 0 rgba(0,0,0,.25);font-size:1rem;padding-bottom:.75rem;padding-top:.75rem}.navbar .navbar-toggler{right:1rem;top:.25rem}.form-control{transition:all .2s ease-in-out}.form-control:disabled{cursor:not-allowed}.navbar .form-control{border-radius:0;border-width:0;padding:.75rem 1rem}.form-control-dark{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.1);color:#fff}.form-control-dark:focus{border-color:transparent;box-shadow:0 0 0 3px hsla(0,0%,100%,.25)}.dot{border-radius:50px;display:inline-block;height:10px;margin-left:auto!important;width:10px}.dot-running{background-color:#28a745!important;box-shadow:0 0 0 .2rem #28a74545}.h6-dot-running{margin-left:.3rem}.dot-stopped{background-color:#6c757d!important}.card-running{border-color:#28a745}.info h6{line-break:anywhere;opacity:1;transition:all .4s cubic-bezier(.96,-.07,.34,1.01)}.info .row .col-sm{display:flex;flex-direction:column}.info .row .col-sm small{display:flex}.info .row .col-sm small strong:last-child(1){margin-left:auto!important}.btn-control{border:none!important;padding:0 1rem 0 0}.btn-control:active,.btn-control:focus{background-color:transparent!important;border:none!important;box-shadow:none}.btn-qrcode-peer{padding:0!important}.btn-qrcode-peer:active,.btn-qrcode-peer:hover{border:0!important;transform:scale(.9) rotate(180deg)}.btn-download-peer:active,.btn-download-peer:hover{color:#17a2b8!important;transform:translateY(5px)}.share_peer_btn_group .btn-control{margin:0 0 0 1rem;padding:0!important;transition:all .4s cubic-bezier(1,-.43,0,1.37)}.btn-control:hover{background:#fff}.btn-delete-peer:hover{color:#dc3545}.btn-lock-peer:hover{color:#28a745}.btn-lock-peer.lock,.btn-lock-peer.lock:hover{color:#6c757d}.btn-setting-peer:hover{color:#007bff}.btn-download-peer:hover{color:#17a2b8}.login-container{padding:2rem}@media (max-width:992px){.card-col{margin-bottom:1rem}}.switch{font-size:2rem}.switch:hover{text-decoration:none}.btn-group-label:hover{background:#fff;border-color:#007bff;color:#007bff}.peer_data_group{display:flex;margin-bottom:.5rem;text-align:right}.peer_data_group p{margin-bottom:0;margin-right:1rem;text-transform:uppercase}@media (max-width:768px){.peer_data_group{text-align:left}}.index-switch{align-items:center;display:flex;justify-content:flex-end;text-align:right}main{margin-bottom:3rem}.peer_list{margin-bottom:7rem}@media (max-width:768px){.add_btn{bottom:1.5rem!important}.peer_list{margin-bottom:7rem!important}}.btn-manage-group{bottom:3rem;display:flex;position:fixed;right:2rem;z-index:99}.btn-manage-group .setting_btn_menu{background-color:#fff;border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);display:none;min-width:200px;opacity:0;padding:1rem 0;position:absolute;right:0;top:-124px;transform:translateY(-30px);transition:all .3s cubic-bezier(.58,.03,.05,1.28)}.btn-manage-group .setting_btn_menu.show{display:block}.setting_btn_menu.showing{opacity:1;transform:translateY(0)}.setting_btn_menu a{align-items:center;cursor:pointer;display:flex;font-size:1rem;padding:.5rem 1rem;transition:all .1s ease-in-out}.setting_btn_menu a:hover{background-color:#efefef;text-decoration:none}.setting_btn_menu a i{margin-right:auto!important}.add_btn{margin-right:1rem}.add_btn,.setting_btn{border-radius:100px!important;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);font-size:1.5rem;height:54px;padding:0 14px;z-index:99}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);-o-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-ms-transform:rotate(1turn);-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);-o-transform:rotate(1turn);transform:rotate(1turn)}}.rotating:before{-webkit-animation:rotating .75s linear infinite;-moz-animation:rotating .75s linear infinite;-ms-animation:rotating .75s linear infinite;-o-animation:rotating .75s linear infinite;animation:rotating .75s linear infinite}.peer_private_key_textbox_switch{cursor:pointer;font-size:1.2rem;position:absolute;right:2rem;transform:translateY(-28px)}#peer_preshared_key_textbox,#peer_private_key_textbox,#private_key,#public_key{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.progress-bar{transition:.3s ease-in-out}.key{cursor:pointer;transition:.2s ease-in-out}.key:hover{color:#007bff}.card{border-radius:10px}.peer_list .card .button-group{height:22px}.form-control{border-radius:10px}.btn{border-radius:8px}#password,#username{height:inherit;padding:.6rem calc(.9rem + 32px)}label[for=password],label[for=username]{font-size:1rem;margin:0!important;padding:0;transform:translateY(30px) translateX(16px)}.modal-content{border-radius:10px}.tooltip-inner{font-size:.8rem}@-webkit-keyframes loading{0%{background-color:#dfdfdf}50%{background-color:#adadad}to{background-color:#dfdfdf}}@-moz-keyframes loading{0%{background-color:#dfdfdf}50%{background-color:#adadad}to{background-color:#dfdfdf}}.conf_card{transition:.2s ease-in-out}.conf_card:hover{border-color:#007bff;cursor:pointer}.info_loading{height:19.19px;opacity:0!important}#conf_status_btn{transition:.2s ease-in-out}#conf_status_btn.info_loading{animation:loading 3s ease-in-out infinite;border-radius:5px;height:38px}#qrcode_img img{width:100%}#selected_ip_list .badge,#selected_peer_list .badge{margin:.1rem}#add_modal.ip_modal_open{filter:brightness(.5);transition:filter .2s ease-in-out}#delete_bulk_modal .list-group a.active{background-color:#dc3545;border-color:#dc3545}#selected_peer_list{max-height:80px;overflow-x:hidden;overflow-y:scroll}.no-response{align-items:center;background:#000000ba;display:none;flex-direction:column;height:100%;justify-content:center;opacity:0;position:fixed;transition:all 1s ease-in-out;width:100%;z-index:10000}.no-response.active{display:flex}.no-response.active.show{opacity:1}.no-response .container>*{text-align:center}.no-responding{filter:blur(10px);transition:all 1s ease-in-out}pre.index-alert{background-color:#343a40;border:1px solid rgba(0,0,0,.125);border-radius:.25rem;color:#fff;margin-bottom:0;margin-top:1rem;padding:1rem}.peerNameCol{align-items:center;display:flex;margin-bottom:.2rem}.peerName{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.peerLightContainer{margin:0;margin-left:auto!important;text-transform:uppercase}.conf_card .dot,.info .dot{transform:translateX(10px)}#config_body{transition:.3s ease-in-out}#config_body.firstLoading{opacity:.2}.chartTitle{display:flex}.chartControl{align-items:center;display:flex;margin-bottom:1rem}.chartTitle h6{line-height:1;margin-bottom:0;margin-right:.5rem}.chartContainer.fullScreen{background-color:#fff;height:100%;left:0;padding:32px;position:fixed;top:0;width:calc(100% + 15px);z-index:9999}.chartContainer.fullScreen .col-sm{height:100%;padding-right:0}.chartContainer.fullScreen .chartCanvasContainer{height:calc(100% - 47px)!important;max-height:calc(100% - 47px)!important;width:100%}#switch{transition:all .35s ease-in}.toggle--switch{display:none}.toggleLabel{background-color:#6c757d17;border:2px solid #6c757d8c;border-radius:100px;cursor:pointer;display:flex;height:32px;margin:0;position:relative;transition:all .35s ease-in;width:64px}.toggle--switch.waiting+.toggleLabel{opacity:.5}.toggleLabel:before{animation-duration:.35s;animation-fill-mode:forwards;animation-name:off;background-color:#6c757d;border-radius:100px;content:"";cursor:pointer;height:26px;margin:1px;position:absolute;transition:all .35s ease-in;width:26px}.toggle--switch:checked+.toggleLabel{background-color:#007bff17!important;border:2px solid #007bff8c}.toggle--switch:checked+.toggleLabel:before{animation-duration:.35s;animation-fill-mode:forwards;animation-name:on;background-color:#007bff}@keyframes on{0%{left:0}60%{left:0;width:40px}to{left:32px;width:26px}}@keyframes off{0%{left:32px}60%{left:18px;width:40px}to{left:0;width:26px}}.toast{min-width:300px}.toast,.toast-header{background-color:#fff}.toast-progressbar{background-color:#007bff;border-bottom-left-radius:.25rem;height:4px;width:100%}
\ No newline at end of file
+@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading{0%,to{background-color:#dfdfdf}50%{background-color:#adadad}}@-moz-keyframes loading{0%,to{background-color:#dfdfdf}50%{background-color:#adadad}}@keyframes on{0%{left:0}60%{left:0;width:40px}to{left:32px;width:26px}}@keyframes off{0%{left:32px}60%{left:18px;width:40px}to{left:0;width:26px}}body{font-size:.875rem}#peer_preshared_key_textbox,#peer_private_key_textbox,#private_key,#public_key,.codeFont{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.feather{width:16px;height:16px;vertical-align:text-bottom}.btn-primary{font-weight:700}.sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;padding:48px 0 0;box-shadow:inset -1px 0 0 rgba(0,0,0,.1)}.sidebar-sticky{position:relative;top:0;height:calc(100vh - 48px);padding-top:.5rem;overflow-x:hidden;overflow-y:auto}@supports ((position:-webkit-sticky) or (position:sticky)){.sidebar-sticky{position:-webkit-sticky;position:sticky}}.sidebar .nav-link{font-weight:500;color:#333;transition:.2s cubic-bezier(.82,-.07,0,1.01)}.nav-link:hover{padding-left:30px;background-color:#dfdfdf}.sidebar .nav-link .feather{margin-right:4px;color:#999}.sidebar .nav-link.active{color:#007bff}.sidebar .nav-link.active .feather,.sidebar .nav-link:hover .feather{color:inherit}.sidebar-heading{font-size:.75rem;text-transform:uppercase}.navbar-brand{padding-top:.75rem;padding-bottom:.75rem;font-size:1rem;background-color:rgba(0,0,0,.25);box-shadow:inset -1px 0 0 rgba(0,0,0,.25)}.navbar .navbar-toggler{top:.25rem;right:1rem}.form-control{transition:all .2s ease-in-out}.form-control:disabled{cursor:not-allowed}.navbar .form-control{padding:.75rem 1rem;border-width:0;border-radius:0}.form-control-dark{color:#fff;background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1)}.form-control-dark:focus{border-color:transparent;box-shadow:0 0 0 3px rgba(255,255,255,.25)}.dot{width:10px;height:10px;border-radius:50px;display:inline-block;margin-left:auto!important}.dot-running{background-color:#28a745!important;box-shadow:0 0 0 .2rem #28a74545}.h6-dot-running{margin-left:.3rem}.dot-stopped{background-color:#6c757d!important}.card-running{border-color:#28a745}.info h6{line-break:anywhere;transition:all .4s cubic-bezier(.96,-.07,.34,1.01);opacity:1}.info .row .col-sm{display:flex;flex-direction:column}.info .row .col-sm small{display:flex}.info .row .col-sm small strong:last-child(1){margin-left:auto!important}.btn-control{border:0!important;padding:0 1rem 0 0}.btn-control:active,.btn-control:focus{background-color:transparent!important;border:0!important;box-shadow:none}.btn-qrcode-peer{padding:0!important}.btn-qrcode-peer:active,.btn-qrcode-peer:hover{transform:scale(.9) rotate(180deg);border:0!important}.btn-download-peer:active,.btn-download-peer:hover{color:#17a2b8!important;transform:translateY(5px)}.share_peer_btn_group .btn-control{margin:0 0 0 1rem;padding:0!important;transition:all .4s cubic-bezier(1,-.43,0,1.37)}.btn-control:hover{background:#fff}.btn-delete-peer:hover{color:#dc3545}.btn-lock-peer:hover{color:#28a745}.btn-lock-peer.lock,.btn-lock-peer.lock:hover{color:#6c757d}.btn-setting-peer:hover{color:#007bff}.btn-download-peer:hover{}.login-container{padding:2rem}@media (max-width:992px){.card-col{margin-bottom:1rem}}.switch{font-size:2rem}.switch:hover{text-decoration:none}.btn-group-label:hover{color:#007bff;border-color:#007bff;background:#fff}.peer_data_group{text-align:right;display:flex;margin-bottom:.5rem}.peer_data_group p{text-transform:uppercase;margin-bottom:0;margin-right:1rem}@media (max-width:768px){.peer_data_group{text-align:left}}.index-switch{display:flex;align-items:center;justify-content:flex-end}main{margin-bottom:3rem}.peer_list{margin-bottom:7rem}@media (max-width:768px){.add_btn{bottom:1.5rem!important}.peer_list{margin-bottom:7rem!important}}.btn-manage-group{z-index:99;position:fixed;bottom:3rem;right:2rem;display:flex}.btn-manage-group .setting_btn_menu{position:absolute;top:-124px;background-color:#fff;padding:1rem 0;right:0;box-shadow:0 10px 20px rgb(0 0 0/19%),0 6px 6px rgb(0 0 0/23%);border-radius:10px;min-width:250px;display:none;transform:translateY(-30px);opacity:0;transition:all .3s cubic-bezier(.58,.03,.05,1.28)}.btn-manage-group .setting_btn_menu.show{display:block}.setting_btn_menu.showing{transform:translateY(0);opacity:1}.setting_btn_menu a{display:flex;padding:.5rem 1rem;transition:all .1s ease-in-out;font-size:1rem;align-items:center;cursor:pointer}.setting_btn_menu a:hover{background-color:#efefef;text-decoration:none}.setting_btn_menu a i{margin-right:auto!important}.add_btn{margin-right:1rem}.add_btn,.setting_btn{height:54px;z-index:99;border-radius:100px!important;padding:0 14px;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);font-size:1.5rem}.rotating::before{-webkit-animation:rotating .75s linear infinite;-moz-animation:rotating .75s linear infinite;-ms-animation:rotating .75s linear infinite;-o-animation:rotating .75s linear infinite;animation:rotating .75s linear infinite}.peer_private_key_textbox_switch{position:absolute;right:2rem;transform:translateY(-28px);font-size:1.2rem;cursor:pointer}.progress-bar{transition:.3s ease-in-out}.key{transition:.2s ease-in-out;cursor:pointer}.key:hover{color:#007bff}.card,.form-control{border-radius:10px}.peer_list .card .button-group{height:22px}.btn{border-radius:8px}#password,#username{padding:.6rem calc(.9rem + 32px);height:inherit}label[for=password],label[for=username]{font-size:1rem;margin:0!important;transform:translateY(30px) translateX(16px);padding:0}.modal-content{border-radius:10px}.tooltip-inner{font-size:.8rem}#conf_status_btn,.conf_card{transition:.2s ease-in-out}.conf_card:hover{border-color:#007bff;cursor:pointer}.info_loading{height:19.19px;opacity:0!important}#conf_status_btn.info_loading{height:38px;border-radius:5px;animation:loading 3s infinite ease-in-out}#qrcode_img img{width:100%}#selected_ip_list .badge,#selected_peer_list .badge{margin:.1rem}#add_modal.ip_modal_open{transition:filter .2s ease-in-out;filter:brightness(.5)}#delete_bulk_modal .list-group a.active{background-color:#dc3545;border-color:#dc3545}#selected_peer_list{max-height:80px;overflow-y:scroll;overflow-x:hidden}.no-responding,.no-response{transition:all 1s ease-in-out}.no-response{width:100%;height:100%;position:fixed;background:#000000ba;z-index:10000;display:none;flex-direction:column;align-items:center;justify-content:center;opacity:0}.no-response.active{display:flex}.no-response.active.show{opacity:100}.no-response .container>*{text-align:center}.no-responding{filter:blur(10px)}pre.index-alert{margin-bottom:0;padding:1rem;background-color:#343a40;border:1px solid rgba(0,0,0,.125);border-radius:.25rem;margin-top:1rem;color:#fff}.peerNameCol{display:flex;align-items:center;margin-bottom:.2rem}.peerName{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.peerLightContainer{text-transform:uppercase;margin:0;margin-left:auto!important}.conf_card .dot,.info .dot{transform:translateX(10px)}#config_body{transition:.3s ease-in-out}#config_body.firstLoading{opacity:.2}.chartTitle{display:flex}.chartControl{margin-bottom:1rem;display:flex;align-items:center}.chartTitle h6{margin-bottom:0;line-height:1;margin-right:.5rem}.chartContainer.fullScreen{position:fixed;z-index:9999;background-color:#fff;top:0;left:0;width:calc(100% + 15px);height:100%;padding:32px}.chartContainer.fullScreen .col-sm{padding-right:0;height:100%}.chartContainer.fullScreen .chartCanvasContainer{width:100%;height:calc(100% - 47px)!important;max-height:calc(100% - 47px)!important}#switch{transition:all 200ms ease-in}.toggle--switch{display:none}.toggleLabel,.toggleLabel::before{border-radius:100px;transition:all 200ms ease-in;cursor:pointer}.toggleLabel{width:64px;height:32px;background-color:#6c757d17;display:flex;position:relative;border:2px solid #6c757d8c;margin:0}.addConfigurationToggleStatus.waiting,.toggle--switch.waiting+.toggleLabel{opacity:.5}.toggleLabel::before{background-color:#6c757d;height:26px;width:26px;content:"";margin:1px;position:absolute;animation-name:off;animation-duration:350ms;animation-fill-mode:forwards}.toggleLabel:hover::before{filter:brightness(1.2)}.toggle--switch:checked+.toggleLabel{background-color:#007bff17!important;border:2px solid #007bff8c}.toggle--switch:checked+.toggleLabel::before{background-color:#007bff;animation-name:on;animation-duration:350ms;animation-fill-mode:forwards}.toast{min-width:300px;background-color:#fff}.toast-header{background-color:rgba(255,255,255)}.toast-progressbar{width:100%;height:4px;background-color:#007bff;border-bottom-left-radius:.25rem}.addConfigurationAvailableIPs{margin-bottom:0}.input-feedback{display:none}#addConfigurationModal label{display:flex;width:100%;align-items:center}#addConfigurationModal label a{margin-left:auto!important}#reGeneratePrivateKey{border-top-right-radius:10px;border-bottom-right-radius:10px}
\ No newline at end of file
diff --git a/src/static/js/configuration.js b/src/static/js/configuration.js
index a557cb2..b1835e9 100644
--- a/src/static/js/configuration.js
+++ b/src/static/js/configuration.js
@@ -3,7 +3,6 @@
  * Under Apache-2.0 License
  */
 
-
 let peers = [];
 (function() {
     /**
@@ -37,6 +36,7 @@ let peers = [];
     let qrcodeModal = new bootstrap.Modal(document.getElementById('qrcode_modal'), bootstrapModalConfig);
     let settingModal = new bootstrap.Modal(document.getElementById('setting_modal'), bootstrapModalConfig);
     let deleteModal = new bootstrap.Modal(document.getElementById('delete_modal'), bootstrapModalConfig);
+    let configurationDeleteModal = new bootstrap.Modal(document.getElementById('configuration_delete_modal'), bootstrapModalConfig);
     $("[data-toggle='tooltip']").tooltip();
     $("[data-toggle='popover']").popover();
 
@@ -207,7 +207,7 @@ let peers = [];
                 setActiveConfigurationName();
                 window.history.pushState(null, null, `/configuration/${configuration_name}`);
                 $("title").text(`${configuration_name} | WGDashboard`);
-
+                $(".index-alert").addClass("d-none").text(``);
                 totalDataUsageChartObj.data.labels = [];
                 totalDataUsageChartObj.data.datasets[0].data = [];
                 totalDataUsageChartObj.data.datasets[1].data = [];
@@ -667,7 +667,7 @@ let peers = [];
     }
 
     function removeAllTooltips(){
-        $(".tooltip").remove()
+        $(".tooltip").remove();
     }
 
     function toggleAccess(peerID){
@@ -828,21 +828,30 @@ let peers = [];
         });
     }
 
+
+
+    function deleteConfiguration(){
+
+    }
+
     window.configurations = {
         addModal: () => { return addModal; },
         deleteBulkModal: () => { return deleteBulkModal; },
         deleteModal: () => { return deleteModal; },
+        configurationDeleteModal: () => { return configurationDeleteModal; },
         ipModal: () => { return ipModal; },
         qrcodeModal: () => { return qrcodeModal; },
         settingModal: () => { return settingModal; },
         configurationTimeout: () => { return configuration_timeout; },
-        updateDisplayMode: () => { display_mode = window.localStorage.getItem("displayMode") },
+        updateDisplayMode: () => { display_mode = window.localStorage.getItem("displayMode"); },
+        removeConfigurationInterval: () => { removeConfigurationInterval(); },
 
         loadPeers: (searchString) => { loadPeers(searchString); },
         addPeersByBulk: () => { addPeersByBulk(); },
         deletePeers: (config, peers_ids) => { deletePeers(config, peers_ids); },
+        deleteConfiguration: () => { deleteConfiguration() },
         parsePeers: (response) => { parsePeers(response); },
-        toggleAccess: (peerID) => { toggleAccess(peerID) },
+        toggleAccess: (peerID) => { toggleAccess(peerID); },
 
 
         setConfigurationName: (confName) => { configuration_name = confName; },
@@ -867,6 +876,40 @@ let $body = $("body");
 let available_ips = [];
 let $add_peer = document.getElementById("save_peer");
 
+$("#configuration_delete").on("click", function(){
+    window.configurations.configurationDeleteModal().toggle();
+});
+
+function ajaxPostJSON(url, data, doneFunc){
+    $.ajax({
+        url: url,
+        method: "POST",
+        data: JSON.stringify(data),
+        headers: {"Content-Type": "application/json"}
+    }).done(function (res) { 
+        doneFunc(res);
+    });
+}
+
+$("#sure_delete_configuration").on("click", function () {
+    window.configurations.removeConfigurationInterval();
+    let ele = $(this)
+    ele.attr("disabled", "disabled");
+    function done(res){
+        if (res.status){
+            $('#configuration_delete_modal button[data-dismiss="modal"]').remove();
+            ele.text("Delete Successful! Redirecting in 5 seconds.");
+            setTimeout(function(){
+                window.location.replace('/');
+            }, 5000)
+        }else{
+            $("#remove_configuration_alert").removeClass("d-none").text(res.reason);
+        }
+    }
+    ajaxPostJSON("/api/deleteConfiguration", {"name": window.configurations.getConfigurationName()}, done);
+});
+
+
 /**
  * ==========
  * Add peers
@@ -883,7 +926,8 @@ document.querySelector(".add_btn").addEventListener("click", () => {
 /**
  * When configuration switch got click
  */
-$(".toggle--switch").on("click", function(){
+$(".toggle--switch").on("change", function(){
+    console.log('lol')
     $(this).addClass("waiting").attr("disabled", "disabled");
     let id = window.configurations.getConfigurationName();
     let status = $(this).prop("checked");
@@ -891,22 +935,23 @@ $(".toggle--switch").on("click", function(){
     $.ajax({
         url: `/switch/${id}`
     }).done(function(res){
-        console.log();
-        if (res){
+        if (res.status){
             if (status){
                 window.configurations.showToast(`${id} is running.`)
             }else{
                 window.configurations.showToast(`${id} is stopped.`)
             }
-            ele.removeClass("waiting");
-            ele.removeAttr("disabled");
         }else{
             if (status){
-                $(this).prop("checked", false)
+                ele.prop("checked", false)
             }else{
-                $(this).prop("checked", true)
+                ele.prop("checked", true)
             }
+            window.configurations.showToast(res.reason);
+            $(".index-alert").removeClass("d-none").text(`Configuration toggle failed. Please check the following error message:\n${res.message}`);
         }
+        ele.removeClass("waiting");
+        ele.removeAttr("disabled");
         window.configurations.loadPeers($('#search_peer_textbox').val())
     });
 
diff --git a/src/static/js/configuration.min.js b/src/static/js/configuration.min.js
index f75e42d..fa39b9a 100644
--- a/src/static/js/configuration.min.js
+++ b/src/static/js/configuration.min.js
@@ -1 +1,50 @@
-!function(){let configuration_name,configuration_interval,configuration_timeout=window.localStorage.getItem("configurationTimeout");null!==configuration_timeout&&["5000","10000","30000","60000"].includes(configuration_timeout)||(window.localStorage.setItem("configurationTimeout","10000"),configuration_timeout=window.localStorage.getItem("configurationTimeout")),document.querySelector(`button[data-refresh-interval="${configuration_timeout}"]`).classList.add("active");let display_mode=window.localStorage.getItem("displayMode");null!==display_mode&&["grid","list"].includes(display_mode)||(window.localStorage.setItem("displayMode","grid"),display_mode="grid"),document.querySelectorAll(".display-btn-group button").forEach(ele=>ele.classList.remove("active")),document.querySelector(`button[data-display-mode="${display_mode}"]`).classList.add("active");let $progress_bar=$(".progress-bar"),bootstrapModalConfig={keyboard:!1,backdrop:"static"},addModal=new bootstrap.Modal(document.getElementById("add_modal"),bootstrapModalConfig),deleteBulkModal=new bootstrap.Modal(document.getElementById("delete_bulk_modal"),bootstrapModalConfig),ipModal=new bootstrap.Modal(document.getElementById("available_ip_modal"),bootstrapModalConfig),qrcodeModal=new bootstrap.Modal(document.getElementById("qrcode_modal"),bootstrapModalConfig),settingModal=new bootstrap.Modal(document.getElementById("setting_modal"),bootstrapModalConfig),deleteModal=new bootstrap.Modal(document.getElementById("delete_modal"),bootstrapModalConfig);$("[data-toggle='tooltip']").tooltip(),$("[data-toggle='popover']").popover();let chartUnit=window.localStorage.chartUnit,chartUnitAvailable;null!==chartUnit&&["GB","MB","KB"].includes(chartUnit)?$(`.switchUnit[data-unit="${chartUnit}"]`).addClass("active"):(window.localStorage.setItem("chartUnit","GB"),$('.switchUnit[data-unit="GB"]').addClass("active")),chartUnit=window.localStorage.getItem("chartUnit");const totalDataUsageChart=document.getElementById("totalDataUsageChartObj").getContext("2d"),totalDataUsageChartObj=new Chart(totalDataUsageChart,{type:"line",data:{labels:[],datasets:[{label:"Data Sent",data:[],stroke:"#FFFFFF",borderColor:"#28a745",tension:.1,borderWidth:2},{label:"Data Received",data:[],stroke:"#FFFFFF",borderColor:"#007bff",tension:.1,borderWidth:2}]},options:{maintainAspectRatio:!1,showScale:!1,responsive:!1,scales:{y:{min:0,ticks:{min:0,callback:function(value,index,ticks){return`${value} ${chartUnit}`}}}},plugins:{tooltip:{callbacks:{label:function(context){return`${context.dataset.label}: ${context.parsed.y} ${chartUnit}`}}}}}});let $totalDataUsageChartObj=$("#totalDataUsageChartObj");$totalDataUsageChartObj.css("width","100%"),totalDataUsageChartObj.width=$totalDataUsageChartObj.parent().width(),totalDataUsageChartObj.resize(),$(window).on("resize",(function(){totalDataUsageChartObj.resize()})),$(".fullScreen").on("click",(function(){let $chartContainer=$(".chartContainer");$chartContainer.hasClass("fullScreen")?($(this).children().removeClass("bi-fullscreen-exit").addClass("bi-fullscreen"),$chartContainer.removeClass("fullScreen")):($(this).children().removeClass("bi-fullscreen").addClass("bi-fullscreen-exit"),$chartContainer.addClass("fullScreen")),totalDataUsageChartObj.resize()}));let mul=1;function configurationAlert(response){if(""===response.listen_port&&"stopped"===response.status){let configAlert=document.createElement("div");configAlert.classList.add("alert"),configAlert.classList.add("alert-warning"),configAlert.setAttribute("role","alert"),configAlert.innerHTML="Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.",document.querySelector("#config_info_alert").appendChild(configAlert)}if("N/A"===response.conf_address){let configAlert=document.createElement("div");configAlert.classList.add("alert"),configAlert.classList.add("alert-warning"),configAlert.setAttribute("role","alert"),configAlert.innerHTML="Configuration <strong>Address</strong> need to be specified to have peers connect to it.",document.querySelector("#config_info_alert").appendChild(configAlert)}}function setActiveConfigurationName(){$(".nav-conf-link").removeClass("active"),$(`.sb-${configuration_name}-url`).addClass("active")}$(".switchUnit").on("click",(function(){if($(".switchUnit").removeClass("active"),$(this).addClass("active"),$(this).data("unit")!==chartUnit){switch($(this).data("unit")){case"GB":"MB"===chartUnit&&(mul=1/1024),"KB"===chartUnit&&(mul=1/1048576);break;case"MB":"GB"===chartUnit&&(mul=1024),"KB"===chartUnit&&(mul=1/1024);break;case"KB":"GB"===chartUnit&&(mul=1048576),"MB"===chartUnit&&(mul=1024)}window.localStorage.setItem("chartUnit",$(this).data("unit")),chartUnit=$(this).data("unit"),totalDataUsageChartObj.data.datasets[0].data=totalDataUsageChartObj.data.datasets[0].data.map(x=>x*mul),totalDataUsageChartObj.data.datasets[1].data=totalDataUsageChartObj.data.datasets[1].data.map(x=>x*mul),totalDataUsageChartObj.update()}}));let firstLoading=!0;function configurationHeader(response){let $conf_status_btn=document.getElementById("conf_status_btn");if("checked"===response.checked?$conf_status_btn.innerHTML=`<a href="#" id="${response.name}" ${response.checked} class="switch text-primary"><i class="bi bi-toggle2-on"></i> ON</a>`:$conf_status_btn.innerHTML=`<a href="#" id="${response.name}" ${response.checked} class="switch text-primary"><i class="bi bi-toggle2-off"></i> OFF</a>`,response.running_peer>0){let d,time=(new Date).toLocaleString("en-us",{hour:"2-digit",minute:"2-digit",second:"2-digit",hourCycle:"h23"});if(totalDataUsageChartObj.data.labels.push(`${time}`),0===totalDataUsageChartObj.data.datasets[0].data.length)totalDataUsageChartObj.data.datasets[1].lastData=response.total_data_usage[2],totalDataUsageChartObj.data.datasets[0].lastData=response.total_data_usage[1],totalDataUsageChartObj.data.datasets[0].data.push(0),totalDataUsageChartObj.data.datasets[1].data.push(0);else{50===totalDataUsageChartObj.data.datasets[0].data.length&&50===totalDataUsageChartObj.data.datasets[1].data.length&&(totalDataUsageChartObj.data.labels.shift(),totalDataUsageChartObj.data.datasets[0].data.shift(),totalDataUsageChartObj.data.datasets[1].data.shift());let newTotalReceive=response.total_data_usage[2]-totalDataUsageChartObj.data.datasets[1].lastData,newTotalSent=response.total_data_usage[1]-totalDataUsageChartObj.data.datasets[0].lastData,k=0;k="MB"===chartUnit?1024:"KB"===chartUnit?1048576:1,totalDataUsageChartObj.data.datasets[1].data.push(newTotalReceive*k),totalDataUsageChartObj.data.datasets[0].data.push(newTotalSent*k),totalDataUsageChartObj.data.datasets[0].lastData=response.total_data_usage[1],totalDataUsageChartObj.data.datasets[1].lastData=response.total_data_usage[2]}totalDataUsageChartObj.update()}document.querySelector("#conf_name").textContent=configuration_name,$conf_status_btn.classList.remove("info_loading"),document.querySelectorAll("#sort_by_dropdown option").forEach(ele=>ele.removeAttribute("selected")),document.querySelector(`#sort_by_dropdown option[value="${response.sort_tag}"]`).setAttribute("selected","selected"),document.querySelector("#conf_status").innerHTML=`${response.status}<span class="dot dot-${response.status}"></span>`,document.querySelector("#conf_connected_peers").innerHTML=response.running_peer,document.querySelector("#conf_total_data_usage").innerHTML=`${response.total_data_usage[0]} GB`,document.querySelector("#conf_total_data_received").innerHTML=`${response.total_data_usage[2]} GB`,document.querySelector("#conf_total_data_sent").innerHTML=`${response.total_data_usage[1]} GB`,document.querySelector("#conf_public_key").innerHTML=response.public_key,document.querySelector("#conf_listen_port").innerHTML=""===response.listen_port?"N/A":response.listen_port,document.querySelector("#conf_address").innerHTML=response.conf_address,document.querySelectorAll(".info h6").forEach(ele=>ele.classList.remove("info_loading"))}function configurationPeers(response){let result="";if(0===response.peer_data.length)document.querySelector(".peer_list").innerHTML='<div class="col-12" style="text-align: center; margin-top: 1.5rem"><h3 class="text-muted">Oops! No peers found ‘︿’</h3></div>';else{let mode="list"===display_mode?"col-12":"col-sm-6 col-lg-4";response.peer_data.forEach((function(peer){let total_r=0,total_s=0;total_r+=peer.cumu_receive,total_s+=peer.cumu_sent;let spliter='<div class="w-100"></div>',peer_name=`<div class="col-sm peerNameCol">\n                        <h5 class="peerName">${""===peer.name?"Untitled":peer.name}</h5>\n                        <h6 class="peerLightContainer"><span class="dot dot-${peer.status}" style="margin-left: auto !important;" data-toggle="tooltip" data-placement="left"></span></h6>\n                     </div>`,peer_transfer=`<div class="col-12 peer_data_group" style="">\n                        <p class="text-primary" style="">\n                            <small><i class="bi bi-arrow-down-right"></i> ${roundN(peer.total_receive+total_r,4)} GB</small>\n                        </p>\n                        <p class="text-success">\n                            <small><i class="bi bi-arrow-up-right"></i> ${roundN(peer.total_sent+total_s,4)} GB</small>\n                        </p>\n                    </div>`,peer_key='<div class="col-sm"><small class="text-muted" style="display: flex"><strong>PEER</strong><strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong></small> <h6><samp class="ml-auto key">'+peer.id+"</samp></h6></div>",peer_allowed_ip='<div class="col-sm"><small class="text-muted"><strong>ALLOWED IP</strong></small><h6 style="text-transform: uppercase;">'+peer.allowed_ip+"</h6></div>",peer_latest_handshake='<div class="col-sm"> <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small> <h6 style="text-transform: uppercase;">'+peer.latest_handshake+"</h6> </div>",peer_endpoint='<div class="col-sm"><small class="text-muted"><strong>END POINT</strong></small><h6 style="text-transform: uppercase;">'+peer.endpoint+"</h6></div>",peer_control=`\n                    <div class="col-sm">\n                        <hr>\n                        <div class="button-group" style="display:flex">\n                            <button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="${peer.id}" data-toggle="modal">\n                                <i class="bi bi-gear-fill" data-toggle="tooltip" data-placement="bottom" title="Peer Settings"></i>\n                            </button>\n                            <button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="${peer.id}" data-toggle="modal">\n                                <i class="bi bi-x-circle-fill" data-toggle="tooltip" data-placement="bottom" title="Delete Peer"></i>\n                            </button>\n                            <button type="button" class="btn btn-outline-secondary btn-lock-peer btn-control" id="${peer.id}" data-toggle="modal">\n                                <i class="bi bi-ethernet" data-toggle="tooltip" data-placement="bottom" title=""></i>\n                            </button>`;""!==peer.private_key&&(peer_control+='<div class="share_peer_btn_group" style="margin-left: auto !important; display: inline"><button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" data-imgsrc="/qrcode/'+response.name+"?id="+encodeURIComponent(peer.id)+'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 19px;" fill="#28a745"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z"/></svg></button><a href="/download/'+response.name+"?id="+encodeURIComponent(peer.id)+'" class="btn btn-outline-info btn-download-peer btn-control"><i class="bi bi-download"></i></a></div>'),peer_control+="</div>";let html='<div class="'+mode+'" data-id="'+peer.id+'"><div class="card mb-3 card-'+peer.status+'"><div class="card-body"><div class="row">'+peer_name+spliter+peer_transfer+peer_key+peer_allowed_ip+peer_latest_handshake+spliter+peer_endpoint+spliter+peer_control+"</div></div></div></div></div>";result+=html})),document.querySelector(".peer_list").innerHTML=result,void 0===configuration_interval&&setConfigurationInterval()}}function addPeersByBulk(){let $new_add_amount=$("#new_add_amount");$add_peer.setAttribute("disabled","disabled"),$add_peer.innerHTML=`Adding ${$new_add_amount.val()} peers...`;let $new_add_DNS=$("#new_add_DNS");$new_add_DNS.val(window.configurations.cleanIp($new_add_DNS.val()));let $new_add_endpoint_allowed_ip=$("#new_add_endpoint_allowed_ip");$new_add_endpoint_allowed_ip.val(window.configurations.cleanIp($new_add_endpoint_allowed_ip.val()));let $new_add_MTU=$("#new_add_MTU"),$new_add_keep_alive=$("#new_add_keep_alive"),$enable_preshare_key=$("#enable_preshare_key"),data_list=[$new_add_DNS,$new_add_endpoint_allowed_ip,$new_add_MTU,$new_add_keep_alive];if($new_add_amount.val()>0&&!$new_add_amount.hasClass("is-invalid"))if(""!==$new_add_DNS.val()&&""!==$new_add_endpoint_allowed_ip.val()){let conf=configuration_name,keys=[];for(let i=0;i<$new_add_amount.val();i++)keys.push(window.wireguard.generateKeypair());$.ajax({method:"POST",url:"/add_peer_bulk/"+conf,headers:{"Content-Type":"application/json"},data:JSON.stringify({DNS:$new_add_DNS.val(),endpoint_allowed_ip:$new_add_endpoint_allowed_ip.val(),MTU:$new_add_MTU.val(),keep_alive:$new_add_keep_alive.val(),enable_preshared_key:$enable_preshare_key.prop("checked"),keys:keys,amount:$new_add_amount.val()}),success:function(response){"true"!==response?($("#add_peer_alert").html(response).removeClass("d-none"),data_list.forEach(ele=>ele.removeAttr("disabled")),$add_peer.removeAttribute("disabled"),$add_peer.innerHTML="Save"):(window.configurations.loadPeers(""),data_list.forEach(ele=>ele.removeAttr("disabled")),$("#add_peer_form").trigger("reset"),$add_peer.removeAttribute("disabled"),$add_peer.innerHTML="Save",window.configurations.showToast($new_add_amount.val()+" peers added successful!"),window.configurations.addModal().toggle())}})}else $("#add_peer_alert").html("Please fill in all required box.").removeClass("d-none"),$add_peer.removeAttribute("disabled"),$add_peer.innerHTML="Add";else $add_peer.removeAttribute("disabled"),$add_peer.innerHTML="Add"}function deletePeers(config,peer_ids){$.ajax({method:"POST",url:"/remove_peer/"+config,headers:{"Content-Type":"application/json"},data:JSON.stringify({action:"delete",peer_ids:peer_ids}),success:function(response){if("true"!==response){if(window.configurations.deleteModal()._isShown&&($("#remove_peer_alert").html(response+$("#add_peer_alert").html()).removeClass("d-none"),$("#delete_peer").removeAttr("disabled").html("Delete")),window.configurations.deleteBulkModal()._isShown){let $bulk_remove_peer_alert=$("#bulk_remove_peer_alert");$bulk_remove_peer_alert.html(response+$bulk_remove_peer_alert.html()).removeClass("d-none"),$("#confirm_delete_bulk_peers").removeAttr("disabled").html("Delete")}}else window.configurations.deleteModal()._isShown&&window.configurations.deleteModal().toggle(),window.configurations.deleteBulkModal()._isShown&&($("#confirm_delete_bulk_peers").removeAttr("disabled").html("Delete"),$("#selected_peer_list").html(""),$(".delete-bulk-peer-item.active").removeClass("active"),window.configurations.deleteBulkModal().toggle()),window.configurations.loadPeers($("#search_peer_textbox").val()),$("#alertToast").toast("show"),$("#alertToast .toast-body").html("Peer deleted!"),$("#delete_peer").removeAttr("disabled").html("Delete")}})}function noResponding(message="Opps! <br> I can't connect to the server."){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.add("active")),setTimeout((function(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.add("show")),document.querySelector("#right_body").classList.add("no-responding"),document.querySelector(".navbar").classList.add("no-responding"),document.querySelector(".no-response .container h4").innerHTML=message}),10)}function removeNoResponding(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.remove("show")),document.querySelector("#right_body").classList.remove("no-responding"),document.querySelector(".navbar").classList.remove("no-responding"),setTimeout((function(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.remove("active"))}),1010)}function setConfigurationInterval(){configuration_interval=setInterval((function(){loadPeers($("#search_peer_textbox").val())}),configuration_timeout)}function removeConfigurationInterval(){clearInterval(configuration_interval)}function startProgressBar(){$progress_bar.css("width","0%").css("opacity","100").css("background","rgb(255,69,69)").css("background","linear-gradient(145deg, rgba(255,69,69,1) 0%, rgba(0,115,186,1) 100%)").css("width","25%"),setTimeout((function(){stillLoadingProgressBar()}),300)}function stillLoadingProgressBar(){$progress_bar.css("transition","3s ease-in-out").css("width","75%")}function endProgressBar(){$progress_bar.css("transition","0.3s ease-in-out").css("width","100%"),setTimeout((function(){$progress_bar.css("opacity","0")}),250)}function roundN(value,digits){let tenToN=10**digits;return Math.round(value*tenToN)/tenToN}$(".nav-conf-link").on("click",(function(e){e.preventDefault(),configuration_name!==$(this).data("conf-id")&&(firstLoading=!0,$("#config_body").addClass("firstLoading"),configuration_name=$(this).data("conf-id"),loadPeers($("#search_peer_textbox").val())&&(setActiveConfigurationName(),window.history.pushState(null,null,`/configuration/${configuration_name}`),$("title").text(`${configuration_name} | WGDashboard`),totalDataUsageChartObj.data.labels=[],totalDataUsageChartObj.data.datasets[0].data=[],totalDataUsageChartObj.data.datasets[1].data=[],totalDataUsageChartObj.update()))}));let time=0,count=0,d1=new Date;function loadPeers(searchString){d1=new Date;let good=!0;return $.ajax({method:"GET",url:`/get_config/${configuration_name}?search=${encodeURIComponent(searchString)}`,headers:{"Content-Type":"application/json"}}).done((function(response){console.log(response),parsePeers(response)})).fail((function(){noResponding(),good=!1})),good}function parsePeers(response){if(response.status){let d2,seconds=new Date-d1;time+=seconds,count+=1,window.console.log(`Average time: ${time/count}ms`),$("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`),removeNoResponding(),peers=response.data.peer_data,configurationAlert(response.data),configurationHeader(response.data),configurationPeers(response.data),$(".dot.dot-running").attr("title","Peer Connected").tooltip(),$(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip(),$("i[data-toggle='tooltip']").tooltip(),$("#configuration_name").text(configuration_name),firstLoading&&(firstLoading=!1,$("#config_body").removeClass("firstLoading"))}else noResponding(response.message),removeConfigurationInterval()}function generate_key(){let keys=window.wireguard.generateKeypair();document.querySelector("#private_key").value=keys.privateKey,document.querySelector("#public_key").value=keys.publicKey,document.querySelector("#add_peer_alert").classList.add("d-none"),document.querySelector("#re_generate_key i").classList.remove("rotating"),document.querySelector("#enable_preshare_key").value=keys.presharedKey}function showToast(msg){$("#alertToast").toast("show"),$("#alertToast .toast-body").html(msg)}function updateRefreshInterval(interval){configuration_timeout=interval,window.localStorage.setItem("configurationTimeout",configuration_timeout.toString()),removeConfigurationInterval(),setConfigurationInterval(),showToast("Refresh Interval set to "+Math.round(interval/1e3)+" seconds")}function cleanIp(val){let clean_ip=val.split(",");for(let i=0;i<clean_ip.length;i++)clean_ip[i]=clean_ip[i].trim(" ");return clean_ip.filter(Boolean).join(",")}function trigger_ip(ip){let $ip_ele=document.querySelector(`.available-ip-item[data-ip='${ip}']`);$ip_ele&&($ip_ele.classList.contains("active")?($ip_ele.classList.remove("active"),document.querySelector(`#selected_ip_list .badge[data-ip='${ip}']`).remove()):($ip_ele.classList.add("active"),document.querySelector("#selected_ip_list").innerHTML+=`<span class="badge badge-primary available-ip-badge" style="cursor: pointer" data-ip="${ip}">${ip}</span>`))}function download_one_config(conf){let link=document.createElement("a");link.download=conf.filename;let blob=new Blob([conf.content],{type:"text/conf"});link.href=window.URL.createObjectURL(blob),link.click()}function toggleBulkIP(element){let $selected_peer_list=$("#selected_peer_list"),id=element.data("id"),name=""===element.data("name")?"Untitled Peer":element.data("name");element.hasClass("active")?(element.removeClass("active"),$("#selected_peer_list .badge[data-id='"+id+"']").remove()):(element.addClass("active"),$selected_peer_list.append('<span class="badge badge-danger delete-peer-bulk-badge" style="cursor: pointer; text-overflow: ellipsis; max-width: 100%; overflow-x: hidden" data-id="'+id+'">'+name+" - "+id+"</span>"))}function copyToClipboard(element){let $temp=$("<input>");$body.append($temp),$temp.val($(element).text()).trigger("select"),document.execCommand("copy"),$temp.remove()}function getAvailableIps(){$.ajax({url:`/available_ips/${configuration_name}`,method:"GET"}).done((function(res){if(!0===res.status){available_ips=res.data;let $list_group=document.querySelector("#available_ip_modal .modal-body .list-group");$list_group.innerHTML="",document.querySelector("#allowed_ips").value=available_ips[0],available_ips.forEach(ip=>$list_group.innerHTML+=`<a class="list-group-item list-group-item-action available-ip-item" style="cursor: pointer" data-ip="${ip}">${ip}</a>`)}else document.querySelector("#allowed_ips").value=res.message,document.querySelector("#search_available_ip").setAttribute("disabled","disabled")}))}window.configurations={addModal:()=>addModal,deleteBulkModal:()=>deleteBulkModal,deleteModal:()=>deleteModal,ipModal:()=>ipModal,qrcodeModal:()=>qrcodeModal,settingModal:()=>settingModal,configurationTimeout:()=>configuration_timeout,updateDisplayMode:()=>{display_mode=window.localStorage.getItem("displayMode")},loadPeers:searchString=>{loadPeers(searchString)},addPeersByBulk:()=>{addPeersByBulk()},deletePeers:(config,peers_ids)=>{deletePeers(config,peers_ids)},parsePeers:response=>{parsePeers(response)},setConfigurationName:confName=>{configuration_name=confName},getConfigurationName:()=>configuration_name,setActiveConfigurationName:()=>{setActiveConfigurationName()},getAvailableIps:()=>{getAvailableIps()},generateKeyPair:()=>{generate_key()},showToast:message=>{showToast(message)},updateRefreshInterval:interval=>{updateRefreshInterval(interval)},copyToClipboard:element=>{copyToClipboard(element)},toggleDeleteByBulkIP:element=>{toggleBulkIP(element)},downloadOneConfig:conf=>{download_one_config(conf)},triggerIp:ip=>{trigger_ip(ip)},cleanIp:val=>cleanIp(val),startProgressBar:()=>{startProgressBar()},stillLoadingProgressBar:()=>{stillLoadingProgressBar()},endProgressBar:()=>{endProgressBar()}}}();let $body=$("body"),available_ips=[],$add_peer=document.getElementById("save_peer"),typingTimer;document.querySelector(".add_btn").addEventListener("click",()=>{window.configurations.addModal().toggle()}),document.querySelector(".info").addEventListener("click",event=>{let selector=document.querySelector(".switch");selector.contains(event.target)&&(selector.style.display="none",document.querySelector("div[role=status]").style.display="inline-block",location.replace(`/switch/${selector.getAttribute("id")}`))}),document.querySelector("#private_key").addEventListener("change",event=>{let publicKey=document.querySelector("#public_key");44===event.target.value.length?(publicKey.value=window.wireguard.generatePublicKey(event.target.value),publicKey.setAttribute("disabled","disabled")):(publicKey.attributes.removeNamedItem("disabled"),publicKey.value="")}),$("#add_modal").on("show.bs.modal",(function(){window.configurations.generateKeyPair(),window.configurations.getAvailableIps()})).on("hide.bs.modal",(function(){$("#allowed_ips_indicator").html("")})),$("#re_generate_key").on("click",(function(){$("#public_key").attr("disabled","disabled"),$("#re_generate_key i").addClass("rotating"),window.configurations.generateKeyPair()})),$("#allowed_ips").on("keyup",(function(){let s=window.configurations.cleanIp($(this).val());s=s.split(","),available_ips.includes(s[s.length-1])?$("#allowed_ips_indicator").removeClass().addClass("text-success").html('<i class="bi bi-check-circle-fill"></i>'):$("#allowed_ips_indicator").removeClass().addClass("text-warning").html('<i class="bi bi-exclamation-circle-fill"></i>')})),$("#peer_name_textbox").on("keyup",(function(){$(".peer_name").html($(this).val())})),$add_peer.addEventListener("click",(function(){let $bulk_add;if($("#bulk_add").prop("checked"))$("#new_add_amount").hasClass("is-invalid")||window.configurations.addPeersByBulk();else{let $public_key=$("#public_key"),$private_key=$("#private_key"),$allowed_ips=$("#allowed_ips");$allowed_ips.val(window.configurations.cleanIp($allowed_ips.val()));let $new_add_DNS=$("#new_add_DNS");$new_add_DNS.val(window.configurations.cleanIp($new_add_DNS.val()));let $new_add_endpoint_allowed_ip=$("#new_add_endpoint_allowed_ip");$new_add_endpoint_allowed_ip.val(window.configurations.cleanIp($new_add_endpoint_allowed_ip.val()));let $new_add_name=$("#new_add_name"),$new_add_MTU=$("#new_add_MTU"),$new_add_keep_alive=$("#new_add_keep_alive"),$enable_preshare_key=$("#enable_preshare_key");if($add_peer.setAttribute("disabled","disabled"),$add_peer.innerHTML="Adding...",""!==$allowed_ips.val()&&""!==$public_key.val()&&""!==$new_add_DNS.val()&&""!==$new_add_endpoint_allowed_ip.val()){let conf=window.configurations.getConfigurationName(),data_list=[$private_key,$allowed_ips,$new_add_name,$new_add_DNS,$new_add_endpoint_allowed_ip,$new_add_MTU,$new_add_keep_alive];data_list.forEach(ele=>ele.attr("disabled","disabled")),$.ajax({method:"POST",url:"/add_peer/"+conf,headers:{"Content-Type":"application/json"},data:JSON.stringify({private_key:$private_key.val(),public_key:$public_key.val(),allowed_ips:$allowed_ips.val(),name:$new_add_name.val(),DNS:$new_add_DNS.val(),endpoint_allowed_ip:$new_add_endpoint_allowed_ip.val(),MTU:$new_add_MTU.val(),keep_alive:$new_add_keep_alive.val(),enable_preshared_key:$enable_preshare_key.prop("checked"),preshared_key:$enable_preshare_key.val()}),success:function(response){"true"!==response?($("#add_peer_alert").html(response).removeClass("d-none"),data_list.forEach(ele=>ele.removeAttr("disabled")),$add_peer.removeAttribute("disabled"),$add_peer.innerHTML="Save"):(window.configurations.loadPeers(""),data_list.forEach(ele=>ele.removeAttr("disabled")),$("#add_peer_form").trigger("reset"),$add_peer.removeAttribute("disabled"),$add_peer.innerHTML="Save",window.configurations.showToast("Add peer successful!"),window.configurations.addModal().toggle())}})}else $("#add_peer_alert").html("Please fill in all required box.").removeClass("d-none"),$add_peer.removeAttribute("disabled"),$add_peer.innerHTML="Add"}})),$("#new_add_amount").on("keyup",(function(){let $bulk_amount_validation=$("#bulk_amount_validation");$(this).val().length>0?isNaN($(this).val())?($(this).removeClass("is-valid").addClass("is-invalid"),$bulk_amount_validation.html("Please enter a valid integer")):$(this).val()>available_ips.length?($(this).removeClass("is-valid").addClass("is-invalid"),$bulk_amount_validation.html(`Cannot create more than ${available_ips.length} peers.`)):$(this).val()<1?($(this).removeClass("is-valid").addClass("is-invalid"),$bulk_amount_validation.html("Please enter at least 1 or more.")):$(this).removeClass("is-invalid").addClass("is-valid"):$(this).removeClass("is-invalid").removeClass("is-valid")})),$("#bulk_add").on("change",(function(){let hide=$(".non-bulk"),amount=$("#new_add_amount");if(!0===$(this).prop("checked")){for(let i=0;i<hide.length;i++)$(hide[i]).attr("disabled","disabled");amount.removeAttr("disabled")}else{for(let i=0;i<hide.length;i++)"public_key"!==$(hide[i]).attr("id")&&$(hide[i]).removeAttr("disabled");amount.attr("disabled","disabled")}})),$("#available_ip_modal").on("show.bs.modal",()=>{document.querySelector("#add_modal").classList.add("ip_modal_open")}).on("hidden.bs.modal",()=>{document.querySelector("#add_modal").classList.remove("ip_modal_open");let ips=[],$selected_ip_list=document.querySelector("#selected_ip_list");for(let i=0;i<$selected_ip_list.childElementCount;i++)ips.push($selected_ip_list.children[i].dataset.ip);ips.forEach(ele=>window.configurations.triggerIp(ele))}),$body.on("click",".available-ip-badge",(function(){$(".available-ip-item[data-ip='"+$(this).data("ip")+"']").removeClass("active"),$(this).remove()})),$body.on("click",".available-ip-item",(function(){window.configurations.triggerIp($(this).data("ip"))})),$("#search_available_ip").on("click",(function(){window.configurations.ipModal().toggle();let $allowed_ips=document.querySelector("#allowed_ips");if($allowed_ips.value.length>0){let s=$allowed_ips.value.split(",");for(let i=0;i<s.length;i++)s[i]=s[i].trim(),window.configurations.triggerIp(s[i])}})).tooltip(),$("#confirm_ip").on("click",()=>{window.configurations.ipModal().toggle();let ips=[],$selected_ip_list;$("#selected_ip_list").children().each((function(){ips.push($(this).data("ip"))})),$("#allowed_ips").val(ips.join(", ")),ips.forEach(ele=>window.configurations.triggerIp(ele))}),$body.on("click",".btn-qrcode-peer",(function(){let src=$(this).data("imgsrc");$.ajax({url:src,method:"GET"}).done((function(res){$("#qrcode_img").attr("src",res),window.configurations.qrcodeModal().toggle()}))})),$body.on("click",".btn-delete-peer",(function(){let peer_id=$(this).attr("id");$("#delete_peer").data("peer-id",peer_id),window.configurations.deleteModal().toggle()})),$body.on("click",".btn-lock-peer",(function(){let $lockGlyph="bi-lock-fill",$unlockGlyph="bi-unlock-fill";$(this).children().hasClass($lockGlyph)?($(this).children().removeClass($lockGlyph).addClass($unlockGlyph),$(this).children().tooltip("hide").attr("data-original-title","Lock Peer").tooltip("show")):($(this).children().removeClass($unlockGlyph).addClass($lockGlyph),$(this).children().tooltip("hide").attr("data-original-title","Unlock Peer").tooltip("show"))})),$("#delete_peer").on("click",(function(){$(this).attr("disabled","disabled"),$(this).html("Deleting...");let config=window.configurations.getConfigurationName(),peer_ids=[$(this).data("peer-id")];window.configurations.deletePeers(config,peer_ids)})),$body.on("click",".btn-setting-peer",(function(){let peer_id=$(this).attr("id");$("#save_peer_setting").attr("peer_id",peer_id),$.ajax({method:"POST",url:"/get_peer_data/"+window.configurations.getConfigurationName(),headers:{"Content-Type":"application/json"},data:JSON.stringify({id:peer_id}),success:function(response){let peer_name=""===response.name?"Untitled":response.name;$("#setting_modal .peer_name").html(peer_name),$("#setting_modal #peer_name_textbox").val(response.name),$("#setting_modal #peer_private_key_textbox").val(response.private_key),$("#setting_modal #peer_DNS_textbox").val(response.DNS),$("#setting_modal #peer_allowed_ip_textbox").val(response.allowed_ip),$("#setting_modal #peer_endpoint_allowed_ips").val(response.endpoint_allowed_ip),$("#setting_modal #peer_mtu").val(response.mtu),$("#setting_modal #peer_keep_alive").val(response.keep_alive),$("#setting_modal #peer_preshared_key_textbox").val(response.preshared_key),window.configurations.settingModal().toggle(),window.configurations.endProgressBar()}})})),$("#setting_modal").on("hidden.bs.modal",(function(){$("#setting_peer_alert").addClass("d-none")})),$("#peer_private_key_textbox").on("change",(function(){let $save_peer_setting=$("#save_peer_setting");$(this).val().length>0&&$.ajax({url:"/check_key_match/"+window.configurations.getConfigurationName(),method:"POST",headers:{"Content-Type":"application/json"},data:JSON.stringify({private_key:$("#peer_private_key_textbox").val(),public_key:$save_peer_setting.attr("peer_id")})}).done((function(res){"failed"===res.status?$("#setting_peer_alert").html(res.status).removeClass("d-none"):$("#setting_peer_alert").addClass("d-none")}))})),$("#save_peer_setting").on("click",(function(){$(this).attr("disabled","disabled"),$(this).html("Saving...");let $peer_DNS_textbox=$("#peer_DNS_textbox"),$peer_allowed_ip_textbox=$("#peer_allowed_ip_textbox"),$peer_endpoint_allowed_ips=$("#peer_endpoint_allowed_ips"),$peer_name_textbox=$("#peer_name_textbox"),$peer_private_key_textbox=$("#peer_private_key_textbox"),$peer_preshared_key_textbox=$("#peer_preshared_key_textbox"),$peer_mtu=$("#peer_mtu"),$peer_keep_alive=$("#peer_keep_alive");if(""!==$peer_DNS_textbox.val()&&""!==$peer_allowed_ip_textbox.val()&&""!==$peer_endpoint_allowed_ips.val()){let peer_id=$(this).attr("peer_id"),conf_id=$(this).attr("conf_id"),data_list=[$peer_name_textbox,$peer_DNS_textbox,$peer_private_key_textbox,$peer_preshared_key_textbox,$peer_allowed_ip_textbox,$peer_endpoint_allowed_ips,$peer_mtu,$peer_keep_alive];data_list.forEach(ele=>ele.attr("disabled","disabled")),$.ajax({method:"POST",url:"/save_peer_setting/"+conf_id,headers:{"Content-Type":"application/json"},data:JSON.stringify({id:peer_id,name:$peer_name_textbox.val(),DNS:$peer_DNS_textbox.val(),private_key:$peer_private_key_textbox.val(),allowed_ip:$peer_allowed_ip_textbox.val(),endpoint_allowed_ip:$peer_endpoint_allowed_ips.val(),MTU:$peer_mtu.val(),keep_alive:$peer_keep_alive.val(),preshared_key:$peer_preshared_key_textbox.val()}),success:function(response){"failed"===response.status?$("#setting_peer_alert").html(response.msg).removeClass("d-none"):(window.configurations.settingModal().toggle(),window.configurations.loadPeers($("#search_peer_textbox").val()),$("#alertToast").toast("show"),$("#alertToast .toast-body").html("Peer Saved!")),$("#save_peer_setting").removeAttr("disabled").html("Save"),data_list.forEach(ele=>ele.removeAttr("disabled"))}})}else $("#setting_peer_alert").html("Please fill in all required box.").removeClass("d-none"),$("#save_peer_setting").removeAttr("disabled").html("Save")})),$(".peer_private_key_textbox_switch").on("click",(function(){let $peer_private_key_textbox=$("#peer_private_key_textbox"),mode="password"===$peer_private_key_textbox.attr("type")?"text":"password",icon="password"===$peer_private_key_textbox.attr("type")?"bi bi-eye-slash-fill":"bi bi-eye-fill";$peer_private_key_textbox.attr("type",mode),$(".peer_private_key_textbox_switch i").removeClass().addClass(icon)}));let doneTypingInterval=200;$("#search_peer_textbox").on("keyup",(function(){clearTimeout(typingTimer),typingTimer=setTimeout(()=>{window.configurations.loadPeers($(this).val())},doneTypingInterval)})).on("keydown",(function(){clearTimeout(typingTimer)})),$body.on("change","#sort_by_dropdown",(function(){$.ajax({method:"POST",data:JSON.stringify({sort:$("#sort_by_dropdown option:selected").val()}),headers:{"Content-Type":"application/json"},url:"/update_dashboard_sort",success:function(){window.configurations.loadPeers($("#search_peer_textbox").val())}})})),$body.on("mouseenter",".key",(function(){let label;$(this).parent().siblings().children()[1].style.opacity="100"})).on("mouseout",".key",(function(){let label=$(this).parent().siblings().children()[1];label.style.opacity="0",setTimeout((function(){label.innerHTML="CLICK TO COPY"}),200)})).on("click",".key",(function(){let label=$(this).parent().siblings().children()[1];window.configurations.copyToClipboard($(this)),label.innerHTML="COPIED!"})),$body.on("click",".update_interval",(function(){let _new;$(".interval-btn-group button").removeClass("active"),$(this).addClass("active");let interval=$(this).data("refresh-interval");[5e3,1e4,3e4,6e4].includes(interval)&&window.configurations.updateRefreshInterval(interval)})),$body.on("click",".refresh",(function(){window.configurations.loadPeers($("#search_peer_textbox").val())})),$body.on("click",".display_mode",(function(){$(".display-btn-group button").removeClass("active"),$(this).addClass("active"),window.localStorage.setItem("displayMode",$(this).data("display-mode")),window.configurations.updateDisplayMode(),"list"===$(this).data("display-mode")?(Array($(".peer_list").children()).forEach((function(child){$(child).removeClass().addClass("col-12")})),window.configurations.showToast("Displaying as List")):(Array($(".peer_list").children()).forEach((function(child){$(child).removeClass().addClass("col-sm-6 col-lg-4")})),window.configurations.showToast("Displaying as Grids"))}));let $setting_btn_menu=$(".setting_btn_menu");$setting_btn_menu.css("top",-1*($setting_btn_menu.height()+54));let $setting_btn=$(".setting_btn");$setting_btn.on("click",(function(){$setting_btn_menu.hasClass("show")?($setting_btn_menu.removeClass("showing"),setTimeout((function(){$setting_btn_menu.removeClass("show")}),201)):($setting_btn_menu.addClass("show"),setTimeout((function(){$setting_btn_menu.addClass("showing")}),10))})),$("html").on("click",(function(r){document.querySelector(".setting_btn")!==r.target&&(document.querySelector(".setting_btn").contains(r.target)||document.querySelector(".setting_btn_menu").contains(r.target)||($setting_btn_menu.removeClass("showing"),setTimeout((function(){$setting_btn_menu.removeClass("show")}),310)))})),$("#delete_peers_by_bulk_btn").on("click",()=>{let $delete_bulk_modal_list=$("#delete_bulk_modal .list-group");$delete_bulk_modal_list.html(""),peers.forEach(peer=>{let name;name=""===peer.name?"Untitled Peer":peer.name,$delete_bulk_modal_list.append('<a class="list-group-item list-group-item-action delete-bulk-peer-item" style="cursor: pointer" data-id="'+peer.id+'" data-name="'+name+'">'+name+"<br><code>"+peer.id+"</code></a>")}),window.configurations.deleteBulkModal().toggle()}),$body.on("click",".delete-bulk-peer-item",(function(){window.configurations.toggleDeleteByBulkIP($(this))})).on("click",".delete-peer-bulk-badge",(function(){window.configurations.toggleDeleteByBulkIP($(".delete-bulk-peer-item[data-id='"+$(this).data("id")+"']"))}));let $selected_peer_list=document.getElementById("selected_peer_list"),changeObserver=new MutationObserver((function(){$selected_peer_list.hasChildNodes()?$("#confirm_delete_bulk_peers").removeAttr("disabled"):$("#confirm_delete_bulk_peers").attr("disabled","disabled")})),confirm_delete_bulk_peers_interval;changeObserver.observe($selected_peer_list,{attributes:!0,childList:!0,characterData:!0}),$("#confirm_delete_bulk_peers").on("click",(function(){let btn=$(this);if(void 0!==confirm_delete_bulk_peers_interval)clearInterval(confirm_delete_bulk_peers_interval),confirm_delete_bulk_peers_interval=void 0,btn.html("Delete");else{let timer=5;btn.html(`Deleting in ${timer} secs... Click to cancel`),confirm_delete_bulk_peers_interval=setInterval((function(){if(timer-=1,btn.html(`Deleting in ${timer} secs... Click to cancel`),0===timer){btn.html("Deleting..."),btn.attr("disabled","disabled");let ips=[];$selected_peer_list.childNodes.forEach(ele=>ips.push(ele.dataset.id)),window.configurations.deletePeers(window.configurations.getConfigurationName(),ips),clearInterval(confirm_delete_bulk_peers_interval),confirm_delete_bulk_peers_interval=void 0}}),1e3)}})),$("#select_all_delete_bulk_peers").on("click",(function(){$(".delete-bulk-peer-item").each((function(){$(this).hasClass("active")||window.configurations.toggleDeleteByBulkIP($(this))}))})),$(window.configurations.deleteBulkModal()._element).on("hidden.bs.modal",(function(){$(".delete-bulk-peer-item").each((function(){$(this).hasClass("active")&&window.configurations.toggleDeleteByBulkIP($(this))}))})),$body.on("click",".btn-download-peer",(function(e){e.preventDefault();let link=$(this).attr("href");$.ajax({url:link,method:"GET",success:function(res){window.configurations.downloadOneConfig(res)}})})),$("#download_all_peers").on("click",(function(){$.ajax({url:`/download_all/${window.configurations.getConfigurationName()}`,method:"GET",success:function(res){res.peers.length>0?(window.wireguard.generateZipFiles(res),window.configurations.showToast("Peers' zip file download successful!")):window.configurations.showToast("Oops! There are no peer can be download.")}})}));
\ No newline at end of file
+import{ajaxPostJSON}from"./index";let peers=[];(function(){let configuration_name;let configuration_interval;let configuration_timeout=window.localStorage.getItem("configurationTimeout");if(configuration_timeout===null||!["5000","10000","30000","60000"].includes(configuration_timeout)){window.localStorage.setItem("configurationTimeout","10000");configuration_timeout=window.localStorage.getItem("configurationTimeout")}document.querySelector(`button[data-refresh-interval="${configuration_timeout}"]`).classList.add("active");let display_mode=window.localStorage.getItem("displayMode");if(display_mode===null||!["grid","list"].includes(display_mode)){window.localStorage.setItem("displayMode","grid");display_mode="grid"}document.querySelectorAll(".display-btn-group button").forEach(ele=>ele.classList.remove("active"));document.querySelector(`button[data-display-mode="${display_mode}"]`).classList.add("active");let $progress_bar=$(".progress-bar");let bootstrapModalConfig={keyboard:false,backdrop:"static"};let addModal=new bootstrap.Modal(document.getElementById("add_modal"),bootstrapModalConfig);let deleteBulkModal=new bootstrap.Modal(document.getElementById("delete_bulk_modal"),bootstrapModalConfig);let ipModal=new bootstrap.Modal(document.getElementById("available_ip_modal"),bootstrapModalConfig);let qrcodeModal=new bootstrap.Modal(document.getElementById("qrcode_modal"),bootstrapModalConfig);let settingModal=new bootstrap.Modal(document.getElementById("setting_modal"),bootstrapModalConfig);let deleteModal=new bootstrap.Modal(document.getElementById("delete_modal"),bootstrapModalConfig);let configurationDeleteModal=new bootstrap.Modal(document.getElementById("configuration_delete_modal"),bootstrapModalConfig);$("[data-toggle='tooltip']").tooltip();$("[data-toggle='popover']").popover();let chartUnit=window.localStorage.chartUnit;let chartUnitAvailable=["GB","MB","KB"];if(chartUnit===null||!chartUnitAvailable.includes(chartUnit)){window.localStorage.setItem("chartUnit","GB");$('.switchUnit[data-unit="GB"]').addClass("active")}else{$(`.switchUnit[data-unit="${chartUnit}"]`).addClass("active")}chartUnit=window.localStorage.getItem("chartUnit");const totalDataUsageChart=document.getElementById("totalDataUsageChartObj").getContext("2d");const totalDataUsageChartObj=new Chart(totalDataUsageChart,{type:"line",data:{labels:[],datasets:[{label:"Data Sent",data:[],stroke:"#FFFFFF",borderColor:"#28a745",tension:.1,borderWidth:2},{label:"Data Received",data:[],stroke:"#FFFFFF",borderColor:"#007bff",tension:.1,borderWidth:2}]},options:{maintainAspectRatio:false,showScale:false,responsive:false,scales:{y:{min:0,ticks:{min:0,callback:function(value,index,ticks){return`${value} ${chartUnit}`}}}},plugins:{tooltip:{callbacks:{label:function(context){return`${context.dataset.label}: ${context.parsed.y} ${chartUnit}`}}}}}});let $totalDataUsageChartObj=$("#totalDataUsageChartObj");$totalDataUsageChartObj.css("width","100%");totalDataUsageChartObj.width=$totalDataUsageChartObj.parent().width();totalDataUsageChartObj.resize();$(window).on("resize",function(){totalDataUsageChartObj.resize()});$(".fullScreen").on("click",function(){let $chartContainer=$(".chartContainer");if($chartContainer.hasClass("fullScreen")){$(this).children().removeClass("bi-fullscreen-exit").addClass("bi-fullscreen");$chartContainer.removeClass("fullScreen")}else{$(this).children().removeClass("bi-fullscreen").addClass("bi-fullscreen-exit");$chartContainer.addClass("fullScreen")}totalDataUsageChartObj.resize()});let mul=1;$(".switchUnit").on("click",function(){$(".switchUnit").removeClass("active");$(this).addClass("active");if($(this).data("unit")!==chartUnit){switch($(this).data("unit")){case"GB":if(chartUnit==="MB"){mul=1/1024}if(chartUnit==="KB"){mul=1/1048576}break;case"MB":if(chartUnit==="GB"){mul=1024}if(chartUnit==="KB"){mul=1/1024}break;case"KB":if(chartUnit==="GB"){mul=1048576}if(chartUnit==="MB"){mul=1024}break;default:break}window.localStorage.setItem("chartUnit",$(this).data("unit"));chartUnit=$(this).data("unit");totalDataUsageChartObj.data.datasets[0].data=totalDataUsageChartObj.data.datasets[0].data.map(x=>x*mul);totalDataUsageChartObj.data.datasets[1].data=totalDataUsageChartObj.data.datasets[1].data.map(x=>x*mul);totalDataUsageChartObj.update()}});function configurationAlert(response){if(response.listen_port===""&&response.status==="stopped"){let configAlert=document.createElement("div");configAlert.classList.add("alert");configAlert.classList.add("alert-warning");configAlert.setAttribute("role","alert");configAlert.innerHTML="Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.";document.querySelector("#config_info_alert").appendChild(configAlert)}if(response.conf_address==="N/A"){let configAlert=document.createElement("div");configAlert.classList.add("alert");configAlert.classList.add("alert-warning");configAlert.setAttribute("role","alert");configAlert.innerHTML="Configuration <strong>Address</strong> need to be specified to have peers connect to it.";document.querySelector("#config_info_alert").appendChild(configAlert)}}function setActiveConfigurationName(){$(".nav-conf-link").removeClass("active");$(`.sb-${configuration_name}-url`).addClass("active")}let firstLoading=true;$(".nav-conf-link").on("click",function(e){e.preventDefault();if(configuration_name!==$(this).data("conf-id")){firstLoading=true;$("#config_body").addClass("firstLoading");configuration_name=$(this).data("conf-id");if(loadPeers($("#search_peer_textbox").val())){setActiveConfigurationName();window.history.pushState(null,null,`/configuration/${configuration_name}`);$("title").text(`${configuration_name} | WGDashboard`);totalDataUsageChartObj.data.labels=[];totalDataUsageChartObj.data.datasets[0].data=[];totalDataUsageChartObj.data.datasets[1].data=[];totalDataUsageChartObj.update()}}});function configurationHeader(response){let $conf_status_btn=$(".toggle--switch");if(response.checked==="checked"){$conf_status_btn.prop("checked",true)}else{$conf_status_btn.prop("checked",false)}$conf_status_btn.data("conf-id",configuration_name);if(response.running_peer>0){let d=new Date;let time=d.toLocaleString("en-us",{hour:"2-digit",minute:"2-digit",second:"2-digit",hourCycle:"h23"});totalDataUsageChartObj.data.labels.push(`${time}`);if(totalDataUsageChartObj.data.datasets[0].data.length===0){totalDataUsageChartObj.data.datasets[1].lastData=response.total_data_usage[2];totalDataUsageChartObj.data.datasets[0].lastData=response.total_data_usage[1];totalDataUsageChartObj.data.datasets[0].data.push(0);totalDataUsageChartObj.data.datasets[1].data.push(0)}else{if(totalDataUsageChartObj.data.datasets[0].data.length===50&&totalDataUsageChartObj.data.datasets[1].data.length===50){totalDataUsageChartObj.data.labels.shift();totalDataUsageChartObj.data.datasets[0].data.shift();totalDataUsageChartObj.data.datasets[1].data.shift()}let newTotalReceive=response.total_data_usage[2]-totalDataUsageChartObj.data.datasets[1].lastData;let newTotalSent=response.total_data_usage[1]-totalDataUsageChartObj.data.datasets[0].lastData;let k=0;if(chartUnit==="MB"){k=1024}else if(chartUnit==="KB"){k=1048576}else{k=1}totalDataUsageChartObj.data.datasets[1].data.push(newTotalReceive*k);totalDataUsageChartObj.data.datasets[0].data.push(newTotalSent*k);totalDataUsageChartObj.data.datasets[0].lastData=response.total_data_usage[1];totalDataUsageChartObj.data.datasets[1].lastData=response.total_data_usage[2]}totalDataUsageChartObj.update()}document.querySelector("#conf_name").textContent=configuration_name;$("#switch").removeClass("info_loading");document.querySelectorAll("#sort_by_dropdown option").forEach(ele=>ele.removeAttribute("selected"));document.querySelector(`#sort_by_dropdown option[value="${response.sort_tag}"]`).setAttribute("selected","selected");document.querySelector("#conf_status").innerHTML=`${response.status}<span class="dot dot-${response.status}"></span>`;document.querySelector("#conf_connected_peers").innerHTML=response.running_peer;document.querySelector("#conf_total_data_usage").innerHTML=`${response.total_data_usage[0]} GB`;document.querySelector("#conf_total_data_received").innerHTML=`${response.total_data_usage[2]} GB`;document.querySelector("#conf_total_data_sent").innerHTML=`${response.total_data_usage[1]} GB`;document.querySelector("#conf_public_key").innerHTML=response.public_key;document.querySelector("#conf_listen_port").innerHTML=response.listen_port===""?"N/A":response.listen_port;document.querySelector("#conf_address").innerHTML=response.conf_address;let delay=0;let h6=$(".info h6");for(let i=0;i<h6.length;i++){setTimeout(function(){$(h6[i]).removeClass("info_loading")},delay);delay+=40}}function configurationPeers(response){let result="";if(response.peer_data.length===0){document.querySelector(".peer_list").innerHTML=`<div class="col-12" style="text-align: center; margin-top: 1.5rem"><h3 class="text-muted">Oops! No peers found ‘︿’</h3></div>`}else{let mode=display_mode==="list"?"col-12":"col-sm-6 col-lg-4";response.peer_data.forEach(function(peer){let total_r=0;let total_s=0;total_r+=peer.cumu_receive;total_s+=peer.cumu_sent;let spliter='<div class="w-100"></div>';let peer_name=`<div class="col-sm peerNameCol">
+                        <h5 class="peerName">${peer.name===""?"Untitled":peer.name}</h5>
+                        <h6 class="peerLightContainer"><span class="dot dot-${peer.status}" style="margin-left: auto !important;" data-toggle="tooltip" data-placement="left"></span></h6>
+                     </div>`;let peer_transfer=`<div class="col-12 peer_data_group" style="">
+                        <p class="text-primary" style="">
+                            <small><i class="bi bi-arrow-down-right"></i> ${roundN(peer.total_receive+total_r,4)} GB</small>
+                        </p>
+                        <p class="text-success">
+                            <small><i class="bi bi-arrow-up-right"></i> ${roundN(peer.total_sent+total_s,4)} GB</small>
+                        </p>
+                    </div>`;let peer_key='<div class="col-sm"><small class="text-muted" style="display: flex"><strong>PEER</strong><strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong></small> <h6><samp class="ml-auto key">'+peer.id+"</samp></h6></div>";let peer_allowed_ip='<div class="col-sm"><small class="text-muted"><strong>ALLOWED IP</strong></small><h6 style="text-transform: uppercase;">'+peer.allowed_ip+"</h6></div>";let peer_latest_handshake='<div class="col-sm"> <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small> <h6 style="text-transform: uppercase;">'+peer.latest_handshake+"</h6> </div>";let peer_endpoint='<div class="col-sm"><small class="text-muted"><strong>END POINT</strong></small><h6 style="text-transform: uppercase;">'+peer.endpoint+"</h6></div>";let peer_control=`
+                    <div class="col-sm">
+                        <hr>
+                        <div class="button-group" style="display:flex">
+                            <button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" data-peer-id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-gear-fill" data-toggle="tooltip" data-placement="bottom" title="Peer Settings"></i>
+                            </button>
+                            <button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" data-peer-id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-x-circle-fill" data-toggle="tooltip" data-placement="bottom" title="Delete Peer"></i>
+                            </button>
+                            <button type="button" class="btn btn-outline-success btn-lock-peer btn-control" data-peer-id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-ethernet" data-toggle="tooltip" data-placement="bottom" data-original-title='Peer enabled. Click to disable peer.' data-peer-name="${peer.name}"></i>
+                            </button>`;if(peer.private_key!==""){peer_control+='<div class="share_peer_btn_group" style="margin-left: auto !important; display: inline"><button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" data-imgsrc="/qrcode/'+response.name+"?id="+encodeURIComponent(peer.id)+'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 19px;" fill="#28a745"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z"/></svg></button><a href="/download/'+response.name+"?id="+encodeURIComponent(peer.id)+'" class="btn btn-outline-info btn-download-peer btn-control"><i class="bi bi-download"></i></a></div>'}peer_control+="</div>";let html='<div class="'+mode+'" data-id="'+peer.id+'">'+'<div class="card mb-3 card-'+peer.status+'">'+'<div class="card-body">'+'<div class="row">'+peer_name+spliter+peer_transfer+peer_key+peer_allowed_ip+peer_latest_handshake+spliter+peer_endpoint+spliter+peer_control+"</div>"+"</div>"+"</div>"+"</div></div>";result+=html});response.lock_access_peers.forEach(function(peer){let total_r=0;let total_s=0;total_r+=peer.cumu_receive;total_s+=peer.cumu_sent;let spliter='<div class="w-100"></div>';let peer_name=`<div class="col-sm peerNameCol">
+                        <h5 class="peerName">${peer.name===""?"Untitled":peer.name}</h5>
+                        <h6 class="peerLightContainer"><span class="dot dot-${peer.status}" style="margin-left: auto !important;" data-toggle="tooltip" data-placement="left"></span></h6>
+                     </div>`;let peer_transfer=`<div class="col-12 peer_data_group" style="">
+                        <p class="text-primary" style="">
+                            <small><i class="bi bi-arrow-down-right"></i> ${roundN(peer.total_receive+total_r,4)} GB</small>
+                        </p>
+                        <p class="text-success">
+                            <small><i class="bi bi-arrow-up-right"></i> ${roundN(peer.total_sent+total_s,4)} GB</small>
+                        </p>
+                    </div>`;let peer_key='<div class="col-sm"><small class="text-muted" style="display: flex"><strong>PEER</strong><strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong></small> <h6><samp class="ml-auto key">'+peer.id+"</samp></h6></div>";let peer_allowed_ip='<div class="col-sm"><small class="text-muted"><strong>ALLOWED IP</strong></small><h6 style="text-transform: uppercase;">'+peer.allowed_ip+"</h6></div>";let peer_latest_handshake='<div class="col-sm"> <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small> <h6 style="text-transform: uppercase;">'+peer.latest_handshake+"</h6> </div>";let peer_endpoint='<div class="col-sm"><small class="text-muted"><strong>END POINT</strong></small><h6 style="text-transform: uppercase;">'+peer.endpoint+"</h6></div>";let peer_control=`
+                    <div class="col-sm">
+                        <hr>
+                        <div class="button-group" style="display:flex; align-items: center;">
+                            <button type="button" class="btn btn-outline-success btn-lock-peer btn-control lock" data-peer-id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-ethernet" data-toggle="tooltip" data-placement="bottom" data-original-title='Peer disabled. Click to enable peer.' data-peer-name="${peer.name}"></i>
+                            </button>
+                            <small class="text-muted" style="margin-left: auto">Peer Disabled</small>
+                            </div>`;let html='<div class="'+mode+'" data-id="'+peer.id+'">'+'<div class="card mb-3 card-'+peer.status+'">'+'<div class="card-body">'+'<div class="row">'+peer_name+spliter+peer_transfer+peer_key+peer_allowed_ip+peer_latest_handshake+spliter+peer_endpoint+spliter+peer_control+"</div>"+"</div>"+"</div>"+"</div></div>";result+=html});document.querySelector(".peer_list").innerHTML=result;if(configuration_interval===undefined){setConfigurationInterval()}}}function addPeersByBulk(){let $new_add_amount=$("#new_add_amount");$add_peer.setAttribute("disabled","disabled");$add_peer.innerHTML=`Adding ${$new_add_amount.val()} peers...`;let $new_add_DNS=$("#new_add_DNS");$new_add_DNS.val(window.configurations.cleanIp($new_add_DNS.val()));let $new_add_endpoint_allowed_ip=$("#new_add_endpoint_allowed_ip");$new_add_endpoint_allowed_ip.val(window.configurations.cleanIp($new_add_endpoint_allowed_ip.val()));let $new_add_MTU=$("#new_add_MTU");let $new_add_keep_alive=$("#new_add_keep_alive");let $enable_preshare_key=$("#enable_preshare_key");let data_list=[$new_add_DNS,$new_add_endpoint_allowed_ip,$new_add_MTU,$new_add_keep_alive];if($new_add_amount.val()>0&&!$new_add_amount.hasClass("is-invalid")){if($new_add_DNS.val()!==""&&$new_add_endpoint_allowed_ip.val()!==""){let conf=configuration_name;let keys=[];for(let i=0;i<$new_add_amount.val();i++){keys.push(window.wireguard.generateKeypair())}$.ajax({method:"POST",url:"/add_peer_bulk/"+conf,headers:{"Content-Type":"application/json"},data:JSON.stringify({DNS:$new_add_DNS.val(),endpoint_allowed_ip:$new_add_endpoint_allowed_ip.val(),MTU:$new_add_MTU.val(),keep_alive:$new_add_keep_alive.val(),enable_preshared_key:$enable_preshare_key.prop("checked"),keys:keys,amount:$new_add_amount.val()}),success:function(response){if(response!=="true"){$("#add_peer_alert").html(response).removeClass("d-none");data_list.forEach(ele=>ele.removeAttr("disabled"));$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save"}else{window.configurations.loadPeers("");data_list.forEach(ele=>ele.removeAttr("disabled"));$("#add_peer_form").trigger("reset");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save";window.configurations.showToast($new_add_amount.val()+" peers added successful!");window.configurations.addModal().toggle()}}})}else{$("#add_peer_alert").html("Please fill in all required box.").removeClass("d-none");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Add"}}else{$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Add"}}function deletePeers(config,peer_ids){$.ajax({method:"POST",url:"/remove_peer/"+config,headers:{"Content-Type":"application/json"},data:JSON.stringify({action:"delete",peer_ids:peer_ids}),success:function(response){if(response!=="true"){if(window.configurations.deleteModal()._isShown){$("#remove_peer_alert").html(response+$("#add_peer_alert").html()).removeClass("d-none");$("#delete_peer").removeAttr("disabled").html("Delete")}if(window.configurations.deleteBulkModal()._isShown){let $bulk_remove_peer_alert=$("#bulk_remove_peer_alert");$bulk_remove_peer_alert.html(response+$bulk_remove_peer_alert.html()).removeClass("d-none");$("#confirm_delete_bulk_peers").removeAttr("disabled").html("Delete")}}else{if(window.configurations.deleteModal()._isShown){window.configurations.deleteModal().toggle()}if(window.configurations.deleteBulkModal()._isShown){$("#confirm_delete_bulk_peers").removeAttr("disabled").html("Delete");$("#selected_peer_list").html("");$(".delete-bulk-peer-item.active").removeClass("active");window.configurations.deleteBulkModal().toggle()}window.configurations.loadPeers($("#search_peer_textbox").val());window.configurations.showToast(`Deleted ${peer_ids.length} peers`);$("#delete_peer").removeAttr("disabled").html("Delete")}}})}function noResponding(message="Opps! <br> I can't connect to the server."){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.add("active"));setTimeout(function(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.add("show"));document.querySelector("#right_body").classList.add("no-responding");document.querySelector(".navbar").classList.add("no-responding");document.querySelector(".no-response .container h4").innerHTML=message},10)}function removeNoResponding(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.remove("show"));document.querySelector("#right_body").classList.remove("no-responding");document.querySelector(".navbar").classList.remove("no-responding");setTimeout(function(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.remove("active"))},1010)}function setConfigurationInterval(){configuration_interval=setInterval(function(){loadPeers($("#search_peer_textbox").val())},configuration_timeout)}function removeConfigurationInterval(){clearInterval(configuration_interval)}function startProgressBar(){$progress_bar.css("width","0%").css("opacity","100").css("background","rgb(255,69,69)").css("background","linear-gradient(145deg, rgba(255,69,69,1) 0%, rgba(0,115,186,1) 100%)").css("width","25%");setTimeout(function(){stillLoadingProgressBar()},300)}function stillLoadingProgressBar(){$progress_bar.css("transition","3s ease-in-out").css("width","75%")}function endProgressBar(){$progress_bar.css("transition","0.3s ease-in-out").css("width","100%");setTimeout(function(){$progress_bar.css("opacity","0")},250)}function roundN(value,digits){let tenToN=10**digits;return Math.round(value*tenToN)/tenToN}let time=0;let count=0;let d1=new Date;function loadPeers(searchString){d1=new Date;let good=true;$.ajax({method:"GET",url:`/get_config/${configuration_name}?search=${encodeURIComponent(searchString)}`,headers:{"Content-Type":"application/json"}}).done(function(response){console.log(response);parsePeers(response)}).fail(function(){noResponding();good=false});return good}function parsePeers(response){if(response.status){removeAllTooltips();let d2=new Date;let seconds=d2-d1;time+=seconds;count+=1;window.console.log(`Average time: ${time/count}ms`);$("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);removeNoResponding();peers=response.data.peer_data;configurationAlert(response.data);configurationHeader(response.data);configurationPeers(response.data);$(".dot.dot-running").attr("title","Peer Connected").tooltip();$(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();$("i[data-toggle='tooltip']").tooltip();$("#configuration_name").text(configuration_name);if(firstLoading){firstLoading=false;$("#config_body").removeClass("firstLoading")}}else{noResponding(response.message);removeConfigurationInterval()}}function removeAllTooltips(){$(".tooltip").remove()}function toggleAccess(peerID){$.ajax({url:"/api/togglePeerAccess",method:"POST",headers:{"Content-Type":"application/json"},data:JSON.stringify({peerID:peerID,config:configuration_name})}).done(function(res){if(res.status){loadPeers($("#search_peer_textbox").val())}else{showToast(res.reason)}})}function generate_key(){let keys=window.wireguard.generateKeypair();document.querySelector("#private_key").value=keys.privateKey;document.querySelector("#public_key").value=keys.publicKey;document.querySelector("#add_peer_alert").classList.add("d-none");document.querySelector("#re_generate_key i").classList.remove("rotating");document.querySelector("#enable_preshare_key").value=keys.presharedKey}let numberToast=0;function showToast(msg){$(".toastContainer").append(`<div id="${numberToast}-toast" class="toast hide" role="alert" data-delay="5000">
+				<div class="toast-header">
+					<strong class="mr-auto">WGDashboard</strong>
+					<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="toast-body">${msg}</div>
+				<div class="toast-progressbar"></div>
+			</div>`);$(`#${numberToast}-toast`).toast("show");$(`#${numberToast}-toast .toast-body`).html(msg);$(`#${numberToast}-toast .toast-progressbar`).css("transition",`width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data("delay")}ms cubic-bezier(0, 0, 0, 0)`);$(`#${numberToast}-toast .toast-progressbar`).css("width","0px");numberToast++}function updateRefreshInterval(interval){configuration_timeout=interval;window.localStorage.setItem("configurationTimeout",configuration_timeout.toString());removeConfigurationInterval();setConfigurationInterval();showToast("Refresh Interval set to "+Math.round(interval/1e3)+" seconds")}function cleanIp(val){let clean_ip=val.split(",");for(let i=0;i<clean_ip.length;i++){clean_ip[i]=clean_ip[i].trim(" ")}return clean_ip.filter(Boolean).join(",")}function trigger_ip(ip){let $ip_ele=document.querySelector(`.available-ip-item[data-ip='${ip}']`);if($ip_ele){if($ip_ele.classList.contains("active")){$ip_ele.classList.remove("active");document.querySelector(`#selected_ip_list .badge[data-ip='${ip}']`).remove()}else{$ip_ele.classList.add("active");document.querySelector("#selected_ip_list").innerHTML+=`<span class="badge badge-primary available-ip-badge" style="cursor: pointer" data-ip="${ip}">${ip}</span>`}}}function download_one_config(conf){let link=document.createElement("a");link.download=conf.filename;let blob=new Blob([conf.content],{type:"text/conf"});link.href=window.URL.createObjectURL(blob);link.click()}function toggleBulkIP(element){let $selected_peer_list=$("#selected_peer_list");let id=element.data("id");let name=element.data("name")===""?"Untitled Peer":element.data("name");if(element.hasClass("active")){element.removeClass("active");$("#selected_peer_list .badge[data-id='"+id+"']").remove()}else{element.addClass("active");$selected_peer_list.append('<span class="badge badge-danger delete-peer-bulk-badge" style="cursor: pointer; text-overflow: ellipsis; max-width: 100%; overflow-x: hidden" data-id="'+id+'">'+name+" - "+id+"</span>")}}function copyToClipboard(element){let $temp=$("<input>");$body.append($temp);$temp.val($(element).text()).trigger("select");document.execCommand("copy");$temp.remove()}function getAvailableIps(){$.ajax({url:`/available_ips/${configuration_name}`,method:"GET"}).done(function(res){if(res.status===true){available_ips=res.data;let $list_group=document.querySelector("#available_ip_modal .modal-body .list-group");$list_group.innerHTML="";document.querySelector("#allowed_ips").value=available_ips[0];available_ips.forEach(ip=>$list_group.innerHTML+=`<a class="list-group-item list-group-item-action available-ip-item" style="cursor: pointer" data-ip="${ip}">${ip}</a>`)}else{document.querySelector("#allowed_ips").value=res.message;document.querySelector("#search_available_ip").setAttribute("disabled","disabled")}})}function deleteConfiguration(){}window.configurations={addModal:()=>{return addModal},deleteBulkModal:()=>{return deleteBulkModal},deleteModal:()=>{return deleteModal},configurationDeleteModal:()=>{return configurationDeleteModal},ipModal:()=>{return ipModal},qrcodeModal:()=>{return qrcodeModal},settingModal:()=>{return settingModal},configurationTimeout:()=>{return configuration_timeout},updateDisplayMode:()=>{display_mode=window.localStorage.getItem("displayMode")},removeConfigurationInterval:()=>{removeConfigurationInterval()},loadPeers:searchString=>{loadPeers(searchString)},addPeersByBulk:()=>{addPeersByBulk()},deletePeers:(config,peers_ids)=>{deletePeers(config,peers_ids)},deleteConfiguration:()=>{deleteConfiguration()},parsePeers:response=>{parsePeers(response)},toggleAccess:peerID=>{toggleAccess(peerID)},setConfigurationName:confName=>{configuration_name=confName},getConfigurationName:()=>{return configuration_name},setActiveConfigurationName:()=>{setActiveConfigurationName()},getAvailableIps:()=>{getAvailableIps()},generateKeyPair:()=>{generate_key()},showToast:message=>{showToast(message)},updateRefreshInterval:interval=>{updateRefreshInterval(interval)},copyToClipboard:element=>{copyToClipboard(element)},toggleDeleteByBulkIP:element=>{toggleBulkIP(element)},downloadOneConfig:conf=>{download_one_config(conf)},triggerIp:ip=>{trigger_ip(ip)},cleanIp:val=>{return cleanIp(val)},startProgressBar:()=>{startProgressBar()},stillLoadingProgressBar:()=>{stillLoadingProgressBar()},endProgressBar:()=>{endProgressBar()}}})();let $body=$("body");let available_ips=[];let $add_peer=document.getElementById("save_peer");$("#configuration_delete").on("click",function(){window.configurations.configurationDeleteModal().toggle()});$("#sure_delete_configuration").on("click",function(){window.configurations.removeConfigurationInterval();$(this).attr("disabled","disabled");function done(res){if(res.status){window.configurations.configurationDeleteModal().toggle()}}ajaxPostJSON("/api/deleteConfiguration",{name:configuration_name},done)});document.querySelector(".add_btn").addEventListener("click",()=>{window.configurations.addModal().toggle()});$(".toggle--switch").on("click",function(){$(this).addClass("waiting").attr("disabled","disabled");let id=window.configurations.getConfigurationName();let status=$(this).prop("checked");let ele=$(this);$.ajax({url:`/switch/${id}`}).done(function(res){console.log();if(res){if(status){window.configurations.showToast(`${id} is running.`)}else{window.configurations.showToast(`${id} is stopped.`)}ele.removeClass("waiting");ele.removeAttr("disabled")}else{if(status){$(this).prop("checked",false)}else{$(this).prop("checked",true)}}window.configurations.loadPeers($("#search_peer_textbox").val())})});document.querySelector("#private_key").addEventListener("change",event=>{let publicKey=document.querySelector("#public_key");if(event.target.value.length===44){publicKey.value=window.wireguard.generatePublicKey(event.target.value);publicKey.setAttribute("disabled","disabled")}else{publicKey.attributes.removeNamedItem("disabled");publicKey.value=""}});$("#add_modal").on("show.bs.modal",function(){window.configurations.generateKeyPair();window.configurations.getAvailableIps()}).on("hide.bs.modal",function(){$("#allowed_ips_indicator").html("")});$("#re_generate_key").on("click",function(){$("#public_key").attr("disabled","disabled");$("#re_generate_key i").addClass("rotating");window.configurations.generateKeyPair()});$("#allowed_ips").on("keyup",function(){let s=window.configurations.cleanIp($(this).val());s=s.split(",");if(available_ips.includes(s[s.length-1])){$("#allowed_ips_indicator").removeClass().addClass("text-success").html('<i class="bi bi-check-circle-fill"></i>')}else{$("#allowed_ips_indicator").removeClass().addClass("text-warning").html('<i class="bi bi-exclamation-circle-fill"></i>')}});$("#peer_name_textbox").on("keyup",function(){$(".peer_name").html($(this).val())});$add_peer.addEventListener("click",function(){let $bulk_add=$("#bulk_add");if($bulk_add.prop("checked")){if(!$("#new_add_amount").hasClass("is-invalid")){window.configurations.addPeersByBulk()}}else{let $public_key=$("#public_key");let $private_key=$("#private_key");let $allowed_ips=$("#allowed_ips");$allowed_ips.val(window.configurations.cleanIp($allowed_ips.val()));let $new_add_DNS=$("#new_add_DNS");$new_add_DNS.val(window.configurations.cleanIp($new_add_DNS.val()));let $new_add_endpoint_allowed_ip=$("#new_add_endpoint_allowed_ip");$new_add_endpoint_allowed_ip.val(window.configurations.cleanIp($new_add_endpoint_allowed_ip.val()));let $new_add_name=$("#new_add_name");let $new_add_MTU=$("#new_add_MTU");let $new_add_keep_alive=$("#new_add_keep_alive");let $enable_preshare_key=$("#enable_preshare_key");$add_peer.setAttribute("disabled","disabled");$add_peer.innerHTML="Adding...";if($allowed_ips.val()!==""&&$public_key.val()!==""&&$new_add_DNS.val()!==""&&$new_add_endpoint_allowed_ip.val()!==""){let conf=window.configurations.getConfigurationName();let data_list=[$private_key,$allowed_ips,$new_add_name,$new_add_DNS,$new_add_endpoint_allowed_ip,$new_add_MTU,$new_add_keep_alive];data_list.forEach(ele=>ele.attr("disabled","disabled"));$.ajax({method:"POST",url:"/add_peer/"+conf,headers:{"Content-Type":"application/json"},data:JSON.stringify({private_key:$private_key.val(),public_key:$public_key.val(),allowed_ips:$allowed_ips.val(),name:$new_add_name.val(),DNS:$new_add_DNS.val(),endpoint_allowed_ip:$new_add_endpoint_allowed_ip.val(),MTU:$new_add_MTU.val(),keep_alive:$new_add_keep_alive.val(),enable_preshared_key:$enable_preshare_key.prop("checked"),preshared_key:$enable_preshare_key.val()}),success:function(response){if(response!=="true"){$("#add_peer_alert").html(response).removeClass("d-none");data_list.forEach(ele=>ele.removeAttr("disabled"));$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save"}else{window.configurations.loadPeers("");data_list.forEach(ele=>ele.removeAttr("disabled"));$("#add_peer_form").trigger("reset");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save";window.configurations.showToast("Add peer successful!");window.configurations.addModal().toggle()}}})}else{$("#add_peer_alert").html("Please fill in all required box.").removeClass("d-none");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Add"}}});$("#new_add_amount").on("keyup",function(){let $bulk_amount_validation=$("#bulk_amount_validation");if($(this).val().length>0){if(isNaN($(this).val())){$(this).removeClass("is-valid").addClass("is-invalid");$bulk_amount_validation.html("Please enter a valid integer")}else if($(this).val()>available_ips.length){$(this).removeClass("is-valid").addClass("is-invalid");$bulk_amount_validation.html(`Cannot create more than ${available_ips.length} peers.`)}else if($(this).val()<1){$(this).removeClass("is-valid").addClass("is-invalid");$bulk_amount_validation.html("Please enter at least 1 or more.")}else{$(this).removeClass("is-invalid").addClass("is-valid")}}else{$(this).removeClass("is-invalid").removeClass("is-valid")}});$("#bulk_add").on("change",function(){let hide=$(".non-bulk");let amount=$("#new_add_amount");if($(this).prop("checked")===true){for(let i=0;i<hide.length;i++){$(hide[i]).attr("disabled","disabled")}amount.removeAttr("disabled")}else{for(let i=0;i<hide.length;i++){if($(hide[i]).attr("id")!=="public_key"){$(hide[i]).removeAttr("disabled")}}amount.attr("disabled","disabled")}});$("#available_ip_modal").on("show.bs.modal",()=>{document.querySelector("#add_modal").classList.add("ip_modal_open")}).on("hidden.bs.modal",()=>{document.querySelector("#add_modal").classList.remove("ip_modal_open");let ips=[];let $selected_ip_list=document.querySelector("#selected_ip_list");for(let i=0;i<$selected_ip_list.childElementCount;i++){ips.push($selected_ip_list.children[i].dataset.ip)}ips.forEach(ele=>window.configurations.triggerIp(ele))});$body.on("click",".available-ip-badge",function(){$(".available-ip-item[data-ip='"+$(this).data("ip")+"']").removeClass("active");$(this).remove()});$body.on("click",".available-ip-item",function(){window.configurations.triggerIp($(this).data("ip"))});$("#search_available_ip").on("click",function(){window.configurations.ipModal().toggle();let $allowed_ips=document.querySelector("#allowed_ips");if($allowed_ips.value.length>0){let s=$allowed_ips.value.split(",");for(let i=0;i<s.length;i++){s[i]=s[i].trim();window.configurations.triggerIp(s[i])}}}).tooltip();$("#confirm_ip").on("click",()=>{window.configurations.ipModal().toggle();let ips=[];let $selected_ip_list=$("#selected_ip_list");$selected_ip_list.children().each(function(){ips.push($(this).data("ip"))});$("#allowed_ips").val(ips.join(", "));ips.forEach(ele=>window.configurations.triggerIp(ele))});$body.on("click",".btn-qrcode-peer",function(){let src=$(this).data("imgsrc");$.ajax({url:src,method:"GET"}).done(function(res){$("#qrcode_img").attr("src",res);window.configurations.qrcodeModal().toggle()})});$body.on("click",".btn-delete-peer",function(){let peer_id=$(this).data("peer-id");$("#delete_peer").data("peer-id",peer_id);window.configurations.deleteModal().toggle()});$body.on("click",".btn-lock-peer",function(){window.configurations.toggleAccess($(this).data("peer-id"),window.configurations.getConfigurationName());if($(this).hasClass("lock")){console.log($(this).data("peer-name"));window.configurations.showToast(`Enabled ${$(this).children().data("peer-name")}`);$(this).removeClass("lock");$(this).children().tooltip("hide").attr("data-original-title","Peer enabled. Click to disable peer.").tooltip("show")}else{window.configurations.showToast(`Disabled ${$(this).children().data("peer-name")}`);$(this).addClass("lock");$(this).children().tooltip("hide").attr("data-original-title","Peer disabled. Click to enable peer.").tooltip("show")}});$("#delete_peer").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Deleting...");let config=window.configurations.getConfigurationName();let peer_ids=[$(this).data("peer-id")];window.configurations.deletePeers(config,peer_ids)});$body.on("click",".btn-setting-peer",function(){let peer_id=$(this).data("peer-id");$("#save_peer_setting").attr("peer_id",peer_id);$.ajax({method:"POST",url:"/get_peer_data/"+window.configurations.getConfigurationName(),headers:{"Content-Type":"application/json"},data:JSON.stringify({id:peer_id}),success:function(response){let peer_name=response.name===""?"Untitled":response.name;$("#setting_modal .peer_name").html(peer_name);$("#setting_modal #peer_name_textbox").val(response.name);$("#setting_modal #peer_private_key_textbox").val(response.private_key);$("#setting_modal #peer_DNS_textbox").val(response.DNS);$("#setting_modal #peer_allowed_ip_textbox").val(response.allowed_ip);$("#setting_modal #peer_endpoint_allowed_ips").val(response.endpoint_allowed_ip);$("#setting_modal #peer_mtu").val(response.mtu);$("#setting_modal #peer_keep_alive").val(response.keep_alive);$("#setting_modal #peer_preshared_key_textbox").val(response.preshared_key);window.configurations.settingModal().toggle();window.configurations.endProgressBar()}})});$("#setting_modal").on("hidden.bs.modal",function(){$("#setting_peer_alert").addClass("d-none")});$("#peer_private_key_textbox").on("change",function(){let $save_peer_setting=$("#save_peer_setting");if($(this).val().length>0){$.ajax({url:"/check_key_match/"+window.configurations.getConfigurationName(),method:"POST",headers:{"Content-Type":"application/json"},data:JSON.stringify({private_key:$("#peer_private_key_textbox").val(),public_key:$save_peer_setting.attr("peer_id")})}).done(function(res){if(res.status==="failed"){$("#setting_peer_alert").html(res.status).removeClass("d-none")}else{$("#setting_peer_alert").addClass("d-none")}})}});$("#save_peer_setting").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Saving...");let $peer_DNS_textbox=$("#peer_DNS_textbox");let $peer_allowed_ip_textbox=$("#peer_allowed_ip_textbox");let $peer_endpoint_allowed_ips=$("#peer_endpoint_allowed_ips");let $peer_name_textbox=$("#peer_name_textbox");let $peer_private_key_textbox=$("#peer_private_key_textbox");let $peer_preshared_key_textbox=$("#peer_preshared_key_textbox");let $peer_mtu=$("#peer_mtu");let $peer_keep_alive=$("#peer_keep_alive");if($peer_DNS_textbox.val()!==""&&$peer_allowed_ip_textbox.val()!==""&&$peer_endpoint_allowed_ips.val()!==""){let peer_id=$(this).attr("peer_id");let conf_id=$(this).attr("conf_id");let data_list=[$peer_name_textbox,$peer_DNS_textbox,$peer_private_key_textbox,$peer_preshared_key_textbox,$peer_allowed_ip_textbox,$peer_endpoint_allowed_ips,$peer_mtu,$peer_keep_alive];data_list.forEach(ele=>ele.attr("disabled","disabled"));$.ajax({method:"POST",url:"/save_peer_setting/"+conf_id,headers:{"Content-Type":"application/json"},data:JSON.stringify({id:peer_id,name:$peer_name_textbox.val(),DNS:$peer_DNS_textbox.val(),private_key:$peer_private_key_textbox.val(),allowed_ip:$peer_allowed_ip_textbox.val(),endpoint_allowed_ip:$peer_endpoint_allowed_ips.val(),MTU:$peer_mtu.val(),keep_alive:$peer_keep_alive.val(),preshared_key:$peer_preshared_key_textbox.val()}),success:function(response){if(response.status==="failed"){$("#setting_peer_alert").html(response.msg).removeClass("d-none")}else{window.configurations.settingModal().toggle();window.configurations.loadPeers($("#search_peer_textbox").val());$("#alertToast").toast("show");$("#alertToast .toast-body").html("Peer Saved!")}$("#save_peer_setting").removeAttr("disabled").html("Save");data_list.forEach(ele=>ele.removeAttr("disabled"))}})}else{$("#setting_peer_alert").html("Please fill in all required box.").removeClass("d-none");$("#save_peer_setting").removeAttr("disabled").html("Save")}});$(".peer_private_key_textbox_switch").on("click",function(){let $peer_private_key_textbox=$("#peer_private_key_textbox");let mode=$peer_private_key_textbox.attr("type")==="password"?"text":"password";let icon=$peer_private_key_textbox.attr("type")==="password"?"bi bi-eye-slash-fill":"bi bi-eye-fill";$peer_private_key_textbox.attr("type",mode);$(".peer_private_key_textbox_switch i").removeClass().addClass(icon)});let typingTimer;let doneTypingInterval=200;$("#search_peer_textbox").on("keyup",function(){clearTimeout(typingTimer);typingTimer=setTimeout(()=>{window.configurations.loadPeers($(this).val())},doneTypingInterval)}).on("keydown",function(){clearTimeout(typingTimer)});$body.on("change","#sort_by_dropdown",function(){$.ajax({method:"POST",data:JSON.stringify({sort:$("#sort_by_dropdown option:selected").val()}),headers:{"Content-Type":"application/json"},url:"/update_dashboard_sort",success:function(){window.configurations.loadPeers($("#search_peer_textbox").val())}})});$body.on("mouseenter",".key",function(){let label=$(this).parent().siblings().children()[1];label.style.opacity="100"}).on("mouseout",".key",function(){let label=$(this).parent().siblings().children()[1];label.style.opacity="0";setTimeout(function(){label.innerHTML="CLICK TO COPY"},200)}).on("click",".key",function(){let label=$(this).parent().siblings().children()[1];window.configurations.copyToClipboard($(this));label.innerHTML="COPIED!"});$body.on("click",".update_interval",function(){$(".interval-btn-group button").removeClass("active");let _new=$(this);_new.addClass("active");let interval=$(this).data("refresh-interval");if([5e3,1e4,3e4,6e4].includes(interval)){window.configurations.updateRefreshInterval(interval)}});$body.on("click",".refresh",function(){window.configurations.loadPeers($("#search_peer_textbox").val())});$body.on("click",".display_mode",function(){$(".display-btn-group button").removeClass("active");$(this).addClass("active");window.localStorage.setItem("displayMode",$(this).data("display-mode"));window.configurations.updateDisplayMode();if($(this).data("display-mode")==="list"){Array($(".peer_list").children()).forEach(function(child){$(child).removeClass().addClass("col-12")});window.configurations.showToast("Displaying as List")}else{Array($(".peer_list").children()).forEach(function(child){$(child).removeClass().addClass("col-sm-6 col-lg-4")});window.configurations.showToast("Displaying as Grids")}});let $setting_btn_menu=$(".setting_btn_menu");$setting_btn_menu.css("top",($setting_btn_menu.height()+54)*-1);let $setting_btn=$(".setting_btn");$setting_btn.on("click",function(){if($setting_btn_menu.hasClass("show")){$setting_btn_menu.removeClass("showing");setTimeout(function(){$setting_btn_menu.removeClass("show")},201)}else{$setting_btn_menu.addClass("show");setTimeout(function(){$setting_btn_menu.addClass("showing")},10)}});$("html").on("click",function(r){if(document.querySelector(".setting_btn")!==r.target){if(!document.querySelector(".setting_btn").contains(r.target)){if(!document.querySelector(".setting_btn_menu").contains(r.target)){$setting_btn_menu.removeClass("showing");setTimeout(function(){$setting_btn_menu.removeClass("show")},310)}}}});$("#delete_peers_by_bulk_btn").on("click",()=>{let $delete_bulk_modal_list=$("#delete_bulk_modal .list-group");$delete_bulk_modal_list.html("");peers.forEach(peer=>{let name;if(peer.name===""){name="Untitled Peer"}else{name=peer.name}$delete_bulk_modal_list.append('<a class="list-group-item list-group-item-action delete-bulk-peer-item" style="cursor: pointer" data-id="'+peer.id+'" data-name="'+name+'">'+name+"<br><code>"+peer.id+"</code></a>")});window.configurations.deleteBulkModal().toggle()});$body.on("click",".delete-bulk-peer-item",function(){window.configurations.toggleDeleteByBulkIP($(this))}).on("click",".delete-peer-bulk-badge",function(){window.configurations.toggleDeleteByBulkIP($(".delete-bulk-peer-item[data-id='"+$(this).data("id")+"']"))});let $selected_peer_list=document.getElementById("selected_peer_list");let changeObserver=new MutationObserver(function(){if($selected_peer_list.hasChildNodes()){$("#confirm_delete_bulk_peers").removeAttr("disabled")}else{$("#confirm_delete_bulk_peers").attr("disabled","disabled")}});changeObserver.observe($selected_peer_list,{attributes:true,childList:true,characterData:true});let confirm_delete_bulk_peers_interval;$("#confirm_delete_bulk_peers").on("click",function(){let btn=$(this);if(confirm_delete_bulk_peers_interval!==undefined){clearInterval(confirm_delete_bulk_peers_interval);confirm_delete_bulk_peers_interval=undefined;btn.html("Delete")}else{let timer=5;btn.html(`Deleting in ${timer} secs... Click to cancel`);confirm_delete_bulk_peers_interval=setInterval(function(){timer-=1;btn.html(`Deleting in ${timer} secs... Click to cancel`);if(timer===0){btn.html(`Deleting...`);btn.attr("disabled","disabled");let ips=[];$selected_peer_list.childNodes.forEach(ele=>ips.push(ele.dataset.id));window.configurations.deletePeers(window.configurations.getConfigurationName(),ips);clearInterval(confirm_delete_bulk_peers_interval);confirm_delete_bulk_peers_interval=undefined}},1e3)}});$("#select_all_delete_bulk_peers").on("click",function(){$(".delete-bulk-peer-item").each(function(){if(!$(this).hasClass("active")){window.configurations.toggleDeleteByBulkIP($(this))}})});$(window.configurations.deleteBulkModal()._element).on("hidden.bs.modal",function(){$(".delete-bulk-peer-item").each(function(){if($(this).hasClass("active")){window.configurations.toggleDeleteByBulkIP($(this))}})});$body.on("click",".btn-download-peer",function(e){e.preventDefault();let link=$(this).attr("href");$.ajax({url:link,method:"GET",success:function(res){window.configurations.downloadOneConfig(res)}})});$("#download_all_peers").on("click",function(){$.ajax({url:`/download_all/${window.configurations.getConfigurationName()}`,method:"GET",success:function(res){if(res.peers.length>0){window.wireguard.generateZipFiles(res);window.configurations.showToast("Peers' zip file download successful!")}else{window.configurations.showToast("Oops! There are no peer can be download.")}}})});
\ No newline at end of file
diff --git a/src/static/js/index.js b/src/static/js/index.js
index 6715193..72b690a 100644
--- a/src/static/js/index.js
+++ b/src/static/js/index.js
@@ -15,7 +15,7 @@ addConfigurationModal.on("hidden.bs.modal", function(){
     $("#add_configuration_form").trigger("reset");
     $("#add_configuration_form input").removeClass("is-valid").removeClass("is-invalid");
     $(".addConfigurationAvailableIPs").text("N/A");
-})
+});
 
 function showToast(msg){
     $(".toastContainer").append(
@@ -28,7 +28,7 @@ function showToast(msg){
             </div>
             <div class="toast-body">${msg}</div>
             <div class="toast-progressbar"></div>
-        </div>` )
+        </div>` );
     $(`#${numberToast}-toast`).toast('show');
     $(`#${numberToast}-toast .toast-body`).html(msg);
     $(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
@@ -46,7 +46,6 @@ $(".toggle--switch").on("change", function(){
         url: `/switch/${id}`
     }).done(function(res){
         let dot = $(`div[data-conf-id="${id}"] .dot`);
-        console.log();
         if (res.status){
             if (status){
                 dot.removeClass("dot-stopped").addClass("dot-running");
@@ -57,11 +56,7 @@ $(".toggle--switch").on("change", function(){
                 showToast(`${id} is stopped.`);
             }
         }else{
-            // $(".index-alert").removeClass("d-none");
-            // $(".index-alert-full code").text(res.message);
             ele.parents().children(".card-message").html(`<pre class="index-alert">Configuration toggle failed. Please check the following error message:<br><code>${res.message}</code></pre>`)
-
-
             if (status){
                 ele.prop("checked", false)
             }else{
@@ -113,6 +108,7 @@ function ajaxPostJSON(url, data, doneFunc){
         doneFunc(res);
     });
 }
+
 function validInput(input){
     input.removeClass("is-invalid").addClass("is-valid").removeAttr("disabled").data("checked", true);
 }
@@ -215,42 +211,40 @@ $("#addConfigurationBtn").on("click", function(){
     }
     if (filled){
         $("#addConfigurationModal .modal-footer .btn").hide();
-        $(".addConfigurationStatus").removeClass("d-none").html(`<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div> Adding peers`)
+        $(".addConfigurationStatus").removeClass("d-none");
         let data = {};
         let q = [];
         for (let i = 0; i < input.length; i++){
             let $i = $(input[i]);
             data[$i.attr("name")] = $i.val();
-            q.push($i.attr("name"))
+            q.push($i.attr("name"));
         }
-        function done(res){
+        let done = (res) => {
             let name = res.data;
+            $(".addConfigurationAddStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> ${name} added successfully.`);
             if (res.status){
                 setTimeout(() => {
-                    
-                    $(".addConfigurationStatus").html(`<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div> Toggling ${res.data}`)
+                    $(".addConfigurationToggleStatus").removeClass("waiting").html(`<div class="spinner-border spinner-border-sm" role="status"></div> Toggle Configuration`)
                     $.ajax({
                         url: `/switch/${name}`
                     }).done(function(res){
                         if (res.status){
-                            $(".addConfigurationStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> ${name} toggled! Refresh in 5 seconds.`);
+                            $(".addConfigurationToggleStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> Toggle Successfully. Refresh in 5 seconds.`);
                             setTimeout(() => {
-                                $(".addConfigurationStatus").text("Refeshing...")
+                                $(".addConfigurationToggleStatus").text("Refeshing...")
                                 location.reload();
                             }, 5000);
                         }else{
-                            $(".addConfigurationStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} toggle failed.`)
-                            $("#addCconfigurationAlert").removeClass("d-none").children(".alert-body").text(res.reason);
-                            $("#addCconfigurationAlertMessage").removeClass("d-none").text(res.message);
+                            $(".addConfigurationToggleStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} toggle failed.`)
+                            $("#addCconfigurationAlertMessage").removeClass("d-none").html(`${name} toggle failed. Please check the following error message:<br>${res.message}`);
                         }
-                    })
+                    });
                 }, 500);
-                
             }else{
                 $(".addConfigurationStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} adding failed.`)
                 $("#addCconfigurationAlert").removeClass("d-none").children(".alert-body").text(res.reason);
             }
-        }
+        };
         ajaxPostJSON("/api/addConfiguration", data, done);
     }
 });
\ No newline at end of file
diff --git a/src/static/js/index.min.js b/src/static/js/index.min.js
new file mode 100644
index 0000000..46f95d9
--- /dev/null
+++ b/src/static/js/index.min.js
@@ -0,0 +1,10 @@
+let numberToast=0;let emptyInputFeedback="Can't leave empty";$('[data-toggle="tooltip"]').tooltip();let $add_configuration=$("#add_configuration");let addConfigurationModal=$("#addConfigurationModal");addConfigurationModal.modal({keyboard:false,backdrop:"static",show:false});addConfigurationModal.on("hidden.bs.modal",function(){$("#add_configuration_form").trigger("reset");$("#add_configuration_form input").removeClass("is-valid").removeClass("is-invalid");$(".addConfigurationAvailableIPs").text("N/A")});function showToast(msg){$(".toastContainer").append(`<div id="${numberToast}-toast" class="toast hide" role="alert" data-delay="5000">
+            <div class="toast-header">
+                <strong class="mr-auto">WGDashboard</strong>
+                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="toast-body">${msg}</div>
+            <div class="toast-progressbar"></div>
+        </div>`);$(`#${numberToast}-toast`).toast("show");$(`#${numberToast}-toast .toast-body`).html(msg);$(`#${numberToast}-toast .toast-progressbar`).css("transition",`width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data("delay")}ms cubic-bezier(0, 0, 0, 0)`);$(`#${numberToast}-toast .toast-progressbar`).css("width","0px");numberToast++}$(".toggle--switch").on("change",function(){$(this).addClass("waiting").attr("disabled","disabled");let id=$(this).data("conf-id");let status=$(this).prop("checked");let ele=$(this);let label=$(this).siblings("label");$.ajax({url:`/switch/${id}`}).done(function(res){let dot=$(`div[data-conf-id="${id}"] .dot`);if(res.status){if(status){dot.removeClass("dot-stopped").addClass("dot-running");dot.siblings().text("Running");showToast(`${id} is running.`)}else{dot.removeClass("dot-running").addClass("dot-stopped");showToast(`${id} is stopped.`)}}else{ele.parents().children(".card-message").html(`<pre class="index-alert">Configuration toggle failed. Please check the following error message:<br><code>${res.message}</code></pre>`);if(status){ele.prop("checked",false)}else{ele.prop("checked",true)}}ele.removeClass("waiting").removeAttr("disabled")})});$(".sb-home-url").addClass("active");$(".card-body").on("click",function(handle){if($(handle.target).attr("class")!=="toggleLabel"&&$(handle.target).attr("class")!=="toggle--switch"){window.open($(this).find("a").attr("href"),"_self")}});function genKeyPair(){let keyPair=window.wireguard.generateKeypair();$("#addConfigurationPrivateKey").val(keyPair.privateKey).data("checked",true)}$("#reGeneratePrivateKey").on("click",function(){genKeyPair()});$("#toggleAddConfiguration").on("click",function(){addConfigurationModal.modal("toggle");genKeyPair()});$("#addConfigurationPrivateKey").on("change",function(){$privateKey=$(this);$privateKeyFeedback=$("#addConfigurationPrivateKeyFeedback");if($privateKey.val().length!=44){invalidInput($privateKey,$privateKeyFeedback,"Invalid length")}else{validInput($privateKey)}});function ajaxPostJSON(url,data,doneFunc){$.ajax({url:url,method:"POST",data:JSON.stringify(data),headers:{"Content-Type":"application/json"}}).done(function(res){doneFunc(res)})}export{ajaxPostJSON};function validInput(input){input.removeClass("is-invalid").addClass("is-valid").removeAttr("disabled").data("checked",true)}function invalidInput(input,feedback,text){input.removeClass("is-valid").addClass("is-invalid").removeAttr("disabled").data("checked",false);feedback.addClass("invalid-feedback").text(text)}function checkPort($this){let port=$this;port.attr("disabled","disabled");let portFeedback=$("#addConfigurationListenPortFeedback");if(port.val().length==0){invalidInput(port,portFeedback,emptyInputFeedback)}else{function done(res){if(res.status){validInput(port)}else{invalidInput(port,portFeedback,res.reason)}}ajaxPostJSON("/api/addConfigurationPortCheck",{port:port.val()},done)}}$("#addConfigurationListenPort").on("change",function(){checkPort($(this))});function checkAddress($this){let address=$this;address.attr("disabled","disabled");let availableIPs=$(".addConfigurationAvailableIPs");let addressFeedback=$("#addConfigurationAddressFeedback");if(address.val().length==0){invalidInput(address,addressFeedback,emptyInputFeedback);availableIPs.html(`N/A`)}else{function done(res){if(res.status){availableIPs.html(`<strong>${res.data}</strong>`);validInput(address)}else{invalidInput(address,addressFeedback,res.reason);availableIPs.html(`N/A`)}}ajaxPostJSON("/api/addConfigurationAddressCheck",{address:address.val()},done)}}$("#addConfigurationAddress").on("change",function(){checkAddress($(this))});function checkName($this){let name=$this;let nameFeedback=$("#addConfigurationNameFeedback");name.val(name.val().replace(/\s/g,"")).attr("disabled","disabled");if(name.val().length===0){invalidInput(name,nameFeedback,emptyInputFeedback)}else{function done(res){if(res.status){validInput(name)}else{invalidInput(name,nameFeedback,res.reason)}}ajaxPostJSON("/api/addConfigurationNameCheck",{name:name.val()},done)}}$("#addConfigurationName").on("change",function(){checkName($(this))});$("#addConfigurationBtn").on("click",function(){let btn=$(this);let input=$("#add_configuration_form input");let filled=true;for(let i=0;i<input.length;i++){let $i=$(input[i]);if($i.attr("required")!=undefined){if($i.val().length==0&&$i.attr("name")!=="addConfigurationPrivateKey"){invalidInput($i,$i.siblings(".input-feedback"),emptyInputFeedback);filled=false}if($i.val().length!=44&&$i.attr("name")=="addConfigurationPrivateKey"){invalidInput($i,$i.siblings(".input-feedback"),"Invalid length");filled=false}if(!$i.data("checked")){filled=false}}}if(filled){$("#addConfigurationModal .modal-footer .btn").hide();$(".addConfigurationStatus").removeClass("d-none");let data={};let q=[];for(let i=0;i<input.length;i++){let $i=$(input[i]);data[$i.attr("name")]=$i.val();q.push($i.attr("name"))}let done=res=>{let name=res.data;$(".addConfigurationAddStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> ${name} added successfully.`);if(res.status){setTimeout(()=>{$(".addConfigurationToggleStatus").removeClass("waiting").html(`<div class="spinner-border spinner-border-sm" role="status"></div> Toggle Configuration`);$.ajax({url:`/switch/${name}`}).done(function(res){if(res.status){$(".addConfigurationToggleStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> Toggle Successfully. Refresh in 5 seconds.`);setTimeout(()=>{$(".addConfigurationToggleStatus").text("Refeshing...");location.reload()},5e3)}else{$(".addConfigurationToggleStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} toggle failed.`);$("#addCconfigurationAlertMessage").removeClass("d-none").html(`${name} toggle failed. Please check the following error message:<br>${res.message}`)}})},500)}else{$(".addConfigurationStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} adding failed.`);$("#addCconfigurationAlert").removeClass("d-none").children(".alert-body").text(res.reason)}};ajaxPostJSON("/api/addConfiguration",data,done)}});
\ No newline at end of file
diff --git a/src/templates/configuration.html b/src/templates/configuration.html
index 06ac027..1f311c7 100644
--- a/src/templates/configuration.html
+++ b/src/templates/configuration.html
@@ -19,7 +19,9 @@
 		<div id="config_body">
             <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
                 <div class="info mt-4">
-                    <div id="config_info_alert"></div>
+                    <div>
+                        <pre class="index-alert d-none" style="margin-bottom: 1rem;"></pre>
+                    </div>
                     <div class="row">
                         <div class="col">
                             <small class="text-muted"><strong>CONFIGURATION</strong></small>
@@ -29,8 +31,8 @@
                             <small class="text-muted"><strong>SWITCH</strong></small><br>
                             <!-- <div id="conf_status_btn" class="info_loading"></div> -->
                             <div id="switch" class="info_loading">
-                                <input type="checkbox" class="toggle--switch" id="switch">
-                                <label for="switch" class="toggleLabel"></label>
+                                <input type="checkbox" class="toggle--switch" id="toggle--switch">
+                                <label for="toggle--switch" class="toggleLabel"></label>
                             </div>
                         </div>
                         <div class="w-100"></div>
@@ -142,9 +144,11 @@
                             <button type="button" class="btn btn-primary add_btn"><i class="bi bi-plus-circle-fill" style=""></i></button>
                             <button type="button" class="btn btn-secondary setting_btn"><i class="bi bi-three-dots"></i></button>
                             <div class="setting_btn_menu">
-                                <a class="text-primary" id="configuration_setting"><i class="bi bi-gear-fill"></i> Configration Settings</a>
                                 <a class="text-danger" id="delete_peers_by_bulk_btn"><i class="bi bi-trash-fill"></i> Delete Peers</a>
                                 <a class="text-info" id="download_all_peers" data-url="/download_all/{{conf_data['name']}}"><i class="bi bi-cloud-download-fill"></i> Download All Peers</a>
+                                <hr>
+                                <a class="text-primary" id="configuration_setting"><i class="bi bi-gear-fill"></i> Configration Settings</a>
+                                <a class="text-danger" id="configuration_delete"><i class="bi bi-trash3-fill"></i> Delete Configuration</a>
                             </div>
                         </div>
 
@@ -262,6 +266,29 @@
 			</div>
 		</div>
 	</div>
+    <div class="modal fade" id="configuration_delete_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
+		aria-labelledby="staticBackdropLabel" aria-hidden="true">
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="staticBackdropLabel">Are you sure to delete this configuration?</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<div id="remove_configuration_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
+
+					</div>
+					<p style="margin: 0">This action is not reversible. The configuration will get toggle off, and delete from database and from the configuration folder.</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
+					<button type="button" class="btn btn-danger" id="sure_delete_configuration">Yes</button>
+				</div>
+			</div>
+		</div>
+	</div>
 	<div class="modal fade" id="delete_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
 		aria-labelledby="staticBackdropLabel" aria-hidden="true">
 		<div class="modal-dialog modal-dialog-centered">
@@ -426,18 +453,7 @@
 			</div>
 		</div>
 	</div>
-    <div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;">
-          <!-- <div id="alertToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
-            <div class="toast-header">
-                  <strong class="mr-auto">WGDashboard</strong>
-                  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-            </div>
-            <div class="toast-body">
-            </div>
-          </div> -->
-    </div>
+    <div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;"></div>
     {% include "tools.html" %}
 </body>
 {% include "footer.html" %}
diff --git a/src/templates/index.html b/src/templates/index.html
index 39ae50a..3ccb63f 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -27,8 +27,8 @@
             {% 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>
             {% endif %}
-			
-			
+
+
 			{% for i in conf%}
 				<div class="card mt-3 conf_card" data-conf-id="{{i['conf']}}">
 					<div class="card-body">
@@ -56,7 +56,7 @@
 						</div>
                         <div class="card-message"></div>
 					</div>
-                    
+
 				</div>
 			{%endfor%}
 		</main>
@@ -77,9 +77,6 @@
 				</div>
 				<div class="modal-body">
 					<div id="addCconfigurationAlert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
-						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-						  <span aria-hidden="true">&times;</span>
-						</button>
                         <div class="alert-body"></div>
 					</div>
                     <pre id="addCconfigurationAlertMessage" class="index-alert d-none"></pre>
@@ -152,7 +149,13 @@
 				<div class="modal-footer">
 					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 					<button type="button" class="btn btn-primary" id="addConfigurationBtn">Add</button>
-                    <p class="text-primary addConfigurationStatus d-none"></p>
+                    <div class="text-primary addConfigurationStatus addConfigurationAddStatus d-none">
+						<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>
+						Add Configuration
+					</div>
+					<div class="text-primary addConfigurationStatus addConfigurationToggleStatus d-none waiting">
+						<i class="bi bi-circle"></i> Toggle Configuration
+					</div>
 				</div>
 			</div>
 		</div>
@@ -162,4 +165,5 @@
 {% include "footer.html" %}
 <script src="{{ url_for('static',filename='js/wireguard.min.js') }}"></script>
 <script src="{{ url_for('static',filename='js/index.js') }}"></script>
+
 </html>
\ No newline at end of file
diff --git a/src/util.py b/src/util.py
index c37edd9..6f95a62 100644
--- a/src/util.py
+++ b/src/util.py
@@ -106,7 +106,7 @@ def checkJSONAllParameter(required, data):
     if len(data) == 0:
         return False
     for i in required:
-        if i not in list(data.keys()):
+        if i not in list(data.keys()) or len(data[i]) == 0:
             return False
     return True