Initial commit: popup.js
This commit is contained in:
233
popup.js
Normal file
233
popup.js
Normal file
@@ -0,0 +1,233 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const addBtn = document.getElementById('add-btn');
|
||||
const addForm = document.getElementById('add-form');
|
||||
const cancelBtn = document.getElementById('cancel-btn');
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
|
||||
const envSelect = document.getElementById('env-select');
|
||||
const clientInput = document.getElementById('client-input');
|
||||
const usernameInput = document.getElementById('username-input');
|
||||
const passwordInput = document.getElementById('password-input');
|
||||
const rulesList = document.getElementById('rules-list');
|
||||
|
||||
const ENV_CONFIG = {
|
||||
PP: {
|
||||
domain: 'app135148.dingtalkoxm.com',
|
||||
url: 'https://app135148.dingtalkoxm.com/user/login'
|
||||
},
|
||||
ATS: {
|
||||
domain: 'app135149.dingtalkoxm.com',
|
||||
url: 'https://app135149.dingtalkoxm.com/login'
|
||||
}
|
||||
};
|
||||
|
||||
let rules = [];
|
||||
let dragStartIndex = -1;
|
||||
|
||||
// Load rules from chrome.storage
|
||||
function loadRules() {
|
||||
if (typeof chrome !== 'undefined' && chrome.storage) {
|
||||
chrome.storage.local.get(['quickPurgeAccounts'], (result) => {
|
||||
rules = result.quickPurgeAccounts || [];
|
||||
renderRules();
|
||||
});
|
||||
} else {
|
||||
renderRules();
|
||||
}
|
||||
}
|
||||
|
||||
function saveRules() {
|
||||
if (typeof chrome !== 'undefined' && chrome.storage) {
|
||||
chrome.storage.local.set({ quickPurgeAccounts: rules }, () => {
|
||||
renderRules();
|
||||
});
|
||||
} else {
|
||||
renderRules();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAddForm() {
|
||||
addForm.classList.toggle('hidden');
|
||||
if (!addForm.classList.contains('hidden')) {
|
||||
clientInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
addBtn.addEventListener('click', toggleAddForm);
|
||||
|
||||
cancelBtn.addEventListener('click', () => {
|
||||
addForm.classList.add('hidden');
|
||||
resetForm();
|
||||
});
|
||||
|
||||
function resetForm() {
|
||||
envSelect.value = 'PP';
|
||||
clientInput.value = '';
|
||||
usernameInput.value = '';
|
||||
passwordInput.value = '';
|
||||
}
|
||||
|
||||
saveBtn.addEventListener('click', () => {
|
||||
const env = envSelect.value;
|
||||
const clientName = clientInput.value.trim();
|
||||
const username = usernameInput.value.trim();
|
||||
const password = passwordInput.value;
|
||||
|
||||
if (!clientName || !username || !password) {
|
||||
alert('请填写完整的客户名称、账号和密码！');
|
||||
return;
|
||||
}
|
||||
|
||||
rules.push({
|
||||
id: Date.now().toString(),
|
||||
env: env,
|
||||
clientName: clientName,
|
||||
username: username,
|
||||
password: password
|
||||
});
|
||||
|
||||
saveRules();
|
||||
addForm.classList.add('hidden');
|
||||
resetForm();
|
||||
});
|
||||
|
||||
function renderRules() {
|
||||
rulesList.innerHTML = '';
|
||||
|
||||
if (rules.length === 0) {
|
||||
rulesList.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="9" y1="9" x2="15" y2="15"></line>
|
||||
<line x1="15" y1="9" x2="9" y2="15"></line>
|
||||
</svg>
|
||||
<span>暂无账号配置，点击上方 "+" 添加</span>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
rules.forEach((rule, index) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'rule-item';
|
||||
li.setAttribute('draggable', 'true');
|
||||
li.setAttribute('data-index', index.toString());
|
||||
|
||||
li.innerHTML = `
|
||||
<div class="drag-handle" title="拖拽排序">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9h8M8 15h8" /></svg>
|
||||
</div>
|
||||
<div class="rule-info">
|
||||
<div class="rule-domain" title="${rule.clientName}">
|
||||
${rule.clientName}
|
||||
<span class="rule-env">${rule.env}</span>
|
||||
</div>
|
||||
<div class="rule-acc" title="${rule.username}">帐号: ${rule.username}</div>
|
||||
</div>
|
||||
<div class="rule-actions">
|
||||
<button class="icon-btn btn-execute" data-id="${rule.id}" title="清理数据并自动登录">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</button>
|
||||
<button class="icon-btn btn-delete" data-id="${rule.id}" title="删除此配置">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
addDragEvents(li);
|
||||
rulesList.appendChild(li);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.btn-delete').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const id = e.currentTarget.getAttribute('data-id');
|
||||
rules = rules.filter(r => r.id !== id);
|
||||
saveRules();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.btn-execute').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const button = e.currentTarget;
|
||||
const id = button.getAttribute('data-id');
|
||||
const rule = rules.find(r => r.id === id);
|
||||
if (rule) {
|
||||
executePurgeAndLogin(rule, button);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- Drag and Drop functionality ---
|
||||
function addDragEvents(item) {
|
||||
item.addEventListener('dragstart', (e) => {
|
||||
dragStartIndex = parseInt(e.currentTarget.getAttribute('data-index'));
|
||||
e.currentTarget.classList.add('dragging');
|
||||
// Set empty ghost image
|
||||
if (e.dataTransfer) {
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
// Need to set data to allow dragging in Firefox
|
||||
e.dataTransfer.setData('text/plain', dragStartIndex);
|
||||
}
|
||||
});
|
||||
|
||||
item.addEventListener('dragend', (e) => {
|
||||
e.currentTarget.classList.remove('dragging');
|
||||
});
|
||||
|
||||
item.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
// Allow drop
|
||||
return false;
|
||||
});
|
||||
|
||||
item.addEventListener('dragenter', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
item.addEventListener('drop', (e) => {
|
||||
e.stopPropagation();
|
||||
const dragEndIndex = parseInt(e.currentTarget.closest('.rule-item').getAttribute('data-index'));
|
||||
|
||||
if (dragStartIndex !== dragEndIndex) {
|
||||
swapItems(dragStartIndex, dragEndIndex);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
function swapItems(fromIndex, toIndex) {
|
||||
// Array manipulation for drag sorting
|
||||
const itemOne = rules[fromIndex];
|
||||
rules.splice(fromIndex, 1);
|
||||
rules.splice(toIndex, 0, itemOne);
|
||||
saveRules();
|
||||
}
|
||||
|
||||
function executePurgeAndLogin(rule, buttonElement) {
|
||||
const svg = buttonElement.querySelector('svg');
|
||||
const originalSvg = svg.outerHTML;
|
||||
buttonElement.innerHTML = `<svg class="loading" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/></svg>`;
|
||||
|
||||
if (typeof chrome !== 'undefined' && chrome.runtime) {
|
||||
const config = ENV_CONFIG[rule.env];
|
||||
chrome.runtime.sendMessage({
|
||||
action: "purgeAndRedirect",
|
||||
domain: config.domain,
|
||||
targetUrl: config.url,
|
||||
username: rule.username,
|
||||
password: rule.password
|
||||
}, (response) => {
|
||||
// Will visually reset only if popup is somehow still open after redirect (unlikely as active tab changes)
|
||||
buttonElement.innerHTML = originalSvg;
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
console.log(`Mock: Purging ${rule.env} and filling ${rule.username}`);
|
||||
buttonElement.innerHTML = originalSvg;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
loadRules();
|
||||
});
|
||||
Reference in New Issue
Block a user