Merge pull request #10 from jasonMPM/claude/isp-website-docker-EB8pB

Add contact form DB storage and hidden staff inbox
2026-02-28 21:08:36 -06:00
parent 3151bb8d4b 40e3f73aaf
commit 6503bdd6d6
6 changed files with 304 additions and 10 deletions
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -18,6 +18,7 @@ services:
      - DB_NAME=${DB_NAME}
      - DB_USER=${DB_USER}
      - DB_PASS=${DB_PASS}
+      - ADMIN_PASS=${ADMIN_PASS}
    depends_on:
      - db
    networks:
--- a/docker/mysql/init.sql
+++ b/docker/mysql/init.sql
@@ -10,6 +10,7 @@ CREATE TABLE IF NOT EXISTS `contacts` (
    `phone`      VARCHAR(30),
    `subject`    VARCHAR(255),
    `message`    TEXT NOT NULL,
+    `is_read`    TINYINT(1) NOT NULL DEFAULT 0,
    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
 ) ENGINE=InnoDB;

--- a/www/includes/db.php
+++ b/www/includes/db.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * Returns a shared PDO connection to the MySQL database.
+ * Also ensures the `is_read` column exists (added after initial deploy).
+ */
+function get_db(): PDO {
+    static $pdo = null;
+    if ($pdo !== null) return $pdo;
+
+    $host = getenv('DB_HOST') ?: 'db';
+    $name = getenv('DB_NAME') ?: 'alwisp';
+    $user = getenv('DB_USER') ?: '';
+    $pass = getenv('DB_PASS') ?: '';
+
+    $pdo = new PDO(
+        "mysql:host=$host;dbname=$name;charset=utf8mb4",
+        $user, $pass,
+        [
+            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
+            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+        ]
+    );
+
+    // Auto-migrate: add is_read if the DB was initialised before this column existed
+    $col_exists = $pdo->query(
+        "SELECT COUNT(*) FROM INFORMATION_SCHEMA.COLUMNS
+         WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = 'contacts' AND COLUMN_NAME = 'is_read'"
+    )->fetchColumn();
+
+    if (!$col_exists) {
+        $pdo->exec("ALTER TABLE contacts ADD COLUMN is_read TINYINT(1) NOT NULL DEFAULT 0");
+    }
+
+    return $pdo;
+}
--- a/www/index.php
+++ b/www/index.php
@@ -2,6 +2,12 @@
 // Simple front controller — expand routing here later
 $path = trim($_GET['path'] ?? '', '/');

+// Staff inbox — self-contained, no public header/footer
+if ($path === 'staff-portal') {
+    require __DIR__ . '/pages/admin-inbox.php';
+    exit;
+}
+
 // Map paths to page includes
 $pages = [
    ''          => 'pages/home.php',
--- a/www/pages/admin-inbox.php
+++ b/www/pages/admin-inbox.php
@@ -0,0 +1,239 @@
+<?php
+/**
+ * ALWISP – Staff Inbox
+ * Hidden admin page for viewing contact form submissions.
+ * Access: /staff-portal  (not linked anywhere on the public site)
+ * Password is set via ADMIN_PASS environment variable.
+ */
+session_start();
+
+$admin_pass = getenv('ADMIN_PASS') ?: '';
+
+// ── Logout ────────────────────────────────────────────────────────────────
+if (isset($_GET['logout'])) {
+    session_destroy();
+    header('Location: /staff-portal');
+    exit;
+}
+
+// ── Login ─────────────────────────────────────────────────────────────────
+$login_error = '';
+if (!isset($_SESSION['alwisp_admin'])) {
+    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['password'])) {
+        if ($admin_pass !== '' && hash_equals($admin_pass, $_POST['password'])) {
+            $_SESSION['alwisp_admin'] = true;
+            header('Location: /staff-portal');
+            exit;
+        }
+        $login_error = 'Incorrect password.';
+    }
+
+    // Show login gate
+    http_response_code(200);
+    ?>
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Staff Portal – ALWISP</title>
+        <style>
+            *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+            body { background: #0a0f1e; color: #e2e8f0; font-family: system-ui, sans-serif;
+                   display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+            .card { background: #111827; border: 1px solid #1e2d4a; border-radius: 12px;
+                    padding: 2.5rem 2rem; width: 100%; max-width: 360px; }
+            h1 { font-size: 1.25rem; margin-bottom: 1.5rem; color: #fff; }
+            label { display: block; font-size: .85rem; color: #94a3b8; margin-bottom: .4rem; }
+            input { width: 100%; padding: .65rem .9rem; border-radius: 8px;
+                    border: 1px solid #1e2d4a; background: #0a0f1e; color: #e2e8f0;
+                    font-size: 1rem; margin-bottom: 1.2rem; }
+            button { width: 100%; padding: .7rem; border-radius: 8px; border: none;
+                     background: #2563eb; color: #fff; font-size: 1rem; cursor: pointer; }
+            button:hover { background: #1d4ed8; }
+            .error { background: #450a0a; color: #fca5a5; border-radius: 8px;
+                     padding: .7rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
+        </style>
+    </head>
+    <body>
+        <div class="card">
+            <h1>ALWISP Staff Portal</h1>
+            <?php if ($login_error): ?>
+                <div class="error"><?= htmlspecialchars($login_error) ?></div>
+            <?php endif; ?>
+            <form method="post">
+                <label for="pw">Password</label>
+                <input type="password" id="pw" name="password" autofocus autocomplete="current-password">
+                <button type="submit">Sign In</button>
+            </form>
+        </div>
+    </body>
+    </html>
+    <?php
+    exit;
+}
+
+// ── Authenticated – handle actions ────────────────────────────────────────
+require_once __DIR__ . '/../includes/db.php';
+
+try {
+    $db = get_db();
+} catch (PDOException $e) {
+    die('<p style="font-family:sans-serif;padding:2rem;color:red">Database connection failed: ' . htmlspecialchars($e->getMessage()) . '</p>');
+}
+
+// Mark a single message as read
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['mark_read'])) {
+    $db->prepare("UPDATE contacts SET is_read = 1 WHERE id = ?")->execute([(int)$_POST['mark_read']]);
+    header('Location: /staff-portal');
+    exit;
+}
+
+// Mark all as read
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['mark_all_read'])) {
+    $db->exec("UPDATE contacts SET is_read = 1");
+    header('Location: /staff-portal');
+    exit;
+}
+
+// ── Fetch messages ────────────────────────────────────────────────────────
+$messages    = $db->query("SELECT * FROM contacts ORDER BY created_at DESC")->fetchAll();
+$unread_count = (int)$db->query("SELECT COUNT(*) FROM contacts WHERE is_read = 0")->fetchColumn();
+
+$subject_labels = [
+    'new-service' => 'New Service Inquiry',
+    'support'     => 'Technical Support',
+    'billing'     => 'Billing Question',
+    'coverage'    => 'Coverage Question',
+    'other'       => 'Other',
+];
+
+function h(string $s): string { return htmlspecialchars($s, ENT_QUOTES); }
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= $unread_count ? "($unread_count) " : '' ?>Inbox – ALWISP Staff</title>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+        body { background: #0a0f1e; color: #e2e8f0; font-family: system-ui, sans-serif;
+               min-height: 100vh; padding: 0 0 4rem; }
+
+        /* ── Top bar ── */
+        .topbar { background: #111827; border-bottom: 1px solid #1e2d4a;
+                  display: flex; align-items: center; justify-content: space-between;
+                  padding: .9rem 1.5rem; }
+        .topbar__brand { font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: .02em; }
+        .topbar__brand span { color: #3b82f6; }
+        .topbar__actions { display: flex; gap: .75rem; align-items: center; }
+
+        /* ── Buttons ── */
+        .btn { display: inline-block; padding: .45rem .9rem; border-radius: 7px; border: none;
+               font-size: .85rem; cursor: pointer; text-decoration: none; }
+        .btn--primary  { background: #2563eb; color: #fff; }
+        .btn--primary:hover { background: #1d4ed8; }
+        .btn--ghost    { background: transparent; color: #94a3b8; border: 1px solid #1e2d4a; }
+        .btn--ghost:hover { background: #1e2d4a; color: #e2e8f0; }
+        .btn--sm { padding: .3rem .65rem; font-size: .78rem; }
+
+        /* ── Container ── */
+        .wrap { max-width: 960px; margin: 2rem auto; padding: 0 1.25rem; }
+
+        /* ── Summary bar ── */
+        .summary { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
+        .badge { background: #2563eb; color: #fff; border-radius: 999px;
+                 padding: .2rem .65rem; font-size: .8rem; font-weight: 600; }
+        .badge--zero { background: #1e2d4a; color: #64748b; }
+        .summary__text { color: #94a3b8; font-size: .9rem; }
+
+        /* ── Message cards ── */
+        .msg { background: #111827; border: 1px solid #1e2d4a; border-radius: 10px;
+               margin-bottom: 1rem; overflow: hidden; }
+        .msg--unread { border-color: #2563eb; }
+        .msg__header { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
+                       padding: .9rem 1.1rem; border-bottom: 1px solid #1e2d4a; }
+        .msg__name  { font-weight: 600; color: #fff; }
+        .msg__email { color: #3b82f6; font-size: .875rem; }
+        .msg__phone { color: #64748b; font-size: .85rem; }
+        .msg__tag   { background: #1e2d4a; color: #94a3b8; border-radius: 5px;
+                      padding: .15rem .55rem; font-size: .75rem; }
+        .msg__time  { margin-left: auto; color: #64748b; font-size: .8rem; white-space: nowrap; }
+        .msg__body  { padding: .9rem 1.1rem; }
+        .msg__message { color: #cbd5e1; font-size: .9rem; line-height: 1.65;
+                        white-space: pre-wrap; word-break: break-word; }
+        .msg__footer { padding: .65rem 1.1rem; border-top: 1px solid #1e2d4a;
+                       display: flex; align-items: center; gap: .5rem; }
+        .dot-unread { width: 8px; height: 8px; border-radius: 50%; background: #3b82f6;
+                      flex-shrink: 0; }
+        .dot-read   { width: 8px; height: 8px; border-radius: 50%; background: #1e2d4a;
+                      flex-shrink: 0; }
+        .status-label { font-size: .8rem; color: #64748b; flex: 1; }
+
+        /* ── Empty state ── */
+        .empty { text-align: center; padding: 4rem 1rem; color: #64748b; }
+        .empty__icon { font-size: 2.5rem; margin-bottom: .75rem; }
+    </style>
+</head>
+<body>
+
+<div class="topbar">
+    <div class="topbar__brand">AL<span>WISP</span> Staff Portal</div>
+    <div class="topbar__actions">
+        <?php if ($unread_count > 0): ?>
+        <form method="post" style="display:inline">
+            <button name="mark_all_read" value="1" class="btn btn--ghost btn--sm">Mark all read</button>
+        </form>
+        <?php endif; ?>
+        <a href="?logout=1" class="btn btn--ghost btn--sm">Sign out</a>
+    </div>
+</div>
+
+<div class="wrap">
+    <div class="summary">
+        <span class="badge <?= $unread_count === 0 ? 'badge--zero' : '' ?>"><?= $unread_count ?> unread</span>
+        <span class="summary__text"><?= count($messages) ?> total submission<?= count($messages) !== 1 ? 's' : '' ?></span>
+    </div>
+
+    <?php if (empty($messages)): ?>
+        <div class="empty">
+            <div class="empty__icon">📭</div>
+            <p>No messages yet. They'll show up here once someone submits the contact form.</p>
+        </div>
+    <?php else: ?>
+        <?php foreach ($messages as $m): ?>
+            <?php $unread = !$m['is_read']; ?>
+            <div class="msg <?= $unread ? 'msg--unread' : '' ?>">
+                <div class="msg__header">
+                    <span class="msg__name"><?= h($m['name']) ?></span>
+                    <a class="msg__email" href="mailto:<?= h($m['email']) ?>"><?= h($m['email']) ?></a>
+                    <?php if ($m['phone']): ?>
+                        <span class="msg__phone"><?= h($m['phone']) ?></span>
+                    <?php endif; ?>
+                    <?php if ($m['subject']): ?>
+                        <span class="msg__tag"><?= h($subject_labels[$m['subject']] ?? $m['subject']) ?></span>
+                    <?php endif; ?>
+                    <span class="msg__time"><?= date('M j, Y  g:ia', strtotime($m['created_at'])) ?></span>
+                </div>
+                <div class="msg__body">
+                    <p class="msg__message"><?= h($m['message']) ?></p>
+                </div>
+                <div class="msg__footer">
+                    <span class="<?= $unread ? 'dot-unread' : 'dot-read' ?>"></span>
+                    <span class="status-label"><?= $unread ? 'Unread' : 'Read' ?></span>
+                    <?php if ($unread): ?>
+                        <form method="post">
+                            <input type="hidden" name="mark_read" value="<?= (int)$m['id'] ?>">
+                            <button class="btn btn--primary btn--sm">Mark as read</button>
+                        </form>
+                    <?php endif; ?>
+                </div>
+            </div>
+        <?php endforeach; ?>
+    <?php endif; ?>
+</div>
+
+</body>
+</html>
--- a/www/pages/contact.php
+++ b/www/pages/contact.php
@@ -1,21 +1,33 @@
 <?php
+require_once __DIR__ . '/../includes/db.php';
+
 $success = false;
 $errors  = [];

 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-    $name    = trim(htmlspecialchars($_POST['name']    ?? '', ENT_QUOTES));
-    $email   = trim(htmlspecialchars($_POST['email']   ?? '', ENT_QUOTES));
-    $phone   = trim(htmlspecialchars($_POST['phone']   ?? '', ENT_QUOTES));
-    $subject = trim(htmlspecialchars($_POST['subject'] ?? '', ENT_QUOTES));
-    $message = trim(htmlspecialchars($_POST['message'] ?? '', ENT_QUOTES));
+    // Store raw values; htmlspecialchars is applied only at output time
+    $name    = trim($_POST['name']    ?? '');
+    $email   = trim($_POST['email']   ?? '');
+    $phone   = trim($_POST['phone']   ?? '');
+    $subject = trim($_POST['subject'] ?? '');
+    $message = trim($_POST['message'] ?? '');

-    if (!$name)                        $errors[] = 'Name is required.';
-    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) $errors[] = 'A valid email is required.';
-    if (!$message)                     $errors[] = 'Message is required.';
+    if (!$name)                                      $errors[] = 'Name is required.';
+    if (!filter_var($email, FILTER_VALIDATE_EMAIL))  $errors[] = 'A valid email is required.';
+    if (!$message)                                   $errors[] = 'Message is required.';

    if (empty($errors)) {
-        // TODO: swap for DB insert + email once credentials are configured
-        $success = true;
+        try {
+            $db   = get_db();
+            $stmt = $db->prepare(
+                "INSERT INTO contacts (name, email, phone, subject, message)
+                 VALUES (?, ?, ?, ?, ?)"
+            );
+            $stmt->execute([$name, $email, $phone, $subject, $message]);
+            $success = true;
+        } catch (PDOException $e) {
+            $errors[] = 'Sorry, we could not save your message right now. Please try again.';
+        }
    }
 }
 ?>