mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-07-12 08:06:58 +00:00
Adjusted login UI
This commit is contained in:
parent
68e3813c6c
commit
1f5e10e784
@ -556,13 +556,6 @@ main {
|
|||||||
/*padding: 0.6rem 0.9em;*/
|
/*padding: 0.6rem 0.9em;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-box #username,
|
|
||||||
.login-box #password,
|
|
||||||
.login-box #totp
|
|
||||||
{
|
|
||||||
padding: 0.6rem calc( 0.9rem + 32px);
|
|
||||||
height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-box label[for="username"],
|
.login-box label[for="username"],
|
||||||
.login-box label[for="password"],
|
.login-box label[for="password"],
|
||||||
|
@ -50,12 +50,15 @@ export default {
|
|||||||
},
|
},
|
||||||
applyLocale(key){
|
applyLocale(key){
|
||||||
return GetLocale(key)
|
return GetLocale(key)
|
||||||
|
},
|
||||||
|
formValid(){
|
||||||
|
return this.data.username && this.data.password && ((this.totpEnabled && this.data.totp) || !this.totpEnabled)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
GetLocale,
|
GetLocale,
|
||||||
async auth(){
|
async auth(){
|
||||||
if (this.data.username && this.data.password && ((this.totpEnabled && this.data.totp) || !this.totpEnabled)){
|
if (this.formValid){
|
||||||
this.loading = true
|
this.loading = true
|
||||||
await fetchPost("/api/authenticate", this.data, (response) => {
|
await fetchPost("/api/authenticate", this.data, (response) => {
|
||||||
if (response.status){
|
if (response.status){
|
||||||
@ -71,8 +74,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
this.loginError = true;
|
this.store.newMessage("Server", response.message, "danger")
|
||||||
this.loginErrorMessage = response.message;
|
|
||||||
document.querySelectorAll("input[required]").forEach(x => {
|
document.querySelectorAll("input[required]").forEach(x => {
|
||||||
x.classList.remove("is-valid")
|
x.classList.remove("is-valid")
|
||||||
x.classList.add("is-invalid")
|
x.classList.add("is-invalid")
|
||||||
@ -107,28 +109,53 @@ export default {
|
|||||||
<LocaleText t="Welcome to"></LocaleText>
|
<LocaleText t="Welcome to"></LocaleText>
|
||||||
</h4>
|
</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 rounded-3" role="alert" v-if="loginError">-->
|
||||||
<LocaleText :t="this.loginErrorMessage"></LocaleText>
|
<!-- <LocaleText :t="this.loginErrorMessage"></LocaleText>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<form @submit="(e) => {e.preventDefault(); this.auth();}"
|
<form @submit="(e) => {e.preventDefault(); this.auth();}"
|
||||||
|
class="mt-3"
|
||||||
v-if="!this.store.CrossServerConfiguration.Enable">
|
v-if="!this.store.CrossServerConfiguration.Enable">
|
||||||
<div class="form-group text-body">
|
<div class="form-floating mb-2">
|
||||||
<label for="username" class="text-left" style="font-size: 1rem">
|
<input type="text"
|
||||||
<i class="bi bi-person-circle"></i></label>
|
required
|
||||||
<SignInInput id="username" :data="this.data"
|
:disabled="loading"
|
||||||
type="text" placeholder="Username"></SignInInput>
|
v-model="this.data.username"
|
||||||
|
name="username"
|
||||||
|
class="form-control rounded-3" id="username" placeholder="Username">
|
||||||
|
<label for="floatingInput" class="d-flex">
|
||||||
|
<i class="bi bi-person-circle me-2"></i>
|
||||||
|
<LocaleText t="Username"></LocaleText>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group text-body">
|
<div class="form-floating mb-2">
|
||||||
<label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i></label>
|
<input type="password"
|
||||||
<SignInInput id="password" :data="this.data"
|
required
|
||||||
type="password" placeholder="Password"></SignInInput>
|
:disabled="loading"
|
||||||
|
v-model="this.data.password"
|
||||||
|
class="form-control rounded-3" id="password" placeholder="Password">
|
||||||
|
<label for="floatingInput" class="d-flex">
|
||||||
|
<i class="bi bi-key-fill me-2"></i>
|
||||||
|
<LocaleText t="Password"></LocaleText>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group text-body" v-if="totpEnabled">
|
<div class="form-floating mb-2" v-if="this.totpEnabled">
|
||||||
<label for="totp" class="text-left" style="font-size: 1rem"><i class="bi bi-lock-fill"></i></label>
|
<input type="text"
|
||||||
<SignInTOTP :data="this.data"></SignInTOTP>
|
id="totp"
|
||||||
|
required
|
||||||
|
:disabled="loading"
|
||||||
|
placeholder="totp"
|
||||||
|
v-model="this.data.totp"
|
||||||
|
class="form-control rounded-3"
|
||||||
|
maxlength="6"
|
||||||
|
inputmode="numeric"
|
||||||
|
autocomplete="one-time-code">
|
||||||
|
<label for="floatingInput" class="d-flex">
|
||||||
|
<i class="bi bi-lock-fill me-2"></i>
|
||||||
|
<LocaleText t="OTP from your authenticator"></LocaleText>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-lg btn-dark ms-auto mt-5 w-100 d-flex btn-brand signInBtn"
|
<button class="btn btn-lg btn-dark ms-auto mt-5 w-100 d-flex btn-brand signInBtn rounded-3"
|
||||||
:disabled="this.loading"
|
:disabled="this.loading || !this.formValid"
|
||||||
ref="signInBtn">
|
ref="signInBtn">
|
||||||
<span v-if="!this.loading" class="d-flex w-100">
|
<span v-if="!this.loading" class="d-flex w-100">
|
||||||
<LocaleText t="Sign In"></LocaleText>
|
<LocaleText t="Sign In"></LocaleText>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user