Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-07-11 23:57:00 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Adjusted login UI

Browse Source
This commit is contained in:
Donald Zou 2024-11-27 14:25:38 +08:00
parent 68e3813c6c
commit 1f5e10e784
2 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/static/app/src/css/dashboard.css
View File

@ -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"],

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

@ -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>