🐞 ALX Site Bug Report

\n Name:\n setName(e.target.value)}\n required \n style={styles.input}\n />\n

\n Email:\n setEmail(e.target.value)}\n required \n style={styles.input}\n />\n

\n Bug Description:\n

setMessage(e.target.value)}\n            required \n            style={styles.textarea}\n            placeholder=\"Describe the bug or problem you encountered\"\n          />\n        </div>\n        <div style={styles.formGroup}>\n          <label>Screenshot (optional):</label>\n          <input \n            type=\"file\" \n            accept=\"image/*\"\n            onChange={(e) => setScreenshot(e.target.files?.[0] || null)}\n            style={styles.fileInput}\n          />\n        </div>\n        <button type=\"submit\" style={styles.submitButton}>\n          Submit Bug Report\n        </button>\n        {submitStatus && <p style={styles.status}>{submitStatus}</p>}\n      </form>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={styles.sourceLink}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nconst styles = {\n  container: {\n    maxWidth: '500px',\n    margin: '0 auto',\n    padding: '20px',\n    fontFamily: 'Arial, sans-serif',\n  },\n  form: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '15px',\n  },\n  formGroup: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  input: {\n    padding: '10px',\n    borderRadius: '5px',\n    border: '1px solid #ccc',\n  },\n  textarea: {\n    padding: '10px',\n    borderRadius: '5px',\n    border: '1px solid #ccc',\n    minHeight: '100px',\n  },\n  fileInput: {\n    padding: '10px',\n  },\n  submitButton: {\n    backgroundColor: '#4CAF50',\n    color: 'white',\n    padding: '10px',\n    border: 'none',\n    borderRadius: '5px',\n    cursor: 'pointer',\n  },\n  status: {\n    textAlign: 'center',\n    color: '#4CAF50',\n  },\n  sourceLink: {\n    marginTop: '20px',\n    display: 'block',\n    textAlign: 'center',\n    color: '#666',\n    textDecoration: 'none',\n  }\n};\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<BugReportForm />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"alxBugReportForm\";\n  const SCHEMA_VERSION = 1;\n\n  if (request.method === 'POST') {\n    const formData = await request.formData();\n    const name = formData.get('name') as string;\n    const email = formData.get('email') as string;\n    const message = formData.get('message') as string;\n    const screenshot = formData.get('screenshot') as File | null;\n\n    await sqlite.execute(`\n      CREATE TABLE IF NOT EXISTS ${KEY}_bug_reports_${SCHEMA_VERSION} (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        name TEXT NOT NULL,\n        email TEXT NOT NULL,\n        message TEXT NOT NULL,\n        screenshot_filename TEXT,\n        timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n      )\n    `);\n\n    let screenshotFilename = null;\n    if (screenshot && screenshot.size > 0) {\n      screenshotFilename = `screenshot_${Date.now()}_${screenshot.name}`;\n      // In a real-world scenario, you'd save the screenshot file\n      // This is a placeholder for actual file handling\n    }\n\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_bug_reports_${SCHEMA_VERSION} \n       (name, email, message, screenshot_filename) \n       VALUES (?, ?, ?, ?)`,\n      [name, email, message, screenshotFilename]\n    );\n\n    return new Response('Bug report submitted', { status: 200 });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>ALX Bug Report</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}","deleted","label",[98],"permalink","https://www.val.town/x/BAIBARS/alxBugReportForm/code/main.tsx","extension","actionData","errors"]
</article></body></html>