mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-11-22 21:36:17 +00:00
57652d9f8e
The system status indicators (CPU, Storage, Memory, Swap Memory) were not aligned properly, appearing misplaced and cluttered. This was caused by incorrect Bootstrap grid classes, which resulted in a 2x2 layout on medium screens and a 1x4 layout on extra-large screens. This commit fixes the layout by using the correct Bootstrap grid classes to ensure a responsive layout. The new layout is a 1x4 on large screens, a 2x2 on medium screens, and a 1x1 on small screens. This provides a clean and organized UI across different screen resolutions. This commit also corrects a typo in the `width` style binding for the Swap Memory progress bar.
2 lines
12 KiB
JavaScript
2 lines
12 KiB
JavaScript
import{_ as v,G as p,A as I,c as a,a as t,t as T,n as C,m as u,y as c,b as l,h as g,d as x,F as k,i as w,f as i,D as L,j as $,a1 as E,v as M,e as D,w as A,T as U,z as B,g as y}from"./index-B8BTG8Ck.js";import{M as R}from"./message-v6gYq2BV.js";import{d as _}from"./dayjs.min-DBUL_c4Y.js";import{L as S}from"./localeText-B8Zr5hW3.js";const O={name:"RemoteServer",components:{LocaleText:S},props:{server:Object},data(){return{active:!1,startTime:void 0,endTime:void 0,errorMsg:"",refreshing:!1}},methods:{addHeaders(){this.server.headers||(this.server.headers={}),this.server.headers[I().toString()]={key:"",value:""}},async handshake(){this.active=!1,this.server.host&&this.server.apiKey&&(this.refreshing=!0,this.startTime=void 0,this.endTime=void 0,this.startTime=_(),await fetch(`${this.server.host}/api/handshake`,{headers:this.getHeaders,method:"GET",signal:AbortSignal.timeout(5e3)}).then(s=>{if(s.status===200)return s.json();throw new Error(s.statusText)}).then(()=>{this.endTime=_(),this.active=!0}).catch(s=>{this.active=!1,this.errorMsg=s}),this.refreshing=!1)},async connect(){await fetch(`${this.server.host}/api/authenticate`,{headers:this.getHeaders,body:JSON.stringify({host:window.location.hostname}),method:"POST",signal:AbortSignal.timeout(5e3)}).then(s=>s.json()).then(s=>{this.$emit("setActiveServer"),this.$router.push("/")})}},mounted(){this.handshake()},computed:{getHandshakeTime(){return this.startTime&&this.endTime?`${_().subtract(this.startTime).millisecond()}ms`:this.refreshing?p("Pinging..."):this.errorMsg?this.errorMsg:"N/A"},getHeaders(){let s={"Content-Type":"application/json","wg-dashboard-apikey":this.server.apiKey};if(this.server.headers)for(let e of Object.values(this.server.headers))e.key&&e.value&&!Object.keys(s).includes(e.key)&&(s[e.key]=e.value);return s}}},P={class:"card rounded-3"},j={class:"gap-2 d-flex align-items-center"},q={key:0,class:"spin ms-auto text-white"},H={class:"card-body"},G={class:"d-flex gap-2 w-100 remoteServerContainer flex-column"},N={class:"d-flex gap-3 align-items-center flex-grow-1"},K={class:"d-flex gap-3 align-items-center flex-grow-1"},z={class:"d-flex gap-2 button-group"},W={class:"card rounded-3"},F={class:"card-body d-flex gap-2 flex-column"},J={class:"d-flex gap-2"},Z={class:"flex-grow-1"},Q=["onUpdate:modelValue"],X={class:"flex-grow-1"},Y=["onUpdate:modelValue"],ee=["onClick"];function te(s,e,m,h,d,f){const r=g("LocaleText");return i(),a("div",P,[t("div",{class:C(["card-header",[this.active?"text-bg-success":"text-bg-danger"]])},[t("div",j,[e[12]||(e[12]=t("i",{class:"bi bi-person-walking"},null,-1)),t("small",null,T(this.getHandshakeTime),1),this.refreshing?(i(),a("div",q,[...e[10]||(e[10]=[t("i",{class:"bi bi-arrow-clockwise"},null,-1)])])):(i(),a("a",{key:1,role:"button",onClick:e[0]||(e[0]=n=>this.handshake()),class:"text-white text-decoration-none ms-auto disabled"},[...e[11]||(e[11]=[t("i",{class:"bi bi-arrow-clockwise me"},null,-1)])]))])],2),t("div",H,[t("div",G,[t("div",N,[e[13]||(e[13]=t("small",null,[t("i",{class:"bi bi-hdd-rack-fill"})],-1)),u(t("input",{class:"form-control form-control-sm rounded-3",onBlur:e[1]||(e[1]=n=>this.handshake()),"onUpdate:modelValue":e[2]||(e[2]=n=>this.server.host=n),type:"url"},null,544),[[c,this.server.host]])]),t("div",K,[e[14]||(e[14]=t("i",{class:"bi bi-key-fill"},null,-1)),u(t("input",{class:"form-control form-control-sm rounded-3 font-monospace",onBlur:e[3]||(e[3]=n=>this.handshake()),"onUpdate:modelValue":e[4]||(e[4]=n=>this.server.apiKey=n),type:"text"},null,544),[[c,this.server.apiKey]])]),t("div",z,[t("button",{style:{flex:"1 0 0"},onClick:e[5]||(e[5]=n=>this.$emit("delete")),class:"ms-auto btn btn-sm bg-danger-subtle text-danger-emphasis border-1 border-danger-subtle rounded-3"},[e[15]||(e[15]=t("i",{class:"bi bi-trash me-2"},null,-1)),l(r,{t:"Delete"})]),t("button",{style:{flex:"1 0 0"},onClick:e[6]||(e[6]=n=>this.connect()),class:C([{disabled:!this.active},"ms-auto btn btn-sm bg-success-subtle text-success-emphasis border-1 border-success-subtle rounded-3"])},[e[16]||(e[16]=t("i",{class:"bi bi-arrow-right-circle me-2"},null,-1)),l(r,{t:"Connect"})],2)]),t("div",W,[t("div",F,[t("button",{style:{flex:"1 0 0"},onClick:e[7]||(e[7]=n=>f.addHeaders()),class:"btn btn-sm bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3"},[e[17]||(e[17]=t("i",{class:"bi bi-plus-lg me-2"},null,-1)),l(r,{t:"Headers"})]),this.server.headers?(i(!0),a(k,{key:0},w(this.server.headers,(n,b)=>(i(),a("div",J,[t("div",Z,[u(t("input",{class:"form-control rounded-3 form-control-sm",onBlur:e[8]||(e[8]=o=>this.handshake()),"onUpdate:modelValue":o=>n.key=o,placeholder:"Key"},null,40,Q),[[c,n.key]])]),t("div",X,[u(t("input",{class:"form-control rounded-3 form-control-sm",onBlur:e[9]||(e[9]=o=>this.handshake()),"onUpdate:modelValue":o=>n.value=o,placeholder:"Value"},null,40,Y),[[c,n.value]])]),t("button",{type:"button",onClick:o=>delete this.server.headers[b],class:"btn btn-sm bg-danger-subtle text-danger-emphasis border-danger-subtle rounded-3"},[...e[18]||(e[18]=[t("i",{class:"bi bi-trash-fill"},null,-1)])],8,ee)]))),256)):x("",!0)])])])])])}const se=v(O,[["render",te],["__scopeId","data-v-87b9c3d8"]]),oe={name:"RemoteServerList",setup(){return{store:L()}},components:{LocaleText:S,RemoteServer:se}},re={class:"w-100 mt-3"},ie={class:"d-flex align-items-center mb-3"},ne={class:"mb-0"},ae={class:"w-100 d-flex gap-3 flex-column p-3 border border-1 border-secondary-subtle rounded-3",style:{height:"400px","overflow-y":"scroll"}},le={key:0,class:"text-muted m-auto"};function de(s,e,m,h,d,f){const r=g("LocaleText"),n=g("RemoteServer");return i(),a("div",re,[t("div",ie,[t("h5",ne,[l(r,{t:"Server List"})]),t("button",{onClick:e[0]||(e[0]=b=>this.store.addCrossServerConfiguration()),class:"btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle shadow-sm ms-auto"},[e[1]||(e[1]=t("i",{class:"bi bi-plus-circle-fill me-2"},null,-1)),l(r,{t:"Server"})])]),t("div",ae,[(i(!0),a(k,null,w(this.store.CrossServerConfiguration.ServerList,(b,o)=>(i(),$(n,{onSetActiveServer:V=>this.store.setActiveCrossServer(o),onDelete:V=>this.store.deleteCrossServerConfiguration(o),key:o,server:b},null,8,["onSetActiveServer","onDelete","server"]))),128)),Object.keys(this.store.CrossServerConfiguration.ServerList).length===0?(i(),a("h6",le,[l(r,{t:"Click"}),e[2]||(e[2]=t("i",{class:"bi bi-plus-circle-fill mx-1"},null,-1)),l(r,{t:"to add your server"})])):x("",!0)])])}const ue=v(oe,[["render",de]]),me={name:"signInInput",methods:{GetLocale:p},props:{id:"",data:"",type:"",placeholder:""},computed:{getLocaleText(){return p(this.placeholder)}}},ce=["type","id","name","placeholder"];function he(s,e,m,h,d,f){return u((i(),a("input",{type:m.type,"onUpdate:modelValue":e[0]||(e[0]=r=>this.data[this.id]=r),class:"form-control rounded-3",id:this.id,name:this.id,autocomplete:"on",placeholder:this.getLocaleText,required:""},null,8,ce)),[[E,this.data[this.id]]])}const pe=v(me,[["render",he]]),fe={name:"signInTOTP",methods:{GetLocale:p},props:{data:""},computed:{getLocaleText(){return p("OTP from your authenticator")}}},be=["placeholder"];function ge(s,e,m,h,d,f){return u((i(),a("input",{class:"form-control totp",required:"",id:"totp",maxlength:"6",type:"text",inputmode:"numeric",autocomplete:"one-time-code",placeholder:this.getLocaleText,"onUpdate:modelValue":e[0]||(e[0]=r=>this.data.totp=r)},null,8,be)),[[c,this.data.totp]])}const ve=v(fe,[["render",ge]]),xe={name:"signin",components:{SignInTOTP:ve,SignInInput:pe,LocaleText:S,RemoteServerList:ue,Message:R},async setup(){const s=L();let e="dark",m=!1,h;return s.IsElectronApp||await Promise.all([y("/api/getDashboardTheme",{},d=>{e=d.data}),y("/api/isTotpEnabled",{},d=>{m=d.data}),y("/api/getDashboardVersion",{},d=>{h=d.data})]),s.removeActiveCrossServer(),{store:s,theme:e,totpEnabled:m,version:h}},data(){return{data:{username:"",password:"",totp:""},loginError:!1,loginErrorMessage:"",loading:!1}},computed:{getMessages(){return this.store.Messages.filter(s=>s.show)},applyLocale(s){return p(s)},formValid(){return this.data.username&&this.data.password&&(this.totpEnabled&&this.data.totp||!this.totpEnabled)}},methods:{GetLocale:p,async auth(){this.formValid?(this.loading=!0,await B("/api/authenticate",this.data,s=>{s.status?(this.loginError=!1,this.$refs.signInBtn.classList.add("signedIn"),s.message?this.$router.push("/welcome"):this.store.Redirect!==void 0?this.$router.push(this.store.Redirect):this.$router.push("/")):(this.store.newMessage("Server",s.message,"danger"),document.querySelectorAll("input[required]").forEach(e=>{e.classList.remove("is-valid"),e.classList.add("is-invalid")}),this.loading=!1)})):document.querySelectorAll("input[required]").forEach(s=>{s.value.length===0?(s.classList.remove("is-valid"),s.classList.add("is-invalid")):(s.classList.remove("is-invalid"),s.classList.add("is-valid"))})}}},ye=["data-bs-theme"],_e={class:"login-box m-auto"},$e={class:"m-auto signInContainer",style:{width:"700px"}},ke={class:"mb-0 text-body"},we={class:"form-floating mb-2"},Se=["disabled"],Ce={for:"floatingInput",class:"d-flex"},Te={class:"form-floating mb-2"},Le=["disabled"],Ve={for:"floatingInput",class:"d-flex"},Ie={key:0,class:"form-floating mb-2"},Ee=["disabled"],Me={for:"floatingInput",class:"d-flex"},De=["disabled"],Ae={key:0,class:"d-flex w-100"},Ue={key:1,class:"d-flex w-100 align-items-center"},Be={key:2,class:"d-flex mt-3"},Re={class:"form-check form-switch ms-auto"},Oe=["disabled"],Pe={class:"form-check-label",for:"flexSwitchCheckChecked"},je={class:"text-muted pb-3 d-block w-100 text-center mt-3"},qe={class:"messageCentre text-body position-absolute d-flex"};function He(s,e,m,h,d,f){const r=g("LocaleText"),n=g("RemoteServerList"),b=g("Message");return i(),a("div",{class:"container-fluid login-container-fluid d-flex main flex-column py-4 text-body h-100",style:{"overflow-y":"scroll"},"data-bs-theme":this.theme},[t("div",_e,[t("div",$e,[t("h4",ke,[l(r,{t:"Welcome to"})]),e[10]||(e[10]=t("span",{class:"dashboardLogo display-3"},[t("strong",null,"WGDashboard")],-1)),this.store.CrossServerConfiguration.Enable?(i(),$(n,{key:1})):(i(),a("form",{key:0,onSubmit:e[3]||(e[3]=o=>{o.preventDefault(),this.auth()}),class:"mt-3"},[t("div",we,[u(t("input",{type:"text",required:"",disabled:d.loading,"onUpdate:modelValue":e[0]||(e[0]=o=>this.data.username=o),name:"username",autocomplete:"username",autofocus:"",class:"form-control rounded-3",id:"username",placeholder:"Username"},null,8,Se),[[c,this.data.username]]),t("label",Ce,[e[5]||(e[5]=t("i",{class:"bi bi-person-circle me-2"},null,-1)),l(r,{t:"Username"})])]),t("div",Te,[u(t("input",{type:"password",required:"",disabled:d.loading,autocomplete:"current-password","onUpdate:modelValue":e[1]||(e[1]=o=>this.data.password=o),class:"form-control rounded-3",id:"password",placeholder:"Password"},null,8,Le),[[c,this.data.password]]),t("label",Ve,[e[6]||(e[6]=t("i",{class:"bi bi-key-fill me-2"},null,-1)),l(r,{t:"Password"})])]),this.totpEnabled?(i(),a("div",Ie,[u(t("input",{type:"text",id:"totp",required:"",disabled:d.loading,placeholder:"totp","onUpdate:modelValue":e[2]||(e[2]=o=>this.data.totp=o),class:"form-control rounded-3",maxlength:"6",inputmode:"numeric",autocomplete:"one-time-code"},null,8,Ee),[[c,this.data.totp]]),t("label",Me,[e[7]||(e[7]=t("i",{class:"bi bi-lock-fill me-2"},null,-1)),l(r,{t:"OTP from your authenticator"})])])):x("",!0),t("button",{class:"btn btn-lg btn-dark ms-auto mt-5 w-100 d-flex btn-brand signInBtn rounded-3",disabled:this.loading||!this.formValid,ref:"signInBtn"},[this.loading?(i(),a("span",Ue,[l(r,{t:"Signing In..."}),e[9]||(e[9]=t("span",{class:"spinner-border ms-auto spinner-border-sm",role:"status"},null,-1))])):(i(),a("span",Ae,[l(r,{t:"Sign In"}),e[8]||(e[8]=t("i",{class:"ms-auto bi bi-chevron-right"},null,-1))]))],8,De)],32)),this.store.IsElectronApp?x("",!0):(i(),a("div",Be,[t("div",Re,[u(t("input",{"onUpdate:modelValue":e[4]||(e[4]=o=>this.store.CrossServerConfiguration.Enable=o),disabled:d.loading,class:"form-check-input",type:"checkbox",role:"switch",id:"flexSwitchCheckChecked"},null,8,Oe),[[M,this.store.CrossServerConfiguration.Enable]]),t("label",Pe,[l(r,{t:"Access Remote Server"})])])]))])]),t("small",je,[D(" WGDashboard "+T(this.version)+" | Developed with ❤️ by ",1),e[11]||(e[11]=t("a",{href:"https://github.com/donaldzou",target:"_blank"},[t("strong",null,"Donald Zou")],-1))]),t("div",qe,[l(U,{name:"message",tag:"div",class:"position-relative flex-sm-grow-0 flex-grow-1 d-flex align-items-end ms-sm-auto flex-column gap-2"},{default:A(()=>[(i(!0),a(k,null,w(f.getMessages.slice().reverse(),o=>(i(),$(b,{message:o,key:o.id},null,8,["message"]))),128))]),_:1})])],8,ye)}const We=v(xe,[["render",He],["__scopeId","data-v-80e20da4"]]);export{We as default};
|