kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 16:00:28 +01:00
Code

Adjusted some UI

Browse Source
This commit is contained in:
Donald Zou 2024-08-12 18:04:41 -04:00
parent 8a7df4ba9f
commit e3f82e136a
6 changed files with 126 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/static/app/src/components/configurationComponents/peerShareLinkModal.vue
View File

@ -87,6 +87,12 @@ export default {
}, },
computed: { computed: {
getUrl(){ getUrl(){
const crossServer = this.store.getActiveCrossServer();
if(crossServer){
return `${crossServer.host}/${this.$router.resolve(
{path: "/share", query: {"ShareID": this.dataCopy.ShareID}}).href}`
}
return window.location.origin return window.location.origin
+ window.location.pathname + window.location.pathname
+ this.$router.resolve( + this.$router.resolve(

2
src/static/app/src/components/settingsComponent/accountSettingsMFA.vue
View File

@ -47,7 +47,7 @@ export default {
<div class="form-check form-switch ms-3"> <div class="form-check form-switch ms-3">
<input class="form-check-input" type="checkbox" <input class="form-check-input" type="checkbox"
v-model="this.status" v-model="this.status"
role="switch" id="allowAPIKeysSwitch"> role="switch" id="allowMFAKeysSwitch">
</div> </div>
<button class="btn bg-warning-subtle text-warning-emphasis border-1 border-warning-subtle ms-auto rounded-3 shadow-sm" <button class="btn bg-warning-subtle text-warning-emphasis border-1 border-warning-subtle ms-auto rounded-3 shadow-sm"
v-if="this.status" @click="this.resetMFA()"> v-if="this.status" @click="this.resetMFA()">

14
src/static/app/src/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue
View File

@ -37,7 +37,8 @@ export default {
<div class="card rounded-3 shadow-sm"> <div class="card rounded-3 shadow-sm">
<div class="card-body d-flex gap-3 align-items-center apiKey-card-body" v-if="!this.confirmDelete"> <div class="card-body d-flex gap-3 align-items-center apiKey-card-body" v-if="!this.confirmDelete">
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
<small class="text-muted">Key</small>{{this.apiKey.Key}} <small class="text-muted">Key</small>
<span style="word-break: break-all">{{this.apiKey.Key}}</span>
</div> </div>
<div class="d-flex align-items-center gap-2 ms-auto"> <div class="d-flex align-items-center gap-2 ms-auto">
<small class="text-muted">Expire At</small> <small class="text-muted">Expire At</small>
@ -64,12 +65,21 @@ export default {
<style scoped> <style scoped>
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.apiKey-card-body{ .apiKey-card-body{
flex-direction: column; flex-direction: column !important;
align-items: start !important; align-items: start !important;
div.ms-auto{ div.ms-auto{
margin-left: 0 !important; margin-left: 0 !important;
} }
div{
width: 100%;
align-items: start !important;
}
small{
margin-right: auto;
}
} }
} }
</style> </style>

54
src/static/app/src/components/signInComponents/RemoteServer.vue
View File

@ -11,17 +11,19 @@ export default {
active: false, active: false,
startTime: undefined, startTime: undefined,
endTime: undefined, endTime: undefined,
errorMsg: "" errorMsg: "",
refreshing: false
} }
}, },
methods: { methods: {
handshake(){ async handshake(){
this.active = false; this.active = false;
this.refreshing = true;
if (this.server.host && this.server.apiKey){ if (this.server.host && this.server.apiKey){
this.startTime = undefined; this.startTime = undefined;
this.endTime = undefined; this.endTime = undefined;
this.startTime = dayjs() this.startTime = dayjs()
fetch(`${this.server.host}/api/handshake`, { await fetch(`${this.server.host}/api/handshake`, {
headers: { headers: {
"content-type": "application/json", "content-type": "application/json",
"wg-dashboard-apikey": this.server.apiKey "wg-dashboard-apikey": this.server.apiKey
@ -39,7 +41,9 @@ export default {
}).catch((res) => { }).catch((res) => {
this.active = false; this.active = false;
this.errorMsg = res; this.errorMsg = res;
}) });
this.refreshing = false;
} }
}, },
async connect(){ async connect(){
@ -67,6 +71,9 @@ export default {
if (this.startTime && this.endTime){ if (this.startTime && this.endTime){
return `${dayjs().subtract(this.startTime).millisecond()}ms` return `${dayjs().subtract(this.startTime).millisecond()}ms`
}else{ }else{
if (this.refreshing){
return `Pinging...`
}
return this.errorMsg ? this.errorMsg : "N/A" return this.errorMsg ? this.errorMsg : "N/A"
} }
} }
@ -77,7 +84,7 @@ export default {
<template> <template>
<div class="card rounded-3"> <div class="card rounded-3">
<div class="card-body"> <div class="card-body">
<div class="d-flex gap-3 w-100"> <div class="d-flex gap-3 w-100 remoteServerContainer">
<div class="d-flex gap-3 align-items-center flex-grow-1"> <div class="d-flex gap-3 align-items-center flex-grow-1">
<i class="bi bi-server"></i> <i class="bi bi-server"></i>
<input class="form-control form-control-sm" <input class="form-control form-control-sm"
@ -92,7 +99,7 @@ export default {
v-model="this.server.apiKey" v-model="this.server.apiKey"
type="text"> type="text">
</div> </div>
<div class="d-flex gap-2"> <div class="d-flex gap-2 button-group">
<button <button
@click="this.$emit('delete')" @click="this.$emit('delete')"
class="ms-auto btn btn-sm bg-danger-subtle text-danger-emphasis border-1 border-danger-subtle"> class="ms-auto btn btn-sm bg-danger-subtle text-danger-emphasis border-1 border-danger-subtle">
@ -110,6 +117,18 @@ export default {
<div class="card-footer gap-2 d-flex align-items-center"> <div class="card-footer gap-2 d-flex align-items-center">
<span class="dot ms-0 me-2" :class="[this.active ? 'active':'inactive']"></span> <span class="dot ms-0 me-2" :class="[this.active ? 'active':'inactive']"></span>
<small>{{this.getHandshakeTime}}</small> <small>{{this.getHandshakeTime}}</small>
<div class="spin ms-auto text-primary-emphasis" v-if="this.refreshing">
<i class="bi bi-arrow-clockwise"></i>
</div>
<a role="button"
v-else
@click="this.handshake()"
class="text-primary-emphasis text-decoration-none ms-auto disabled">
<i class="bi bi-arrow-clockwise me"></i>
</a>
</div> </div>
</div> </div>
</template> </template>
@ -119,4 +138,27 @@ export default {
background-color: #dc3545; background-color: #dc3545;
box-shadow: 0 0 0 0.2rem #dc354545; box-shadow: 0 0 0 0.2rem #dc354545;
} }
.spin{
animation: spin 1s infinite cubic-bezier(0.82, 0.58, 0.17, 0.9);
}
@keyframes spin {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@media screen and (max-width: 768px) {
.remoteServerContainer{
flex-direction: column;
}
.remoteServerContainer .button-group button{
width: 100%;
}
}
</style> </style>

106
src/static/app/src/views/signin.vue
View File

@ -86,68 +86,66 @@ export default {
</script> </script>
<template> <template>
<div class="container-fluid login-container-fluid d-flex main flex-column" :data-bs-theme="this.theme"> <div class="container-fluid login-container-fluid d-flex main flex-column py-4 text-body"
<div class="login-box m-auto" style="width: 700px;"> style="overflow-y: scroll"
<div class="m-auto"> :data-bs-theme="this.theme">
<div class="card px-4 py-5 rounded-4 shadow-lg"> <div class="login-box m-auto" >
<div class="card-body"> <div class="m-auto" style="width: 700px;">
<h4 class="mb-0 text-body">Welcome to</h4> <h4 class="mb-0 text-body">Welcome to</h4>
<span class="dashboardLogo display-3"><strong>WGDashboard</strong></span> <span class="dashboardLogo display-3"><strong>WGDashboard</strong></span>
<div class="alert alert-danger mt-2 mb-0" role="alert" v-if="loginError"> <div class="alert alert-danger mt-2 mb-0" role="alert" v-if="loginError">
{{this.loginErrorMessage}} {{this.loginErrorMessage}}
</div> </div>
<form @submit="(e) => {e.preventDefault(); this.auth();}" <form @submit="(e) => {e.preventDefault(); this.auth();}"
v-if="!this.store.CrossServerConfiguration.Enable"> v-if="!this.store.CrossServerConfiguration.Enable">
<div class="form-group text-body"> <div class="form-group text-body">
<label for="username" class="text-left" style="font-size: 1rem"> <label for="username" class="text-left" style="font-size: 1rem">
<i class="bi bi-person-circle"></i></label> <i class="bi bi-person-circle"></i></label>
<input type="text" v-model="username" class="form-control" id="username" name="username" <input type="text" v-model="username" class="form-control" id="username" name="username"
autocomplete="on" autocomplete="on"
placeholder="Username" required> placeholder="Username" required>
</div> </div>
<div class="form-group text-body"> <div class="form-group text-body">
<label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i></label> <label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i></label>
<input type="password" <input type="password"
v-model="password" class="form-control" id="password" name="password" v-model="password" class="form-control" id="password" name="password"
autocomplete="on" autocomplete="on"
placeholder="Password" required> placeholder="Password" required>
</div> </div>
<div class="form-group text-body" v-if="totpEnabled"> <div class="form-group text-body" v-if="totpEnabled">
<label for="totp" class="text-left" style="font-size: 1rem"><i class="bi bi-lock-fill"></i></label> <label for="totp" class="text-left" style="font-size: 1rem"><i class="bi bi-lock-fill"></i></label>
<input class="form-control totp" <input class="form-control totp"
required required
id="totp" maxlength="6" type="text" inputmode="numeric" autocomplete="one-time-code" id="totp" maxlength="6" type="text" inputmode="numeric" autocomplete="one-time-code"
placeholder="OTP from your authenticator" placeholder="OTP from your authenticator"
v-model="this.totp" v-model="this.totp"
> >
</div> </div>
<button class="btn btn-lg btn-dark ms-auto mt-4 w-100 d-flex btn-brand signInBtn" ref="signInBtn"> <button class="btn btn-lg btn-dark ms-auto mt-4 w-100 d-flex btn-brand signInBtn" ref="signInBtn">
<span v-if="!this.loading" class="d-flex w-100"> <span v-if="!this.loading" class="d-flex w-100">
Sign In<i class="ms-auto bi bi-chevron-right"></i> Sign In<i class="ms-auto bi bi-chevron-right"></i>
</span> </span>
<span v-else class="d-flex w-100 align-items-center"> <span v-else class="d-flex w-100 align-items-center">
Signing In... Signing In...
<span class="spinner-border ms-auto spinner-border-sm" role="status"> <span class="spinner-border ms-auto spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</span> </span>
</span> </span>
</button> </button>
</form> </form>
<RemoteServerList v-else></RemoteServerList> <RemoteServerList v-else></RemoteServerList>
<div class="d-flex mt-3" v-if="!this.store.IsElectronApp"> <div class="d-flex mt-3" v-if="!this.store.IsElectronApp">
<div class="form-check form-switch ms-auto"> <div class="form-check form-switch ms-auto">
<input <input
v-model="this.store.CrossServerConfiguration.Enable" v-model="this.store.CrossServerConfiguration.Enable"
class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"> class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked">
<label class="form-check-label" for="flexSwitchCheckChecked">Access Remote Server</label> <label class="form-check-label" for="flexSwitchCheckChecked">Access Remote Server</label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<small class="text-muted pb-3 d-block w-100 text-center"> <small class="text-muted pb-3 d-block w-100 text-center mt-3">
WGDashboard v4.0 | Developed with ❤️ by WGDashboard v4.0 | Developed with ❤️ by
<a href="https://github.com/donaldzou" target="_blank"><strong>Donald Zou</strong></a> <a href="https://github.com/donaldzou" target="_blank"><strong>Donald Zou</strong></a>
</small> </small>
@ -161,5 +159,13 @@ export default {
</template> </template>
<style scoped> <style scoped>
@media screen and (max-width: 768px) {
.login-box{
width: 100% !important;
}
.login-box div{
width: auto !important;
}
}
</style> </style>

6
src/static/css/dashboard.css
View File

@ -1,6 +1,6 @@
/**{*/ *{
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/*}*/ }
.dp__input{ .dp__input{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;