671 lines
23 KiB
JavaScript
671 lines
23 KiB
JavaScript
const sessionStatusEl = document.querySelector("#session-status");
|
|
const sessionUserEl = document.querySelector("#session-user");
|
|
const loginFeedbackEl = document.querySelector("#login-feedback");
|
|
const sessionSummaryTextEl = document.querySelector("#session-summary-text");
|
|
const sessionDetailsEl = document.querySelector("#session-details");
|
|
const toggleSessionBtn = document.querySelector("#toggle-session");
|
|
const startLoginForm = document.querySelector("#start-login-form");
|
|
const verifyLoginForm = document.querySelector("#verify-login-form");
|
|
const logoutButton = document.querySelector("#logout-button");
|
|
const hooksCountEl = document.querySelector("#hooks-count");
|
|
const hooksListEl = document.querySelector("#hooks-list");
|
|
const hookTemplate = document.querySelector("#hook-template");
|
|
const createHookForm = document.querySelector("#create-hook-form");
|
|
const toggleCreateBtn = document.querySelector("#toggle-create");
|
|
const recentChatsBtn = document.querySelector("#recent-chats-btn");
|
|
const recentChatsModal = document.querySelector("#recent-chats-modal");
|
|
const recentChatsListEl = document.querySelector("#recent-chats-list");
|
|
const closeRecentChatsBtn = document.querySelector("#close-recent-chats");
|
|
const recentChatsSearchEl = document.querySelector("#recent-chats-search");
|
|
|
|
let sessionDetailsVisible = false;
|
|
let sessionDetailsTouched = false;
|
|
let createFormVisible = false;
|
|
let createFormTouched = false;
|
|
let lastFocusedElement = null;
|
|
let recentChatsData = [];
|
|
|
|
if (recentChatsSearchEl) {
|
|
recentChatsSearchEl.disabled = true;
|
|
recentChatsSearchEl.addEventListener("input", () => {
|
|
applyRecentChatsFilter();
|
|
});
|
|
recentChatsSearchEl.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape" && recentChatsSearchEl.value) {
|
|
event.preventDefault();
|
|
recentChatsSearchEl.value = "";
|
|
applyRecentChatsFilter();
|
|
}
|
|
});
|
|
}
|
|
|
|
function setSessionDetailsVisibility(show, { fromUser = false } = {}) {
|
|
if (!toggleSessionBtn || !sessionDetailsEl) return;
|
|
sessionDetailsVisible = show;
|
|
if (fromUser) {
|
|
sessionDetailsTouched = true;
|
|
}
|
|
sessionDetailsEl.classList.toggle("hidden", !show);
|
|
toggleSessionBtn.setAttribute("aria-expanded", String(show));
|
|
toggleSessionBtn.textContent = show ? "Hide session controls" : "Manage session";
|
|
}
|
|
|
|
function setCreateFormVisibility(show, { fromUser = false } = {}) {
|
|
if (!toggleCreateBtn) return;
|
|
createFormVisible = show;
|
|
if (fromUser) {
|
|
createFormTouched = true;
|
|
}
|
|
createHookForm.classList.toggle("hidden", !show);
|
|
toggleCreateBtn.setAttribute("aria-expanded", String(show));
|
|
toggleCreateBtn.textContent = show ? "Hide form" : "New Hook";
|
|
if (show) {
|
|
const chatInput = document.querySelector("#hook-chat-id");
|
|
if (chatInput) {
|
|
chatInput.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
if (toggleCreateBtn) {
|
|
toggleCreateBtn.addEventListener("click", () => {
|
|
setCreateFormVisibility(!createFormVisible, { fromUser: true });
|
|
});
|
|
setCreateFormVisibility(false);
|
|
}
|
|
|
|
if (toggleSessionBtn) {
|
|
toggleSessionBtn.addEventListener("click", () => {
|
|
setSessionDetailsVisibility(!sessionDetailsVisible, { fromUser: true });
|
|
});
|
|
setSessionDetailsVisibility(false);
|
|
}
|
|
|
|
async function fetchJSON(url, options = {}) {
|
|
const response = await fetch(url, {
|
|
headers: { "Content-Type": "application/json" },
|
|
...options,
|
|
});
|
|
if (!response.ok) {
|
|
const contentType = response.headers.get("content-type") || "";
|
|
let message = "Request failed";
|
|
if (contentType.includes("application/json")) {
|
|
try {
|
|
const payload = await response.json();
|
|
if (payload && typeof payload === "object") {
|
|
message = payload.detail || JSON.stringify(payload);
|
|
}
|
|
} catch {
|
|
message = await response.text();
|
|
}
|
|
} else {
|
|
const text = await response.text();
|
|
if (text) {
|
|
message = text;
|
|
}
|
|
}
|
|
throw new Error(message || "Request failed");
|
|
}
|
|
if (response.status === 204) {
|
|
return null;
|
|
}
|
|
return response.json();
|
|
}
|
|
|
|
function updateSessionUI(status) {
|
|
if (status.authorized) {
|
|
sessionStatusEl.textContent = "Authorized";
|
|
sessionStatusEl.style.background = "rgba(100, 221, 155, 0.12)";
|
|
sessionStatusEl.style.color = "#64dd9b";
|
|
if (sessionSummaryTextEl) {
|
|
sessionSummaryTextEl.textContent = status.user ? `Logged in as ${status.user}` : "Session ready";
|
|
}
|
|
sessionUserEl.textContent = `Logged in as ${status.user}`;
|
|
loginFeedbackEl.textContent = "Session ready. You can trigger hooks.";
|
|
startLoginForm.classList.add("hidden");
|
|
verifyLoginForm.classList.add("hidden");
|
|
logoutButton.classList.remove("hidden");
|
|
} else {
|
|
sessionStatusEl.textContent = status.code_sent ? "Awaiting code" : "Not authorized";
|
|
sessionStatusEl.style.background = "rgba(79, 140, 255, 0.15)";
|
|
sessionStatusEl.style.color = "#4f8cff";
|
|
if (sessionSummaryTextEl) {
|
|
sessionSummaryTextEl.textContent = status.code_sent
|
|
? "Waiting for verification"
|
|
: "Login required";
|
|
}
|
|
sessionUserEl.textContent = status.phone_number
|
|
? `Phone number: ${status.phone_number}`
|
|
: "Set a phone number to begin";
|
|
logoutButton.classList.add("hidden");
|
|
|
|
if (status.code_sent) {
|
|
verifyLoginForm.classList.remove("hidden");
|
|
loginFeedbackEl.textContent = "Code sent. Check your Telegram messages.";
|
|
} else {
|
|
verifyLoginForm.classList.add("hidden");
|
|
loginFeedbackEl.textContent = "Start by sending a login code to your phone.";
|
|
}
|
|
|
|
startLoginForm.classList.remove("hidden");
|
|
}
|
|
|
|
const shouldShowDetails = !status.authorized || status.code_sent;
|
|
if (!sessionDetailsTouched) {
|
|
setSessionDetailsVisibility(shouldShowDetails);
|
|
} else if (shouldShowDetails && !sessionDetailsVisible) {
|
|
setSessionDetailsVisibility(true);
|
|
}
|
|
setRecentChatsAvailability(status.authorized);
|
|
if (!status.authorized) {
|
|
closeRecentChatsDialog();
|
|
}
|
|
}
|
|
|
|
async function refreshAll() {
|
|
try {
|
|
const status = await fetchJSON("/api/status");
|
|
updateSessionUI(status);
|
|
} catch (error) {
|
|
loginFeedbackEl.textContent = `Failed to refresh status: ${error.message}`;
|
|
}
|
|
await loadHooks();
|
|
}
|
|
|
|
function setRecentChatsAvailability(isAuthorized) {
|
|
if (!recentChatsBtn) return;
|
|
recentChatsBtn.disabled = !isAuthorized;
|
|
recentChatsBtn.title = isAuthorized
|
|
? "Browse your recent Telegram chats"
|
|
: "Authorize the session to view recent chats";
|
|
if (!isAuthorized && recentChatsSearchEl) {
|
|
recentChatsSearchEl.value = "";
|
|
recentChatsSearchEl.disabled = true;
|
|
}
|
|
}
|
|
|
|
function applyRecentChatsFilter() {
|
|
if (!recentChatsListEl) return;
|
|
const query = recentChatsSearchEl ? recentChatsSearchEl.value.trim().toLowerCase() : "";
|
|
const source = Array.isArray(recentChatsData) ? recentChatsData : [];
|
|
const filtered = !query
|
|
? source
|
|
: source.filter((chat) => {
|
|
const parts = [
|
|
chat.display_name,
|
|
chat.chat_id,
|
|
chat.username ? `@${chat.username}` : null,
|
|
chat.phone_number,
|
|
chat.chat_type,
|
|
]
|
|
.filter(Boolean)
|
|
.map((part) => String(part).toLowerCase());
|
|
return parts.some((part) => part.includes(query));
|
|
});
|
|
renderRecentChats(filtered);
|
|
}
|
|
|
|
async function openRecentChatsDialog() {
|
|
if (!recentChatsModal || !recentChatsListEl) return;
|
|
if (recentChatsModal.classList.contains("hidden") && document.activeElement instanceof HTMLElement) {
|
|
lastFocusedElement = document.activeElement;
|
|
}
|
|
recentChatsModal.classList.remove("hidden");
|
|
recentChatsModal.scrollTop = 0;
|
|
recentChatsListEl.innerHTML = "";
|
|
recentChatsData = [];
|
|
if (recentChatsSearchEl) {
|
|
recentChatsSearchEl.value = "";
|
|
recentChatsSearchEl.disabled = true;
|
|
}
|
|
const loading = document.createElement("p");
|
|
loading.className = "feedback";
|
|
loading.textContent = "Loading recent chats…";
|
|
recentChatsListEl.appendChild(loading);
|
|
try {
|
|
const chats = await fetchJSON("/api/recent-chats");
|
|
recentChatsData = Array.isArray(chats) ? chats : [];
|
|
if (recentChatsSearchEl) {
|
|
recentChatsSearchEl.disabled = false;
|
|
recentChatsSearchEl.focus();
|
|
}
|
|
applyRecentChatsFilter();
|
|
} catch (error) {
|
|
recentChatsListEl.innerHTML = "";
|
|
const message = document.createElement("p");
|
|
message.className = "feedback";
|
|
const text = typeof error?.message === "string" ? error.message : "Unable to load recent chats.";
|
|
message.textContent = text.includes("Session not authorized")
|
|
? "Authorize the session to view recent chats."
|
|
: `Unable to load recent chats: ${text}`;
|
|
recentChatsListEl.appendChild(message);
|
|
recentChatsData = [];
|
|
if (recentChatsSearchEl) {
|
|
recentChatsSearchEl.disabled = true;
|
|
}
|
|
}
|
|
document.addEventListener("keydown", handleRecentChatsKeydown);
|
|
if (recentChatsModal && (!recentChatsSearchEl || recentChatsSearchEl.disabled)) {
|
|
const focusTarget = recentChatsModal.querySelector("button, [href], input, textarea, [tabindex]:not([tabindex='-1'])");
|
|
if (focusTarget instanceof HTMLElement) {
|
|
focusTarget.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderRecentChats(chats) {
|
|
if (!recentChatsListEl) return;
|
|
recentChatsListEl.innerHTML = "";
|
|
if (!Array.isArray(chats) || !chats.length) {
|
|
const empty = document.createElement("p");
|
|
empty.className = "feedback";
|
|
empty.textContent = "No recent chats available. Start a conversation in Telegram to see it here.";
|
|
recentChatsListEl.appendChild(empty);
|
|
return;
|
|
}
|
|
|
|
chats.forEach((chat) => {
|
|
const item = document.createElement("div");
|
|
item.className = "recent-chat-item";
|
|
|
|
const details = document.createElement("div");
|
|
details.className = "recent-chat-details";
|
|
|
|
const nameEl = document.createElement("span");
|
|
nameEl.className = "recent-chat-name";
|
|
nameEl.textContent = chat.display_name || chat.chat_id;
|
|
|
|
const metaEl = document.createElement("span");
|
|
metaEl.className = "recent-chat-meta";
|
|
const metaParts = [];
|
|
if (chat.chat_type) {
|
|
metaParts.push(String(chat.chat_type).toUpperCase());
|
|
}
|
|
if (chat.last_used_at) {
|
|
metaParts.push(`Last activity ${new Date(chat.last_used_at).toLocaleString()}`);
|
|
}
|
|
metaEl.textContent = metaParts.length ? metaParts.join(" • ") : "Unknown chat";
|
|
|
|
const feedbackEl = document.createElement("span");
|
|
feedbackEl.className = "recent-chat-feedback";
|
|
let feedbackTimeout;
|
|
|
|
const setFeedback = (message, isError = false) => {
|
|
feedbackEl.textContent = message;
|
|
feedbackEl.style.color = isError ? "#ffbac7" : message ? "#64dd9b" : "";
|
|
if (feedbackTimeout) {
|
|
clearTimeout(feedbackTimeout);
|
|
feedbackTimeout = undefined;
|
|
}
|
|
if (message) {
|
|
feedbackTimeout = window.setTimeout(() => {
|
|
feedbackEl.textContent = "";
|
|
feedbackEl.style.color = "";
|
|
feedbackTimeout = undefined;
|
|
}, 2400);
|
|
}
|
|
};
|
|
|
|
details.appendChild(nameEl);
|
|
details.appendChild(metaEl);
|
|
details.appendChild(feedbackEl);
|
|
item.appendChild(details);
|
|
|
|
const appendRow = (labelText, displayValue, copyValue, options = {}) => {
|
|
const { required = false, valueClasses = [] } = options;
|
|
const rawValue = displayValue ?? "";
|
|
const valueString = rawValue !== null && rawValue !== undefined ? String(rawValue) : "";
|
|
const hasValue = valueString.trim() !== "";
|
|
if (!required && !hasValue) {
|
|
return;
|
|
}
|
|
|
|
const row = document.createElement("div");
|
|
row.className = "recent-chat-row";
|
|
|
|
const labelEl = document.createElement("span");
|
|
labelEl.className = "recent-chat-label";
|
|
labelEl.textContent = labelText;
|
|
|
|
const actionsEl = document.createElement("div");
|
|
actionsEl.className = "recent-chat-actions";
|
|
|
|
const valueButton = document.createElement("button");
|
|
valueButton.type = "button";
|
|
valueButton.className = "recent-chat-value-button";
|
|
if (Array.isArray(valueClasses)) {
|
|
valueClasses.forEach((cls) => valueButton.classList.add(cls));
|
|
} else if (typeof valueClasses === "string" && valueClasses) {
|
|
valueButton.classList.add(valueClasses);
|
|
}
|
|
valueButton.setAttribute("aria-label", `Copy ${labelText.toLowerCase()} for ${nameEl.textContent}`);
|
|
|
|
const valueTextEl = document.createElement("span");
|
|
valueTextEl.className = "recent-chat-value";
|
|
valueTextEl.textContent = hasValue ? valueString : "—";
|
|
valueButton.appendChild(valueTextEl);
|
|
|
|
const iconEl = document.createElement("span");
|
|
iconEl.className = "recent-chat-copy-icon";
|
|
iconEl.innerHTML = `
|
|
<svg class="icon icon-copy" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v16h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 18H8V7h11v16z" />
|
|
</svg>
|
|
`;
|
|
valueButton.appendChild(iconEl);
|
|
|
|
const canCopy = hasValue && copyValue !== null && copyValue !== undefined && copyValue !== "";
|
|
if (canCopy) {
|
|
valueButton.addEventListener("click", async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(String(copyValue));
|
|
setFeedback(`${labelText} copied to clipboard.`);
|
|
} catch (err) {
|
|
setFeedback(`Copy failed: ${err.message}`, true);
|
|
}
|
|
});
|
|
} else {
|
|
valueButton.disabled = true;
|
|
valueButton.setAttribute("aria-disabled", "true");
|
|
}
|
|
|
|
actionsEl.appendChild(valueButton);
|
|
row.appendChild(labelEl);
|
|
row.appendChild(actionsEl);
|
|
item.appendChild(row);
|
|
};
|
|
|
|
appendRow(
|
|
"Chat ID",
|
|
typeof chat.chat_id === "number" || typeof chat.chat_id === "bigint" ? String(chat.chat_id) : chat.chat_id,
|
|
chat.chat_id,
|
|
{ required: true, valueClasses: ["mono"] },
|
|
);
|
|
appendRow(
|
|
"Username",
|
|
chat.username ? `@${chat.username}` : "",
|
|
chat.username ? `@${chat.username}` : "",
|
|
{},
|
|
);
|
|
appendRow(
|
|
"Phone",
|
|
chat.phone_number ? String(chat.phone_number) : "",
|
|
chat.phone_number ? String(chat.phone_number) : "",
|
|
{},
|
|
);
|
|
|
|
recentChatsListEl.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function closeRecentChatsDialog() {
|
|
if (!recentChatsModal || recentChatsModal.classList.contains("hidden")) return;
|
|
recentChatsModal.classList.add("hidden");
|
|
document.removeEventListener("keydown", handleRecentChatsKeydown);
|
|
if (lastFocusedElement && typeof lastFocusedElement.focus === "function") {
|
|
lastFocusedElement.focus();
|
|
}
|
|
}
|
|
|
|
function handleRecentChatsKeydown(event) {
|
|
if (event.key === "Escape") {
|
|
event.preventDefault();
|
|
closeRecentChatsDialog();
|
|
}
|
|
}
|
|
|
|
if (recentChatsBtn) {
|
|
recentChatsBtn.addEventListener("click", () => {
|
|
openRecentChatsDialog();
|
|
});
|
|
}
|
|
|
|
if (closeRecentChatsBtn) {
|
|
closeRecentChatsBtn.addEventListener("click", () => {
|
|
closeRecentChatsDialog();
|
|
});
|
|
}
|
|
|
|
if (recentChatsModal) {
|
|
recentChatsModal.addEventListener("click", (event) => {
|
|
if (event.target === recentChatsModal) {
|
|
closeRecentChatsDialog();
|
|
}
|
|
});
|
|
}
|
|
|
|
async function loadHooks() {
|
|
try {
|
|
const hooks = await fetchJSON("/api/hooks");
|
|
hooksCountEl.textContent = hooks.length;
|
|
hooksListEl.innerHTML = "";
|
|
if (!hooks.length) {
|
|
if (!createFormTouched) {
|
|
setCreateFormVisibility(true);
|
|
}
|
|
const empty = document.createElement("p");
|
|
empty.className = "feedback";
|
|
empty.textContent = "No hooks yet. Use the New Hook button above to create one.";
|
|
hooksListEl.appendChild(empty);
|
|
return;
|
|
}
|
|
|
|
hooks.forEach((hook) => {
|
|
const node = hookTemplate.content.cloneNode(true);
|
|
node.querySelector("h3").textContent = hook.chat_id;
|
|
node.querySelector(".hook-date").textContent = new Date(hook.created_at).toLocaleString();
|
|
const lastRunEl = node.querySelector(".hook-last-run");
|
|
if (lastRunEl) {
|
|
lastRunEl.textContent = hook.last_triggered_at
|
|
? `Last triggered ${new Date(hook.last_triggered_at).toLocaleString()}`
|
|
: "Never triggered yet";
|
|
}
|
|
node.querySelector(".hook-message").textContent = hook.message;
|
|
node.querySelector(".hook-url").textContent = hook.action_url;
|
|
node.querySelector(".hook-id").textContent = hook.hook_id;
|
|
const feedbackEl = node.querySelector(".hook-feedback");
|
|
const editForm = node.querySelector(".edit-hook-form");
|
|
const editIdInput = editForm.querySelector(".edit-id");
|
|
const editChatInput = editForm.querySelector(".edit-chat");
|
|
const editMessageInput = editForm.querySelector(".edit-message");
|
|
const saveEditBtn = editForm.querySelector(".save-edit");
|
|
const cancelEditBtn = editForm.querySelector(".cancel-edit");
|
|
const editDetailsBtn = node.querySelector(".edit-details");
|
|
|
|
const setFeedback = (text = "", color = "") => {
|
|
feedbackEl.textContent = text;
|
|
feedbackEl.style.color = color;
|
|
};
|
|
|
|
const toggleEditForm = (show) => {
|
|
editForm.classList.toggle("hidden", !show);
|
|
editDetailsBtn.disabled = show;
|
|
if (show) {
|
|
editIdInput.value = hook.hook_id;
|
|
editChatInput.value = hook.chat_id;
|
|
editMessageInput.value = hook.message;
|
|
requestAnimationFrame(() => {
|
|
editIdInput.focus();
|
|
});
|
|
}
|
|
};
|
|
|
|
editDetailsBtn.addEventListener("click", () => {
|
|
toggleEditForm(true);
|
|
});
|
|
|
|
cancelEditBtn.addEventListener("click", () => {
|
|
toggleEditForm(false);
|
|
setFeedback();
|
|
});
|
|
|
|
const copyBtn = node.querySelector(".copy");
|
|
copyBtn.addEventListener("click", async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(hook.action_url);
|
|
setFeedback("Hook URL copied to clipboard.", "#64dd9b");
|
|
setTimeout(() => setFeedback(), 2000);
|
|
} catch (err) {
|
|
setFeedback(`Copy failed: ${err.message}`, "#ffbac7");
|
|
setTimeout(() => setFeedback(), 2500);
|
|
}
|
|
});
|
|
|
|
const triggerBtn = node.querySelector(".trigger");
|
|
triggerBtn.addEventListener("click", async () => {
|
|
triggerBtn.disabled = true;
|
|
setFeedback("Sending message…");
|
|
try {
|
|
const result = await fetchJSON(`/action/${hook.hook_id}`);
|
|
setFeedback(`Status: ${result.status}`, "#64dd9b");
|
|
} catch (err) {
|
|
setFeedback(`Failed: ${err.message}`, "#ffbac7");
|
|
} finally {
|
|
setTimeout(() => {
|
|
triggerBtn.disabled = false;
|
|
setFeedback();
|
|
}, 2500);
|
|
}
|
|
});
|
|
|
|
editForm.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
const updatedId = editIdInput.value.trim();
|
|
const updatedChat = editChatInput.value.trim();
|
|
const updatedMessage = editMessageInput.value.trim();
|
|
if (!updatedId || !updatedChat || !updatedMessage) {
|
|
setFeedback("Hook ID, chat ID, and message are required.", "#ffbac7");
|
|
return;
|
|
}
|
|
saveEditBtn.disabled = true;
|
|
cancelEditBtn.disabled = true;
|
|
const originalSaveText = saveEditBtn.textContent;
|
|
saveEditBtn.textContent = "Saving…";
|
|
setFeedback();
|
|
try {
|
|
await fetchJSON(`/api/hooks/${hook.hook_id}`, {
|
|
method: "PATCH",
|
|
body: JSON.stringify({ hook_id: updatedId, chat_id: updatedChat, message: updatedMessage }),
|
|
});
|
|
setFeedback("Hook updated.", "#64dd9b");
|
|
toggleEditForm(false);
|
|
await loadHooks();
|
|
} catch (err) {
|
|
setFeedback(`Update failed: ${err.message}`, "#ffbac7");
|
|
} finally {
|
|
saveEditBtn.disabled = false;
|
|
cancelEditBtn.disabled = false;
|
|
saveEditBtn.textContent = originalSaveText;
|
|
setTimeout(() => {
|
|
setFeedback();
|
|
}, 2500);
|
|
}
|
|
});
|
|
|
|
const deleteBtn = node.querySelector(".delete");
|
|
deleteBtn.addEventListener("click", async () => {
|
|
if (!confirm("Delete this hook?")) return;
|
|
try {
|
|
await fetchJSON(`/api/hooks/${hook.hook_id}`, { method: "DELETE" });
|
|
await loadHooks();
|
|
} catch (err) {
|
|
alert(`Failed to delete hook: ${err.message}`);
|
|
}
|
|
});
|
|
|
|
hooksListEl.appendChild(node);
|
|
});
|
|
} catch (error) {
|
|
hooksListEl.innerHTML = "";
|
|
const para = document.createElement("p");
|
|
para.className = "feedback";
|
|
para.textContent = `Failed to load hooks: ${error.message}`;
|
|
hooksListEl.appendChild(para);
|
|
}
|
|
}
|
|
|
|
startLoginForm.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
const phoneNumber = document.querySelector("#phone-number").value || null;
|
|
loginFeedbackEl.textContent = "Sending code…";
|
|
try {
|
|
const status = await fetchJSON("/api/login/start", {
|
|
method: "POST",
|
|
body: JSON.stringify({ phone_number: phoneNumber }),
|
|
});
|
|
updateSessionUI(status);
|
|
loginFeedbackEl.textContent = "Code sent successfully.";
|
|
} catch (error) {
|
|
loginFeedbackEl.textContent = `Failed to send code: ${error.message}`;
|
|
}
|
|
});
|
|
|
|
verifyLoginForm.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
const code = document.querySelector("#verification-code").value;
|
|
const password = document.querySelector("#twofactor-password").value || null;
|
|
loginFeedbackEl.textContent = "Verifying…";
|
|
try {
|
|
const status = await fetchJSON("/api/login/verify", {
|
|
method: "POST",
|
|
body: JSON.stringify({ code, password }),
|
|
});
|
|
updateSessionUI(status);
|
|
loginFeedbackEl.textContent = status.authorized
|
|
? "Login completed."
|
|
: "Enter your password to finish.";
|
|
} catch (error) {
|
|
loginFeedbackEl.textContent = `Verification failed: ${error.message}`;
|
|
}
|
|
});
|
|
|
|
logoutButton.addEventListener("click", async () => {
|
|
try {
|
|
const status = await fetchJSON("/api/logout", { method: "POST" });
|
|
updateSessionUI(status);
|
|
loginFeedbackEl.textContent = "Logged out.";
|
|
} catch (error) {
|
|
loginFeedbackEl.textContent = `Logout failed: ${error.message}`;
|
|
}
|
|
});
|
|
|
|
createHookForm.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
const chatId = document.querySelector("#hook-chat-id").value.trim();
|
|
const message = document.querySelector("#hook-message").value.trim();
|
|
if (!chatId || !message) {
|
|
alert("Chat ID and message are required.");
|
|
return;
|
|
}
|
|
const submitBtn = createHookForm.querySelector("button[type='submit']");
|
|
const originalText = submitBtn.textContent;
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = "Creating…";
|
|
try {
|
|
await fetchJSON("/api/hooks", {
|
|
method: "POST",
|
|
body: JSON.stringify({ chat_id: chatId, message }),
|
|
});
|
|
createHookForm.reset();
|
|
await loadHooks();
|
|
} catch (error) {
|
|
alert(`Failed to create hook: ${error.message}`);
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = originalText;
|
|
}
|
|
});
|
|
|
|
window.addEventListener("DOMContentLoaded", async () => {
|
|
await refreshAll();
|
|
try {
|
|
const status = await fetchJSON("/api/status");
|
|
const phoneInput = document.querySelector("#phone-number");
|
|
if (status.phone_number && !phoneInput.value) {
|
|
phoneInput.value = status.phone_number;
|
|
}
|
|
} catch (err) {
|
|
console.warn("Unable to preload phone number", err);
|
|
}
|
|
});
|