Add it also to vpn page and make it visible only for disconnected VPN…

… status
nasnet-community · Dec 18, 2024 · 9725982 · 9725982
1 parent 6fd1589
commit 9725982
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 10 deletions.
diff --git a/src/files/www/nlink-dashboard/dashboard.html b/src/files/www/nlink-dashboard/dashboard.html
@@ -144,16 +144,15 @@
                         </div>
                     </div>
                 </div>
-                <div class="row container justify-content-start mt-3">
-
 
+                <!-- Warning -->
+                <div id="warning-part" class="row container justify-content-start mt-3">
                     <div class="alert alert-warning text-start d-none" id="english-alert" role="alert">
                         <div class="position-absolute top-0 end-0" style="margin-top: 3px; margin-right: 3px;">
                             <button id="fa-btn" class="btn btn-outline-light btn-sm" for="fa-btn">فارسی</button>
                         </div>
 
                         <h5 class="alert-heading mb-1 text-center">Warning!</h5>
-
                         <p class="mb-1">If you do not use a VPN, domestic services such as applications and websites can
                             detect your Starlink IP address.</p>
                         <p class="mb-1">To ensure your VPN connection is active:</p>
@@ -166,13 +165,9 @@ <h5 class="alert-heading mb-1 text-center">Warning!</h5>
 
                     <div dir="rtl" class="alert alert-warning text-end" id="farsi-alert" role="alert">
                         <div class="position-absolute top-0 end-0" style="margin-top: 3px; margin-right: 3px;">
-                            <button id="en-btn" type="button" class="btn btn-outline-light btn-sm">
-                                English
-                            </button>
-
+                            <button id="en-btn" type="button" class="btn btn-outline-light btn-sm">English</button>
                         </div>
 
-
                         <h5 class="alert-heading mb-1 text-center">هشدار</h5>
                         <p class="mb-1"> در صورت عدم استفاده از وی‌پی‌ان سرویس‌های داخلی مثل اپلیکیشن‌ها و وب‌سایت‌ها
                             می‌توانند آی‌پی استارلینک شما را شناسایی کنند.</p>

diff --git a/src/files/www/nlink-dashboard/dashboard.js b/src/files/www/nlink-dashboard/dashboard.js
@@ -49,22 +49,31 @@ btnFrimware.onclick=function (e){
 //     }
 // });
 
-
+function showWarning(status){
+    if(status=="show"){
+        document.getElementById("warning-part").classList.remove('d-none');
+    }else{
+        document.getElementById("warning-part").classList.add('d-none');
+    }
+}
 
 function changeVPNstatus(status) {
     if (status == "connect") {
         vpnShield.setAttribute ('fill' ,'blue')
         vpnStauts.textContent = "Connected"
+        showWarning("hide")
         //vpnOn.checked=true
     }
     if (status == "disconnect") {
         vpnShield.setAttribute ('fill' ,'red')
         vpnStauts.textContent = "Disconnected"
+        showWarning("show")
         //vpnOff.checked=true
     }
     if (status == "connecting") {
         vpnShield.setAttribute ('fill' ,'yellow')
         vpnStauts.textContent = "Connecting..."
+        showWarning("show")
         //vpnOff.checked=true
     }
 

diff --git a/src/files/www/nlink-dashboard/vpn.html b/src/files/www/nlink-dashboard/vpn.html
@@ -155,6 +155,40 @@ <h6 id="config-status" class="pt-2 text-warning">Please make sure the device is
                   </div>
               </div>
         </div>
+        <!-- Warning -->
+        <div id="warning-part" class="row container justify-content-start mt-3">
+            <div class="alert alert-warning text-start d-none" id="english-alert" role="alert">
+                <div class="position-absolute top-0 end-0" style="margin-top: 3px; margin-right: 3px;">
+                    <button id="fa-btn" class="btn btn-outline-light btn-sm" for="fa-btn">فارسی</button>
+                </div>
+
+                <h5 class="alert-heading mb-1 text-center">Warning!</h5>
+                <p class="mb-1">If you do not use a VPN, domestic services such as applications and websites can
+                    detect your Starlink IP address.</p>
+                <p class="mb-1">To ensure your VPN connection is active:</p>
+                <ol class="ps-4 mb-0">
+                    <li>Make sure the shield icon is blue.</li>
+                    <li>The status below the shield displays "Connected".</li>
+                    <li>Your IP address has changed to the VPN's IP address.</li>
+                </ol>
+            </div>
+
+            <div dir="rtl" class="alert alert-warning text-end" id="farsi-alert" role="alert">
+                <div class="position-absolute top-0 end-0" style="margin-top: 3px; margin-right: 3px;">
+                    <button id="en-btn" type="button" class="btn btn-outline-light btn-sm">English</button>
+                </div>
+
+                <h5 class="alert-heading mb-1 text-center">هشدار</h5>
+                <p class="mb-1"> در صورت عدم استفاده از وی‌پی‌ان سرویس‌های داخلی مثل اپلیکیشن‌ها و وب‌سایت‌ها
+                    می‌توانند آی‌پی استارلینک شما را شناسایی کنند.</p>
+                <p class="mb-1">برای اطمینان از برقراری اتصال وی‌پی‌ان:</p>
+                <ol class="ps-4 mb-0">
+                    <li>مطمئن شوید رنگ سپر آبی باشد.</li>
+                    <li>عبارت “Connected” در زیر سپر نمایش داده شود.</li>
+                    <li>آی‌پی شما به آی‌پی وی‌پی‌ان تغییر کرده باشد.</li>
+                </ol>
+            </div>
+        </div>
         <hr>
 
     </div>

diff --git a/src/files/www/nlink-dashboard/vpn.js b/src/files/www/nlink-dashboard/vpn.js
@@ -16,16 +16,19 @@ function changeVPNstatus(status) {
         vpnShield.setAttribute ('fill' ,'blue')
         vpnStauts.textContent = "Connected"
         vpnOn.checked=true
+        showWarning("hide")
     }
     if (status == "disconnect") {
         vpnShield.setAttribute ('fill' ,'red')
         vpnStauts.textContent = "Disconnected"
         vpnOff.checked=true
+        showWarning("show")
     }
     if (status == "connecting") {
         vpnShield.setAttribute ('fill' ,'yellow')
         vpnStauts.textContent = "Connecting..."
         vpnOff.checked=true
+        showWarning("show")
     }
 
 }
@@ -201,4 +204,22 @@ function parseConfig() {
 async function setWireguardConfig(config){
     const VPN_CONFIG=["file","exec",{"command":"dragon.sh","params":[ "wireguard-set-conf", btoa(JSON.stringify(config) ) ]}];
     res = await async_ubus_call(VPN_CONFIG)
-}
+}
+
+function showWarning(status){
+    if(status=="show"){
+        document.getElementById("warning-part").classList.remove('d-none');
+    }else{
+        document.getElementById("warning-part").classList.add('d-none');
+    }
+}
+
+document.getElementById('en-btn').addEventListener('click', function() {
+    document.getElementById('english-alert').classList.remove('d-none');
+    document.getElementById('farsi-alert').classList.add('d-none');
+});
+
+document.getElementById('fa-btn').addEventListener('click', function() {
+    document.getElementById('english-alert').classList.add('d-none');
+    document.getElementById('farsi-alert').classList.remove('d-none');
+});