Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-10-13 19:49:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: login animation

Browse source
This commit is contained in:
Tara Rostami 2025-09-25 08:06:49 -05:00 committed by GitHub
parent ffd4c068fa
commit 659f38307e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 34 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
web/html/login.html
View file

@ -108,17 +108,11 @@
el: '#app', el: '#app',
data: { data: {
themeSwitcher, themeSwitcher,
loadingStates: { loadingStates: { fetched: false, spinning: false },
fetched: false, user: { username: "", password: "", twoFactorCode: "" },
spinning: false
},
user: {
username: "",
password: "",
twoFactorCode: ""
},
twoFactorEnable: false, twoFactorEnable: false,
lang: "" lang: "",
animationStarted: false
}, },
async mounted() { async mounted() {
this.lang = LanguageManager.getLanguage(); this.lang = LanguageManager.getLanguage();
@ -127,63 +121,50 @@
methods: { methods: {
async login() { async login() {
this.loadingStates.spinning = true; this.loadingStates.spinning = true;
const msg = await HttpUtil.post('/login', this.user); const msg = await HttpUtil.post('/login', this.user);
if (msg.success) { if (msg.success) {
location.href = basePath + 'panel/'; location.href = basePath + 'panel/';
} }
this.loadingStates.spinning = false; this.loadingStates.spinning = false;
}, },
async getTwoFactorEnable() { async getTwoFactorEnable() {
const msg = await HttpUtil.post('/getTwoFactorEnable'); const msg = await HttpUtil.post('/getTwoFactorEnable');
if (msg.success) { if (msg.success) {
this.twoFactorEnable = msg.obj; this.twoFactorEnable = msg.obj;
this.loadingStates.fetched = true; this.loadingStates.fetched = true;
this.$nextTick(() => {
if (!this.animationStarted) {
this.animationStarted = true;
this.initHeadline();
}
});
return msg.obj; return msg.obj;
} }
}, },
initHeadline() {
const animationDelay = 2000;
const headlines = this.$el.querySelectorAll('.headline');
headlines.forEach((headline) => {
const first = headline.querySelector('.is-visible');
if (!first) return;
setTimeout(() => this.hideWord(first, animationDelay), animationDelay);
});
}, },
}); hideWord(word, delay) {
const nextWord = this.takeNext(word);
document.addEventListener("DOMContentLoaded", function () { this.switchWord(word, nextWord);
var animationDelay = 2000; setTimeout(() => this.hideWord(nextWord, delay), delay);
initHeadline(); },
takeNext(word) {
function initHeadline() { return word.nextElementSibling || word.parentElement.firstElementChild;
animateHeadline(document.querySelectorAll('.headline')); },
} switchWord(oldWord, newWord) {
function animateHeadline(headlines) {
var duration = animationDelay;
headlines.forEach(function (headline) {
setTimeout(function () {
hideWord(headline.querySelector('.is-visible'));
}, duration);
});
}
function hideWord(word) {
var nextWord = takeNext(word);
switchWord(word, nextWord);
setTimeout(function () {
hideWord(nextWord);
}, animationDelay);
}
function takeNext(word) {
return word.nextElementSibling ? word.nextElementSibling : word.parentElement.firstElementChild;
}
function switchWord(oldWord, newWord) {
oldWord.classList.remove('is-visible'); oldWord.classList.remove('is-visible');
oldWord.classList.add('is-hidden'); oldWord.classList.add('is-hidden');
newWord.classList.remove('is-hidden'); newWord.classList.remove('is-hidden');
newWord.classList.add('is-visible'); newWord.classList.add('is-visible');
} }
},
}); });
const pm_input_selector = 'input.ant-input, textarea.ant-input'; const pm_input_selector = 'input.ant-input, textarea.ant-input';