Add configuration and adjusted redirect functionality

src/dashboard.py

@@ -674,7 +674,11 @@ def auth_req():
             else:
                 session['message'] = ""
             conf.clear()
-            return redirect("/signin?redirect=" + str(request.url))
+
+            redirectURL = str(request.url)
+            redirectURL = redirectURL.replace("http://", "")
+            redirectURL = redirectURL.replace("https://", "")
+            return redirect("/signin?redirect=" + redirectURL)
     else:
         if request.endpoint in ['signin', 'signout', 'auth', 'settings', 'update_acct', 'update_pwd',
                                 'update_app_ip_port', 'update_wg_conf_path']:
@@ -1533,7 +1537,6 @@ def switch_display_mode(mode):
 @app.route('/api/togglePeerAccess', methods=['POST'])
 def togglePeerAccess():
     data = request.get_json()
-    print(data['peerID'])
     returnData = {"status": True, "reason": ""}
     required = ['peerID', 'config']
     if checkJSONAllParameter(required, data):
@@ -1572,6 +1575,25 @@ def togglePeerAccess():
 
     return jsonify(returnData)
 
+@app.route('/api/addConfigurationAddressCheck', methods=['POST'])
+def addConfigurationAddressCheck():
+    data = request.get_json()
+    returnData = {"status": True, "reason": ""}
+    required = ['address']
+    if checkJSONAllParameter(required, data):
+        try:
+            ips = list(ipaddress.ip_network(data['address'], False).hosts())
+            amount = len(ips) - 1
+            if amount >= 1:
+                returnData = {"status": True, "reason":"", "data":f"Total of {amount} IPs"}
+            else:
+                returnData = {"status": True, "reason":"", "data":f"0 IP available for peers"}
+        
+        except ValueError as e:
+            returnData = {"status": False, "reason": str(e)}
+    else:
+        returnData = {"status": False, "reason": "Please provide all required parameters."}
+    return jsonify(returnData)
         
 
 """
@@ -1789,5 +1811,4 @@ if __name__ == "__main__":
     app_port = config.get("Server", "app_port")
     WG_CONF_PATH = config.get("Server", "wg_conf_path")
     config.clear()
-    socketio.run(app, host=app_ip, debug=False, port=int(app_port))
+    app.run(host=app_ip, debug=False, port=app_port)
-    # app.run(host=app_ip, debug=False, port=app_port)

src/static/css/dashboard.css

@@ -3,6 +3,10 @@ body {
     /*font-family: 'Poppins', sans-serif;*/
 }
 
+.codeFont{
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .feather {
     width: 16px;
     height: 16px;
@@ -307,7 +311,7 @@ main {
     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: 200px;
+    min-width: 250px;
     display: none;
     transform: translateY(-30px);
     opacity: 0;
@@ -761,3 +765,11 @@ pre.index-alert {
     background-color: #007bff;
     border-bottom-left-radius: .25rem;
 }
+
+.addConfigurationAvailableIPs{
+    margin-bottom: 0;
+}
+
+.input-feedback{
+    display: none;
+}

src/static/js/configuration.js

@@ -4,12 +4,11 @@
  */
 
 
-
+let peers = [];
 (function() {
     /**
      * Definitions
      */    
-    let peers = [];
     let configuration_name;
     let configuration_interval;
     let configuration_timeout = window.localStorage.getItem("configurationTimeout");

src/static/js/index.js

@@ -0,0 +1,118 @@
+let numberToast = 0;
+let addConfigurationModal = new bootstrap.Modal(document.getElementById('addConfigurationModal'), {
+    keyboard: false,
+    backdrop: 'static'
+});
+
+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`);
+        console.log();
+        if (res){
+            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.`)
+            }
+            ele.removeClass("waiting");
+            ele.removeAttr("disabled");
+        }else{
+            if (status){
+                $(this).prop("checked", false)
+            }else{
+                $(this).prop("checked", true)
+            }
+        }
+        
+    })
+});
+
+$('.switch').on("click", function() {
+    $(this).siblings($(".spinner-border")).css("display", "inline-block")
+    $(this).remove()
+    location.replace("/switch/"+$(this).attr('id'))
+});
+$(".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);
+    $("#addConfigurationPublicKey").attr("disabled", "disabled").val(keyPair.publicKey);
+}
+
+$("#reGeneratePrivateKey").on("click", function() {
+    genKeyPair();
+});
+
+$("#toggleAddConfiguration").on("click", function(){
+    addConfigurationModal.toggle();
+    genKeyPair()
+}); 
+
+$("#addConfigurationPrivateKey").on("change", function() {
+    let $publicKey = $("#addConfigurationPublicKey");
+    if ($(this).val().length === 44) {
+        $publicKey.attr("disabled", "disabled").val(window.wireguard.generatePublicKey($(this).val()));
+    } else {
+        $publicKey.removeAttr("disabled").val("");
+    }
+});
+
+$("#addConfigurationAddress").on("change", function(){
+    let address = $("#addConfigurationAddress");
+    let addressFeedback = $("#addConfigurationAddressFeedback");
+    let availableIPs = $(".addConfigurationAvailableIPs");
+    $.ajax({
+        url: "/api/addConfigurationAddressCheck",
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        data: JSON.stringify({
+            "address": $(this).val()
+        })
+    }).done(function(res){
+        console.log(res)
+        if (res.status){
+            availableIPs.html(`<strong>${res.data}</strong>`);
+            address.removeClass("is-invalid").addClass("is-valid");
+        }else{
+            address.addClass("is-invalid");
+            addressFeedback.addClass("invalid-feedback").text(res.reason);
+            availableIPs.html(`N/A`);
+        }
+    })
+});

src/templates/configuration.html

@@ -142,6 +142,7 @@
                             <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>
                             </div>

src/templates/index.html

@@ -63,81 +63,111 @@
 			{%endfor%}
 		</main>
 	</div>
-	<div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;">
+	<div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;"></div>
+	<div class="btn-manage-group">
+		<button type="button" class="btn btn-primary add_btn" id="toggleAddConfiguration"><i class="bi bi-plus-circle-fill"></i></button>
+	</div>
+	<div class="modal fade" id="addConfigurationModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
+		aria-labelledby="staticBackdropLabel" aria-hidden="true">
+		<div class="modal-dialog modal-dialog-centered modal-lg">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="staticBackdropLabel">Add New 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="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>
+					<form id="add_peer_form">
+                        <div class="form-group">
+                            <div>
+                                <label for="addConfigurationPrivateKey">Private Key</label>
+                            </div>
+                            <div class="input-group">
+                                <input type="text" class="form-control codeFont" id="addConfigurationPrivateKey" aria-describedby="addConfigurationPrivateKey">
+                                <div class="input-group-append">
+                                   <button type="button" class="btn btn-danger" id="reGeneratePrivateKey" data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i class="bi bi-arrow-repeat"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div>
+                                <label for="addConfigurationPublicKey">Public Key</label>
+                            </div>
+                            <div class="input-group">
+                                <input type="text" class="form-control codeFont" id="addConfigurationPublicKey" aria-describedby="addConfigurationPublicKey" disabled>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm">
+                                <div class="form-group">
+                                    <label for="addConfigurationName">Configuration Name <code>(Required)</code></label>
+                                    <input type="text" class="form-control" id="addConfigurationName">
+                                </div>
+                            </div>
+                            <div class="col-sm">
+                                <div class="form-group">
+                                    <label for="addConfigurationListenPort">Listen Port <code>(Required)</code></label>
+                                    <input type="number" class="form-control codeFont" id="addConfigurationListenPort">
+                                </div>
+                            </div>
+                        </div>
+						<div class="row">
+							<div class="col-sm">
+								<div class="form-group">
+									<label for="addConfigurationAddress">Address <code>(Required)</code></label>
+									<input type="text" class="form-control codeFont" id="addConfigurationAddress" placeholder="Ex: 192.168.0.1/24">
+                                    <div id="addConfigurationAddressFeedback" class="input-feedback">
+                                        Please provide a valid city.
+                                    </div>
+                                </div>
+							</div>
+							<div class="col-sm">
+								<div class="form-group">
+									<label for="">Available IPs for peers</label>
+									<p class="addConfigurationAvailableIPs">N/A</p>
+								</div>
+							</div>
+						</div>
 						
+                        <hr>
+                        <div class="form-group">
+                            <label for="addConfigurationPreUp">PreUp</label>
+                            <input type="text" class="form-control codeFont" id="addConfigurationPreUp">
+                        </div>
+                        <div class="form-group">
+                            <label for="addConfigurationPreDown">PreDown</label>
+                            <input type="text" class="form-control codeFont" id="addConfigurationPreDown">
+                        </div>
+                        <div class="form-group">
+                            <label for="addConfigurationPostUp">PostUp</label>
+                            <input type="text" class="form-control codeFont" id="addConfigurationPostUp">
+                        </div>
+                        <div class="form-group">
+                            <label for="addConfigurationPostDown">PostDown</label>
+                            <input type="text" class="form-control codeFont" id="addConfigurationPostDown">
+                        </div>
+                        
+                        
+                
+					</form>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-primary" id="add_configuration">Add</button>
+				</div>
+			</div>
+		</div>
 	</div>
 {% include "tools.html" %}
 </body>
 {% include "footer.html" %}
-<script>
+<script src="{{ url_for('static',filename='js/wireguard.min.js') }}"></script>
-	let numberToast = 0;
+<script src="{{ url_for('static',filename='js/index.js') }}"></script>
-
-
-	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`);
-			console.log();
-			if (res){
-				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.`)
-				}
-				ele.removeClass("waiting");
-				ele.removeAttr("disabled");
-			}else{
-				if (status){
-					$(this).prop("checked", false)
-				}else{
-					$(this).prop("checked", true)
-				}
-			}
-			
-		})
-	});
-
-
-	$('.switch').on("click", function() {
-	    $(this).siblings($(".spinner-border")).css("display", "inline-block")
-	    $(this).remove()
-		location.replace("/switch/"+$(this).attr('id'))
-    });
-	$(".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");
-        }
-    });
-</script>
 </html>

src/templates/signin.html

@@ -67,7 +67,11 @@
                 if (res.status === true){
                     const urlParams = new URLSearchParams(window.location.search);
                     if (urlParams.get("redirect")){
-                        window.location.replace(urlParams.get("redirect"))
+                        if (document.URL.substring(0, 5) == "http:"){
+                            window.location.replace(`http://${urlParams.get("redirect")}`)
+                        }else if (document.URL.substring(0, 5) == "https"){
+                            window.location.replace(`https://${urlParams.get("redirect")}`)
+                        }
                     }else{
                         window.location.replace("/");
                     }