hyprcrd/support-relay/ui/form.php

<?php if (!defined('SUPPORT_RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
$brand = supportRelayGet($db, 'brand', 'Support');
$prefix = supportRelayGet($db, 'issue_prefix', 'OUMTA');
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($brand) ?></title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="ui/style.css">
</head>
<body>
<main>
    <h1><?= htmlspecialchars($brand) ?></h1>
    <p class="lede">Describe your issue and we'll reply by email. If you already opened a ticket, enter the <span class="issue-id"><?= htmlspecialchars($prefix) ?>-…</span> id so we can keep the thread together.</p>

    <div id="banner"></div>

    <form id="support-form" novalidate>
        <div class="field">
            <label for="email">Your email</label>
            <input id="email" name="email" type="email" required autocomplete="email">
        </div>
        <div class="field">
            <label for="subject">Subject</label>
            <input id="subject" name="subject" type="text" maxlength="200">
        </div>
        <div class="field">
            <label for="body">Message</label>
            <textarea id="body" name="body" required minlength="10" maxlength="10000"></textarea>
            <span class="hint">Markdown is supported. The more specific the better.</span>
        </div>
        <div class="field">
            <label for="issue_id">Reply to existing ticket (optional)</label>
            <input id="issue_id" name="issue_id" type="text" placeholder="<?= htmlspecialchars($prefix) ?>-42" autocomplete="off">
            <span class="hint">Leave empty for a new request.</span>
        </div>
        <div class="honey" aria-hidden="true">
            <label for="website">Website</label>
            <input id="website" name="website" type="text" tabindex="-1" autocomplete="off">
        </div>
        <button type="submit">Send</button>
    </form>
</main>
<script>
const $ = (id) => document.getElementById(id);
const banner = $('banner');
function setBanner(text, kind = '') {
    banner.className = 'banner ' + kind;
    banner.textContent = text;
}

$('support-form').addEventListener('submit', async e => {
    e.preventDefault();
    const btn = e.target.querySelector('button[type="submit"]');
    btn.disabled = true; btn.textContent = 'Sending…';
    const payload = {
        email: $('email').value.trim(),
        subject: $('subject').value.trim(),
        body: $('body').value,
        issue_id: $('issue_id').value.trim(),
        website: $('website').value,
    };
    try {
        const res = await fetch('api/submit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        const data = await res.json();
        if (!res.ok) throw new Error(data.error || 'Submission failed.');
        const msg = data.appended
            ? `Added to your existing ticket ${data.issue_id}. We'll get back to you by email.`
            : `Received. Your issue id is ${data.issue_id} — check your inbox for the confirmation.`;
        setBanner(msg, 'ok');
        e.target.reset();
    } catch (err) {
        setBanner(err.message || 'Something went wrong.', 'err');
    } finally {
        btn.disabled = false; btn.textContent = 'Send';
    }
});
</script>
</body>
</html>