Upload manifest.json

.gitignore

@@ -17,3 +17,4 @@ log/**
 release/*
 *.db
 src/db/wgdashboard.db
+.jshintrc

.jshintrc

@@ -0,0 +1,6 @@
+{
+  "globals": {
+    "peers": true
+  },
+  "esversion": 7
+}

README.md

@@ -33,6 +33,7 @@
   - **Peer transfer calculation**: each peer will now show all transfer amount (previously was only showing transfer amount from the last configuration start-up).
   - **UI adjustment on running peers**: peers will have a new style indicating that it is running.
   - **`wgd.sh` finally can update itself**: So now user could update the whole dashboard from `wgd.sh`, with the `update` command.
+  - **Minified JS and CSS files**: Although only a small changes on the file size, but I think is still a good practice to save a bit of bandwidth ;)
 
 
 *And many other small changes for performance and bug fixes! :laughing:*

src/dashboard.py

@@ -1062,7 +1062,7 @@ def switch(config_name):
     if status == "running":
         try:
             check = subprocess.check_output("wg-quick down " + config_name,
-                                    shell=True, stderr=subprocess.STDOUT)
+                                            shell=True, stderr=subprocess.STDOUT)
         except subprocess.CalledProcessError as exc:
             session["switch_msg"] = exc.output.strip().decode("utf-8")
             return redirect('/')
@@ -1670,28 +1670,33 @@ def check_update():
 
     return result
 
+
 """
 Configure DashBoard before start web-server
 """
+
+
 def run_dashboard():
     init_dashboard()
-    global update
+    global UPDATE
-    update = check_update()
+    UPDATE = check_update()
-    global config
     config = configparser.ConfigParser(strict=False)
     config.read('wg-dashboard.ini')
-    global app_ip
+    # global app_ip
     app_ip = config.get("Server", "app_ip")
-    global app_port
+    # global app_port
     app_port = config.get("Server", "app_port")
-    global wg_conf_path
+    global WG_CONF_PATH
-    wg_conf_path = config.get("Server", "wg_conf_path")
+    WG_CONF_PATH = config.get("Server", "wg_conf_path")
     config.clear()
     return app
 
+
 """
 Get host and port for web-server
 """
+
+
 def get_host_bind():
     init_dashboard()
     config = configparser.ConfigParser(strict=False)
@@ -1701,6 +1706,15 @@ def get_host_bind():
 
     return app_ip, app_port
 
+
 if __name__ == "__main__":
-    run_dashboard()
+    UPDATE = check_update()
+    config = configparser.ConfigParser(strict=False)
+    config.read('wg-dashboard.ini')
+    # global app_ip
+    app_ip = config.get("Server", "app_ip")
+    # global app_port
+    app_port = config.get("Server", "app_port")
+    WG_CONF_PATH = config.get("Server", "wg_conf_path")
+    config.clear()
     app.run(host=app_ip, debug=False, port=app_port)

src/static/css/dashboard.css

@@ -52,6 +52,7 @@ body {
 
 .nav-link:hover {
     padding-left: 30px;
+    background-color: #dfdfdf;
 }
 
 .sidebar .nav-link .feather {
@@ -170,8 +171,24 @@ body {
     box-shadow: none;
 }
 
+.btn-qrcode-peer{
+    padding: 0 !important;
+}
+
+.btn-qrcode-peer:active, .btn-qrcode-peer:hover{
+    transform: scale(0.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{
-    padding: 0 0 0 1rem;
+    margin: 0 0 0 1rem;
+    padding: 0 !important;
+    transition: all 0.4s cubic-bezier(1, -0.43, 0, 1.37);
 }
 
 .btn-control:hover{

src/templates/configuration.html

@@ -246,7 +246,7 @@
 						  <span aria-hidden="true">&times;</span>
 						</button>
 					</div>
-					<h6>This action is not reversible.</h6>
+					<h6 style="margin: 0">This action is not reversible.</h6>
 				</div>
 				<div class="modal-footer">
 					<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
@@ -260,7 +260,7 @@
 		<div class="modal-dialog modal-dialog-centered modal-lg">
 			<div class="modal-content">
 				<div class="modal-header">
-					<h5 class="peer_name"></h5>
+					<h5 class="modal-title peer_name"></h5>
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 						<span aria-hidden="true">&times;</span>
 					</button>
@@ -339,9 +339,7 @@
 				</div>
                 <div class="selected_ip" style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
                         <small class="text-muted"><strong>SELECTED IP (CLICK TO REMOVE)</strong></small>
-                        <div id="selected_ip_list">
+                        <div id="selected_ip_list"></div>
-
-                        </div>
                 </div>
                 <div class="modal-body" style="max-height: 400px; overflow-y: scroll;">
                     <div class="list-group"></div>
@@ -362,7 +360,7 @@
 						<span aria-hidden="true">&times;</span>
 					</button>
 				</div>
-                <div id="bulk_remove_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
+                <div id="bulk_remove_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert" style="margin: 1rem">
                     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                     </button>
@@ -386,7 +384,7 @@
 		<div class="modal-dialog modal-dialog-centered">
 			<div class="modal-content">
 				<div class="modal-header">
-					<h5 class="peer_name">QR Code</h5>
+					<h5 class="modal-title">QR Code</h5>
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 						<span aria-hidden="true">&times;</span>
 					</button>
@@ -415,13 +413,14 @@
 <script src="{{ url_for('static',filename='js/wireguard.min.js') }}"></script>
 <script src="{{ url_for('static',filename='js/configuration.min.js') }}"></script>
 <script>
+    /* global peers */
     let load_timeout;
     let load_interval = 0;
     let conf_name = "{{ conf_data['name'] }}"
     let peers = [];
     $(".sb-"+conf_name+"-url").addClass("active");
 	$(function(){
-		load_data($('#search_peer_textbox').val());
+		configurations.loadPeers($('#search_peer_textbox').val());
 	});
 </script>
 </html>	

src/templates/header.html

@@ -1,7 +1,16 @@
 <head>
 <meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<title>WGDashboard | {{ title }}</title>
+	<title>{{ title }} | WGDashboard</title>
+    <link rel="manifest" href="{{ url_for('static',filename='json/manifest.json') }}">
+
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="e">
+    <meta name="apple-mobile-web-app-title" content="e">
+    <meta name="msapplication-starturl" content="/">
+    <link rel="apple-touch-icon" sizes="192x192" href="{{ url_for('static',filename='img/192x192ios.png') }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="icon" href="{{ url_for('static',filename='img/logo.png') }}"/>
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
 	<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">

src/templates/index.html

@@ -39,7 +39,7 @@
 							</div>
 							<div class="col-md card-col">
 								<small class="text-muted"><strong>PUBLIC KEY</strong></small>
-								<h6 style="text-transform: uppercase; margin:0 !important;"><samp>{{i['public_key']}}</samp></h6>
+								<h6 style="margin:0 !important;"><samp>{{i['public_key']}}</samp></h6>
 							</div>
 							<div class="col-md index-switch">
                                 {% if i['checked'] == "checked" %}

src/templates/signin.html

@@ -1,20 +1,20 @@
 <html>
-    <head>
+    {% with title="Sign In"%}
-        <meta charset="utf-8">
+        {% include "header.html"%}
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    {% endwith %}
-        <title>WGDashboard | Login</title>
+    <style>
-        <link rel="icon" href="{{ url_for('static',filename='img/logo.png') }}"/>
+        .login-container-fluid{
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+            display: flex;
-        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
+            height: calc( 100% - 240px );
-    </head>
+            align-items: center;
+        }
+    </style>
     <body>
         {% include "navbar.html" %}
-        <div class="container-fluid">
+        <div class="container-fluid login-container-fluid">
-
             <main role="main" class="container login-container">
                 <div class="login-box" style="margin: auto !important;">
                     <h1 class="text-center">Sign In</h1>
-
                     <form style="margin-left: auto !important; margin-right: auto !important; max-width: 500px;" action="/auth" method="post">
                         {% if message != ""%}
                             <div class="alert alert-danger" role="alert">
@@ -22,13 +22,13 @@
                             </div>
                         {% endif %}
                         <div class="form-group">
-                        <label for="username" class="text-left">Username</label>
+                            <label for="username" class="text-left" style="font-size: 1rem"><i class="bi bi-person-circle"></i> Username</label>
-                        <input type="text" class="form-control" id="username" name="username" required>
+                            <input type="text" class="form-control" id="username" name="username" required>
-                      </div>
+                        </div>
-                      <div class="form-group">
+                        <div class="form-group">
-                        <label for="password" class="text-left">Password</label>
+                            <label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i> Password</label>
-                        <input type="password" class="form-control" id="password" name="password" required>
+                            <input type="password" class="form-control" id="password" name="password" required>
-                      </div>
+                        </div>
                       <button type="submit" class="btn btn-dark" style="width: 100%;">Sign In</button>
                     </form>
                 </div>
@@ -38,7 +38,19 @@
 {% include "footer.html" %}
 <script>
     $("button").on("click", function(){
-        $(this).html("Signing In...")
+        let req = $("input[required]");
+        let check = true
+        for (let i = 0; i < req.length; i++){
+            if ($(req[i]).val().length === 0){
+                $("button").html("Sign In");
+                check = false;
+                break;
+            }
+        }
+        if (check){
+            $(this).html("Signing In...");
+        }
+
     })
 </script>
 </html>

src/wgd.sh

@@ -67,11 +67,17 @@ install_wgd(){
 
 check_wgd_status(){
   if [[ $environment == 'production' ]]; then
-    if ps aux | grep -v grep | grep $(cat ./gunicorn.pid)  > /dev/null; then
+    PID_FILE=./gunicorn.pid
+    if test -f "$PID_FILE"; then
+      if ps aux | grep -v grep | grep $(cat ./gunicorn.pid)  > /dev/null; then
       return 0
+      else
+        return 1
+      fi
     else
       return 1
     fi
+
   else
     if ps aux | grep -v grep | grep '[p]ython3 '$app_name > /dev/null; then
       return 0
@@ -90,15 +96,15 @@ certbot_renew_ssl () {
 }
 
 gunicorn_start () {
-  if [[ $SSL ]]; then
+#  if [[ $SSL ]]; then
-    if [ ! -d $cb_config_dir ]; then
+#    if [ ! -d $cb_config_dir ]; then
-      certbot_create_ssl
+#      certbot_create_ssl
-    else
+#    else
-      certbot_renew_ssl
+#      certbot_renew_ssl
-    fi
+#    fi
-  fi
+#  fi
   printf "%s\n" "$dashes"
-  printf "| Starting WGDashboard in the background.          |\n"
+  printf "| Starting WGDashboard in the background.                  |\n"
   if [ ! -d "log" ]; then
     mkdir "log"
   fi
@@ -106,15 +112,15 @@ gunicorn_start () {
   if [[ $USER == root ]]; then
     export PATH=$PATH:/usr/local/bin:$HOME/.local/bin
   fi
-  if [[ $SSL ]]; then
+#  if [[ $SSL ]]; then
-    gunicorn --certfile $cb_config_dir/live/"$SERVERURL"/cert.pem \
+#    gunicorn --certfile $cb_config_dir/live/"$SERVERURL"/cert.pem \
-    --keyfile $cb_config_dir/live/"$SERVERURL"/privkey.pem \
+#    --keyfile $cb_config_dir/live/"$SERVERURL"/privkey.pem \
-    --access-logfile log/access_"$d".log \
+#    --access-logfile log/access_"$d".log \
-    --error-logfile log/error_"$d".log 'dashboard:run_dashboard()'
+#    --error-logfile log/error_"$d".log 'dashboard:run_dashboard()'
-  else
+#  else
-    gunicorn --access-logfile log/access_"$d".log \
+  gunicorn --access-logfile log/access_"$d".log \
-    --error-logfile log/error_"$d".log 'dashboard:run_dashboard()'
+  --error-logfile log/error_"$d".log 'dashboard:run_dashboard()'
-  fi
+#  fi
   printf "| Log files is under log/                                  |\n"
   printf "%s\n" "$dashes"
 }
@@ -128,7 +134,7 @@ start_wgd () {
       gunicorn_start
     else
       printf "%s\n" "$dashes"
-      printf "| Starting WGDashboard in the background.          |\n"
+      printf "| Starting WGDashboard in the background.                  |\n"
       if [ ! -d "log" ]
         then mkdir "log"
       fi