style(webui): refine UI polish and enhance component interactions

This commit is contained in:
Wha1eChai
2026-01-09 07:54:50 +08:00
parent 40a766ded6
commit e909ea6fe3
13 changed files with 808 additions and 253 deletions

View File

@@ -114,16 +114,47 @@ document.addEventListener('alpine:init', () => {
Alpine.store('global').showToast(Alpine.store('global').t('oauthInProgress'), 'info');
// Open OAuth window
window.open(data.url, 'google_oauth', 'width=600,height=700,scrollbars=yes');
const oauthWindow = window.open(data.url, 'google_oauth', 'width=600,height=700,scrollbars=yes');
// Poll for account changes instead of relying on postMessage
// (since OAuth callback is now on port 51121, not this server)
const initialAccountCount = Alpine.store('data').accounts.length;
let pollCount = 0;
const maxPolls = 60; // 2 minutes (2 second intervals)
let cancelled = false;
// Show progress modal
Alpine.store('global').oauthProgress = {
active: true,
current: 0,
max: maxPolls,
cancel: () => {
cancelled = true;
clearInterval(pollInterval);
Alpine.store('global').oauthProgress.active = false;
Alpine.store('global').showToast(Alpine.store('global').t('oauthCancelled'), 'info');
if (oauthWindow && !oauthWindow.closed) {
oauthWindow.close();
}
}
};
const pollInterval = setInterval(async () => {
if (cancelled) {
clearInterval(pollInterval);
return;
}
pollCount++;
Alpine.store('global').oauthProgress.current = pollCount;
// Check if OAuth window was closed manually
if (oauthWindow && oauthWindow.closed && !cancelled) {
clearInterval(pollInterval);
Alpine.store('global').oauthProgress.active = false;
Alpine.store('global').showToast(Alpine.store('global').t('oauthWindowClosed'), 'warning');
return;
}
// Refresh account list
await Alpine.store('data').fetchData();
@@ -132,6 +163,8 @@ document.addEventListener('alpine:init', () => {
const currentAccountCount = Alpine.store('data').accounts.length;
if (currentAccountCount > initialAccountCount) {
clearInterval(pollInterval);
Alpine.store('global').oauthProgress.active = false;
const actionKey = reAuthEmail ? 'reauthenticated' : 'added';
const action = Alpine.store('global').t(actionKey);
const successfully = Alpine.store('global').t('successfully');
@@ -140,11 +173,20 @@ document.addEventListener('alpine:init', () => {
'success'
);
document.getElementById('add_account_modal')?.close();
if (oauthWindow && !oauthWindow.closed) {
oauthWindow.close();
}
}
// Stop polling after max attempts
if (pollCount >= maxPolls) {
clearInterval(pollInterval);
Alpine.store('global').oauthProgress.active = false;
Alpine.store('global').showToast(
Alpine.store('global').t('oauthTimeout'),
'warning'
);
}
}, 2000); // Poll every 2 seconds
} else {