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
@@ -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