Restructured Ping with Socket.io

src/dashboard.py

@@ -5,6 +5,8 @@ from zipfile import ZipFile
 from datetime import datetime, timedelta
 from typing import Any
 from jinja2 import Template
+from flask_socketio import SocketIO, emit, disconnect
+import functools
 from flask import Flask, request, render_template, session, send_file
 from json import JSONEncoder
 from flask_cors import CORS
@@ -35,6 +37,7 @@ DASHBOARD_CONF = os.path.join(CONFIGURATION_PATH, 'wg-dashboard.ini')
 WG_CONF_PATH = None
 UPDATE = None
 app = Flask("WGDashboard", template_folder=os.path.abspath("./static/app/dist"))
+socketio = SocketIO(app, cors_allowed_origins='*')
 app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 5206928
 app.secret_key = secrets.token_urlsafe(32)
 
@@ -58,7 +61,15 @@ def ResponseObject(status=True, message=None, data=None) -> Flask.response_class
         "data": data
     })
     response.content_type = "application/json"
-    return response       
+    return response
+
+def ResponseObjectSocket(status=True, message=None, data=None) -> Flask.response_class:
+    response = {
+        "status": status,
+        "message": message,
+        "data": data
+    }
+    return response
 
 
 
@@ -1982,6 +1993,16 @@ cors = CORS(app, resources={rf"{APP_PREFIX}/api/*": {
 API Routes
 '''
 
+@socketio.on('connect')
+def handle_connect():
+    if "username" not in session:
+        print('disconnected')
+        disconnect()
+    else:
+        print('connected')
+    
+    
+
 @app.before_request
 def auth_req():
     if request.method.lower() == 'options':
@@ -2796,6 +2817,46 @@ def API_ping_getAllPeersIpAddress():
 
 import requests
 
+def getIPAddressGeolocation(ipAddress):
+    try:
+        r = requests.get(f"http://ip-api.com/json/{ipAddress}?field=city")
+        return r.json()
+    except Exception as e:
+        return None
+
+@socketio.on("ping")
+def SocketIO_Ping(json):
+    data = dict(json)
+    geo = {}
+    
+    if 'ipAddress' in data.keys() and 'count' in data.keys() and len(data['ipAddress']) > 0 and data['count'] > 0:
+        ip = data['ipAddress']
+        count = data['count']
+        for i in range(count):
+            print(ip, count)
+            result = ping(ip, count=1, source=None)
+            if result.address not in geo.keys():
+                geo[result.address] = getIPAddressGeolocation(result.address)
+            
+            data = {
+                "address": result.address,
+                "is_alive": result.is_alive,
+                "min_rtt": result.min_rtt,
+                "avg_rtt": result.avg_rtt,
+                "max_rtt": result.max_rtt,
+                "package_sent": result.packets_sent,
+                "package_received": result.packets_received,
+                "package_loss": result.packet_loss,
+                "geo": geo[result.address]
+            }
+            
+            emit('pingResponse', ResponseObjectSocket(True, data=data))
+            time.sleep(1)
+            
+    else:
+        emit('pingResponse', ResponseObjectSocket(False, "Please provide IP Address and Ping Count"))
+        
+
 @app.get(f'{APP_PREFIX}/api/ping/execute')
 def API_ping_execute():
     if "ipAddress" in request.args.keys() and "count" in request.args.keys():
@@ -2816,8 +2877,6 @@ def API_ping_execute():
                     "package_loss": result.packet_loss,
                     "geo": None
                 }
-                
-                
                 try:
                     r = requests.get(f"http://ip-api.com/json/{result.address}?field=city")
                     data['geo'] = r.json()

src/static/app/dist/assets/configuration-DVJcktkN.js

@@ -1 +1 @@
-import{_ as r,c as i,d as o,w as e,j as l,a as t,T as _,i as a,l as d,S as u}from"./index-BNjqUPQW.js";const m={name:"configuration"},p={class:"mt-md-5 mt-3 text-body"};function f(x,h,k,w,$,v){const n=l("RouterView");return t(),i("div",p,[o(n,null,{default:e(({Component:s,route:c})=>[o(_,{name:"fade2",mode:"out-in"},{default:e(()=>[(t(),a(u,null,{default:e(()=>[(t(),a(d(s),{key:c.path}))]),_:2},1024))]),_:2},1024)]),_:1})])}const B=r(m,[["render",f]]);export{B as default};
+import{_ as r,c as i,d as o,w as e,j as l,a as t,T as _,i as a,l as d,S as u}from"./index-7qLsecvh.js";const m={name:"configuration"},p={class:"mt-md-5 mt-3 text-body"};function f(x,h,k,w,$,v){const n=l("RouterView");return t(),i("div",p,[o(n,null,{default:e(({Component:s,route:c})=>[o(_,{name:"fade2",mode:"out-in"},{default:e(()=>[(t(),a(u,null,{default:e(()=>[(t(),a(d(s),{key:c.path}))]),_:2},1024))]),_:2},1024)]),_:1})])}const B=r(m,[["render",f]]);export{B as default};

src/static/app/dist/assets/index-CfW94M3m.js

@@ -1,4 +1,4 @@
-import{P as Ws,Q as Vs,R as Ue,U as Hn,r as Wn,o as Vn,V as Nn,H as jn,X as Xe,Y as $n,Z as Ns}from"./index-BNjqUPQW.js";/*!
+import{P as Ws,Q as Vs,R as Ue,U as Hn,r as Wn,o as Vn,V as Nn,E as jn,X as Xe,Y as $n,Z as Ns}from"./index-7qLsecvh.js";/*!
  * @kurkle/color v0.3.2
  * https://github.com/kurkle/color#readme
  * (c) 2023 Jukka Kurkela

src/static/app/dist/assets/localeText-BguG5zGd.js

@@ -1 +1 @@
-import{_ as e,G as t,a as o,c as a,t as c}from"./index-BNjqUPQW.js";const s={name:"localeText",props:{t:""},computed:{getLocaleText(){return t(this.t)}}};function n(r,p,l,_,i,x){return o(),a("span",null,c(this.getLocaleText),1)}const u=e(s,[["render",n]]);export{u as L};
+import{_ as e,G as t,a as o,c as a,t as c}from"./index-7qLsecvh.js";const s={name:"localeText",props:{t:""},computed:{getLocaleText(){return t(this.t)}}};function n(r,p,l,_,i,x){return o(),a("span",null,c(this.getLocaleText),1)}const u=e(s,[["render",n]]);export{u as L};

src/static/app/dist/assets/message-B3dKoq3S.js

@@ -1 +1 @@
-import{L as l}from"./localeText-C2kjj_RP.js";import{d as c}from"./dayjs.min-C31KnifI.js";import{_ as h,a as o,c as a,b as e,d as i,w as u,f as p,t as n,T as g,n as f,j as _}from"./index-BNjqUPQW.js";const x={name:"message",methods:{dayjs:c,hide(){this.ct(),this.message.show=!1},show(){this.timeout=setTimeout(()=>{this.message.show=!1},5e3)},ct(){clearTimeout(this.timeout)}},components:{LocaleText:l},props:{message:Object},mounted(){this.show()},data(){return{dismiss:!1,timeout:null}}},v=["id"],b={key:0,class:"d-flex"},w={class:"fw-bold d-block",style:{"text-transform":"uppercase"}},y={class:"ms-auto"},T={key:1},k={class:"card-body d-flex align-items-center gap-3"};function M(j,s,C,L,t,m){const d=_("LocaleText");return o(),a("div",{onMouseenter:s[1]||(s[1]=r=>{t.dismiss=!0,this.ct()}),onMouseleave:s[2]||(s[2]=r=>{t.dismiss=!1,this.show()}),class:"card shadow rounded-3 position-relative message ms-auto",id:this.message.id},[e("div",{class:f([{"text-bg-danger":this.message.type==="danger","text-bg-success":this.message.type==="success","text-bg-warning":this.message.type==="warning"},"card-header pos"])},[i(g,{name:"zoom",mode:"out-in"},{default:u(()=>[t.dismiss?(o(),a("div",T,[e("small",{onClick:s[0]||(s[0]=r=>m.hide()),class:"d-block mx-auto w-100 text-center",style:{cursor:"pointer"}},[s[3]||(s[3]=e("i",{class:"bi bi-x-lg me-2"},null,-1)),i(d,{t:"Dismiss"})])])):(o(),a("div",b,[e("small",w,[i(d,{t:"FROM "}),p(" "+n(this.message.from),1)]),e("small",y,n(m.dayjs().format("hh:mm A")),1)]))]),_:1})],2),e("div",k,[e("div",null,n(this.message.content),1)])],40,v)}const z=h(x,[["render",M],["__scopeId","data-v-94c76b54"]]);export{z as M};
+import{L as l}from"./localeText-BguG5zGd.js";import{d as c}from"./dayjs.min-C341O-eN.js";import{_ as h,a as o,c as a,b as e,d as i,w as u,f as p,t as n,T as g,n as f,j as _}from"./index-7qLsecvh.js";const x={name:"message",methods:{dayjs:c,hide(){this.ct(),this.message.show=!1},show(){this.timeout=setTimeout(()=>{this.message.show=!1},5e3)},ct(){clearTimeout(this.timeout)}},components:{LocaleText:l},props:{message:Object},mounted(){this.show()},data(){return{dismiss:!1,timeout:null}}},v=["id"],b={key:0,class:"d-flex"},w={class:"fw-bold d-block",style:{"text-transform":"uppercase"}},y={class:"ms-auto"},T={key:1},k={class:"card-body d-flex align-items-center gap-3"};function M(j,s,C,L,t,m){const d=_("LocaleText");return o(),a("div",{onMouseenter:s[1]||(s[1]=r=>{t.dismiss=!0,this.ct()}),onMouseleave:s[2]||(s[2]=r=>{t.dismiss=!1,this.show()}),class:"card shadow rounded-3 position-relative message ms-auto",id:this.message.id},[e("div",{class:f([{"text-bg-danger":this.message.type==="danger","text-bg-success":this.message.type==="success","text-bg-warning":this.message.type==="warning"},"card-header pos"])},[i(g,{name:"zoom",mode:"out-in"},{default:u(()=>[t.dismiss?(o(),a("div",T,[e("small",{onClick:s[0]||(s[0]=r=>m.hide()),class:"d-block mx-auto w-100 text-center",style:{cursor:"pointer"}},[s[3]||(s[3]=e("i",{class:"bi bi-x-lg me-2"},null,-1)),i(d,{t:"Dismiss"})])])):(o(),a("div",b,[e("small",w,[i(d,{t:"FROM "}),p(" "+n(this.message.from),1)]),e("small",y,n(m.dayjs().format("hh:mm A")),1)]))]),_:1})],2),e("div",k,[e("div",null,n(this.message.content),1)])],40,v)}const z=h(x,[["render",M],["__scopeId","data-v-94c76b54"]]);export{z as M};

src/static/app/dist/assets/peerConfigurationFile-BnbSuKGY.js

@@ -1 +1 @@
-import{_ as v,D as g,r as o,o as h,J as y,g as x,a as i,c as n,b as s,d as c,w,T as C,n as k,e as F}from"./index-BNjqUPQW.js";import{L as T}from"./localeText-C2kjj_RP.js";import"./browser-CjSdxGTc.js";const M={class:"peerSettingContainer w-100 h-100 position-absolute top-0 start-0"},S={class:"container d-flex h-100 w-100"},D={class:"m-auto modal-dialog-centered dashboardModal justify-content-center"},P={class:"card rounded-3 shadow w-100"},B={class:"card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0"},G={class:"mb-0"},L={class:"card-body p-4"},N={class:"d-flex"},V=["disabled"],j={key:0,class:"d-block"},I={key:1,class:"d-block",id:"check"},W={style:{height:"300px"},class:"d-flex"},$=["value"],q={key:0,class:"spinner-border m-auto",role:"status"},z={__name:"peerConfigurationFile",props:{selectedPeer:Object},emits:["close"],setup(u,{emit:p}){const m=p,f=u,r=g(),t=o(!1),l=o(""),a=o(!0);o({error:!1,message:void 0}),h(()=>{const d=y();x("/api/downloadPeer/"+d.params.id,{id:f.selectedPeer.id},e=>{e.status?(l.value=e.data.file,a.value=!1):this.dashboardStore.newMessage("Server",e.message,"danger")})});const _=async()=>{navigator.clipboard&&navigator.clipboard.writeText?navigator.clipboard.writeText(l.value).then(()=>{t.value=!0,setTimeout(()=>{t.value=!1},3e3)}).catch(()=>{r.newMessage("WGDashboard","Failed to copy","danger")}):(document.querySelector("#peerConfigurationFile").select(),document.execCommand("copy")?(t.value=!0,setTimeout(()=>{t.value=!1},3e3)):r.newMessage("WGDashboard","Failed to copy","danger"))};return(d,e)=>(i(),n("div",M,[s("div",S,[s("div",D,[s("div",P,[s("div",B,[s("h4",G,[c(T,{t:"Peer Configuration File"})]),s("button",{type:"button",class:"btn-close ms-auto",onClick:e[0]||(e[0]=b=>m("close"))})]),s("div",L,[s("div",N,[s("button",{onClick:e[1]||(e[1]=b=>_()),disabled:t.value||a.value,class:"ms-auto btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 position-relative"},[c(C,{name:"slide-up",mode:"out-in"},{default:w(()=>[t.value?(i(),n("span",I,e[3]||(e[3]=[s("i",{class:"bi bi-check-circle-fill"},null,-1)]))):(i(),n("span",j,e[2]||(e[2]=[s("i",{class:"bi bi-clipboard-fill"},null,-1)])))]),_:1})],8,V)]),s("div",W,[s("textarea",{style:{height:"300px"},class:k(["form-control w-100 rounded-3 mt-2 animate__fadeIn animate__faster animate__animated",{"d-none":a.value}]),id:"peerConfigurationFile",value:l.value},null,10,$),a.value?(i(),n("div",q,e[4]||(e[4]=[s("span",{class:"visually-hidden"},"Loading...",-1)]))):F("",!0)])])])])])]))}},R=v(z,[["__scopeId","data-v-9dd98f87"]]);export{R as default};
+import{_ as v,D as g,r as o,o as h,K as y,g as x,a as i,c as n,b as s,d as c,w,T as C,n as k,e as F}from"./index-7qLsecvh.js";import{L as T}from"./localeText-BguG5zGd.js";import"./browser-CjSdxGTc.js";const M={class:"peerSettingContainer w-100 h-100 position-absolute top-0 start-0"},S={class:"container d-flex h-100 w-100"},D={class:"m-auto modal-dialog-centered dashboardModal justify-content-center"},P={class:"card rounded-3 shadow w-100"},B={class:"card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0"},G={class:"mb-0"},L={class:"card-body p-4"},N={class:"d-flex"},V=["disabled"],j={key:0,class:"d-block"},I={key:1,class:"d-block",id:"check"},W={style:{height:"300px"},class:"d-flex"},$=["value"],q={key:0,class:"spinner-border m-auto",role:"status"},z={__name:"peerConfigurationFile",props:{selectedPeer:Object},emits:["close"],setup(u,{emit:p}){const m=p,f=u,r=g(),t=o(!1),l=o(""),a=o(!0);o({error:!1,message:void 0}),h(()=>{const d=y();x("/api/downloadPeer/"+d.params.id,{id:f.selectedPeer.id},e=>{e.status?(l.value=e.data.file,a.value=!1):this.dashboardStore.newMessage("Server",e.message,"danger")})});const _=async()=>{navigator.clipboard&&navigator.clipboard.writeText?navigator.clipboard.writeText(l.value).then(()=>{t.value=!0,setTimeout(()=>{t.value=!1},3e3)}).catch(()=>{r.newMessage("WGDashboard","Failed to copy","danger")}):(document.querySelector("#peerConfigurationFile").select(),document.execCommand("copy")?(t.value=!0,setTimeout(()=>{t.value=!1},3e3)):r.newMessage("WGDashboard","Failed to copy","danger"))};return(d,e)=>(i(),n("div",M,[s("div",S,[s("div",D,[s("div",P,[s("div",B,[s("h4",G,[c(T,{t:"Peer Configuration File"})]),s("button",{type:"button",class:"btn-close ms-auto",onClick:e[0]||(e[0]=b=>m("close"))})]),s("div",L,[s("div",N,[s("button",{onClick:e[1]||(e[1]=b=>_()),disabled:t.value||a.value,class:"ms-auto btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 position-relative"},[c(C,{name:"slide-up",mode:"out-in"},{default:w(()=>[t.value?(i(),n("span",I,e[3]||(e[3]=[s("i",{class:"bi bi-check-circle-fill"},null,-1)]))):(i(),n("span",j,e[2]||(e[2]=[s("i",{class:"bi bi-clipboard-fill"},null,-1)])))]),_:1})],8,V)]),s("div",W,[s("textarea",{style:{height:"300px"},class:k(["form-control w-100 rounded-3 mt-2 animate__fadeIn animate__faster animate__animated",{"d-none":a.value}]),id:"peerConfigurationFile",value:l.value},null,10,$),a.value?(i(),n("div",q,e[4]||(e[4]=[s("span",{class:"visually-hidden"},"Loading...",-1)]))):F("",!0)])])])])])]))}},R=v(z,[["__scopeId","data-v-9dd98f87"]]);export{R as default};

src/static/app/dist/assets/peerJobs-CxUJ2ao7.js

@@ -1 +1 @@
-import{S as p,a as b}from"./schedulePeerJob-DJy427BQ.js";import{_ as h,W as u,y as m,j as i,a as o,c as a,b as e,d as r,w as _,F as v,h as f,i as J,e as x,k as g}from"./index-BNjqUPQW.js";import{L as w}from"./localeText-C2kjj_RP.js";import"./vue-datepicker-C8ViYUjr.js";import"./dayjs.min-C31KnifI.js";const P={name:"peerJobs",setup(){return{store:u()}},props:{selectedPeer:Object},components:{LocaleText:w,SchedulePeerJob:p,ScheduleDropdown:b},data(){return{}},methods:{deleteJob(d){this.selectedPeer.jobs=this.selectedPeer.jobs.filter(t=>t.JobID!==d.JobID)},addJob(){this.selectedPeer.jobs.unshift(JSON.parse(JSON.stringify({JobID:m().toString(),Configuration:this.selectedPeer.configuration.Name,Peer:this.selectedPeer.id,Field:this.store.PeerScheduleJobs.dropdowns.Field[0].value,Operator:this.store.PeerScheduleJobs.dropdowns.Operator[0].value,Value:"",CreationDate:"",ExpireDate:"",Action:this.store.PeerScheduleJobs.dropdowns.Action[0].value})))}}},y={class:"peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll"},S={class:"container d-flex h-100 w-100"},$={class:"m-auto modal-dialog-centered dashboardModal"},C={class:"card rounded-3 shadow",style:{width:"700px"}},D={class:"card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2"},j={class:"mb-0 fw-normal"},k={class:"card-body px-4 pb-4 pt-2 position-relative"},N={class:"d-flex align-items-center mb-3"},T={class:"card shadow-sm",key:"none",style:{height:"153px"}},I={class:"card-body text-muted text-center d-flex"},L={class:"m-auto"};function O(d,t,B,F,V,A){const n=i("LocaleText"),l=i("SchedulePeerJob");return o(),a("div",y,[e("div",S,[e("div",$,[e("div",C,[e("div",D,[e("h4",j,[r(n,{t:"Schedule Jobs"})]),e("button",{type:"button",class:"btn-close ms-auto",onClick:t[0]||(t[0]=s=>this.$emit("close"))})]),e("div",k,[e("div",N,[e("button",{class:"btn bg-primary-subtle border-1 border-primary-subtle text-primary-emphasis rounded-3 shadow",onClick:t[1]||(t[1]=s=>this.addJob())},[t[3]||(t[3]=e("i",{class:"bi bi-plus-lg me-2"},null,-1)),r(n,{t:"Job"})])]),r(g,{name:"schedulePeerJobTransition",tag:"div",class:"position-relative"},{default:_(()=>[(o(!0),a(v,null,f(this.selectedPeer.jobs,(s,E)=>(o(),J(l,{onRefresh:t[2]||(t[2]=c=>this.$emit("refresh")),onDelete:c=>this.deleteJob(s),dropdowns:this.store.PeerScheduleJobs.dropdowns,key:s.JobID,pjob:s},null,8,["onDelete","dropdowns","pjob"]))),128)),this.selectedPeer.jobs.length===0?(o(),a("div",T,[e("div",I,[e("h6",L,[r(n,{t:"This peer does not have any job yet."})])])])):x("",!0)]),_:1})])])])])])}const z=h(P,[["render",O],["__scopeId","data-v-5bbdd42b"]]);export{z as default};
+import{S as p,a as b}from"./schedulePeerJob-DJNvnpjL.js";import{_ as h,W as u,y as m,j as i,a as o,c as a,b as e,d as r,w as _,F as v,h as f,i as J,e as x,k as g}from"./index-7qLsecvh.js";import{L as w}from"./localeText-BguG5zGd.js";import"./vue-datepicker-v4St2bKM.js";import"./dayjs.min-C341O-eN.js";const P={name:"peerJobs",setup(){return{store:u()}},props:{selectedPeer:Object},components:{LocaleText:w,SchedulePeerJob:p,ScheduleDropdown:b},data(){return{}},methods:{deleteJob(d){this.selectedPeer.jobs=this.selectedPeer.jobs.filter(t=>t.JobID!==d.JobID)},addJob(){this.selectedPeer.jobs.unshift(JSON.parse(JSON.stringify({JobID:m().toString(),Configuration:this.selectedPeer.configuration.Name,Peer:this.selectedPeer.id,Field:this.store.PeerScheduleJobs.dropdowns.Field[0].value,Operator:this.store.PeerScheduleJobs.dropdowns.Operator[0].value,Value:"",CreationDate:"",ExpireDate:"",Action:this.store.PeerScheduleJobs.dropdowns.Action[0].value})))}}},y={class:"peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll"},S={class:"container d-flex h-100 w-100"},$={class:"m-auto modal-dialog-centered dashboardModal"},C={class:"card rounded-3 shadow",style:{width:"700px"}},D={class:"card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2"},j={class:"mb-0 fw-normal"},k={class:"card-body px-4 pb-4 pt-2 position-relative"},N={class:"d-flex align-items-center mb-3"},T={class:"card shadow-sm",key:"none",style:{height:"153px"}},I={class:"card-body text-muted text-center d-flex"},L={class:"m-auto"};function O(d,t,B,F,V,A){const n=i("LocaleText"),l=i("SchedulePeerJob");return o(),a("div",y,[e("div",S,[e("div",$,[e("div",C,[e("div",D,[e("h4",j,[r(n,{t:"Schedule Jobs"})]),e("button",{type:"button",class:"btn-close ms-auto",onClick:t[0]||(t[0]=s=>this.$emit("close"))})]),e("div",k,[e("div",N,[e("button",{class:"btn bg-primary-subtle border-1 border-primary-subtle text-primary-emphasis rounded-3 shadow",onClick:t[1]||(t[1]=s=>this.addJob())},[t[3]||(t[3]=e("i",{class:"bi bi-plus-lg me-2"},null,-1)),r(n,{t:"Job"})])]),r(g,{name:"schedulePeerJobTransition",tag:"div",class:"position-relative"},{default:_(()=>[(o(!0),a(v,null,f(this.selectedPeer.jobs,(s,E)=>(o(),J(l,{onRefresh:t[2]||(t[2]=c=>this.$emit("refresh")),onDelete:c=>this.deleteJob(s),dropdowns:this.store.PeerScheduleJobs.dropdowns,key:s.JobID,pjob:s},null,8,["onDelete","dropdowns","pjob"]))),128)),this.selectedPeer.jobs.length===0?(o(),a("div",T,[e("div",I,[e("h6",L,[r(n,{t:"This peer does not have any job yet."})])])])):x("",!0)]),_:1})])])])])])}const z=h(P,[["render",O],["__scopeId","data-v-5bbdd42b"]]);export{z as default};

src/static/app/dist/assets/peerJobsAllModal-BF44c_Ai.js

@@ -1 +1 @@
-import{S as _}from"./schedulePeerJob-DJy427BQ.js";import{_ as g,W as v,j as c,a as t,c as r,b as e,d as l,F as p,h as b,t as m,e as f,i as y}from"./index-BNjqUPQW.js";import{L as x}from"./localeText-C2kjj_RP.js";import"./vue-datepicker-C8ViYUjr.js";import"./dayjs.min-C31KnifI.js";const J={name:"peerJobsAllModal",setup(){return{store:v()}},components:{LocaleText:x,SchedulePeerJob:_},props:{configurationPeers:Array[Object]},computed:{getAllJobs(){return this.configurationPeers.filter(a=>a.jobs.length>0)}}},w={class:"peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll"},$={class:"container d-flex h-100 w-100"},k={class:"m-auto modal-dialog-centered dashboardModal"},A={class:"card rounded-3 shadow",style:{width:"900px"}},L={class:"card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2"},S={class:"mb-0 fw-normal"},j={class:"card-body px-4 pb-4 pt-2"},C={key:0,class:"accordion",id:"peerJobsLogsModalAccordion"},P={class:"accordion-header"},M=["data-bs-target"],B={key:0},N={class:"text-muted"},D=["id"],T={class:"accordion-body"},V={key:1,class:"card shadow-sm",style:{height:"153px"}},F={class:"card-body text-muted text-center d-flex"},O={class:"m-auto"};function W(a,o,E,I,R,q){const n=c("LocaleText"),u=c("SchedulePeerJob");return t(),r("div",w,[e("div",$,[e("div",k,[e("div",A,[e("div",L,[e("h4",S,[l(n,{t:"All Active Jobs"})]),e("button",{type:"button",class:"btn-close ms-auto",onClick:o[0]||(o[0]=s=>this.$emit("close"))})]),e("div",j,[e("button",{class:"btn bg-primary-subtle border-1 border-primary-subtle text-primary-emphasis rounded-3 shadow mb-2",onClick:o[1]||(o[1]=s=>this.$emit("allLogs"))},[o[4]||(o[4]=e("i",{class:"bi bi-clock me-2"},null,-1)),l(n,{t:"Logs"})]),this.getAllJobs.length>0?(t(),r("div",C,[(t(!0),r(p,null,b(this.getAllJobs,(s,d)=>(t(),r("div",{class:"accordion-item",key:s.id},[e("h2",P,[e("button",{class:"accordion-button collapsed",type:"button","data-bs-toggle":"collapse","data-bs-target":"#collapse_"+d},[e("small",null,[e("strong",null,[s.name?(t(),r("span",B,m(s.name)+" • ",1)):f("",!0),e("samp",N,m(s.id),1)])])],8,M)]),e("div",{id:"collapse_"+d,class:"accordion-collapse collapse","data-bs-parent":"#peerJobsLogsModalAccordion"},[e("div",T,[(t(!0),r(p,null,b(s.jobs,i=>(t(),y(u,{onDelete:o[2]||(o[2]=h=>this.$emit("refresh")),onRefresh:o[3]||(o[3]=h=>this.$emit("refresh")),dropdowns:this.store.PeerScheduleJobs.dropdowns,viewOnly:!0,key:i.JobID,pjob:i},null,8,["dropdowns","pjob"]))),128))])],8,D)]))),128))])):(t(),r("div",V,[e("div",F,[e("span",O,[l(n,{t:"No active job at the moment."})])])]))])])])])])}const U=g(J,[["render",W]]);export{U as default};
+import{S as _}from"./schedulePeerJob-DJNvnpjL.js";import{_ as g,W as v,j as c,a as t,c as r,b as e,d as l,F as p,h as b,t as m,e as f,i as y}from"./index-7qLsecvh.js";import{L as x}from"./localeText-BguG5zGd.js";import"./vue-datepicker-v4St2bKM.js";import"./dayjs.min-C341O-eN.js";const J={name:"peerJobsAllModal",setup(){return{store:v()}},components:{LocaleText:x,SchedulePeerJob:_},props:{configurationPeers:Array[Object]},computed:{getAllJobs(){return this.configurationPeers.filter(a=>a.jobs.length>0)}}},w={class:"peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll"},$={class:"container d-flex h-100 w-100"},k={class:"m-auto modal-dialog-centered dashboardModal"},A={class:"card rounded-3 shadow",style:{width:"900px"}},L={class:"card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2"},S={class:"mb-0 fw-normal"},j={class:"card-body px-4 pb-4 pt-2"},C={key:0,class:"accordion",id:"peerJobsLogsModalAccordion"},P={class:"accordion-header"},M=["data-bs-target"],B={key:0},N={class:"text-muted"},D=["id"],T={class:"accordion-body"},V={key:1,class:"card shadow-sm",style:{height:"153px"}},F={class:"card-body text-muted text-center d-flex"},O={class:"m-auto"};function W(a,o,E,I,R,q){const n=c("LocaleText"),u=c("SchedulePeerJob");return t(),r("div",w,[e("div",$,[e("div",k,[e("div",A,[e("div",L,[e("h4",S,[l(n,{t:"All Active Jobs"})]),e("button",{type:"button",class:"btn-close ms-auto",onClick:o[0]||(o[0]=s=>this.$emit("close"))})]),e("div",j,[e("button",{class:"btn bg-primary-subtle border-1 border-primary-subtle text-primary-emphasis rounded-3 shadow mb-2",onClick:o[1]||(o[1]=s=>this.$emit("allLogs"))},[o[4]||(o[4]=e("i",{class:"bi bi-clock me-2"},null,-1)),l(n,{t:"Logs"})]),this.getAllJobs.length>0?(t(),r("div",C,[(t(!0),r(p,null,b(this.getAllJobs,(s,d)=>(t(),r("div",{class:"accordion-item",key:s.id},[e("h2",P,[e("button",{class:"accordion-button collapsed",type:"button","data-bs-toggle":"collapse","data-bs-target":"#collapse_"+d},[e("small",null,[e("strong",null,[s.name?(t(),r("span",B,m(s.name)+" • ",1)):f("",!0),e("samp",N,m(s.id),1)])])],8,M)]),e("div",{id:"collapse_"+d,class:"accordion-collapse collapse","data-bs-parent":"#peerJobsLogsModalAccordion"},[e("div",T,[(t(!0),r(p,null,b(s.jobs,i=>(t(),y(u,{onDelete:o[2]||(o[2]=h=>this.$emit("refresh")),onRefresh:o[3]||(o[3]=h=>this.$emit("refresh")),dropdowns:this.store.PeerScheduleJobs.dropdowns,viewOnly:!0,key:i.JobID,pjob:i},null,8,["dropdowns","pjob"]))),128))])],8,D)]))),128))])):(t(),r("div",V,[e("div",F,[e("span",O,[l(n,{t:"No active job at the moment."})])])]))])])])])])}const U=g(J,[["render",W]]);export{U as default};

src/static/app/dist/assets/peerList-DGF__TiG.css

@@ -0,0 +1 @@
+.animation__fadeInDropdown[data-v-c96b078a]{animation-name:fadeInDropdown-c96b078a;animation-duration:.2s;animation-timing-function:cubic-bezier(.82,.58,.17,.9)}@keyframes fadeInDropdown-c96b078a{0%{opacity:0;filter:blur(3px);transform:translateY(-60px)}to{opacity:1;filter:blur(0px);transform:translateY(-40px)}}.displayModal .dashboardModal[data-v-c96b078a]{width:400px!important}@media screen and (max-width: 992px){.peerSearchContainer[data-v-c96b078a]{flex-direction:column}.peerSettingContainer .dashboardModal[data-v-c96b078a]{width:100%!important}}.peerSearchContainer>button[data-v-c96b078a],.peerSearchContainer .dropdown>button[data-v-c96b078a]{text-align:left;display:flex;align-items:center}span[data-v-2d66aeb6]{top:-34px;left:0}.dropdown-menu[data-v-d46268aa]{right:1rem;min-width:200px}.dropdown-item.disabled[data-v-d46268aa],.dropdown-item[data-v-d46268aa]:disabled{opacity:.7}.confirmDelete[data-v-d46268aa]{padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x)}.slide-fade-leave-active[data-v-da99e0f2],.slide-fade-enter-active[data-v-da99e0f2]{transition:all .2s cubic-bezier(.82,.58,.17,1.3)}.slide-fade-enter-from[data-v-da99e0f2],.slide-fade-leave-to[data-v-da99e0f2]{transform:translateY(20px);opacity:0;filter:blur(3px)}.subMenuBtn.active[data-v-da99e0f2]{background-color:#ffffff20}.peerCard[data-v-da99e0f2]{transition:box-shadow .1s cubic-bezier(.82,.58,.17,.9)}.peerCard[data-v-da99e0f2]:hover{box-shadow:var(--bs-box-shadow)!important}.peerNav .nav-link{&.active[data-v-9736e433]{background-color:#efefef}}th[data-v-9736e433],td[data-v-9736e433]{background-color:transparent!important}@media screen and (max-width: 576px){.titleBtn[data-v-9736e433]{flex-basis:100%}}

src/static/app/dist/assets/peerQRCode-CcaIHs_s.js

@@ -1 +1 @@
-import{b as r}from"./browser-CjSdxGTc.js";import{L as i}from"./localeText-C2kjj_RP.js";import{_ as c,D as l,g as p,j as _,a,c as n,b as e,d as m,n as h,e as u}from"./index-BNjqUPQW.js";const f={name:"peerQRCode",components:{LocaleText:i},props:{selectedPeer:Object},setup(){return{dashboardStore:l()}},data(){return{loading:!0}},mounted(){p("/api/downloadPeer/"+this.$route.params.id,{id:this.selectedPeer.id},t=>{this.loading=!1,t.status?r.toCanvas(document.querySelector("#qrcode"),t.data.file,s=>{s&&console.error(s)}):this.dashboardStore.newMessage("Server",t.message,"danger")})}},b={class:"peerSettingContainer w-100 h-100 position-absolute top-0 start-0"},g={class:"container d-flex h-100 w-100"},v={class:"m-auto modal-dialog-centered dashboardModal justify-content-center"},x={class:"card rounded-3 shadow"},C={class:"card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0"},w={class:"mb-0"},y={class:"card-body p-4"},S={style:{width:"292px",height:"292px"},class:"d-flex"},L={key:0,class:"spinner-border m-auto",role:"status"};function $(t,s,k,j,o,q){const d=_("LocaleText");return a(),n("div",b,[e("div",g,[e("div",v,[e("div",x,[e("div",C,[e("h4",w,[m(d,{t:"QR Code"})]),e("button",{type:"button",class:"btn-close ms-auto",onClick:s[0]||(s[0]=B=>this.$emit("close"))})]),e("div",y,[e("div",S,[e("canvas",{id:"qrcode",class:h(["rounded-3 shadow animate__animated animate__fadeIn animate__faster",{"d-none":o.loading}])},null,2),o.loading?(a(),n("div",L,s[1]||(s[1]=[e("span",{class:"visually-hidden"},"Loading...",-1)]))):u("",!0)])])])])])])}const R=c(f,[["render",$]]);export{R as default};
+import{b as r}from"./browser-CjSdxGTc.js";import{L as i}from"./localeText-BguG5zGd.js";import{_ as c,D as l,g as p,j as _,a,c as n,b as e,d as m,n as h,e as u}from"./index-7qLsecvh.js";const f={name:"peerQRCode",components:{LocaleText:i},props:{selectedPeer:Object},setup(){return{dashboardStore:l()}},data(){return{loading:!0}},mounted(){p("/api/downloadPeer/"+this.$route.params.id,{id:this.selectedPeer.id},t=>{this.loading=!1,t.status?r.toCanvas(document.querySelector("#qrcode"),t.data.file,s=>{s&&console.error(s)}):this.dashboardStore.newMessage("Server",t.message,"danger")})}},b={class:"peerSettingContainer w-100 h-100 position-absolute top-0 start-0"},g={class:"container d-flex h-100 w-100"},v={class:"m-auto modal-dialog-centered dashboardModal justify-content-center"},x={class:"card rounded-3 shadow"},C={class:"card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0"},w={class:"mb-0"},y={class:"card-body p-4"},S={style:{width:"292px",height:"292px"},class:"d-flex"},L={key:0,class:"spinner-border m-auto",role:"status"};function $(t,s,k,j,o,q){const d=_("LocaleText");return a(),n("div",b,[e("div",g,[e("div",v,[e("div",x,[e("div",C,[e("h4",w,[m(d,{t:"QR Code"})]),e("button",{type:"button",class:"btn-close ms-auto",onClick:s[0]||(s[0]=B=>this.$emit("close"))})]),e("div",y,[e("div",S,[e("canvas",{id:"qrcode",class:h(["rounded-3 shadow animate__animated animate__fadeIn animate__faster",{"d-none":o.loading}])},null,2),o.loading?(a(),n("div",L,s[1]||(s[1]=[e("span",{class:"visually-hidden"},"Loading...",-1)]))):u("",!0)])])])])])])}const R=c(f,[["render",$]]);export{R as default};

src/static/app/dist/assets/peerSearchBar-CLQQyoqI.js

@@ -1 +1 @@
-import{_ as u,p as m,G as p,r as b,W as f,a2 as h,o as v,a as g,i as _,w as x,b as e,m as y,x as S,d as T,T as B}from"./index-BNjqUPQW.js";import{L as w}from"./localeText-C2kjj_RP.js";const C={class:"fixed-bottom w-100 bottom-0 z-2",style:{"z-index":"1"}},P={class:"container-fluid"},k={class:"row g-0"},L={class:"col-md-9 col-lg-10 d-flex justify-content-center py-2"},V={class:"rounded-3 p-2 border shadow searchPeersContainer bg-body-tertiary"},z={class:"d-flex gap-1 align-items-center px-2"},D=["placeholder"],G={__name:"peerSearchBar",emits:["close"],setup(M,{emit:n}){const i=m(()=>p("Search Peers..."));let t;const o=b(""),r=f(),l=()=>{t?(clearTimeout(t),t=setTimeout(()=>{r.searchString=o.value},300)):t=setTimeout(()=>{r.searchString=o.value},300)},d=n,c=h("searchBar");return v(()=>{c.value.focus()}),(N,s)=>(g(),_(B,{name:"slideUp",appear:"",type:"animation",style:{"animation-delay":"1s"}},{default:x(()=>[e("div",C,[e("div",P,[e("div",k,[s[5]||(s[5]=e("div",{class:"col-md-3 col-lg-2"},null,-1)),e("div",L,[e("div",V,[e("div",z,[s[4]||(s[4]=e("h6",{class:"mb-0 me-2"},[e("label",{for:"searchPeers"},[e("i",{class:"bi bi-search"})])],-1)),y(e("input",{ref:"searchBar",class:"form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle",placeholder:i.value,id:"searchPeers",onKeyup:s[0]||(s[0]=a=>l()),"onUpdate:modelValue":s[1]||(s[1]=a=>o.value=a)},null,40,D),[[S,o.value]]),e("button",{onClick:s[2]||(s[2]=a=>d("close")),class:"btn bg-secondary-subtle text-secondary-emphasis border-secondary-subtle rounded-3 d-flex align-items-center"},[s[3]||(s[3]=e("i",{class:"bi bi-x-circle-fill me-2"},null,-1)),T(w,{t:"Done"})])])])])])])])]),_:1}))}},$=u(G,[["__scopeId","data-v-21d93f94"]]);export{$ as default};
+import{_ as u,p as m,G as p,r as b,W as f,a2 as h,o as v,a as g,i as _,w as x,b as e,m as y,x as S,d as T,T as B}from"./index-7qLsecvh.js";import{L as w}from"./localeText-BguG5zGd.js";const C={class:"fixed-bottom w-100 bottom-0 z-2",style:{"z-index":"1"}},P={class:"container-fluid"},k={class:"row g-0"},L={class:"col-md-9 col-lg-10 d-flex justify-content-center py-2"},V={class:"rounded-3 p-2 border shadow searchPeersContainer bg-body-tertiary"},z={class:"d-flex gap-1 align-items-center px-2"},D=["placeholder"],G={__name:"peerSearchBar",emits:["close"],setup(M,{emit:n}){const i=m(()=>p("Search Peers..."));let t;const o=b(""),r=f(),l=()=>{t?(clearTimeout(t),t=setTimeout(()=>{r.searchString=o.value},300)):t=setTimeout(()=>{r.searchString=o.value},300)},d=n,c=h("searchBar");return v(()=>{c.value.focus()}),(N,s)=>(g(),_(B,{name:"slideUp",appear:"",type:"animation",style:{"animation-delay":"1s"}},{default:x(()=>[e("div",C,[e("div",P,[e("div",k,[s[5]||(s[5]=e("div",{class:"col-md-3 col-lg-2"},null,-1)),e("div",L,[e("div",V,[e("div",z,[s[4]||(s[4]=e("h6",{class:"mb-0 me-2"},[e("label",{for:"searchPeers"},[e("i",{class:"bi bi-search"})])],-1)),y(e("input",{ref:"searchBar",class:"form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle",placeholder:i.value,id:"searchPeers",onKeyup:s[0]||(s[0]=a=>l()),"onUpdate:modelValue":s[1]||(s[1]=a=>o.value=a)},null,40,D),[[S,o.value]]),e("button",{onClick:s[2]||(s[2]=a=>d("close")),class:"btn bg-secondary-subtle text-secondary-emphasis border-secondary-subtle rounded-3 d-flex align-items-center"},[s[3]||(s[3]=e("i",{class:"bi bi-x-circle-fill me-2"},null,-1)),T(w,{t:"Done"})])])])])])])])]),_:1}))}},$=u(G,[["__scopeId","data-v-21d93f94"]]);export{$ as default};

src/static/app/dist/assets/ping-3hO-rXXY.css

@@ -0,0 +1 @@
+.ol-layer canvas[data-v-457711ff]{border-radius:var(--bs-border-radius-lg)!important}#map[data-v-457711ff]{height:300px}.pingPlaceholder[data-v-f5525716]{width:100%;height:79.98px}.ping-move[data-v-f5525716],.ping-enter-active[data-v-f5525716],.ping-leave-active[data-v-f5525716]{transition:all .4s cubic-bezier(.82,.58,.17,.9)}.ping-leave-active[data-v-f5525716]{position:absolute;width:100%}.ping-enter-from[data-v-f5525716],.ping-leave-to[data-v-f5525716]{opacity:0;filter:blur(3px)}table th[data-v-f5525716],table td[data-v-f5525716]{padding:.5rem}.table[data-v-f5525716]>:not(caption)>*>*{background-color:transparent!important}

src/static/app/dist/assets/ping-DojRH9NX.css

@@ -1 +0,0 @@
-.pingPlaceholder[data-v-a08ce97e]{width:100%;height:79.98px}.ping-move[data-v-a08ce97e],.ping-enter-active[data-v-a08ce97e],.ping-leave-active[data-v-a08ce97e]{transition:all .4s cubic-bezier(.82,.58,.17,.9)}.ping-leave-active[data-v-a08ce97e]{position:absolute;width:100%}.ping-enter-from[data-v-a08ce97e],.ping-leave-to[data-v-a08ce97e]{opacity:0;filter:blur(3px)}

src/static/app/dist/assets/protocolBadge-CVzzEU4-.js

@@ -1 +1 @@
-import{L as r}from"./localeText-C2kjj_RP.js";import{a as t,c as n,f as i,i as s,e as a}from"./index-BNjqUPQW.js";const d={key:0,class:"badge wireguardBg rounded-3 shadow"},c={key:1,class:"badge amneziawgBg rounded-3 shadow"},u={__name:"protocolBadge",props:{protocol:String,mini:!1},setup(e){return(m,o)=>e.protocol==="wg"?(t(),n("span",d,[o[0]||(o[0]=i(" WireGuard ")),e.mini?a("",!0):(t(),s(r,{key:0,t:"Configuration"}))])):e.protocol==="awg"?(t(),n("span",c,[o[1]||(o[1]=i(" AmneziaWG ")),e.mini?a("",!0):(t(),s(r,{key:0,t:"Configuration"}))])):a("",!0)}};export{u as _};
+import{L as r}from"./localeText-BguG5zGd.js";import{a as t,c as n,f as i,i as s,e as a}from"./index-7qLsecvh.js";const d={key:0,class:"badge wireguardBg rounded-3 shadow"},c={key:1,class:"badge amneziawgBg rounded-3 shadow"},u={__name:"protocolBadge",props:{protocol:String,mini:!1},setup(e){return(m,o)=>e.protocol==="wg"?(t(),n("span",d,[o[0]||(o[0]=i(" WireGuard ")),e.mini?a("",!0):(t(),s(r,{key:0,t:"Configuration"}))])):e.protocol==="awg"?(t(),n("span",c,[o[1]||(o[1]=i(" AmneziaWG ")),e.mini?a("",!0):(t(),s(r,{key:0,t:"Configuration"}))])):a("",!0)}};export{u as _};

src/static/app/dist/assets/setup-YDQRO7o1.js

@@ -1 +1 @@
-import{_ as u,D as m,z as p,c as r,b as e,d as o,f as c,t as h,e as f,m as l,x as d,a as i,j as w}from"./index-BNjqUPQW.js";import{L as g}from"./localeText-C2kjj_RP.js";const b={name:"setup",components:{LocaleText:g},setup(){return{store:m()}},data(){return{setup:{username:"",newPassword:"",repeatNewPassword:"",enable_totp:!0},loading:!1,errorMessage:"",done:!1}},computed:{goodToSubmit(){return this.setup.username&&this.setup.newPassword.length>=8&&this.setup.repeatNewPassword.length>=8&&this.setup.newPassword===this.setup.repeatNewPassword}},methods:{submit(){this.loading=!0,p("/api/Welcome_Finish",this.setup,n=>{n.status?(this.done=!0,this.$router.push("/2FASetup")):(document.querySelectorAll("#createAccount input").forEach(s=>s.classList.add("is-invalid")),this.errorMessage=n.message,document.querySelector(".login-container-fluid").scrollTo({top:0,left:0,behavior:"smooth"})),this.loading=!1})}}},_=["data-bs-theme"],x={class:"m-auto text-body",style:{width:"500px"}},v={class:"dashboardLogo display-4"},y={class:"mb-5"},P={key:0,class:"alert alert-danger"},N={class:"d-flex flex-column gap-3"},k={id:"createAccount",class:"d-flex flex-column gap-2"},S={class:"form-group text-body"},T={for:"username",class:"mb-1 text-muted"},C={class:"form-group text-body"},L={for:"password",class:"mb-1 text-muted"},V={class:"form-group text-body"},$={for:"confirmPassword",class:"mb-1 text-muted"},q=["disabled"],A={key:0,class:"d-flex align-items-center w-100"},M={key:1,class:"d-flex align-items-center w-100"};function B(n,s,D,E,U,F){const t=w("LocaleText");return i(),r("div",{class:"container-fluid login-container-fluid d-flex main pt-5 overflow-scroll","data-bs-theme":this.store.Configuration.Server.dashboard_theme},[e("div",x,[e("span",v,[o(t,{t:"Nice to meet you!"})]),e("p",y,[o(t,{t:"Please fill in the following fields to finish setup"}),s[4]||(s[4]=c(" 😊"))]),e("div",null,[e("h3",null,[o(t,{t:"Create an account"})]),this.errorMessage?(i(),r("div",P,h(this.errorMessage),1)):f("",!0),e("div",N,[e("form",k,[e("div",S,[e("label",T,[e("small",null,[o(t,{t:"Enter an username you like"})])]),l(e("input",{type:"text",autocomplete:"username","onUpdate:modelValue":s[0]||(s[0]=a=>this.setup.username=a),class:"form-control",id:"username",name:"username",required:""},null,512),[[d,this.setup.username]])]),e("div",C,[e("label",L,[e("small",null,[o(t,{t:"Enter a password"}),e("code",null,[o(t,{t:"(At least 8 characters and make sure is strong enough!)"})])])]),l(e("input",{type:"password",autocomplete:"new-password","onUpdate:modelValue":s[1]||(s[1]=a=>this.setup.newPassword=a),class:"form-control",id:"password",name:"password",required:""},null,512),[[d,this.setup.newPassword]])]),e("div",V,[e("label",$,[e("small",null,[o(t,{t:"Confirm password"})])]),l(e("input",{type:"password",autocomplete:"confirm-new-password","onUpdate:modelValue":s[2]||(s[2]=a=>this.setup.repeatNewPassword=a),class:"form-control",id:"confirmPassword",name:"confirmPassword",required:""},null,512),[[d,this.setup.repeatNewPassword]])])]),e("button",{class:"btn btn-dark btn-lg mb-5 d-flex btn-brand shadow align-items-center",ref:"signInBtn",disabled:!this.goodToSubmit||this.loading||this.done,onClick:s[3]||(s[3]=a=>this.submit())},[!this.loading&&!this.done?(i(),r("span",A,[o(t,{t:"Next"}),s[5]||(s[5]=e("i",{class:"bi bi-chevron-right ms-auto"},null,-1))])):(i(),r("span",M,[o(t,{t:"Saving..."}),s[6]||(s[6]=e("span",{class:"spinner-border ms-auto spinner-border-sm",role:"status"},[e("span",{class:"visually-hidden"},"Loading...")],-1))]))],8,q)])])])],8,_)}const I=u(b,[["render",B]]);export{I as default};
+import{_ as u,D as m,z as p,c as r,b as e,d as o,f as c,t as h,e as f,m as l,x as d,a as i,j as w}from"./index-7qLsecvh.js";import{L as g}from"./localeText-BguG5zGd.js";const b={name:"setup",components:{LocaleText:g},setup(){return{store:m()}},data(){return{setup:{username:"",newPassword:"",repeatNewPassword:"",enable_totp:!0},loading:!1,errorMessage:"",done:!1}},computed:{goodToSubmit(){return this.setup.username&&this.setup.newPassword.length>=8&&this.setup.repeatNewPassword.length>=8&&this.setup.newPassword===this.setup.repeatNewPassword}},methods:{submit(){this.loading=!0,p("/api/Welcome_Finish",this.setup,n=>{n.status?(this.done=!0,this.$router.push("/2FASetup")):(document.querySelectorAll("#createAccount input").forEach(s=>s.classList.add("is-invalid")),this.errorMessage=n.message,document.querySelector(".login-container-fluid").scrollTo({top:0,left:0,behavior:"smooth"})),this.loading=!1})}}},_=["data-bs-theme"],x={class:"m-auto text-body",style:{width:"500px"}},v={class:"dashboardLogo display-4"},y={class:"mb-5"},P={key:0,class:"alert alert-danger"},N={class:"d-flex flex-column gap-3"},k={id:"createAccount",class:"d-flex flex-column gap-2"},S={class:"form-group text-body"},T={for:"username",class:"mb-1 text-muted"},C={class:"form-group text-body"},L={for:"password",class:"mb-1 text-muted"},V={class:"form-group text-body"},$={for:"confirmPassword",class:"mb-1 text-muted"},q=["disabled"],A={key:0,class:"d-flex align-items-center w-100"},M={key:1,class:"d-flex align-items-center w-100"};function B(n,s,D,E,U,F){const t=w("LocaleText");return i(),r("div",{class:"container-fluid login-container-fluid d-flex main pt-5 overflow-scroll","data-bs-theme":this.store.Configuration.Server.dashboard_theme},[e("div",x,[e("span",v,[o(t,{t:"Nice to meet you!"})]),e("p",y,[o(t,{t:"Please fill in the following fields to finish setup"}),s[4]||(s[4]=c(" 😊"))]),e("div",null,[e("h3",null,[o(t,{t:"Create an account"})]),this.errorMessage?(i(),r("div",P,h(this.errorMessage),1)):f("",!0),e("div",N,[e("form",k,[e("div",S,[e("label",T,[e("small",null,[o(t,{t:"Enter an username you like"})])]),l(e("input",{type:"text",autocomplete:"username","onUpdate:modelValue":s[0]||(s[0]=a=>this.setup.username=a),class:"form-control",id:"username",name:"username",required:""},null,512),[[d,this.setup.username]])]),e("div",C,[e("label",L,[e("small",null,[o(t,{t:"Enter a password"}),e("code",null,[o(t,{t:"(At least 8 characters and make sure is strong enough!)"})])])]),l(e("input",{type:"password",autocomplete:"new-password","onUpdate:modelValue":s[1]||(s[1]=a=>this.setup.newPassword=a),class:"form-control",id:"password",name:"password",required:""},null,512),[[d,this.setup.newPassword]])]),e("div",V,[e("label",$,[e("small",null,[o(t,{t:"Confirm password"})])]),l(e("input",{type:"password",autocomplete:"confirm-new-password","onUpdate:modelValue":s[2]||(s[2]=a=>this.setup.repeatNewPassword=a),class:"form-control",id:"confirmPassword",name:"confirmPassword",required:""},null,512),[[d,this.setup.repeatNewPassword]])])]),e("button",{class:"btn btn-dark btn-lg mb-5 d-flex btn-brand shadow align-items-center",ref:"signInBtn",disabled:!this.goodToSubmit||this.loading||this.done,onClick:s[3]||(s[3]=a=>this.submit())},[!this.loading&&!this.done?(i(),r("span",A,[o(t,{t:"Next"}),s[5]||(s[5]=e("i",{class:"bi bi-chevron-right ms-auto"},null,-1))])):(i(),r("span",M,[o(t,{t:"Saving..."}),s[6]||(s[6]=e("span",{class:"spinner-border ms-auto spinner-border-sm",role:"status"},[e("span",{class:"visually-hidden"},"Loading...")],-1))]))],8,q)])])])],8,_)}const I=u(b,[["render",B]]);export{I as default};

src/static/app/dist/assets/share-C08DucO0.js

@@ -1 +1 @@
-import{_,r,D as p,g as u,c as m,b as t,d as c,J as h,a as f,j as b}from"./index-BNjqUPQW.js";import{b as v}from"./browser-CjSdxGTc.js";import{L as y}from"./localeText-C2kjj_RP.js";const g={name:"share",components:{LocaleText:y},async setup(){const o=h(),e=r(!1),i=p(),n=r(""),s=r(void 0),l=r(new Blob);await u("/api/getDashboardTheme",{},d=>{n.value=d.data});const a=o.query.ShareID;return a===void 0||a.length===0?(s.value=void 0,e.value=!0):await u("/api/sharePeer/get",{ShareID:a},d=>{d.status?(s.value=d.data,l.value=new Blob([s.value.file],{type:"text/plain"})):s.value=void 0,e.value=!0}),{store:i,theme:n,peerConfiguration:s,blob:l}},mounted(){this.peerConfiguration&&v.toCanvas(document.querySelector("#qrcode"),this.peerConfiguration.file,o=>{o&&console.error(o)})},methods:{download(){const o=new Blob([this.peerConfiguration.file],{type:"text/plain"}),e=URL.createObjectURL(o),i=`${this.peerConfiguration.fileName}.conf`,n=document.createElement("a");n.href=e,n.download=i,n.click()}},computed:{getBlob(){return URL.createObjectURL(this.blob)}}},w=["data-bs-theme"],x={class:"m-auto text-body",style:{width:"500px"}},C={key:0,class:"text-center position-relative",style:{}},U={class:"position-absolute w-100 h-100 top-0 start-0 d-flex animate__animated animate__fadeInUp",style:{"animation-delay":"0.1s"}},I={class:"m-auto"},L={key:1,class:"d-flex align-items-center flex-column gap-3"},B={class:"h1 dashboardLogo text-center animate__animated animate__fadeInUp"},k={id:"qrcode",class:"rounded-3 shadow animate__animated animate__fadeInUp mb-3",ref:"qrcode"},D={class:"text-muted animate__animated animate__fadeInUp mb-1",style:{"animation-delay":"0.2s"}},R=["download","href"];function j(o,e,i,n,s,l){const a=b("LocaleText");return f(),m("div",{class:"container-fluid login-container-fluid d-flex main pt-5 overflow-scroll","data-bs-theme":this.theme},[t("div",x,[this.peerConfiguration?(f(),m("div",L,[t("div",B,[e[1]||(e[1]=t("h6",null,"WGDashboard",-1)),c(a,{t:"Scan QR Code with the WireGuard App to add peer"})]),t("canvas",k,null,512),t("p",D,[c(a,{t:"or click the button below to download the "}),e[2]||(e[2]=t("samp",null,".conf",-1)),c(a,{t:" file"})]),t("a",{download:this.peerConfiguration.fileName+".conf",href:l.getBlob,class:"btn btn-lg bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle animate__animated animate__fadeInUp shadow-sm",style:{"animation-delay":"0.25s"}},e[3]||(e[3]=[t("i",{class:"bi bi-download"},null,-1)]),8,R)])):(f(),m("div",C,[e[0]||(e[0]=t("div",{class:"animate__animated animate__fadeInUp"},[t("h1",{style:{"font-size":"20rem",filter:"blur(1rem)","animation-duration":"7s"},class:"animate__animated animate__flash animate__infinite"},[t("i",{class:"bi bi-file-binary"})])],-1)),t("div",U,[t("h3",I,[c(a,{t:"Oh no... This link is either expired or invalid."})])])]))])],8,w)}const N=_(g,[["render",j],["__scopeId","data-v-1b44aacd"]]);export{N as default};
+import{_,r,D as p,g as u,c as m,b as t,d as c,K as h,a as f,j as b}from"./index-7qLsecvh.js";import{b as v}from"./browser-CjSdxGTc.js";import{L as y}from"./localeText-BguG5zGd.js";const g={name:"share",components:{LocaleText:y},async setup(){const o=h(),e=r(!1),i=p(),n=r(""),s=r(void 0),l=r(new Blob);await u("/api/getDashboardTheme",{},d=>{n.value=d.data});const a=o.query.ShareID;return a===void 0||a.length===0?(s.value=void 0,e.value=!0):await u("/api/sharePeer/get",{ShareID:a},d=>{d.status?(s.value=d.data,l.value=new Blob([s.value.file],{type:"text/plain"})):s.value=void 0,e.value=!0}),{store:i,theme:n,peerConfiguration:s,blob:l}},mounted(){this.peerConfiguration&&v.toCanvas(document.querySelector("#qrcode"),this.peerConfiguration.file,o=>{o&&console.error(o)})},methods:{download(){const o=new Blob([this.peerConfiguration.file],{type:"text/plain"}),e=URL.createObjectURL(o),i=`${this.peerConfiguration.fileName}.conf`,n=document.createElement("a");n.href=e,n.download=i,n.click()}},computed:{getBlob(){return URL.createObjectURL(this.blob)}}},w=["data-bs-theme"],x={class:"m-auto text-body",style:{width:"500px"}},C={key:0,class:"text-center position-relative",style:{}},U={class:"position-absolute w-100 h-100 top-0 start-0 d-flex animate__animated animate__fadeInUp",style:{"animation-delay":"0.1s"}},I={class:"m-auto"},L={key:1,class:"d-flex align-items-center flex-column gap-3"},B={class:"h1 dashboardLogo text-center animate__animated animate__fadeInUp"},k={id:"qrcode",class:"rounded-3 shadow animate__animated animate__fadeInUp mb-3",ref:"qrcode"},D={class:"text-muted animate__animated animate__fadeInUp mb-1",style:{"animation-delay":"0.2s"}},R=["download","href"];function j(o,e,i,n,s,l){const a=b("LocaleText");return f(),m("div",{class:"container-fluid login-container-fluid d-flex main pt-5 overflow-scroll","data-bs-theme":this.theme},[t("div",x,[this.peerConfiguration?(f(),m("div",L,[t("div",B,[e[1]||(e[1]=t("h6",null,"WGDashboard",-1)),c(a,{t:"Scan QR Code with the WireGuard App to add peer"})]),t("canvas",k,null,512),t("p",D,[c(a,{t:"or click the button below to download the "}),e[2]||(e[2]=t("samp",null,".conf",-1)),c(a,{t:" file"})]),t("a",{download:this.peerConfiguration.fileName+".conf",href:l.getBlob,class:"btn btn-lg bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle animate__animated animate__fadeInUp shadow-sm",style:{"animation-delay":"0.25s"}},e[3]||(e[3]=[t("i",{class:"bi bi-download"},null,-1)]),8,R)])):(f(),m("div",C,[e[0]||(e[0]=t("div",{class:"animate__animated animate__fadeInUp"},[t("h1",{style:{"font-size":"20rem",filter:"blur(1rem)","animation-duration":"7s"},class:"animate__animated animate__flash animate__infinite"},[t("i",{class:"bi bi-file-binary"})])],-1)),t("div",U,[t("h3",I,[c(a,{t:"Oh no... This link is either expired or invalid."})])])]))])],8,w)}const N=_(g,[["render",j],["__scopeId","data-v-1b44aacd"]]);export{N as default};

src/static/app/dist/assets/storageMount.vue_vue_type_style_index_0_scoped_a382214a_lang-0Ox3ogTv.js

@@ -1 +1 @@
-import{_ as i,u as m,r as p,p as b,a as o,c as t,d as g,w as v,n as x,b as r,t as n,e as f,T as C,q as w}from"./index-BNjqUPQW.js";const y={class:"text-muted me-2"},_={class:"fw-bold"},k={__name:"cpuCore",props:{core_number:Number,percentage:Number,align:Boolean,square:Boolean},setup(e){m(c=>({e901480c:u.value}));const l=e,s=p(!1),u=b(()=>l.square?"40px":"25px");return(c,a)=>(o(),t("div",{class:"flex-grow-1 square rounded-3 border position-relative p-2",onMouseenter:a[0]||(a[0]=d=>s.value=!0),onMouseleave:a[1]||(a[1]=d=>s.value=!1),style:w({"background-color":`rgb(13 110 253 / ${e.percentage*10}%)`})},[g(C,{name:"zoomReversed"},{default:v(()=>[s.value?(o(),t("div",{key:0,style:{"white-space":"nowrap"},class:x(["floatingLabel z-3 border position-absolute d-block p-1 px-2 bg-body text-body rounded-3 border shadow d-flex",[e.align?"end-0":"start-0"]])},[r("small",y," Core #"+n(e.core_number+1),1),r("small",_,n(e.percentage)+"% ",1)],2)):f("",!0)]),_:1})],36))}},B=i(k,[["__scopeId","data-v-70102637"]]);export{B as C};
+import{_ as i,u as m,r as p,p as b,a as o,c as t,d as g,w as v,n as x,b as r,t as n,e as f,T as C,q as w}from"./index-7qLsecvh.js";const y={class:"text-muted me-2"},_={class:"fw-bold"},k={__name:"cpuCore",props:{core_number:Number,percentage:Number,align:Boolean,square:Boolean},setup(e){m(c=>({e901480c:u.value}));const l=e,s=p(!1),u=b(()=>l.square?"40px":"25px");return(c,a)=>(o(),t("div",{class:"flex-grow-1 square rounded-3 border position-relative p-2",onMouseenter:a[0]||(a[0]=d=>s.value=!0),onMouseleave:a[1]||(a[1]=d=>s.value=!1),style:w({"background-color":`rgb(13 110 253 / ${e.percentage*10}%)`})},[g(C,{name:"zoomReversed"},{default:v(()=>[s.value?(o(),t("div",{key:0,style:{"white-space":"nowrap"},class:x(["floatingLabel z-3 border position-absolute d-block p-1 px-2 bg-body text-body rounded-3 border shadow d-flex",[e.align?"end-0":"start-0"]])},[r("small",y," Core #"+n(e.core_number+1),1),r("small",_,n(e.percentage)+"% ",1)],2)):f("",!0)]),_:1})],36))}},B=i(k,[["__scopeId","data-v-70102637"]]);export{B as C};

src/static/app/dist/assets/systemStatus-B37ThmTH.css

@@ -0,0 +1 @@
+.title[data-v-ffe5ad8f]{height:18px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.process-move[data-v-0cfce7b0],.process-enter-active[data-v-0cfce7b0],.process-leave-active[data-v-0cfce7b0]{transition:all .5s cubic-bezier(.42,0,.22,1)}.process-enter-from[data-v-0cfce7b0],.process-leave-to[data-v-0cfce7b0]{opacity:0;transform:scale(.9)}.process-leave-active[data-v-0cfce7b0]{position:absolute;width:100%}.progress-bar[data-v-0cfce7b0]{width:0;transition:all 1s cubic-bezier(.42,0,.22,1)}.fadeIn[data-v-0cfce7b0]{opacity:0;animation:fadeIn-0cfce7b0 .5s forwards cubic-bezier(.42,0,.22,1)}@keyframes fadeIn-0cfce7b0{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

src/static/app/dist/assets/systemStatus-BFeEjpKW.css

@@ -1 +0,0 @@
-.title[data-v-ffe5ad8f]{height:18px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.process-move[data-v-727ce0e8],.process-enter-active[data-v-727ce0e8],.process-leave-active[data-v-727ce0e8]{transition:all .5s cubic-bezier(.42,0,.22,1)}.process-enter-from[data-v-727ce0e8],.process-leave-to[data-v-727ce0e8]{opacity:0;transform:scale(.9)}.process-leave-active[data-v-727ce0e8]{position:absolute;width:100%}.progress-bar[data-v-727ce0e8]{width:0;transition:all 1s cubic-bezier(.42,0,.22,1)}.fadeIn[data-v-727ce0e8]{opacity:0;animation:fadeIn-727ce0e8 .5s forwards cubic-bezier(.42,0,.22,1)}@keyframes fadeIn-727ce0e8{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

src/static/app/dist/assets/totp-BVPXbklw.js

@@ -1 +1 @@
-import{_ as h,D as m,g as p,z as f,c as b,b as t,d as i,t as _,m as v,x as g,i as d,w as r,j as c,a as n}from"./index-BNjqUPQW.js";import{b as x}from"./browser-CjSdxGTc.js";import{L as y}from"./localeText-C2kjj_RP.js";const T={name:"totp",components:{LocaleText:y},async setup(){const s=m();let e="";return await p("/api/Welcome_GetTotpLink",{},a=>{a.status&&(e=a.data)}),{l:e,store:s}},mounted(){this.l&&x.toCanvas(document.getElementById("qrcode"),this.l,function(s){})},data(){return{totp:"",totpInvalidMessage:"",verified:!1}},methods:{validateTotp(){}},watch:{totp(s){const e=document.querySelector("#totp");e.classList.remove("is-invalid","is-valid"),s.length===6&&(console.log(s),/[0-9]{6}/.test(s)?f("/api/Welcome_VerifyTotpLink",{totp:s},a=>{a.status?(this.verified=!0,e.classList.add("is-valid"),this.$emit("verified")):(e.classList.add("is-invalid"),this.totpInvalidMessage="TOTP does not match.")}):(e.classList.add("is-invalid"),this.totpInvalidMessage="TOTP can only contain numbers"))}}},k=["data-bs-theme"],w={class:"m-auto text-body",style:{width:"500px"}},L={class:"d-flex flex-column"},M={class:"dashboardLogo display-4"},C={class:"mb-2"},P={class:"text-muted"},I={class:"p-3 bg-body-secondary rounded-3 border mb-3"},O={class:"text-muted mb-0"},B=["href"],$={style:{"line-break":"anywhere"}},D={for:"totp",class:"mb-2"},S={class:"text-muted"},q={class:"form-group mb-2"},A=["disabled"],E={class:"invalid-feedback"},F={class:"valid-feedback"},R={class:"d-flex gap-3 mt-5 flex-column"};function G(s,e,a,N,W,j){const o=c("LocaleText"),l=c("RouterLink");return n(),b("div",{class:"container-fluid login-container-fluid d-flex main pt-5 overflow-scroll","data-bs-theme":this.store.Configuration.Server.dashboard_theme},[t("div",w,[t("div",L,[t("div",null,[t("h1",M,[i(o,{t:"Multi-Factor Authentication (MFA)"})]),t("p",C,[t("small",P,[i(o,{t:"1. Please scan the following QR Code to generate TOTP with your choice of authenticator"})])]),e[1]||(e[1]=t("canvas",{id:"qrcode",class:"rounded-3 mb-2"},null,-1)),t("div",I,[t("p",O,[t("small",null,[i(o,{t:"Or you can click the link below:"})])]),t("a",{href:this.l},[t("code",$,_(this.l),1)],8,B)]),t("label",D,[t("small",S,[i(o,{t:"2. Enter the TOTP generated by your authenticator to verify"})])]),t("div",q,[v(t("input",{class:"form-control text-center totp",id:"totp",maxlength:"6",type:"text",inputmode:"numeric",autocomplete:"one-time-code","onUpdate:modelValue":e[0]||(e[0]=u=>this.totp=u),disabled:this.verified},null,8,A),[[g,this.totp]]),t("div",E,[i(o,{t:this.totpInvalidMessage},null,8,["t"])]),t("div",F,[i(o,{t:"TOTP verified!"})])])]),e[4]||(e[4]=t("hr",null,null,-1)),t("div",R,[this.verified?(n(),d(l,{key:1,to:"/",class:"btn btn-dark btn-lg d-flex btn-brand shadow align-items-center flex-grow-1 rounded-3"},{default:r(()=>[i(o,{t:"Complete"}),e[3]||(e[3]=t("i",{class:"bi bi-chevron-right ms-auto"},null,-1))]),_:1})):(n(),d(l,{key:0,to:"/",class:"btn bg-secondary-subtle text-secondary-emphasis rounded-3 flex-grow-1 btn-lg border-1 border-secondary-subtle shadow d-flex"},{default:r(()=>[i(o,{t:"I don't need MFA"}),e[2]||(e[2]=t("i",{class:"bi bi-chevron-right ms-auto"},null,-1))]),_:1}))])])])],8,k)}const V=h(T,[["render",G]]);export{V as default};
+import{_ as h,D as m,g as p,z as f,c as b,b as t,d as i,t as _,m as v,x as g,i as d,w as r,j as c,a as n}from"./index-7qLsecvh.js";import{b as x}from"./browser-CjSdxGTc.js";import{L as y}from"./localeText-BguG5zGd.js";const T={name:"totp",components:{LocaleText:y},async setup(){const s=m();let e="";return await p("/api/Welcome_GetTotpLink",{},a=>{a.status&&(e=a.data)}),{l:e,store:s}},mounted(){this.l&&x.toCanvas(document.getElementById("qrcode"),this.l,function(s){})},data(){return{totp:"",totpInvalidMessage:"",verified:!1}},methods:{validateTotp(){}},watch:{totp(s){const e=document.querySelector("#totp");e.classList.remove("is-invalid","is-valid"),s.length===6&&(console.log(s),/[0-9]{6}/.test(s)?f("/api/Welcome_VerifyTotpLink",{totp:s},a=>{a.status?(this.verified=!0,e.classList.add("is-valid"),this.$emit("verified")):(e.classList.add("is-invalid"),this.totpInvalidMessage="TOTP does not match.")}):(e.classList.add("is-invalid"),this.totpInvalidMessage="TOTP can only contain numbers"))}}},k=["data-bs-theme"],w={class:"m-auto text-body",style:{width:"500px"}},L={class:"d-flex flex-column"},M={class:"dashboardLogo display-4"},C={class:"mb-2"},P={class:"text-muted"},I={class:"p-3 bg-body-secondary rounded-3 border mb-3"},O={class:"text-muted mb-0"},B=["href"],$={style:{"line-break":"anywhere"}},D={for:"totp",class:"mb-2"},S={class:"text-muted"},q={class:"form-group mb-2"},A=["disabled"],E={class:"invalid-feedback"},F={class:"valid-feedback"},R={class:"d-flex gap-3 mt-5 flex-column"};function G(s,e,a,N,W,j){const o=c("LocaleText"),l=c("RouterLink");return n(),b("div",{class:"container-fluid login-container-fluid d-flex main pt-5 overflow-scroll","data-bs-theme":this.store.Configuration.Server.dashboard_theme},[t("div",w,[t("div",L,[t("div",null,[t("h1",M,[i(o,{t:"Multi-Factor Authentication (MFA)"})]),t("p",C,[t("small",P,[i(o,{t:"1. Please scan the following QR Code to generate TOTP with your choice of authenticator"})])]),e[1]||(e[1]=t("canvas",{id:"qrcode",class:"rounded-3 mb-2"},null,-1)),t("div",I,[t("p",O,[t("small",null,[i(o,{t:"Or you can click the link below:"})])]),t("a",{href:this.l},[t("code",$,_(this.l),1)],8,B)]),t("label",D,[t("small",S,[i(o,{t:"2. Enter the TOTP generated by your authenticator to verify"})])]),t("div",q,[v(t("input",{class:"form-control text-center totp",id:"totp",maxlength:"6",type:"text",inputmode:"numeric",autocomplete:"one-time-code","onUpdate:modelValue":e[0]||(e[0]=u=>this.totp=u),disabled:this.verified},null,8,A),[[g,this.totp]]),t("div",E,[i(o,{t:this.totpInvalidMessage},null,8,["t"])]),t("div",F,[i(o,{t:"TOTP verified!"})])])]),e[4]||(e[4]=t("hr",null,null,-1)),t("div",R,[this.verified?(n(),d(l,{key:1,to:"/",class:"btn btn-dark btn-lg d-flex btn-brand shadow align-items-center flex-grow-1 rounded-3"},{default:r(()=>[i(o,{t:"Complete"}),e[3]||(e[3]=t("i",{class:"bi bi-chevron-right ms-auto"},null,-1))]),_:1})):(n(),d(l,{key:0,to:"/",class:"btn bg-secondary-subtle text-secondary-emphasis rounded-3 flex-grow-1 btn-lg border-1 border-secondary-subtle shadow d-flex"},{default:r(()=>[i(o,{t:"I don't need MFA"}),e[2]||(e[2]=t("i",{class:"bi bi-chevron-right ms-auto"},null,-1))]),_:1}))])])])],8,k)}const V=h(T,[["render",G]]);export{V as default};

src/static/app/dist/assets/traceroute-Dc3TIsZW.js

@@ -1 +1 @@
-import{_ as h,W as g,g as b,c as o,b as t,d as n,m as y,x as f,C as x,w as r,T as c,a as l,f as v,F as u,h as m,n as T,q as k,t as i,j as _}from"./index-BNjqUPQW.js";import{O as A}from"./osmap-jUagLZ3S.js";import{L as w}from"./localeText-C2kjj_RP.js";const R={name:"traceroute",components:{LocaleText:w,OSMap:A},data(){return{tracing:!1,ipAddress:void 0,tracerouteResult:void 0}},setup(){return{store:g()}},methods:{execute(){this.ipAddress&&(this.tracing=!0,this.tracerouteResult=void 0,b("/api/traceroute/execute",{ipAddress:this.ipAddress},d=>{d.status?this.tracerouteResult=d.data:this.store.newMessage("Server",d.message,"danger"),this.tracing=!1}))}}},M={class:"mt-md-5 mt-3 text-body"},S={class:"container-md"},$={class:"mb-3 text-body"},C={class:"d-flex gap-2 mb-3 flex-column"},L={class:"flex-grow-1"},P={class:"mb-1 text-muted",for:"ipAddress"},O=["disabled"],V=["disabled"],B={key:0,class:"d-block"},I={key:1,class:"d-block"},N={class:"position-relative"},z={key:"pingPlaceholder"},D={key:1},E={key:"table",class:"w-100 mt-2"},F={class:"table table-sm rounded-3 w-100"},G={scope:"col"},H={scope:"col"},K={scope:"col"},W={scope:"col"},j={scope:"col"},q={scope:"col"},U={key:0},J={key:1};function Q(d,s,X,Y,Z,tt){const a=_("LocaleText"),p=_("OSMap");return l(),o("div",M,[t("div",S,[t("h3",$,[n(a,{t:"Traceroute"})]),t("div",C,[t("div",L,[t("label",P,[t("small",null,[n(a,{t:"Enter IP Address / Hostname"})])]),y(t("input",{disabled:this.tracing,id:"ipAddress",class:"form-control rounded-3","onUpdate:modelValue":s[0]||(s[0]=e=>this.ipAddress=e),onKeyup:s[1]||(s[1]=x(e=>this.execute(),["enter"])),type:"text"},null,40,O),[[f,this.ipAddress]])]),t("button",{class:"btn btn-primary rounded-3 position-relative flex-grow-1",disabled:this.tracing||!this.ipAddress,onClick:s[2]||(s[2]=e=>this.execute())},[n(c,{name:"slide"},{default:r(()=>[this.tracing?(l(),o("span",I,s[4]||(s[4]=[t("span",{class:"spinner-border spinner-border-sm","aria-hidden":"true"},null,-1),t("span",{class:"visually-hidden",role:"status"},"Loading...",-1)]))):(l(),o("span",B,s[3]||(s[3]=[t("i",{class:"bi bi-person-walking me-2"},null,-1),v("Trace! ")])))]),_:1})],8,V)]),t("div",N,[n(c,{name:"ping"},{default:r(()=>[this.tracerouteResult?(l(),o("div",D,[n(p,{d:this.tracerouteResult,type:"traceroute"},null,8,["d"]),t("div",E,[t("table",F,[t("thead",null,[t("tr",null,[t("th",G,[n(a,{t:"Hop"})]),t("th",H,[n(a,{t:"IP Address"})]),t("th",K,[n(a,{t:"Average RTT (ms)"})]),t("th",W,[n(a,{t:"Min RTT (ms)"})]),t("th",j,[n(a,{t:"Max RTT (ms)"})]),t("th",q,[n(a,{t:"Geolocation"})])])]),t("tbody",null,[(l(!0),o(u,null,m(this.tracerouteResult,(e,et)=>(l(),o("tr",null,[t("td",null,[t("small",null,i(e.hop),1)]),t("td",null,[t("small",null,[t("samp",null,i(e.ip),1)])]),t("td",null,[t("small",null,[t("samp",null,i(e.avg_rtt),1)])]),t("td",null,[t("small",null,[t("samp",null,i(e.min_rtt),1)])]),t("td",null,[t("small",null,[t("samp",null,i(e.max_rtt),1)])]),t("td",null,[e.geo.city&&e.geo.country?(l(),o("span",U,[t("small",null,i(e.geo.city)+", "+i(e.geo.country),1)])):(l(),o("span",J," - "))])]))),256))])])])])):(l(),o("div",z,[s[5]||(s[5]=t("div",{class:"pingPlaceholder bg-body-secondary rounded-3 mb-3",style:{height:"300px !important"}},null,-1)),(l(),o(u,null,m(5,e=>t("div",{class:T(["pingPlaceholder bg-body-secondary rounded-3 mb-3",{"animate__animated animate__flash animate__slower animate__infinite":this.tracing}]),style:k({"animation-delay":`${e*.05}s`})},null,6)),64))]))]),_:1})])])])}const lt=h(R,[["render",Q],["__scopeId","data-v-3e75b4d4"]]);export{lt as default};
+import{_ as h,W as g,g as b,c as o,b as t,d as n,m as y,x as f,H as x,w as r,T as c,a as l,f as v,F as u,h as m,n as T,q as k,t as i,j as _}from"./index-7qLsecvh.js";import{e as A}from"./osmap-CVrWGfN8.js";import{L as w}from"./localeText-BguG5zGd.js";const R={name:"traceroute",components:{LocaleText:w,OSMap:A},data(){return{tracing:!1,ipAddress:void 0,tracerouteResult:void 0}},setup(){return{store:g()}},methods:{execute(){this.ipAddress&&(this.tracing=!0,this.tracerouteResult=void 0,b("/api/traceroute/execute",{ipAddress:this.ipAddress},d=>{d.status?this.tracerouteResult=d.data:this.store.newMessage("Server",d.message,"danger"),this.tracing=!1}))}}},M={class:"mt-md-5 mt-3 text-body"},S={class:"container-md"},$={class:"mb-3 text-body"},L={class:"d-flex gap-2 mb-3 flex-column"},C={class:"flex-grow-1"},P={class:"mb-1 text-muted",for:"ipAddress"},V=["disabled"],B=["disabled"],H={key:0,class:"d-block"},I={key:1,class:"d-block"},N={class:"position-relative"},O={key:"pingPlaceholder"},z={key:1},D={key:"table",class:"w-100 mt-2"},E={class:"table table-sm rounded-3 w-100"},F={scope:"col"},G={scope:"col"},K={scope:"col"},W={scope:"col"},j={scope:"col"},q={scope:"col"},U={key:0},J={key:1};function Q(d,s,X,Y,Z,tt){const a=_("LocaleText"),p=_("OSMap");return l(),o("div",M,[t("div",S,[t("h3",$,[n(a,{t:"Traceroute"})]),t("div",L,[t("div",C,[t("label",P,[t("small",null,[n(a,{t:"Enter IP Address / Hostname"})])]),y(t("input",{disabled:this.tracing,id:"ipAddress",class:"form-control rounded-3","onUpdate:modelValue":s[0]||(s[0]=e=>this.ipAddress=e),onKeyup:s[1]||(s[1]=x(e=>this.execute(),["enter"])),type:"text"},null,40,V),[[f,this.ipAddress]])]),t("button",{class:"btn btn-primary rounded-3 position-relative flex-grow-1",disabled:this.tracing||!this.ipAddress,onClick:s[2]||(s[2]=e=>this.execute())},[n(c,{name:"slide"},{default:r(()=>[this.tracing?(l(),o("span",I,s[4]||(s[4]=[t("span",{class:"spinner-border spinner-border-sm","aria-hidden":"true"},null,-1),t("span",{class:"visually-hidden",role:"status"},"Loading...",-1)]))):(l(),o("span",H,s[3]||(s[3]=[t("i",{class:"bi bi-person-walking me-2"},null,-1),v("Trace! ")])))]),_:1})],8,B)]),t("div",N,[n(c,{name:"ping"},{default:r(()=>[this.tracerouteResult?(l(),o("div",z,[n(p,{d:this.tracerouteResult,type:"traceroute"},null,8,["d"]),t("div",D,[t("table",E,[t("thead",null,[t("tr",null,[t("th",F,[n(a,{t:"Hop"})]),t("th",G,[n(a,{t:"IP Address"})]),t("th",K,[n(a,{t:"Average RTT (ms)"})]),t("th",W,[n(a,{t:"Min RTT (ms)"})]),t("th",j,[n(a,{t:"Max RTT (ms)"})]),t("th",q,[n(a,{t:"Geolocation"})])])]),t("tbody",null,[(l(!0),o(u,null,m(this.tracerouteResult,(e,et)=>(l(),o("tr",null,[t("td",null,[t("small",null,i(e.hop),1)]),t("td",null,[t("small",null,[t("samp",null,i(e.ip),1)])]),t("td",null,[t("small",null,[t("samp",null,i(e.avg_rtt),1)])]),t("td",null,[t("small",null,[t("samp",null,i(e.min_rtt),1)])]),t("td",null,[t("small",null,[t("samp",null,i(e.max_rtt),1)])]),t("td",null,[e.geo.city&&e.geo.country?(l(),o("span",U,[t("small",null,i(e.geo.city)+", "+i(e.geo.country),1)])):(l(),o("span",J," - "))])]))),256))])])])])):(l(),o("div",O,[s[5]||(s[5]=t("div",{class:"pingPlaceholder bg-body-secondary rounded-3 mb-3",style:{height:"300px !important"}},null,-1)),(l(),o(u,null,m(5,e=>t("div",{class:T(["pingPlaceholder bg-body-secondary rounded-3 mb-3",{"animate__animated animate__flash animate__slower animate__infinite":this.tracing}]),style:k({"animation-delay":`${e*.05}s`})},null,6)),64))]))]),_:1})])])])}const lt=h(R,[["render",Q],["__scopeId","data-v-3e75b4d4"]]);export{lt as default};

src/static/app/dist/index.html

@@ -10,8 +10,8 @@
 		<link rel="icon" href="/static/app/dist/favicon.png">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>WGDashboard</title>
-		<script type="module" crossorigin src="/static/app/dist/assets/index-BNjqUPQW.js"></script>
+		<script type="module" crossorigin src="/static/app/dist/assets/index-7qLsecvh.js"></script>
-		<link rel="stylesheet" crossorigin href="/static/app/dist/assets/index-C1jOb5RQ.css">
+		<link rel="stylesheet" crossorigin href="/static/app/dist/assets/index-D6m-8oA_.css">
 	</head>
 	<body>
 		<div id="app"></div>

src/static/app/package-lock.json

@@ -27,6 +27,7 @@
         "qrcode": "^1.5.3",
         "qrcodejs": "^1.0.0",
         "simple-code-editor": "^2.0.9",
+        "socket.io-client": "^4.8.1",
         "uuid": "^9.0.1",
         "vue": "^3.4.29",
         "vue-chartjs": "^5.3.0",
@@ -1044,6 +1045,12 @@
         "win32"
       ]
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/@tootallnate/once/-/once-2.0.0.tgz",
@@ -2547,6 +2554,28 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmmirror.com/engine.io-client/-/engine.io-client-6.6.3.tgz",
+      "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmmirror.com/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -7055,6 +7084,34 @@
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmmirror.com/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmmirror.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -7704,6 +7761,27 @@
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xml-utils": {
       "version": "1.10.1",
       "resolved": "https://registry.npmmirror.com/xml-utils/-/xml-utils-1.10.1.tgz",
@@ -7717,6 +7795,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",

src/static/app/package.json

@@ -30,6 +30,7 @@
     "qrcode": "^1.5.3",
     "qrcodejs": "^1.0.0",
     "simple-code-editor": "^2.0.9",
+    "socket.io-client": "^4.8.1",
     "uuid": "^9.0.1",
     "vue": "^3.4.29",
     "vue-chartjs": "^5.3.0",

src/static/app/src/components/map/osmap.vue

@@ -85,6 +85,7 @@ export default {
 				const lineFeature = new Feature({
 					geometry: lineString
 				});
+				console.log(lineString)
 				vectorSource.addFeature(lineFeature);
 				const vectorLayer = new Vector({
 					source: vectorSource,

src/static/app/src/components/map/osmapSocket.vue

@@ -0,0 +1,141 @@
+<script setup>
+import "ol/ol.css"
+import Map from 'ol/Map.js';
+import OSM from 'ol/source/OSM.js';
+import TileLayer from 'ol/layer/Tile.js';
+import View from 'ol/View.js';
+import {Feature} from "ol";
+import {fromLonLat} from "ol/proj"
+import {LineString, Point} from "ol/geom"
+import {Circle, Fill, Stroke, Style, Text} from "ol/style.js";
+import {Vector} from "ol/layer"
+import {Vector as SourceVector} from "ol/source"
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import {computed, onMounted, ref, watch} from "vue";
+import LocaleText from "@/components/text/localeText.vue";
+const store = DashboardConfigurationStore()
+const props = defineProps({
+	type: "",
+	d: Object || Array
+})
+const osmAvailable = ref(false)
+
+await fetch("https://tile.openstreetmap.org/", {
+	signal: AbortSignal.timeout(1500)
+})
+.then(() => {
+	osmAvailable.value = true
+})
+.catch((e) => {
+	console.log(e)
+})
+if (osmAvailable.value){
+	const mapView = new View({
+		center: fromLonLat([179.47, 57.89]),
+		zoom: 1,
+	})
+	const map = new Map({
+		layers: [
+			new TileLayer({
+				source: new OSM(),
+			}),
+		],
+		view: mapView,
+	});
+	const vectorLayer = new Vector({
+		style: function(feature) {
+			if (feature.getGeometry().getType() === 'Point') {
+				return new Style({
+					image: new Circle({
+						radius: 10,
+						fill: new Fill({ color: feature.get("last") ? '#dc3545':'#0d6efd' }),
+						stroke: new Stroke({ color: 'white', width: 5 }),
+					})
+				});
+			} else if (feature.getGeometry().getType() === 'LineString') {
+				return new Style({
+					stroke: new Stroke({
+						color: '#0d6efd',
+						width: 2
+					})
+				});
+			}
+		}
+	});
+	map.addLayer(vectorLayer);
+	onMounted(() => {
+		map.setTarget('map')
+		if (store.Configuration.Server.dashboard_theme === 'dark'){
+			map.on('postcompose',() => {
+				document.querySelector('#map').style.filter="grayscale(80%) invert(100%)";
+			});
+		}
+	})
+	let sourceVector = new SourceVector()
+	let cords = []
+	let lineString = new LineString(cords)
+	let lineStringFeature = new Feature({
+		geometry: lineString
+	})
+	
+	sourceVector.addFeature(lineStringFeature)
+	let ips = ref([])
+	vectorLayer.setSource(sourceVector);
+	watch(() => {
+		return props.d
+	}, (newData) => {
+		if (newData.length > 0){
+			let latestResultItem = newData[newData.length - 1]
+			if (latestResultItem.geo && latestResultItem.geo.status === 'success'){
+				let cord = fromLonLat([latestResultItem.geo.lon, latestResultItem.geo.lat])
+				if (!ips.value.find(x => x === latestResultItem.address)){
+					cords.push(cord)
+					lineString.setCoordinates(cords)
+					lineStringFeature.setGeometry(lineString)
+					sourceVector.removeFeature(lineStringFeature)
+					sourceVector.addFeature(lineStringFeature)
+					console.log(lineStringFeature)
+					sourceVector.addFeature(new Feature({
+						geometry: new Point(cord),
+						last: false,
+					}));
+					ips.value.push(latestResultItem.address)
+				}
+				mapView.animate({ center: cord })
+				mapView.animate({ zoom: 10 })
+			}
+		}else {
+			sourceVector.clear()
+			cords = []
+			ips.value = []
+		}
+	},{
+		deep: true,
+	})
+}
+</script>
+
+<template>
+	<div class="bg-body-secondary rounded-3 mb-3 d-flex animate__animated animate__fadeIn"
+	     v-if="!osmAvailable"
+	     style="height: 300px"
+	>
+		<div class="m-auto">
+			<small class="text-muted">
+				<LocaleText t="Sorry, OpenStreetMap is not available"></LocaleText>
+			</small>
+		</div>
+	</div>
+
+	<div id="map" class="w-100 rounded-3" v-else></div>
+</template>
+
+<style scoped>
+.ol-layer canvas{
+	border-radius: var(--bs-border-radius-lg) !important;
+}
+
+#map{
+	height: 300px;
+}
+</style>

src/static/app/src/main.js

@@ -2,7 +2,7 @@ import './css/dashboard.css'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap/dist/js/bootstrap.js'
 import 'bootstrap-icons/font/bootstrap-icons.css'
-import 'animate.css/animate.compat.css'
+import 'animate.css/animate.css'
 import '@vuepic/vue-datepicker/dist/main.css'
 import {createApp, markRaw} from 'vue'
 import { createPinia } from 'pinia'

src/static/app/src/views/ping.vue

@@ -3,10 +3,15 @@ import {fetchGet} from "@/utilities/fetch.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 import LocaleText from "@/components/text/localeText.vue";
 import OSMap from "@/components/map/osmap.vue";
+import { io } from "socket.io-client"
+import {v4} from "uuid";
+import {ref} from "vue";
+import OsmapSocket from "@/components/map/osmapSocket.vue";
+
 
 export default {
 	name: "ping",
-	components: {OSMap, LocaleText},
+	components: {OsmapSocket, OSMap, LocaleText},
 	data(){
 		return {
 			loading: false,
@@ -14,43 +19,63 @@ export default {
 			selectedConfiguration: undefined,
 			selectedPeer: undefined,
 			selectedIp: undefined,
-			count: 4,
 			pingResult: undefined,
-			pinging: false
+			
 		}
 	},
 	setup(){
 		const store = DashboardConfigurationStore();
-		return {store}
+		let sio;
+		const socketResult = ref({
+			pingTotalSentCount: 0,
+			pingReceivedSentCount: 0,
+			pingLostCount: 0,
+			pingResults: []
+		})
+		const count = ref(4)
+		const pinging = ref(false)
+		try{
+			sio = io();
+			sio.connect()
+			console.info("Successfully connected to socket.io")
+		}catch (e){
+			console.assert("Failed to connect socket.io")
+		}
+		sio.on('pingResponse', (...arg) => {
+			let data = arg[0].data
+			data.id = v4().toString()
+			socketResult.value.pingResults.push(data)
+			if (socketResult.value.pingResults.length === count.value){
+				pinging.value = false
+			}
+		})
+		return {store, sio, socketResult, count, pinging}
+	},
+	beforeUnmount() {
+		if(this.sio && this.sio.connected){
+			this.sio.disconnect()
+			console.info("Successfully disconnected from socket.io")
+		}	
 	},
 	mounted() {
 		fetchGet("/api/ping/getAllPeersIpAddress", {}, (res)=> {
 			if (res.status){
 				this.loading = true;
 				this.cips = res.data;
-				console.log(this.cips)
 			}
 		});
 	},
 	methods: {
-		execute(){
+		executeSocket(){
-			if (this.selectedIp){
+			if (this.sio.connected){
+				this.socketResult.pingResults = [];
 				this.pinging = true;
-				this.pingResult = undefined
+				this.sio.emit('ping', {
-				fetchGet("/api/ping/execute", {
 					ipAddress: this.selectedIp,
 					count: this.count
-				}, (res) => {
+				});
-					if (res.status){
-						this.pingResult = res.data
-					}else{
-						this.store.newMessage("Server", res.message, "danger")
-					}
-					this.pinging = false
-				})
-				
 			}
-{}		}	
+		}
 	},
 	watch: {
 		selectedConfiguration(){
@@ -147,7 +172,7 @@ export default {
 					</div>
 					<button class="btn btn-primary rounded-3 mt-3 position-relative" 
 					        :disabled="!this.selectedIp || this.pinging"
-					        @click="this.execute()">
+					        @click="this.executeSocket()">
 						<Transition name="slide">
 							<span v-if="!this.pinging" class="d-block">
 								<i class="bi bi-person-walking me-2"></i>Ping!
@@ -157,83 +182,129 @@ export default {
 								<span class="visually-hidden" role="status">Loading...</span>
 							</span>
 						</Transition>
-						
-						
-						
 					</button>
 				</div>
 				
-				<div class="col-sm-8 position-relative">
+				<div class="col-sm-8 position-relative d-flex flex-column gap-2 animate__fadeIn animate__animated ">
-					<Transition name="ping">
+					<Suspense>
-						<div v-if="!this.pingResult" key="pingPlaceholder">
+						<OsmapSocket :d="this.socketResult.pingResults"
-							<div class="pingPlaceholder bg-body-secondary rounded-3 mb-3"
+						             key="OSMap"
+						             type="traceroute"></OsmapSocket>
+						<template #fallback>
+							<div class="bg-body-secondary rounded-3 mb-3 d-flex"
+							     key="OSMapPlaceholder"
 							     style="height: 300px"
-							></div>
+							>
-							<div class="pingPlaceholder bg-body-secondary rounded-3 mb-3"
+								<div class="spinner-border m-auto"
-							      :class="{'animate__animated animate__flash animate__slower animate__infinite': this.pinging}"
+								     style="animation-duration: 2s"
-							     :style="{'animation-delay': `${x*0.15}s`}"
+								     role="status">
-							     v-for="x in 4" ></div>
+									<span class="visually-hidden">Loading...</span>
-							
+								</div>
-						</div>
+							</div>
-
+						</template>
-						<div v-else key="pingResult" class="d-flex flex-column gap-2 w-100">
+					</Suspense>
-							<OSMap :d="this.pingResult" v-if="this.pingResult.geo && this.pingResult.geo.status === 'success'"></OSMap>
+					<div key="pingResultTable">
-							<div class="card rounded-3 bg-transparent shadow-sm animate__animated animate__fadeIn" style="animation-delay: 0.15s">
+						<div key="table" class="w-100 mt-2">
-								<div class="card-body row">
+							<table class="table table-sm rounded-3 w-100">
-									<div class="col-sm">
+								<thead>
-										<p class="mb-0 text-muted">
+								<tr>
+									
+									<th scope="col">
+										<LocaleText t="IP Address"></LocaleText>
+									</th>
+									<th scope="col">
+										<LocaleText t="Is Alive?"></LocaleText>
+									</th>
+									<th scope="col">
+										<LocaleText t="Round-Trip Time (ms)"></LocaleText>
+									</th>
+									
+									<th scope="col">
+										<LocaleText t="Geolocation"></LocaleText>
+									</th>
+								</tr>
+								</thead>
+								<tbody>
+									<tr v-for="(hop, key) in socketResult.pingResults">
+										<td>
+											<small>{{hop.address}}</small>
+										</td>
+										<td>
 											<small>
-												<LocaleText t="IP Address"></LocaleText>
+												<i class="bi" 
+												   :class="[hop.is_alive ? 'bi-check-circle-fill text-success' :
+												    'bi-x-circle-fill text-danger']"></i>
 											</small>
-										</p>
+										</td>
-										{{this.pingResult.address}}
+										<td>
-									</div>
+											<small>{{ hop.is_alive ? hop.max_rtt : ''}}</small>
-									<div class="col-sm" v-if="this.pingResult.geo && this.pingResult.geo.status === 'success'">
+										</td>
-										<p class="mb-0 text-muted">
+										<td>
+											<small v-if="hop.geo && hop.geo.status === 'success'">
+												{{ hop.geo.city }}, {{ hop.geo.country }}</small>
+										</td>
+									</tr>
+									<tr v-if="socketResult.pingResults.length === 0">
+										<td colspan="4" class="text-muted text-center">
 											<small>
-												<LocaleText t="Geolocation"></LocaleText>
+												<LocaleText t="Ping results will show here"></LocaleText>
 											</small>
-										</p>
+										</td>
-										{{this.pingResult.geo.city}}, {{this.pingResult.geo.country}}
+									</tr>
-									</div>
+									<tr class="bg-body-tertiary border-top fw-bold" style="border-top: 2px solid !important;">
-								</div>
+										<td>
-							</div>
+											<small>
-							<div class="card rounded-3 bg-transparent shadow-sm animate__animated animate__fadeIn" style="animation-delay: 0.3s">
+												<LocaleText t="Sent Package(s)"></LocaleText>
-								<div class="card-body">
+											</small>
-									<p class="mb-0 text-muted"><small>Is Alive</small></p>
+										</td>
-									<span :class="[this.pingResult.is_alive ? 'text-success':'text-danger']">
+										<td>
-												<i class="bi me-1"
+											<small>
-												   :class="[this.pingResult.is_alive ? 'bi-check-circle-fill' : 'bi-x-circle-fill']"></i>
+												<LocaleText t="Received Package(s)"></LocaleText>
-												{{this.pingResult.is_alive ? "Yes": "No"}}
+											</small>
-									</span>
+										</td>
-								</div>
+										<td>
-							</div>
+											<small>
-							<div class="card rounded-3 bg-transparent shadow-sm animate__animated animate__fadeIn" style="animation-delay: 0.45s">
+												<LocaleText t="Lost Package(s)"></LocaleText>
-								<div class="card-body">
+											</small>
-									<p class="mb-0 text-muted"><small>
+										</td>
-										<LocaleText t="Average / Min / Max Round Trip Time"></LocaleText>
+										<td colspan="2">
-									</small></p>
+											<small>
-									<samp>{{this.pingResult.avg_rtt}}ms / 
+												<LocaleText t="Average / Min / Max Round Trip Time"></LocaleText>
-										{{this.pingResult.min_rtt}}ms / 
+											</small>
-										{{this.pingResult.max_rtt}}ms
+										</td>
-									</samp>
+									</tr>
-								</div>
+									<tr>
-							</div>
+										<td class="">
-							<div class="card rounded-3 bg-transparent shadow-sm animate__animated animate__fadeIn" style="animation-delay: 0.6s">
+											<small>
-								<div class="card-body">
+												{{ this.socketResult.pingResults.length }}
-									<p class="mb-0 text-muted"><small>
+											</small>
-										<LocaleText t="Sent / Received / Lost Package"></LocaleText>
+										</td>
-									</small></p>
+										<td class="">
-									<samp>{{this.pingResult.package_sent}} /
+											<small>
-										{{this.pingResult.package_received}} /
+												{{ this.socketResult.pingResults.filter(x => x.is_alive).length }}
-										{{this.pingResult.package_loss}}
+											</small>
-									</samp>
+										</td>
-								</div>
+										<td class="">
-							</div>
+											<small>
+												{{ this.socketResult.pingResults.filter(x => !x.is_alive).length }}
+											</small>
+										</td>
+										<td colspan="2">
+											<small v-if="this.socketResult.pingResults.filter(x => x.is_alive).length > 0">
+												{{ (this.socketResult.pingResults.filter(x => x.is_alive).map(x => x.max_rtt)
+													.reduce((x, y) => x + y) / this.socketResult.pingResults.filter(x => x.is_alive).length ).toFixed(3)}}ms / 
+												{{ Math.min(...this.socketResult.pingResults.filter(x => x.is_alive).map(x => x.max_rtt)) }}ms / 
+												{{ Math.max(...this.socketResult.pingResults.filter(x => x.is_alive).map(x => x.max_rtt)) }}ms
+											</small>
+											<small v-else>
+												0ms / 0ms / 0ms
+											</small>
+										</td>
+									</tr>
+								</tbody>
+							</table>
 						</div>
-					</Transition>
+					</div>
-					
-
 				</div>
 			</div>
 		</div>
@@ -261,4 +332,11 @@ export default {
 		opacity: 0;
 		filter: blur(3px);
 	}
+	table th, table td{
+		padding: 0.5rem;
+	}
+
+	.table > :not(caption) > * > *{
+		background-color: transparent !important;
+	}
 </style>

src/static/app/src/views/systemStatus.vue

@@ -298,7 +298,7 @@ const networkSpeedHistoricalChartData = computed(() => {
 							<Process
 								:key="p.pid"
 								:cpu="true"
-								:process="p" v-for="p in data?.Processes.cpu_top_10"></Process>
+								:process="p" v-for="p in data?.Processes.cpu_top_10.slice(0, 10)"></Process>
 						</TransitionGroup>
 					</div>
 				</div>
@@ -354,7 +354,7 @@ const networkSpeedHistoricalChartData = computed(() => {
 						<TransitionGroup name="process">
 							<Process
 								:key="p.pid"
-								:process="p" v-for="p in data?.Processes.memory_top_10">
+								:process="p" v-for="p in data?.Processes.memory_top_10.slice(0, 10)">
 							</Process>
 						</TransitionGroup>
 					</div>

src/static/app/vite.config.js

@@ -45,6 +45,7 @@ export default defineConfig(({mode}) => {
 		server:{
 			proxy: {
 				'/api': proxy,
+				'/socket.io': proxy,
 				'/fileDownload':proxy
 			},
 			host: '0.0.0.0'