feat: Enhance hook management and session handling
- Update hook model to include last_triggered_at field. - Modify API endpoints to support updating hooks with new fields. - Implement session management UI improvements with toggle functionality. - Add new JavaScript functions for better session detail visibility. - Refactor hook storage logic to handle last triggered timestamps. - Introduce new favicon and logo for branding. - Update styles for improved layout and user experience. - Enhance tests to cover new functionality and ensure reliability.
This commit is contained in:
Andre Beging
18
app/main.py
18
app/main.py
@@ -10,7 +10,7 @@ from .config import get_settings
|
||||
from .models import (
|
||||
HookCreate,
|
||||
HookResponse,
|
||||
HookUpdateId,
|
||||
HookUpdate,
|
||||
LoginStartRequest,
|
||||
LoginVerifyRequest,
|
||||
MessageTriggerResponse,
|
||||
@@ -21,7 +21,8 @@ from .storage import (
|
||||
delete_hook_async,
|
||||
get_hook_async,
|
||||
list_hooks_async,
|
||||
update_hook_id_async,
|
||||
record_hook_trigger_async,
|
||||
update_hook_async,
|
||||
)
|
||||
from .telegram_service import telegram_service
|
||||
|
||||
@@ -128,6 +129,7 @@ async def list_hooks() -> List[HookResponse]:
|
||||
chat_id=hook.chat_id,
|
||||
message=hook.message,
|
||||
created_at=hook.created_at,
|
||||
last_triggered_at=hook.last_triggered_at,
|
||||
action_url=f"{settings.base_url}{hook.action_path}",
|
||||
)
|
||||
for hook in hooks
|
||||
@@ -142,6 +144,7 @@ async def create_hook(payload: HookCreate) -> HookResponse:
|
||||
chat_id=hook.chat_id,
|
||||
message=hook.message,
|
||||
created_at=hook.created_at,
|
||||
last_triggered_at=hook.last_triggered_at,
|
||||
action_url=f"{settings.base_url}{hook.action_path}",
|
||||
)
|
||||
|
||||
@@ -154,9 +157,14 @@ async def delete_hook(hook_id: str) -> None:
|
||||
|
||||
|
||||
@app.patch("/api/hooks/{hook_id}", response_model=HookResponse)
|
||||
async def update_hook(hook_id: str, payload: HookUpdateId) -> HookResponse:
|
||||
async def update_hook(hook_id: str, payload: HookUpdate) -> HookResponse:
|
||||
try:
|
||||
updated = await update_hook_id_async(hook_id, payload.hook_id)
|
||||
updated = await update_hook_async(
|
||||
hook_id,
|
||||
new_hook_id=payload.hook_id,
|
||||
chat_id=payload.chat_id,
|
||||
message=payload.message,
|
||||
)
|
||||
except KeyError as exc:
|
||||
raise HTTPException(status_code=404, detail="Hook not found") from exc
|
||||
except ValueError as exc:
|
||||
@@ -166,6 +174,7 @@ async def update_hook(hook_id: str, payload: HookUpdateId) -> HookResponse:
|
||||
chat_id=updated.chat_id,
|
||||
message=updated.message,
|
||||
created_at=updated.created_at,
|
||||
last_triggered_at=updated.last_triggered_at,
|
||||
action_url=f"{settings.base_url}{updated.action_path}",
|
||||
)
|
||||
|
||||
@@ -181,4 +190,5 @@ async def trigger_hook(hook_id: str) -> MessageTriggerResponse:
|
||||
raise HTTPException(status_code=401, detail=str(exc)) from exc
|
||||
except Exception as exc: # noqa: BLE001
|
||||
raise HTTPException(status_code=500, detail=str(exc)) from exc
|
||||
await record_hook_trigger_async(hook.hook_id)
|
||||
return MessageTriggerResponse(status="sent", hook_id=hook.hook_id, chat_id=hook.chat_id)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
from datetime import datetime
|
||||
from typing import Optional
|
||||
|
||||
from pydantic import BaseModel, Field
|
||||
from pydantic import BaseModel, Field, field_validator, model_validator
|
||||
|
||||
|
||||
class HookCreate(BaseModel):
|
||||
@@ -14,6 +14,7 @@ class HookRead(BaseModel):
|
||||
message: str
|
||||
chat_id: str
|
||||
created_at: datetime
|
||||
last_triggered_at: Optional[datetime] = None
|
||||
|
||||
@property
|
||||
def action_path(self) -> str:
|
||||
@@ -24,14 +25,60 @@ class HookResponse(HookRead):
|
||||
action_url: str
|
||||
|
||||
|
||||
class HookUpdateId(BaseModel):
|
||||
hook_id: str = Field(
|
||||
...,
|
||||
class HookUpdate(BaseModel):
|
||||
hook_id: Optional[str] = Field(
|
||||
default=None,
|
||||
min_length=3,
|
||||
max_length=64,
|
||||
pattern=r"^[A-Za-z0-9_-]+$",
|
||||
description="New hook identifier",
|
||||
)
|
||||
chat_id: Optional[str] = Field(
|
||||
default=None,
|
||||
min_length=1,
|
||||
description="Updated target chat ID or username",
|
||||
)
|
||||
message: Optional[str] = Field(
|
||||
default=None,
|
||||
min_length=1,
|
||||
description="Updated message body supporting Markdown",
|
||||
)
|
||||
|
||||
@model_validator(mode="after")
|
||||
def ensure_any_field(cls, values: "HookUpdate") -> "HookUpdate":
|
||||
if values.hook_id is None and values.chat_id is None and values.message is None:
|
||||
raise ValueError("Provide at least one field to update")
|
||||
return values
|
||||
|
||||
@field_validator("hook_id", mode="before")
|
||||
@classmethod
|
||||
def normalize_hook_id(cls, value: Optional[str]) -> Optional[str]:
|
||||
if value is None:
|
||||
return None
|
||||
trimmed = value.strip()
|
||||
if not trimmed:
|
||||
raise ValueError("Hook ID cannot be empty")
|
||||
return trimmed
|
||||
|
||||
@field_validator("chat_id", mode="before")
|
||||
@classmethod
|
||||
def normalize_chat_id(cls, value: Optional[str]) -> Optional[str]:
|
||||
if value is None:
|
||||
return None
|
||||
trimmed = value.strip()
|
||||
if not trimmed:
|
||||
raise ValueError("Chat ID cannot be empty")
|
||||
return trimmed
|
||||
|
||||
@field_validator("message", mode="before")
|
||||
@classmethod
|
||||
def normalize_message(cls, value: Optional[str]) -> Optional[str]:
|
||||
if value is None:
|
||||
return None
|
||||
stripped = value.strip()
|
||||
if not stripped:
|
||||
raise ValueError("Message cannot be empty")
|
||||
return stripped
|
||||
|
||||
|
||||
class LoginStartRequest(BaseModel):
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
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");
|
||||
@@ -10,9 +13,22 @@ const hookTemplate = document.querySelector("#hook-template");
|
||||
const createHookForm = document.querySelector("#create-hook-form");
|
||||
const toggleCreateBtn = document.querySelector("#toggle-create");
|
||||
|
||||
let sessionDetailsVisible = false;
|
||||
let sessionDetailsTouched = false;
|
||||
let createFormVisible = false;
|
||||
let createFormTouched = false;
|
||||
|
||||
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;
|
||||
@@ -37,6 +53,13 @@ if (toggleCreateBtn) {
|
||||
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" },
|
||||
@@ -54,6 +77,9 @@ function updateSessionUI(status) {
|
||||
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");
|
||||
@@ -63,6 +89,11 @@ function updateSessionUI(status) {
|
||||
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";
|
||||
@@ -78,6 +109,13 @@ function updateSessionUI(status) {
|
||||
|
||||
startLoginForm.classList.remove("hidden");
|
||||
}
|
||||
|
||||
const shouldShowDetails = !status.authorized || status.code_sent;
|
||||
if (!sessionDetailsTouched) {
|
||||
setSessionDetailsVisibility(shouldShowDetails);
|
||||
} else if (shouldShowDetails && !sessionDetailsVisible) {
|
||||
setSessionDetailsVisibility(true);
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
@@ -110,82 +148,110 @@ async function loadHooks() {
|
||||
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);
|
||||
copyBtn.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
copyBtn.textContent = "Copy URL";
|
||||
}, 2000);
|
||||
setFeedback("Hook URL copied to clipboard.", "#64dd9b");
|
||||
setTimeout(() => setFeedback(), 2000);
|
||||
} catch (err) {
|
||||
copyBtn.textContent = "Copy failed";
|
||||
setTimeout(() => {
|
||||
copyBtn.textContent = "Copy URL";
|
||||
}, 2000);
|
||||
setFeedback(`Copy failed: ${err.message}`, "#ffbac7");
|
||||
setTimeout(() => setFeedback(), 2500);
|
||||
}
|
||||
});
|
||||
|
||||
const triggerBtn = node.querySelector(".trigger");
|
||||
triggerBtn.addEventListener("click", async () => {
|
||||
const originalText = triggerBtn.textContent;
|
||||
triggerBtn.disabled = true;
|
||||
triggerBtn.textContent = "Sending…";
|
||||
feedbackEl.textContent = "";
|
||||
setFeedback("Sending message…");
|
||||
try {
|
||||
const result = await fetchJSON(`/action/${hook.hook_id}`);
|
||||
triggerBtn.textContent = "Sent";
|
||||
feedbackEl.textContent = `Status: ${result.status}`;
|
||||
feedbackEl.style.color = "#64dd9b";
|
||||
setFeedback(`Status: ${result.status}`, "#64dd9b");
|
||||
} catch (err) {
|
||||
triggerBtn.textContent = "Retry";
|
||||
feedbackEl.textContent = `Failed: ${err.message}`;
|
||||
feedbackEl.style.color = "#ffbac7";
|
||||
setFeedback(`Failed: ${err.message}`, "#ffbac7");
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
triggerBtn.textContent = originalText;
|
||||
triggerBtn.disabled = false;
|
||||
feedbackEl.style.color = "";
|
||||
}, 2000);
|
||||
setFeedback();
|
||||
}, 2500);
|
||||
}
|
||||
});
|
||||
|
||||
const editIdBtn = node.querySelector(".edit-id");
|
||||
const editIconMarkup = editIdBtn.innerHTML;
|
||||
editIdBtn.addEventListener("click", async () => {
|
||||
const newId = prompt("Enter new hook ID", hook.hook_id);
|
||||
if (newId === null) {
|
||||
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;
|
||||
}
|
||||
const sanitized = newId.trim();
|
||||
if (!sanitized || sanitized === hook.hook_id) {
|
||||
return;
|
||||
}
|
||||
editIdBtn.disabled = true;
|
||||
editIdBtn.textContent = "Saving…";
|
||||
feedbackEl.textContent = "";
|
||||
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: sanitized }),
|
||||
body: JSON.stringify({ hook_id: updatedId, chat_id: updatedChat, message: updatedMessage }),
|
||||
});
|
||||
feedbackEl.textContent = "Hook ID updated.";
|
||||
feedbackEl.style.color = "#64dd9b";
|
||||
setFeedback("Hook updated.", "#64dd9b");
|
||||
toggleEditForm(false);
|
||||
await loadHooks();
|
||||
} catch (err) {
|
||||
feedbackEl.textContent = `Update failed: ${err.message}`;
|
||||
feedbackEl.style.color = "#ffbac7";
|
||||
setFeedback(`Update failed: ${err.message}`, "#ffbac7");
|
||||
} finally {
|
||||
editIdBtn.disabled = false;
|
||||
editIdBtn.innerHTML = editIconMarkup;
|
||||
saveEditBtn.disabled = false;
|
||||
cancelEditBtn.disabled = false;
|
||||
saveEditBtn.textContent = originalSaveText;
|
||||
setTimeout(() => {
|
||||
feedbackEl.textContent = "";
|
||||
feedbackEl.style.color = "";
|
||||
setFeedback();
|
||||
}, 2500);
|
||||
}
|
||||
});
|
||||
|
||||
19
app/static/favicon.svg
Normal file
19
app/static/favicon.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Telegram Message Hook Icon</title>
|
||||
<desc id="desc">Circular badge with a paper plane and hook accent</desc>
|
||||
<defs>
|
||||
<radialGradient id="bg" cx="50%" cy="28%" r="70%">
|
||||
<stop offset="0%" stop-color="#45C9FF" />
|
||||
<stop offset="60%" stop-color="#2AA3F6" />
|
||||
<stop offset="100%" stop-color="#1A5DD8" />
|
||||
</radialGradient>
|
||||
<linearGradient id="hook" x1="0" x2="1" y1="1" y2="0">
|
||||
<stop offset="0%" stop-color="#62FFD6" />
|
||||
<stop offset="100%" stop-color="#42C79B" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="30" fill="url(#bg)" />
|
||||
<path d="M50.2 15.6L13.7 30.6c-1.7.7-1.6 3.1.2 3.7l10.8 3.4c.9.3 1.8-.1 2.4-.8l14-14.2c.4-.4 1 .1.6.7l-9.4 15.1c-.4.6-.5 1.3-.4 2l1.8 11.2c.3 1.8 2.7 2.2 3.4.6l4.7-9.8c.2-.5.7-.9 1.2-1l11.4-2.7c1.8-.4 2-3 .3-3.7l-10.7-4.4 9.1-9.1c1.5-1.6-.2-4-2.4-2.9z" fill="#fff" />
|
||||
<path d="M46 46.5c0 7.7-6.3 14-14 14s-14-6.3-14-14" fill="none" stroke="url(#hook)" stroke-width="4" stroke-linecap="round" />
|
||||
<circle cx="18" cy="46.5" r="3" fill="#ffffff" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
19
app/static/logo.svg
Normal file
19
app/static/logo.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Telegram Message Hook Logo</title>
|
||||
<desc id="desc">Circular badge with a paper plane and hook accent</desc>
|
||||
<defs>
|
||||
<radialGradient id="bg" cx="50%" cy="30%" r="75%">
|
||||
<stop offset="0%" stop-color="#45C9FF" />
|
||||
<stop offset="55%" stop-color="#2AA3F6" />
|
||||
<stop offset="100%" stop-color="#1A5DD8" />
|
||||
</radialGradient>
|
||||
<linearGradient id="hook" x1="0" x2="1" y1="1" y2="0">
|
||||
<stop offset="0%" stop-color="#62FFD6" />
|
||||
<stop offset="100%" stop-color="#42C79B" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="80" cy="80" r="74" fill="url(#bg)" />
|
||||
<path d="M120.6 37.8L34.7 72.3c-3.5 1.4-3.4 6.2.2 7.4l22.1 7.1c1.7.5 3.5-.1 4.6-1.4l32-32.6c.8-.8 2 .3 1.3 1.2L75.4 96.9c-.9 1.2-1.2 2.7-.9 4.1l4 24.1c.7 4.1 6.1 4.9 7.7 1l9.8-21.1c.4-.9 1.3-1.6 2.3-1.8l24-5.7c3.5-.8 3.8-5.6.5-7.1l-23.1-9.5 19.7-19.7c3.4-3.4-.7-9-5.1-6.4z" fill="#fff" />
|
||||
<path d="M115 108c0 19-15.4 34.4-34.4 34.4S46.2 127 46.2 108" fill="none" stroke="url(#hook)" stroke-width="10" stroke-linecap="round" />
|
||||
<circle cx="46.2" cy="108" r="6.5" fill="#ffffff" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -32,6 +32,23 @@ footer {
|
||||
padding: 2rem clamp(1rem, 6vw, 4rem);
|
||||
}
|
||||
|
||||
.site-identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(1rem, 4vw, 1.75rem);
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
width: clamp(3.25rem, 8vw, 4.75rem);
|
||||
height: auto;
|
||||
filter: drop-shadow(0 12px 24px rgba(24, 40, 92, 0.55));
|
||||
}
|
||||
|
||||
.site-title {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
@@ -45,10 +62,10 @@ header h1 {
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
padding: 0 clamp(1rem, 6vw, 4rem) 4rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -86,6 +103,52 @@ main {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.session-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.session-summary-main {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.session-status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.session-summary-text {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.session-toggle {
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.session-details {
|
||||
margin-top: 1.5rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#session-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--muted);
|
||||
@@ -144,12 +207,15 @@ button:active {
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
padding: 0.6rem;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
min-width: 2.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
border-radius: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -206,7 +272,14 @@ button:active {
|
||||
|
||||
.hook-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 1.25rem;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.hook-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.hook-card {
|
||||
@@ -237,12 +310,26 @@ button:active {
|
||||
}
|
||||
|
||||
.hook-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.hook-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hook-timestamps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.25rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hook-meta h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
@@ -254,6 +341,11 @@ button:active {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hook-last-run {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hook-message {
|
||||
white-space: pre-wrap;
|
||||
font-family: "JetBrains Mono", "Fira Code", monospace;
|
||||
@@ -271,6 +363,33 @@ button:active {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.edit-hook-form {
|
||||
margin-top: 0.75rem;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.edit-hook-form label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.edit-hook-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.edit-hook-form .save-edit {
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
||||
.hook-feedback {
|
||||
margin: 0.35rem 0 0;
|
||||
min-height: 1rem;
|
||||
@@ -297,7 +416,13 @@ button:active {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hook-actions {
|
||||
.site-identity {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hook-actions {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
120
app/storage.py
120
app/storage.py
@@ -22,6 +22,16 @@ class HookStore:
|
||||
self.hook_id_length = hook_id_length
|
||||
self._lock = threading.Lock()
|
||||
self._initialize()
|
||||
|
||||
def _deserialize_hook(self, item: dict) -> HookRead:
|
||||
last_triggered = item.get("last_triggered_at")
|
||||
return HookRead(
|
||||
hook_id=item["hook_id"],
|
||||
chat_id=item["chat_id"],
|
||||
message=item["message"],
|
||||
created_at=datetime.fromisoformat(item["created_at"]),
|
||||
last_triggered_at=datetime.fromisoformat(last_triggered) if last_triggered else None,
|
||||
)
|
||||
|
||||
def _initialize(self) -> None:
|
||||
if not self.storage_path.exists():
|
||||
@@ -58,15 +68,7 @@ class HookStore:
|
||||
|
||||
def list_hooks(self) -> List[HookRead]:
|
||||
raw_hooks = self._load_raw()
|
||||
hooks = [
|
||||
HookRead(
|
||||
hook_id=item["hook_id"],
|
||||
chat_id=item["chat_id"],
|
||||
message=item["message"],
|
||||
created_at=datetime.fromisoformat(item["created_at"]),
|
||||
)
|
||||
for item in raw_hooks
|
||||
]
|
||||
hooks = [self._deserialize_hook(item) for item in raw_hooks]
|
||||
hooks.sort(key=lambda h: h.created_at, reverse=True)
|
||||
return hooks
|
||||
|
||||
@@ -82,6 +84,7 @@ class HookStore:
|
||||
"chat_id": payload.chat_id,
|
||||
"message": payload.message,
|
||||
"created_at": created_at,
|
||||
"last_triggered_at": None,
|
||||
}
|
||||
)
|
||||
self._save_raw(raw_hooks)
|
||||
@@ -90,18 +93,14 @@ class HookStore:
|
||||
chat_id=payload.chat_id,
|
||||
message=payload.message,
|
||||
created_at=datetime.fromisoformat(created_at),
|
||||
last_triggered_at=None,
|
||||
)
|
||||
|
||||
def get_hook(self, hook_id: str) -> Optional[HookRead]:
|
||||
raw_hooks = self._load_raw()
|
||||
for item in raw_hooks:
|
||||
if item.get("hook_id") == hook_id:
|
||||
return HookRead(
|
||||
hook_id=item["hook_id"],
|
||||
chat_id=item["chat_id"],
|
||||
message=item["message"],
|
||||
created_at=datetime.fromisoformat(item["created_at"]),
|
||||
)
|
||||
return self._deserialize_hook(item)
|
||||
return None
|
||||
|
||||
def delete_hook(self, hook_id: str) -> bool:
|
||||
@@ -113,34 +112,61 @@ class HookStore:
|
||||
self._save_raw(new_hooks)
|
||||
return True
|
||||
|
||||
def update_hook_id(self, current_id: str, new_id: str) -> HookRead:
|
||||
normalized_new_id = new_id.strip()
|
||||
if not normalized_new_id:
|
||||
raise ValueError("Hook ID cannot be empty")
|
||||
if not HOOK_ID_PATTERN.fullmatch(normalized_new_id):
|
||||
raise ValueError("Hook ID must be 3-64 characters of letters, numbers, '_' or '-' only")
|
||||
def update_hook(
|
||||
self,
|
||||
current_id: str,
|
||||
*,
|
||||
new_hook_id: Optional[str] = None,
|
||||
chat_id: Optional[str] = None,
|
||||
message: Optional[str] = None,
|
||||
) -> HookRead:
|
||||
if new_hook_id is None and chat_id is None and message is None:
|
||||
raise ValueError("No updates provided")
|
||||
|
||||
normalized_id = new_hook_id.strip() if new_hook_id is not None else None
|
||||
normalized_chat = chat_id.strip() if chat_id is not None else None
|
||||
normalized_message = message.strip() if message is not None else None
|
||||
|
||||
if normalized_id is not None:
|
||||
if not normalized_id:
|
||||
raise ValueError("Hook ID cannot be empty")
|
||||
if not HOOK_ID_PATTERN.fullmatch(normalized_id):
|
||||
raise ValueError("Hook ID must be 3-64 characters of letters, numbers, '_' or '-' only")
|
||||
if normalized_chat is not None and not normalized_chat:
|
||||
raise ValueError("Chat ID cannot be empty")
|
||||
if normalized_message is not None and not normalized_message:
|
||||
raise ValueError("Message cannot be empty")
|
||||
|
||||
with self._lock:
|
||||
raw_hooks = self._load_raw()
|
||||
exists = next((item for item in raw_hooks if item.get("hook_id") == current_id), None)
|
||||
if not exists:
|
||||
raise KeyError("Hook not found")
|
||||
if normalized_new_id == current_id:
|
||||
return HookRead(
|
||||
hook_id=exists["hook_id"],
|
||||
chat_id=exists["chat_id"],
|
||||
message=exists["message"],
|
||||
created_at=datetime.fromisoformat(exists["created_at"]),
|
||||
)
|
||||
if any(item.get("hook_id") == normalized_new_id for item in raw_hooks):
|
||||
raise ValueError("Hook ID already exists")
|
||||
exists["hook_id"] = normalized_new_id
|
||||
|
||||
if normalized_id is not None and normalized_id != current_id:
|
||||
if any(item.get("hook_id") == normalized_id for item in raw_hooks):
|
||||
raise ValueError("Hook ID already exists")
|
||||
exists["hook_id"] = normalized_id
|
||||
|
||||
if normalized_chat is not None:
|
||||
exists["chat_id"] = normalized_chat
|
||||
|
||||
if normalized_message is not None:
|
||||
exists["message"] = normalized_message
|
||||
|
||||
self._save_raw(raw_hooks)
|
||||
return HookRead(
|
||||
hook_id=normalized_new_id,
|
||||
chat_id=exists["chat_id"],
|
||||
message=exists["message"],
|
||||
created_at=datetime.fromisoformat(exists["created_at"]),
|
||||
)
|
||||
return self._deserialize_hook(exists)
|
||||
|
||||
def mark_hook_triggered(self, hook_id: str) -> HookRead:
|
||||
timestamp = datetime.now(UTC).replace(microsecond=0).isoformat()
|
||||
with self._lock:
|
||||
raw_hooks = self._load_raw()
|
||||
exists = next((item for item in raw_hooks if item.get("hook_id") == hook_id), None)
|
||||
if not exists:
|
||||
raise KeyError("Hook not found")
|
||||
exists["last_triggered_at"] = timestamp
|
||||
self._save_raw(raw_hooks)
|
||||
return self._deserialize_hook(exists)
|
||||
|
||||
|
||||
settings = get_settings()
|
||||
@@ -163,5 +189,21 @@ async def delete_hook_async(hook_id: str) -> bool:
|
||||
return await run_in_threadpool(store.delete_hook, hook_id)
|
||||
|
||||
|
||||
async def update_hook_id_async(current_hook_id: str, new_hook_id: str) -> HookRead:
|
||||
return await run_in_threadpool(store.update_hook_id, current_hook_id, new_hook_id)
|
||||
async def update_hook_async(
|
||||
current_hook_id: str,
|
||||
*,
|
||||
new_hook_id: Optional[str] = None,
|
||||
chat_id: Optional[str] = None,
|
||||
message: Optional[str] = None,
|
||||
) -> HookRead:
|
||||
return await run_in_threadpool(
|
||||
store.update_hook,
|
||||
current_hook_id,
|
||||
new_hook_id=new_hook_id,
|
||||
chat_id=chat_id,
|
||||
message=message,
|
||||
)
|
||||
|
||||
|
||||
async def record_hook_trigger_async(hook_id: str) -> HookRead:
|
||||
return await run_in_threadpool(store.mark_hook_triggered, hook_id)
|
||||
|
||||
@@ -5,35 +5,52 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Telegram Message Hook</title>
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Telegram Message Hook</h1>
|
||||
<p class="subtitle">Trigger curated messages in your chats via simple webhooks.</p>
|
||||
<div class="site-identity">
|
||||
<img src="/static/logo.svg" alt="Telegram Message Hook logo" class="site-logo" />
|
||||
<div class="site-title">
|
||||
<h1>Telegram Message Hook</h1>
|
||||
<p class="subtitle">Trigger curated messages in your chats via simple webhooks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="session-section" class="card">
|
||||
<h2>Telegram Session</h2>
|
||||
<div id="session-status" class="status-pill">Checking status…</div>
|
||||
<div id="session-user" class="user-info"></div>
|
||||
<div id="login-forms">
|
||||
<form id="start-login-form" class="form-grid">
|
||||
<label for="phone-number">Phone Number</label>
|
||||
<input type="tel" id="phone-number" name="phone" placeholder="+123456789" />
|
||||
<button type="submit" class="primary">Send Verification Code</button>
|
||||
</form>
|
||||
|
||||
<form id="verify-login-form" class="form-grid hidden">
|
||||
<label for="verification-code">Verification Code</label>
|
||||
<input type="text" id="verification-code" name="code" placeholder="12345" />
|
||||
<label for="twofactor-password">Password (if 2FA enabled)</label>
|
||||
<input type="password" id="twofactor-password" name="password" placeholder="Your password" />
|
||||
<button type="submit" class="primary">Complete Login</button>
|
||||
</form>
|
||||
<section id="session-section" class="card" aria-label="Telegram session">
|
||||
<div class="session-summary">
|
||||
<div class="session-summary-main">
|
||||
<div class="session-status-row">
|
||||
<div id="session-status" class="status-pill">Checking status…</div>
|
||||
<p id="session-summary-text" class="session-summary-text">Preparing session details…</p>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="toggle-session" class="secondary session-toggle" aria-expanded="false">
|
||||
Manage session
|
||||
</button>
|
||||
</div>
|
||||
<div id="session-details" class="session-details hidden">
|
||||
<div id="session-user" class="user-info"></div>
|
||||
<div id="login-forms">
|
||||
<form id="start-login-form" class="form-grid">
|
||||
<label for="phone-number">Phone Number</label>
|
||||
<input type="tel" id="phone-number" name="phone" placeholder="+123456789" />
|
||||
<button type="submit" class="primary">Send Verification Code</button>
|
||||
</form>
|
||||
|
||||
<form id="verify-login-form" class="form-grid hidden">
|
||||
<label for="verification-code">Verification Code</label>
|
||||
<input type="text" id="verification-code" name="code" placeholder="12345" />
|
||||
<label for="twofactor-password">Password (if 2FA enabled)</label>
|
||||
<input type="password" id="twofactor-password" name="password" placeholder="Your password" />
|
||||
<button type="submit" class="primary">Complete Login</button>
|
||||
</form>
|
||||
</div>
|
||||
<button id="logout-button" class="secondary hidden">Log out</button>
|
||||
<p id="login-feedback" class="feedback"></p>
|
||||
</div>
|
||||
<button id="logout-button" class="secondary hidden">Log out</button>
|
||||
<p id="login-feedback" class="feedback"></p>
|
||||
</section>
|
||||
|
||||
<section id="hooks-section" class="card">
|
||||
@@ -63,28 +80,66 @@
|
||||
<template id="hook-template">
|
||||
<article class="hook-card">
|
||||
<div class="hook-meta">
|
||||
<h3></h3>
|
||||
<span class="hook-date"></span>
|
||||
<div class="hook-heading">
|
||||
<h3></h3>
|
||||
<div class="hook-timestamps">
|
||||
<span class="hook-date"></span>
|
||||
<span class="hook-last-run"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hook-id-row">
|
||||
<span class="hook-id-label">ID:</span>
|
||||
<code class="hook-id mono"></code>
|
||||
<button class="secondary edit-id icon-button" aria-label="Edit hook ID" title="Edit hook ID">
|
||||
</div>
|
||||
<p class="hook-message"></p>
|
||||
<code class="hook-url"></code>
|
||||
<form class="edit-hook-form hidden">
|
||||
<label>
|
||||
Hook ID
|
||||
<input type="text" class="edit-id" required />
|
||||
</label>
|
||||
<label>
|
||||
Chat ID or Username
|
||||
<input type="text" class="edit-chat" required />
|
||||
</label>
|
||||
<label>
|
||||
Message (Markdown supported)
|
||||
<textarea class="edit-message" rows="5" required></textarea>
|
||||
</label>
|
||||
<div class="edit-hook-actions">
|
||||
<button type="submit" class="primary save-edit">Save changes</button>
|
||||
<button type="button" class="secondary cancel-edit">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
<p class="hook-feedback"></p>
|
||||
<div class="hook-actions">
|
||||
<button class="primary trigger icon-button" aria-label="Trigger hook" title="Trigger hook">
|
||||
<svg class="icon icon-play" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
<span class="sr-only">Trigger hook</span>
|
||||
</button>
|
||||
<button class="secondary copy icon-button" aria-label="Copy URL" title="Copy URL">
|
||||
<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>
|
||||
<span class="sr-only">Copy URL</span>
|
||||
</button>
|
||||
<button class="secondary edit-details icon-button" aria-label="Edit hook" title="Edit hook">
|
||||
<svg class="icon icon-pen" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm18.71-10.04a1 1 0 0 0 0-1.41l-2.51-2.51a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 2-1.66z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Edit hook ID</span>
|
||||
<span class="sr-only">Edit hook</span>
|
||||
</button>
|
||||
<button class="danger delete icon-button" aria-label="Delete hook" title="Delete hook">
|
||||
<svg class="icon icon-trash" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M9 3V4H4v2h1v15a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3h-6zm2 0h2v1h-2V3zm7 3v15H6V6h12zM9 8h2v9H9V8zm4 0h2v9h-2V8z" />
|
||||
</svg>
|
||||
<span class="sr-only">Delete hook</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="hook-message"></p>
|
||||
<code class="hook-url"></code>
|
||||
<p class="hook-feedback"></p>
|
||||
<div class="hook-actions">
|
||||
<button class="primary trigger">Play now</button>
|
||||
<button class="secondary copy">Copy URL</button>
|
||||
<button class="danger delete">Delete</button>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user