mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-22 15:20:09 +01:00
Adjusted some UI
This commit is contained in:
parent
8a7df4ba9f
commit
e3f82e136a
@ -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(
|
||||||
|
@ -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()">
|
||||||
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user