mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2025-09-08 15:08:44 +00:00
400 lines
16 KiB
HTML
400 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>bitvid Bug Report Form</title>
|
||
<!-- Link to your main stylesheet -->
|
||
<link rel="stylesheet" href="style.css" />
|
||
<style>
|
||
/* Override for form page to match modal field styling */
|
||
|
||
/* Remove width constraints from body so our container can be full width */
|
||
body {
|
||
background-color: transparent;
|
||
color: #fff;
|
||
font-family: system-ui, -apple-system, sans-serif;
|
||
margin: 20px;
|
||
}
|
||
|
||
/* Override the .container to use the full available width */
|
||
.container {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Card-like container for the form, similar to modal-content */
|
||
.form-container {
|
||
background-color: #111827; /* Tailwind's bg-gray-900 */
|
||
padding: 1.5rem;
|
||
border-radius: 0.5rem;
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
h1,
|
||
h2 {
|
||
color: #fff;
|
||
}
|
||
|
||
/* Labels in a light gray */
|
||
label {
|
||
display: block;
|
||
margin-top: 1em;
|
||
font-weight: bold;
|
||
color: #E5E7EB; /* Tailwind's text-gray-200 */
|
||
}
|
||
|
||
/* Input, textarea, and select mimic modal field styles */
|
||
input,
|
||
textarea,
|
||
select {
|
||
width: 100%;
|
||
margin-bottom: 0.75em;
|
||
background-color: #1F2937; /* Tailwind's bg-gray-800 */
|
||
color: #F3F4F6; /* Tailwind's text-gray-100 */
|
||
border: 1px solid #374151; /* Tailwind's border-gray-700 */
|
||
padding: 0.5em;
|
||
border-radius: 0.375rem; /* rounded-md */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
input:focus,
|
||
textarea:focus,
|
||
select:focus {
|
||
border-color: #3B82F6; /* blue-500 */
|
||
outline: none;
|
||
box-shadow: 0 0 0 1px #3B82F6;
|
||
}
|
||
|
||
/* Checkbox group styling */
|
||
.checkbox-group label {
|
||
display: inline-block;
|
||
margin-right: 1rem;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* Button styled similarly to modal publish button */
|
||
button {
|
||
padding: 0.5em 1em;
|
||
background: #3B82F6; /* blue-500 */
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 0.375rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Status log area */
|
||
#status {
|
||
margin-top: 1em;
|
||
padding: 0.5em;
|
||
background: #111827;
|
||
white-space: pre-wrap;
|
||
min-height: 80px;
|
||
border-radius: 0.25rem;
|
||
}
|
||
.status-line {
|
||
margin: 0.25em 0;
|
||
}
|
||
.error {
|
||
color: #F87171; /* a red tint */
|
||
}
|
||
.success {
|
||
color: #3B82F6; /* blue-500 */
|
||
}
|
||
.warn {
|
||
color: #FACC15; /* a yellow tone */
|
||
}
|
||
|
||
/* Custom Scrollbar styling for WebKit browsers */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: #3B82F6;
|
||
border-radius: 4px;
|
||
}
|
||
/* Custom Scrollbar styling for Firefox */
|
||
* {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #3B82F6 transparent;
|
||
}
|
||
</style>
|
||
<!-- Load nostr‑tools v2.10.4 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="form-container">
|
||
<p>
|
||
If you have encountered a bug or technical issue on bitvid, please fill out this form to help us diagnose and resolve the problem. Providing detailed information will assist us in troubleshooting more efficiently.
|
||
</p>
|
||
<form id="bug-form">
|
||
<!-- Section 1: User Information -->
|
||
<h2>1. User Information</h2>
|
||
<label for="userNpub">Nostr Public Key (npub) (optional):</label>
|
||
<input type="text" id="userNpub" placeholder="Enter your npub (optional)" />
|
||
<p>Are you a (check all that apply):</p>
|
||
<div class="checkbox-group">
|
||
<label><input type="checkbox" name="userRole" value="Viewer" /> Viewer</label>
|
||
<label><input type="checkbox" name="userRole" value="Content Creator" /> Content Creator</label>
|
||
<label><input type="checkbox" name="userRole" value="Developer/Contributor" /> Developer / Contributor</label>
|
||
</div>
|
||
|
||
<!-- Section 2: Bug Details -->
|
||
<h2>2. Bug Details</h2>
|
||
<label for="issueDescription">Describe the issue:</label>
|
||
<textarea id="issueDescription" rows="3" placeholder="Provide a clear and concise description of the problem"></textarea>
|
||
<label for="stepsToReproduce">Steps to reproduce the bug:</label>
|
||
<textarea id="stepsToReproduce" rows="3" placeholder="List the actions taken before encountering the issue"></textarea>
|
||
<label for="expectedBehavior">Expected behavior:</label>
|
||
<textarea id="expectedBehavior" rows="2" placeholder="What should have happened instead?"></textarea>
|
||
<label for="actualBehavior">Actual behavior:</label>
|
||
<textarea id="actualBehavior" rows="2" placeholder="What actually happened?"></textarea>
|
||
|
||
<!-- Section 3: Device & Environment -->
|
||
<h2>3. Device & Environment</h2>
|
||
<p>What device were you using? (check all that apply):</p>
|
||
<div class="checkbox-group">
|
||
<label><input type="checkbox" name="deviceUsed" value="Desktop" /> Desktop</label>
|
||
<label><input type="checkbox" name="deviceUsed" value="Mobile" /> Mobile</label>
|
||
<label><input type="checkbox" name="deviceUsed" value="Tablet" /> Tablet</label>
|
||
</div>
|
||
<label for="operatingSystem">Operating System:</label>
|
||
<input type="text" id="operatingSystem" placeholder="e.g., Windows, macOS, Linux, iOS, Android" />
|
||
<label for="browserInfo">Browser (if applicable):</label>
|
||
<input type="text" id="browserInfo" placeholder="e.g., Chrome, Firefox, Safari" />
|
||
<label for="usingVPN">Are you using a VPN or privacy-focused browser settings?</label>
|
||
<select id="usingVPN">
|
||
<option value="">Select an option</option>
|
||
<option value="Yes">Yes</option>
|
||
<option value="No">No</option>
|
||
</select>
|
||
|
||
<!-- Section 4: Screenshots or Logs -->
|
||
<h2>4. Screenshots or Logs (If Available)</h2>
|
||
<label for="screenshotInfo">Can you provide a screenshot or screen recording?</label>
|
||
<textarea id="screenshotInfo" rows="2" placeholder="Attach if possible (e.g., URL to screenshot)"></textarea>
|
||
<label for="errorMessages">Did the issue generate any error messages?</label>
|
||
<textarea id="errorMessages" rows="2" placeholder="Include the exact error messages, if any"></textarea>
|
||
<label for="consoleLogs">Any relevant console logs?</label>
|
||
<textarea id="consoleLogs" rows="2" placeholder="Paste any browser console logs if available"></textarea>
|
||
|
||
<!-- Section 5: Additional Information -->
|
||
<h2>5. Additional Information</h2>
|
||
<label for="bugFrequency">How frequently does this bug occur?</label>
|
||
<select id="bugFrequency">
|
||
<option value="">Select an option</option>
|
||
<option value="Every time">Every time</option>
|
||
<option value="Occasionally">Occasionally</option>
|
||
<option value="Rarely">Rarely</option>
|
||
</select>
|
||
<label for="impactCore">Does this bug impact core functionality (e.g., video playback, uploads, etc.)?</label>
|
||
<select id="impactCore">
|
||
<option value="">Select an option</option>
|
||
<option value="Yes">Yes</option>
|
||
<option value="No">No</option>
|
||
</select>
|
||
<label for="additionalNotes">Any additional notes or suggestions?</label>
|
||
<textarea id="additionalNotes" rows="3" placeholder="Describe any other relevant details"></textarea>
|
||
|
||
<button type="submit">Submit Bug Report</button>
|
||
</form>
|
||
<div id="status"></div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
// Logging functions for both on-page and console output.
|
||
function log(msg, type = "info") {
|
||
const div = document.createElement("div");
|
||
div.classList.add("status-line");
|
||
if (type === "error") div.classList.add("error");
|
||
if (type === "success") div.classList.add("success");
|
||
if (type === "warn") div.classList.add("warn");
|
||
div.textContent = msg;
|
||
document.getElementById("status").appendChild(div);
|
||
console.log(`[${type.toUpperCase()}] ${msg}`);
|
||
}
|
||
function clear() {
|
||
document.getElementById("status").innerHTML = "";
|
||
}
|
||
if (!window.NostrTools) {
|
||
log("NostrTools not loaded. Check console or ad-blockers.", "error");
|
||
return;
|
||
}
|
||
const {
|
||
generateSecretKey,
|
||
getPublicKey,
|
||
finalizeEvent,
|
||
nip04,
|
||
nip19,
|
||
SimplePool,
|
||
Relay
|
||
} = window.NostrTools;
|
||
|
||
// Set the recipient's NPUB (your personal NPUB)
|
||
const recipientNpub = "npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe";
|
||
const RELAYS = [
|
||
"wss://relay.snort.social",
|
||
"wss://relay.damus.io",
|
||
"wss://relay.primal.net"
|
||
];
|
||
const pool = new SimplePool();
|
||
|
||
document.getElementById("bug-form").addEventListener("submit", async (ev) => {
|
||
ev.preventDefault();
|
||
clear();
|
||
try {
|
||
// Section 1: User Information
|
||
const userNpub = document.getElementById("userNpub").value.trim();
|
||
const roleNodes = document.querySelectorAll('input[name="userRole"]:checked');
|
||
let userRoles = [];
|
||
roleNodes.forEach(node => {
|
||
userRoles.push(node.value);
|
||
});
|
||
|
||
// Section 2: Bug Details
|
||
const issueDescription = document.getElementById("issueDescription").value.trim();
|
||
const stepsToReproduce = document.getElementById("stepsToReproduce").value.trim();
|
||
const expectedBehavior = document.getElementById("expectedBehavior").value.trim();
|
||
const actualBehavior = document.getElementById("actualBehavior").value.trim();
|
||
|
||
// Section 3: Device & Environment
|
||
const deviceNodes = document.querySelectorAll('input[name="deviceUsed"]:checked');
|
||
let devicesUsed = [];
|
||
deviceNodes.forEach(node => {
|
||
devicesUsed.push(node.value);
|
||
});
|
||
const operatingSystem = document.getElementById("operatingSystem").value.trim();
|
||
const browserInfo = document.getElementById("browserInfo").value.trim();
|
||
const usingVPN = document.getElementById("usingVPN").value.trim();
|
||
|
||
// Section 4: Screenshots or Logs
|
||
const screenshotInfo = document.getElementById("screenshotInfo").value.trim();
|
||
const errorMessages = document.getElementById("errorMessages").value.trim();
|
||
const consoleLogs = document.getElementById("consoleLogs").value.trim();
|
||
|
||
// Section 5: Additional Information
|
||
const bugFrequency = document.getElementById("bugFrequency").value.trim();
|
||
const impactCore = document.getElementById("impactCore").value.trim();
|
||
const additionalNotes = document.getElementById("additionalNotes").value.trim();
|
||
|
||
// Construct the bug report content as Markdown.
|
||
const bugReportContent = `
|
||
# **bitvid Bug Report Form**
|
||
|
||
If you have encountered a bug or technical issue on bitvid, please fill out this form to help us diagnose and resolve the problem. Providing detailed information will assist us in troubleshooting more efficiently.
|
||
|
||
## **1. User Information**
|
||
- **Nostr Public Key (npub) (optional):** ${userNpub || "N/A"}
|
||
- **Roles:** ${userRoles.length > 0 ? userRoles.join(", ") : "N/A"}
|
||
|
||
## **2. Bug Details**
|
||
- **Describe the issue:**
|
||
${issueDescription || "N/A"}
|
||
- **Steps to reproduce the bug:**
|
||
${stepsToReproduce || "N/A"}
|
||
- **Expected behavior:**
|
||
${expectedBehavior || "N/A"}
|
||
- **Actual behavior:**
|
||
${actualBehavior || "N/A"}
|
||
|
||
## **3. Device & Environment**
|
||
- **Devices used:** ${devicesUsed.length > 0 ? devicesUsed.join(", ") : "N/A"}
|
||
- **Operating System:** ${operatingSystem || "N/A"}
|
||
- **Browser:** ${browserInfo || "N/A"}
|
||
- **Using VPN/Privacy Settings:** ${usingVPN || "N/A"}
|
||
|
||
## **4. Screenshots or Logs**
|
||
- **Screenshot/Recording:** ${screenshotInfo || "N/A"}
|
||
- **Error Messages:** ${errorMessages || "N/A"}
|
||
- **Console Logs:** ${consoleLogs || "N/A"}
|
||
|
||
## **5. Additional Information**
|
||
- **Bug Frequency:** ${bugFrequency || "N/A"}
|
||
- **Impact on Core Functionality:** ${impactCore || "N/A"}
|
||
- **Additional Notes:** ${additionalNotes || "N/A"}
|
||
|
||
---
|
||
|
||
**Processing & Resolution:**
|
||
Our team reviews bug reports regularly. While we aim to fix critical issues as soon as possible, some bugs may take longer to resolve. We appreciate your patience and help in improving bitvid!
|
||
|
||
For urgent issues, contact us through bitvid’s Nostr support channels.
|
||
`.trim();
|
||
|
||
log("[DEBUG] Constructed bug report content:\n" + bugReportContent);
|
||
|
||
// Decode the recipient NPUB to get the public key.
|
||
log("Decoding recipient npub...");
|
||
const decoded = nip19.decode(recipientNpub);
|
||
log("[DEBUG] Decoded npub: " + JSON.stringify(decoded));
|
||
if (decoded.type !== "npub") {
|
||
throw new Error("Decoded type is not npub.");
|
||
}
|
||
const targetPubHex = decoded.data;
|
||
log("Recipient pubkey: " + targetPubHex.slice(0, 16) + "...");
|
||
|
||
// Generate an ephemeral key pair.
|
||
log("Generating ephemeral key...");
|
||
const ephemeralPriv = generateSecretKey();
|
||
const ephemeralPubHex = getPublicKey(ephemeralPriv);
|
||
log("Ephemeral pubkey: " + ephemeralPubHex.slice(0, 16) + "...");
|
||
|
||
// Encrypt the bug report content.
|
||
log("Encrypting bug report content (nip04)...");
|
||
const ciphertext = await nip04.encrypt(ephemeralPriv, targetPubHex, bugReportContent);
|
||
log("[DEBUG] Ciphertext: " + ciphertext);
|
||
log("Encryption done.");
|
||
|
||
// Build the event template.
|
||
const now = Math.floor(Date.now() / 1000);
|
||
const eventTemplate = {
|
||
kind: 4,
|
||
created_at: now,
|
||
tags: [["p", targetPubHex]],
|
||
content: ciphertext,
|
||
};
|
||
log("[DEBUG] Event template before finalizing: " + JSON.stringify(eventTemplate));
|
||
|
||
// Finalize the event.
|
||
const event = finalizeEvent(eventTemplate, ephemeralPriv);
|
||
log("[DEBUG] Final event: " + JSON.stringify(event));
|
||
|
||
// Publish the event to all relays.
|
||
log("Publishing the bug report to relays...");
|
||
await Promise.any(pool.publish(RELAYS, event));
|
||
log("At least one relay accepted the event.", "success");
|
||
|
||
// Subscribe to each relay.
|
||
for (const url of RELAYS) {
|
||
log("Connecting to " + url + " for subscription...");
|
||
const relay = await Relay.connect(url);
|
||
relay.subscribe([{ authors: [ephemeralPubHex], kinds: [4] }], {
|
||
onEvent(foundEvent) {
|
||
if (foundEvent.id === event.id) {
|
||
log("[" + url + "] => Found our bug report in storage! ID: " + foundEvent.id.slice(0, 8) + "...", "success");
|
||
}
|
||
},
|
||
onEose() {
|
||
relay.close();
|
||
},
|
||
});
|
||
}
|
||
|
||
log("Done. If the logs show that at least one relay accepted the event and the bug report was found in storage, our team will review your report within 7-14 days.");
|
||
} catch (err) {
|
||
log("Error: " + err.message, "error");
|
||
console.error(err);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|