fix(login): reliably render turnstile on register tab

This commit is contained in:
Sora39831 2026-04-05 02:55:28 +08:00
parent 67e0fb62b4
commit 7db5b9e214

View file

@ -149,6 +149,7 @@
{{template "component/aThemeSwitch" .}} {{template "component/aThemeSwitch" .}}
<script> <script>
var turnstileToken = ''; var turnstileToken = '';
var turnstileWidgetId = null;
const app = new Vue({ const app = new Vue({
delimiters: ['[[', ']]'], delimiters: ['[[', ']]'],
@ -169,7 +170,7 @@
this.twoFactorEnable = await this.getTwoFactorEnable(); this.twoFactorEnable = await this.getTwoFactorEnable();
this.turnstileSiteKey = await this.getTurnstileSiteKey(); this.turnstileSiteKey = await this.getTurnstileSiteKey();
if (this.turnstileSiteKey) { if (this.turnstileSiteKey) {
this.renderTurnstile(); this.$nextTick(() => this.ensureTurnstileRendered());
} }
}, },
computed: { computed: {
@ -180,6 +181,9 @@
methods: { methods: {
switchTab(key) { switchTab(key) {
this.activeTab = key; this.activeTab = key;
if (key === 'register') {
this.$nextTick(() => this.ensureTurnstileRendered());
}
}, },
async doLogin() { async doLogin() {
this.loadingStates.spinning = true; this.loadingStates.spinning = true;
@ -210,26 +214,28 @@
this.user.username = this.regUser.username; this.user.username = this.regUser.username;
this.regUser = { username: "", password: "", confirmPassword: "" }; this.regUser = { username: "", password: "", confirmPassword: "" };
turnstileToken = ''; turnstileToken = '';
if (window.turnstile) { if (window.turnstile && turnstileWidgetId !== null) {
var container = document.getElementById('turnstile-widget'); turnstile.reset(turnstileWidgetId);
if (container) {
turnstile.reset(container);
}
} }
} }
this.loadingStates.registerSpinning = false; this.loadingStates.registerSpinning = false;
}, },
renderTurnstile() { ensureTurnstileRendered(retries = 20) {
if (window.turnstile) { if (!this.turnstileSiteKey || turnstileWidgetId !== null) {
return;
}
var container = document.getElementById('turnstile-widget'); var container = document.getElementById('turnstile-widget');
if (container) { if (!container || !window.turnstile) {
turnstile.render(container, { if (retries > 0) {
setTimeout(() => this.ensureTurnstileRendered(retries - 1), 150);
}
return;
}
turnstileWidgetId = turnstile.render(container, {
sitekey: this.turnstileSiteKey, sitekey: this.turnstileSiteKey,
callback: function(token) { turnstileToken = token; }, callback: function(token) { turnstileToken = token; },
size: this.turnstileSize, size: this.turnstileSize,
}); });
}
}
}, },
async getTurnstileSiteKey() { async getTurnstileSiteKey() {
const msg = await HttpUtil.post('/getTurnstileSiteKey'); const msg = await HttpUtil.post('/getTurnstileSiteKey');