Skip to content

Feature: Admin Dashboard to View and Manage Contact Submissions #32

Description

@Adithyakp86

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

  1. 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.
  2. 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.
  3. 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

  • Admin route /admin/submissions is accessible and displays all stored contacts from contacts.json.
  • Stored contact entries are presented from newest to oldest.
  • Admins can delete entries directly from the dashboard, updating contacts.json instantly.
  • Basic security measures are in place to prevent unauthorized visitors from reading the database.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions