Description
Currently, when a visitor submits the contact form, their message is saved on the server in a file called contacts.json. However, there is no user interface to view, inspect, or delete these submissions. Administrators must log into the hosting server and read the raw JSON file.
We should create a secure /admin/submissions dashboard page that reads the contacts.json data and presents it in a clean, readable layout.
Proposed Solution / Technical Guidance
-
Implement Server-Side Routes (server.js):
- Create a new route
app.get('/admin/submissions', ...) that reads contacts.json, parses the messages, and passes them to a view.
- Add a simple passkey authentication mechanism (e.g., checking a query parameter like
?key=admin123 or a basic password check) to secure the page from unauthorized access.
- Create a
DELETE /admin/submissions/:id endpoint to allow administrators to delete resolved messages from the list.
-
Create Admin Dashboard View (views/admin.ejs):
- Design a new page containing a responsive table or cards showing:
- Date & Time (formatted nicely)
- Sender Name & Email
- Subject
- Message content
- Add a delete/remove button next to each submission.
-
Handle Submission Deletion (public/script.js or inline script):
- Bind click listeners to the delete buttons. When clicked, fire a
DELETE request to the server, and on success, remove that submission card/row from the DOM with a fade-out animation.
Files to Modify
server.js
views/admin.ejs [NEW]
public/styles.css (for admin page styling)
Definition of Done
Description
Currently, when a visitor submits the contact form, their message is saved on the server in a file called
contacts.json. However, there is no user interface to view, inspect, or delete these submissions. Administrators must log into the hosting server and read the raw JSON file.We should create a secure
/admin/submissionsdashboard page that reads thecontacts.jsondata and presents it in a clean, readable layout.Proposed Solution / Technical Guidance
Implement Server-Side Routes (
server.js):app.get('/admin/submissions', ...)that readscontacts.json, parses the messages, and passes them to a view.?key=admin123or a basic password check) to secure the page from unauthorized access.DELETE /admin/submissions/:idendpoint to allow administrators to delete resolved messages from the list.Create Admin Dashboard View (
views/admin.ejs):Handle Submission Deletion (
public/script.jsor inline script):DELETErequest to the server, and on success, remove that submission card/row from the DOM with a fade-out animation.Files to Modify
server.jsviews/admin.ejs[NEW]public/styles.css(for admin page styling)Definition of Done
/admin/submissionsis accessible and displays all stored contacts fromcontacts.json.contacts.jsoninstantly.