CMU-17313Q · aattiyah · Sep 24, 2024 · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024
diff --git a/public/openapi/read.yaml b/public/openapi/read.yaml
@@ -327,4 +327,13 @@ paths:
   "/api/groups/{slug}/members":
     $ref: 'read/groups/slug/members.yaml'
   /api/outgoing:
-    $ref: 'read/outgoing.yaml'
+    $ref: 'read/outgoing.yaml'
+  /api/report-bug:
+    get:
+      summary: Report a bug
+      description: Endpoint to report a bug
+      responses:
+        '200':
+          description: Bug reported successfully
+        '400':
+          description: Bad request
diff --git a/public/src/client/report-bug.js b/public/src/client/report-bug.js
@@ -0,0 +1,13 @@
+'use strict';
+
+define('forum/report-bug', [], function () {
+	const BugReport = {};
+
+	BugReport.init = function () {
+		app.render('bug-report-form', {
+			title: 'Report a Bug',
+		});
+	};
+
+	return BugReport;
+});
diff --git a/src/controllers/index.js b/src/controllers/index.js
@@ -11,6 +11,7 @@ const helpers = require('./helpers');
 
 const Controllers = module.exports;
 
+
 Controllers.ping = require('./ping');
 Controllers.home = require('./home');
 Controllers.topics = require('./topics');
@@ -37,6 +38,7 @@ Controllers.osd = require('./osd');
 Controllers['404'] = require('./404');
 Controllers.errors = require('./errors');
 Controllers.composer = require('./composer');
+Controllers['report-bug'] = require('./reportBug');
 
 Controllers.write = require('./write');
 
@@ -363,3 +365,9 @@ Controllers.termsOfUse = async function (req, res, next) {
 		termsOfUse: termsOfUse.postData.content,
 	});
 };
+
+Controllers.reportBug = async function (req, res) {
+	res.render('bug-report-form', {
+		title: 'Report a Bug',
+	});
+};
diff --git a/src/controllers/reportBug.js b/src/controllers/reportBug.js
@@ -0,0 +1,11 @@
+'use strict';
+
+const controllers = {};
+
+controllers.getBugReportForm = (req, res) => {
+	res.render('bug-report-form', {
+		title: 'Report a Bug',
+	});
+};
+
+module.exports = controllers;
diff --git a/src/routes/index.js b/src/routes/index.js
@@ -9,10 +9,10 @@ const meta = require('../meta');
 const controllers = require('../controllers');
 const controllerHelpers = require('../controllers/helpers');
 const plugins = require('../plugins');
-
 const authRoutes = require('./authentication');
 const writeRoutes = require('./write');
 const helpers = require('./helpers');
+const reportBugController = require('../controllers/reportBug');
 
 const { setupPageRoute } = helpers;
 
@@ -80,6 +80,7 @@ _mounts.categories = (app, name, middleware, controllers) => {
 	setupPageRoute(app, '/recent', [], controllers.recent.get);
 	setupPageRoute(app, '/top', [], controllers.top.get);
 	setupPageRoute(app, '/unread', [middleware.ensureLoggedIn], controllers.unread.get);
+	setupPageRoute(app, '/report-bug', [], reportBugController.getBugReportForm);
 };
 
 _mounts.category = (app, name, middleware, controllers) => {

diff --git a/src/views/bug-report-form.tpl b/src/views/bug-report-form.tpl
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bug Report Form</title>
+    <style>
+        .container {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 700px;
+            margin: 40px auto; 
+            box-sizing: border-box;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+            font-weight: bold;
+        }
+        label {
+            display: block;
+            margin-bottom: 8px;
+            color: #555;
+            font-weight: bold;
+        }
+        input[type="text"],
+        input[type="email"],
+        textarea,
+        select {
+            width: 100%;
+            max-width: 600px; 
+            padding: 10px;
+            margin-bottom: 20px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+            margin-left: auto;
+            margin-right: auto;
+            display: block;
+        }
+        input[type="submit"] {
+            width: 100%;
+            max-width: 600px; 
+            padding: 10px;
+            background-color: #28a745;
+            border: none;
+            border-radius: 4px;
+            color: #fff;
+            font-size: 16px;
+            cursor: pointer;
+            box-sizing: border-box;
+            margin-left: auto;
+            margin-right: auto;
+            display: block;
+            font-weight: bold;
+        }
+        input[type="submit"]:hover {
+            background-color: #218838;
+        }
+        .banner {
+            text-align: center;
+            color: #fff;
+            background-color: rgba(40, 167, 69, 0.9); /* Slightly transparent */
+            padding: 10px;
+            position: fixed;
+            bottom: -50px; /* Start off-screen */
+            left: 0;
+            right: 0;
+            display: none;
+            z-index: 1000;
+            transition: bottom 0.5s ease-in-out; /* Smooth transition */
+        }
+        .banner.show {
+            bottom: 0; /* Slide in */
+        }
+    </style>
+</head>
+<body>
+    <div class="banner" id="form-banner">Form Submitted</div>
+    <div class="container">
+        <h1>Bug Report Form</h1>
+        <form id="bug-report-form">
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name" required>
+
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email" required>
+
+            <label for="bug-description">Bug Description:</label>
+            <textarea id="bug-description" name="bug-description" rows="4" required></textarea>
+
+            <input type="submit" value="Submit">
+        </form>
+    </div>
+    <script>
+        document.getElementById('bug-report-form').addEventListener('submit', function(event) {
+            event.preventDefault(); // Prevent the form from submitting the traditional way
+            const banner = document.getElementById('form-banner');
+            banner.style.display = 'block'; // Show the banner
+            banner.classList.add('show'); // Add the class to slide in the banner
+            setTimeout(() => {
+                banner.classList.remove('show'); // Remove the class to slide out the banner
+                setTimeout(() => {
+                    banner.style.display = 'none'; // Hide the banner after the slide out
+                }, 500); // Match the transition duration
+            }, 3000); // Display the banner for 3 seconds
+        });
+    </script>
+</body>
+</html>