在管理员登录后才验证OTP

This commit is contained in:
GoEdgeLab
2023-02-04 16:44:33 +08:00
parent c86fb9a705
commit 0747227fc3
12 changed files with 384 additions and 71 deletions

View File

@@ -41,12 +41,6 @@
<input type="password" v-model="password" placeholder="请输入密码" maxlength="200" @input="changePassword()" ref="passwordRef"/>
</div>
</div>
<div class="ui field" v-show="showOTP">
<div class="ui left icon input">
<i class="ui barcode icon"></i>
<input type="text" name="otpCode" placeholder="请输入OTP动态密码" maxlength="6"/>
</div>
</div>
<div class="ui field" v-if="rememberLogin">
<a href="" @click.prevent="showMoreOptions()">更多选项 <i class="icon angle" :class="{down:!moreOptionsVisible, up:moreOptionsVisible}"></i> </a>
</div>

View File

@@ -9,8 +9,6 @@ Tea.context(function () {
this.password = "123456"
}
this.showOTP = false
this.isSubmitting = false
this.$delay(function () {
@@ -19,13 +17,7 @@ Tea.context(function () {
});
this.changeUsername = function () {
this.$post("/checkOTP")
.params({
username: this.username
})
.success(function (resp) {
this.showOTP = resp.data.requireOTP
})
}
this.changePassword = function () {
@@ -46,7 +38,11 @@ Tea.context(function () {
this.isSubmitting = false;
};
this.submitSuccess = function () {
this.submitSuccess = function (resp) {
if (resp.data.requireOTP) {
window.location = "/index/otp?sid=" + resp.data.sid + "&remember=" + (resp.data.remember ? 1 : 0) + "&from=" + window.encodeURIComponent(this.from)
return
}
if (this.from.length == 0) {
window.location = "/dashboard";
} else {

View File

@@ -0,0 +1,42 @@
.form-box {
position: fixed;
top: 2em;
bottom: 0;
left: 0;
right: 0;
}
form {
position: fixed;
width: 21em;
top: 50%;
left: 50%;
margin-left: -10em;
margin-top: -16em;
}
form .header {
text-align: center;
font-size: 1em !important;
}
form p {
font-size: 0.8em;
margin-top: 0.3em;
margin-bottom: 0;
font-weight: normal;
padding: 0;
}
form .comment {
margin-top: 0.5em;
padding: 0.5em;
color: gray;
}
form .cancel-login {
text-align: center;
padding-top: 1em;
}
@media screen and (max-width: 512px) {
form {
width: 80%;
margin-left: -40%;
}
}
/*# sourceMappingURL=otp.css.map */

View File

@@ -0,0 +1 @@
{"version":3,"sources":["otp.less"],"names":[],"mappings":"AAAA;EACI,eAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;;AAGJ;EACI,eAAA;EACA,WAAA;EACA,QAAA;EACA,SAAA;EACA,kBAAA;EACA,iBAAA;;AANJ,IAQC;EACC,kBAAA;EACA,yBAAA;;AAVF,IAaC;EACC,gBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,UAAA;;AAlBF,IAqBC;EACC,iBAAA;EACA,cAAA;EACA,WAAA;;AAxBF,IA2BC;EACC,kBAAA;EACA,gBAAA;;AAIF,mBAAqC;EACjC;IACI,UAAA;IACA,iBAAA","file":"otp.css"}

View File

@@ -0,0 +1,55 @@
<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
{$if eq .faviconFileId 0}
<link rel="shortcut icon" href="/images/favicon.png"/>
{$else}
<link rel="shortcut icon" href="/ui/image/{$ .faviconFileId}"/>
{$end}
<title>登录{$.systemName} - 二次验证</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
{$TEA.VUE}
{$TEA.SEMANTIC}
<script type="text/javascript" src="/js/md5.min.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript" src="/js/sweetalert2/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="/js/components.js"></script>
</head>
<body>
<div>
{$template "/menu"}
<div class="form-box">
<form method="post" class="ui form" data-tea-action="$" data-tea-before="submitBefore"
data-tea-done="submitDone" data-tea-success="submitSuccess" autocomplete="off">
<input type="hidden" name="sid" :value="sid"/>
<input type="hidden" name="remember" :value="remember ? 1 : 0"/>
<div class="ui segment stacked">
<div class="ui header">
登录{$.systemName}
</div>
<div class="ui field">
为了保护你的账户安全需要进行OTP二次身份验证。
</div>
<div class="ui field">
<div class="ui left icon input">
<i class="ui barcode icon"></i>
<input type="text" name="otpCode" placeholder="请输入OTP动态密码" maxlength="6"/>
</div>
</div>
<button class="ui button primary fluid" type="submit" v-if="!isSubmitting">验证</button>
<button class="ui button primary fluid disabled" type="submit" v-if="isSubmitting">验证中...</button>
<div class="ui field cancel-login">
<a :href="'/?from=' + encodedFrom">&laquo; 取消登录</a>
</div>
</div>
</form>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,31 @@
Tea.context(function () {
this.isSubmitting = false
this.encodedFrom = window.encodeURIComponent(this.from)
this.$delay(function () {
this.$find("form input[name='otpCode']").focus()
});
// 更多选项
this.moreOptionsVisible = false;
this.showMoreOptions = function () {
this.moreOptionsVisible = !this.moreOptionsVisible;
};
this.submitBefore = function () {
this.isSubmitting = true;
};
this.submitDone = function () {
this.isSubmitting = false;
};
this.submitSuccess = function (resp) {
if (this.from.length == 0) {
window.location = "/dashboard";
} else {
window.location = this.from;
}
};
});

View File

@@ -0,0 +1,47 @@
.form-box {
position: fixed;
top: 2em;
bottom: 0;
left: 0;
right: 0;
}
form {
position: fixed;
width: 21em;
top: 50%;
left: 50%;
margin-left: -10em;
margin-top: -16em;
.header {
text-align: center;
font-size: 1em !important;
}
p {
font-size: 0.8em;
margin-top: 0.3em;
margin-bottom: 0;
font-weight: normal;
padding: 0;
}
.comment {
margin-top: 0.5em;
padding: 0.5em;
color: gray;
}
.cancel-login {
text-align: center;
padding-top: 1em;
}
}
@media screen and (max-width: 512px) {
form {
width: 80%;
margin-left: -40%;
}
}