Adjusted UI and edit readme

donaldzou · Sep 3, 2021 · 77f6826 · 77f6826
1 parent 7e39eed
commit 77f6826
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -17,29 +17,19 @@
 <p align="center">Monitoring WireGuard is not convinient, need to login into server and type <code>wg show</code>. That's why this platform is being created, to view all configurations and manage them in a easier way.</p>
 
 
-## 📣 What's New: Version v2.2
+## 📣 What's New: Version v2.3
 
 - 🎉  **New Features**
-  - **Add new peers**: Now you can add peers directly on dashboard, it will generate a pair of private key and public key. You can also set its DNS, endpoint allowed IPs. Both can set a default value in the setting page. [❤️ in [#44](https://github.com/donaldzou/wireguard-dashboard/issues/44)]  
-  - **QR Code:** You can add the private key in peer setting of your existed peer to create a QR code. Or just create a new one, dashboard will now be able to auto generate a private key and public key ;) Don't worry, all keys will be generated on your machine, and **will delete all key files after they got generated**. [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
-  - **Peer configuration file download:** Same as QR code, you now can download the peer configuration file, so you don't need to manually input all the details on the peer machine! [❤️ in [#40](https://github.com/donaldzou/wireguard-dashboard/issues/40)]
-  - **Search peers**: You can now search peers by their name.
-  - **Autostart on boot:** Added a tutorial on how to start the dashboard to on boot! Please read the [tutorial below](#autostart-wireguard-dashboard-on-boot). [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
-  - **Click to copy**: You can now click and copy all peer's public key and configuration's public key.
-  - ....
+  - **Update directly from `wgd.sh`:** Now you can update Wireguard Dashboard directly from the bash script.
+  - **Displaying Peers:** You can switch the display mode between list and table in the configuration page.
 - 🪚  **Bug Fixed**
-  - When there are comments in the wireguard config file, will cause the dashboard to crash.
-  - Used regex to search for config files.
+  - [Peer DNS Validation Fails #67](https://github.com/donaldzou/wireguard-dashboard/issues/67): Added DNS format check
+  - [configparser.NoSectionError: No section: 'Interface' #66](https://github.com/donaldzou/wireguard-dashboard/issues/66): Changed permission requirement for `etc/wireguard` from `744` to `755`
+
 - **🧐  Other Changes**
-  - Moved all external CSS and JavaScript file to local hosting (Except Bootstrap Icon, due to large amount of SVG files).
-  - Updated Python dependencies
-    - Flask: `v1.1.2 => v2.0.1`
-    - Jinja: `v2.10.1 => v3.0.1`
-    - icmplib: `v2.1.1 => v3.0.1`
-  - Updated CSS/JS dependencies
-    - Bootstrap: `v4.5.3 => v4.6.0`
-  - UI adjustment
-    - Adjusted how peers will display in larger screens, used to be 1 row per peer, now is 3 peers in 1 row.
+
+
+
 <hr>
 
 
@@ -115,30 +105,30 @@
    cd wireguard-dashboard/src
    ```
 
-3. Install Python Dependencies
+3. Install Wireguard Dashboard
 
    ```shell
-   python3 -m pip install -r requirements.txt
+   sudo chmod u+x wgd.sh
+   sudo ./wgd.sh install
    ```
 
-4. Give read, write and execute permission to root of the WireGuard configuration folder, you can change the path if your configuration files is not stored in `/etc/wireguard`
+4. Give read and execute permission to root of the WireGuard configuration folder, you can change the path if your configuration files are not stored in `/etc/wireguard`
 
    ```shell
-   sudo chmod -R 744 /etc/wireguard
+   sudo chmod -R 755 /etc/wireguard
    ```
 
-5. Install & run Wireguard Dashboard
+5. Run Wireguard Dashboard
 
    ```shell
-   sudo chmod u+x wgd.sh
    ./wgd.sh start
    ```
-
+   
    **Note**:
 
    > For [`pivpn`](https://github.com/pivpn/pivpn) user, please use `sudo ./wgd.sh start` to run if your current account does not have the permission to run `wg show` and `wg-quick`.
 
-6. **Access dashboard**
+6. Access dashboard
 
    Access your server with port `10086` ! e.g (http://your_server_ip:10086), continue to read to on how to change port and ip that dashboard is running with.
 
@@ -330,21 +320,12 @@ Endpoint = 0.0.0.0:51820
 
 1. Change your directory to `wireguard-dashboard` 
     ```shell
-    cd wireguard-dashboard
+    cd wireguard-dashboard/src
     ```
-2. Get the newest version
+2. Update the dashboard
     ```shell
-    sudo git stash
-    sudo git pull https://github.com/donaldzou/wireguard-dashboard.git v2.2.1 --force
+    sudo ./wgd.sh update
     ```
-3. Update and install all python dependencies
-   ```shell
-   python3 -m pip install -r requirements.txt
-   ```
-4. Start the dashboard
-    ```shell
-   ./wgd.sh start
-   ```
 ## 🔍 Screenshot
 
 ![Sign In Page](img/SignIn.png)
@@ -369,6 +350,36 @@ Endpoint = 0.0.0.0:51820
 
 ## ⏰  Changelog
 
+#### v2.2.1 - Aug 16, 2021
+
+Bug Fixed:
+- Added support for full subnet on Allowed IP
+- Peer setting Save button
+
+#### v2.2 - Aug 14, 2021
+
+- 🎉  **New Features**
+  - **Add new peers**: Now you can add peers directly on dashboard, it will generate a pair of private key and public key. You can also set its DNS, endpoint allowed IPs. Both can set a default value in the setting page. [❤️ in [#44](https://github.com/donaldzou/wireguard-dashboard/issues/44)]  
+  - **QR Code:** You can add the private key in peer setting of your existed peer to create a QR code. Or just create a new one, dashboard will now be able to auto generate a private key and public key ;) Don't worry, all keys will be generated on your machine, and **will delete all key files after they got generated**. [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
+  - **Peer configuration file download:** Same as QR code, you now can download the peer configuration file, so you don't need to manually input all the details on the peer machine! [❤️ in [#40](https://github.com/donaldzou/wireguard-dashboard/issues/40)]
+  - **Search peers**: You can now search peers by their name.
+  - **Autostart on boot:** Added a tutorial on how to start the dashboard to on boot! Please read the [tutorial below](#autostart-wireguard-dashboard-on-boot). [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
+  - **Click to copy**: You can now click and copy all peer's public key and configuration's public key.
+  - ....
+- 🪚  **Bug Fixed**
+  - When there are comments in the wireguard config file, will cause the dashboard to crash.
+  - Used regex to search for config files.
+- **🧐  Other Changes**
+  - Moved all external CSS and JavaScript file to local hosting (Except Bootstrap Icon, due to large amount of SVG files).
+  - Updated Python dependencies
+    - Flask: `v1.1.2 => v2.0.1`
+    - Jinja: `v2.10.1 => v3.0.1`
+    - icmplib: `v2.1.1 => v3.0.1`
+  - Updated CSS/JS dependencies
+    - Bootstrap: `v4.5.3 => v4.6.0`
+  - UI adjustment
+    - Adjusted how peers will display in larger screens, used to be 1 row per peer, now is 3 peers in 1 row.
+
 #### v2.1 - Jul 2, 2021
 
 - Added **Ping** and **Traceroute** tools!

diff --git a/src/dashboard.py b/src/dashboard.py
@@ -18,7 +18,7 @@
 from icmplib import ping, multiping, traceroute, resolve, Host, Hop
 
 # Dashboard Version
-dashboard_version = 'v2.2.2'
+dashboard_version = 'v2.3'
 # Dashboard Config Name
 dashboard_conf = 'wg-dashboard.ini'
 # Default Wireguard IP
@@ -718,13 +718,13 @@ def conf(config_name):
 @app.route('/get_config/<config_name>', methods=['GET'])
 def get_conf(config_name):
     config_interface = read_conf_file_interface(config_name)
-
     search = request.args.get('search')
     if len(search) == 0: search = ""
     search = urllib.parse.unquote(search)
     config = configparser.ConfigParser(strict=False)
     config.read(dashboard_conf)
     sort = config.get("Server", "dashboard_sort")
+    peer_display_mode = config.get("Peers", "peer_display_mode")
     conf_data = {
         "peer_data": get_peers(config_name, search, sort),
         "name": config_name,
@@ -740,7 +740,7 @@ def get_conf(config_name):
     else:
         conf_data['checked'] = "checked"
     return render_template('get_conf.html', conf_data=conf_data, wg_ip=wg_ip, sort_tag=sort,
-                           dashboard_refresh_interval=int(config.get("Server", "dashboard_refresh_interval")))
+                           dashboard_refresh_interval=int(config.get("Server", "dashboard_refresh_interval")), peer_display_mode=peer_display_mode)
 
 
 @app.route('/switch/<config_name>', methods=['GET'])
@@ -950,6 +950,18 @@ def generate(private_key, allowed_ip, DNS, public_key, endpoint):
     else:
         return redirect("/configuration/" + config_name)
 
+@app.route('/switch_display_mode/<mode>', methods=['GET'])
+def switch_display_mode(mode):
+    print(mode)
+    if mode in ['list','grid']:
+        config.read(dashboard_conf)
+        config.set("Peers", "peer_display_mode", mode)
+        config.write(open(dashboard_conf, "w"))
+        return "true"
+    else:
+        return "false"
+
+
 
 def init_dashboard():
     # Set Default INI File
@@ -977,7 +989,7 @@ def init_dashboard():
     if 'version' not in config['Server'] or config['Server']['version'] != dashboard_version:
         config['Server']['version'] = dashboard_version
     if 'dashboard_refresh_interval' not in config['Server']:
-        config['Server']['dashboard_refresh_interval'] = '15000'
+        config['Server']['dashboard_refresh_interval'] = '60000'
     if 'dashboard_sort' not in config['Server']:
         config['Server']['dashboard_sort'] = 'status'
     if "Peers" not in config:
@@ -986,6 +998,8 @@ def init_dashboard():
         config['Peers']['peer_global_DNS'] = '1.1.1.1'
     if 'peer_endpoint_allowed_ip' not in config['Peers']:
         config['Peers']['peer_endpoint_allowed_ip'] = '0.0.0.0/0'
+    if 'peer_display_mode' not in config['Peers']:
+        config['Peers']['peer_display_mode'] = 'grid'
     config.write(open(dashboard_conf, "w"))
     config.clear()
 

diff --git a/src/static/js/configuration.js b/src/static/js/configuration.js
@@ -332,3 +332,14 @@ $("body").on("click", ".update_interval", function(){
 $("body").on("click", ".refresh", function (){
     load_data($('#search_peer_textbox').val());
 });
+
+
+$("body").on("click", ".display_mode", function(){
+    $.ajax({
+        method:"GET",
+        url: "/switch_display_mode/"+$(this).attr("display-mode"),
+        success: function (res){
+            location.reload()
+        }
+    })
+})
diff --git a/src/templates/get_conf.html b/src/templates/get_conf.html
@@ -79,6 +79,15 @@ <h6 style="text-transform: uppercase;"><samp>{{conf_data['conf_address']}}</samp
                         </div>
                     </div>
                 </div>
+                <div class="col-sm">
+                    <div class="form-group">
+                        <label><small class="text-muted">Display Mode</small></label><br>
+                        <div class="btn-group" role="group" style="width: 100%">
+                            <button style="width: 20%" type="button" class="btn btn-outline-primary display_mode {% if peer_display_mode == "grid" %} {{ "active" }} {% endif %}" display-mode="grid"><i class="bi bi-grid-fill" style="font-size: 1.5rem;"></i></button>
+                            <button style="width: 20%" type="button" class="btn btn-outline-primary display_mode {% if peer_display_mode == "list" %} {{ "active" }} {% endif %}" display-mode="list"><i class="bi bi-list" style="font-size: 1.5rem;"></i></button>
+                        </div>
+                    </div>
+                </div>
                 <div class="col-sm">
                     <div class="form-group">
                         <label><small class="text-muted">Add</small></label><br>
@@ -100,7 +109,11 @@ <h3 class="text-muted">Oops! No peers found ‘︿’</h3>
         {% endif %}
 
         {% for i in conf_data['peer_data']%}
-            <div class="col-sm-6 col-md-4">
+            {% if peer_display_mode == "list" %}
+                <div class="col-12">
+            {% else %}
+                <div class="col-sm-6 col-md-4">
+            {% endif %}
                 <div class="card mb-3">
                 <div class="card-header">
                     <div class="row">

diff --git a/src/wgd.sh b/src/wgd.sh
@@ -50,6 +50,9 @@ check_wgd_status(){
 start_wgd () {
     printf "%s\n" "$dashes"
     printf "| Starting Wireguard Dashboard in the background.          |\n"
+    if [ ! -d "log" ]
+      then mkdir "log"
+    fi
     d=$(date '+%Y%m%d%H%M%S')
     python3 "$app_name" > log/"$d".txt 2>&1 &
     printf "| Log files is under log/                                  |\n"