contact form backend

Author: olaru

composer.json

@@ -33,6 +33,7 @@
         "doctrine/doctrine-fixtures-bundle": "^4.3",
         "dotkernel/dot-cache": "^4.0",
         "dotkernel/dot-errorhandler": "^5.0.0",
+        "dotkernel/dot-mail": "^5.4",
         "dotkernel/dot-response-header": "^3.6",
         "laminas/laminas-component-installer": "^3.5.0",
         "laminas/laminas-config-aggregator": "^1.17.0",

config/autoload/mail.global.php

@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+$contactEmail = 'example@mail.com';
+
+return [
+    'dot_mail' => [
+        'contact' => [
+            'message_options' => [
+                'from'        => $contactEmail,
+                'from_name'   => 'Dotkernel',
+                'to'          => [$contactEmail],
+                'subject'     => 'New contact form submission',
+                'body'        => [
+                    'content' => '',
+                    'charset' => 'utf-8',
+                ],
+                'attachments' => [
+                    'files' => [],
+                    'dir'   => [
+                        'iterate'   => false,
+                        'path'      => 'data/mail/attachments',
+                        'recursive' => false,
+                    ],
+                ],
+            ],
+            'transport'       => 'sendmail',
+        ],
+        'log'     => [
+            'sent' => getcwd() . '/log/mail-sent.log',
+        ],
+    ],
+    'twig'     => [
+        'globals' => [
+            'contact_email' => $contactEmail,
+        ],
+    ],
+];

config/config.php

@@ -27,6 +27,7 @@
     // Dotkernel packages
     \Dot\ErrorHandler\ConfigProvider::class,
     \Dot\Log\ConfigProvider::class,
+    \Dot\Mail\ConfigProvider::class,
     \Dot\Cache\ConfigProvider::class,
     \Dot\ResponseHeader\ConfigProvider::class,
 

public/css/contact.css

@@ -1,5 +1,3 @@
-// Contact page: topic pills and the client-side "message sent" state.
-// The form is not wired to a backend yet, so submit only swaps the panels.
 (function () {
     var form = document.querySelector('[data-contact-form]');
     if (!form) {
@@ -8,41 +6,14 @@
 
     var topicInput = form.querySelector('[data-contact-topic]');
     var pills = form.querySelectorAll('[data-topic]');
-    var sent = document.querySelector('[data-contact-sent]');
-    var sentTopic = sent.querySelector('[data-contact-sent-topic]');
-    var reset = sent.querySelector('[data-contact-reset]');
-
-    function currentPill() {
-        return form.querySelector('[data-topic][aria-pressed="true"]');
-    }
-
-    function selectTopic(id) {
-        pills.forEach(function (pill) {
-            pill.setAttribute('aria-pressed', String(pill.getAttribute('data-topic') === id));
-        });
-        topicInput.value = id;
-    }
 
     pills.forEach(function (pill) {
         pill.addEventListener('click', function () {
-            selectTopic(pill.getAttribute('data-topic'));
+            var id = pill.getAttribute('data-topic');
+            pills.forEach(function (other) {
+                other.setAttribute('aria-pressed', String(other === pill));
+            });
+            topicInput.value = id;
         });
     });
-
-    form.addEventListener('submit', function (event) {
-        event.preventDefault();
-        var pill = currentPill();
-        sentTopic.textContent = pill ? pill.textContent : '';
-        form.hidden = true;
-        sent.hidden = false;
-        sent.querySelector('h2').focus({ preventScroll: true });
-    });
-
-    reset.addEventListener('click', function () {
-        form.reset();
-        selectTopic(pills[0].getAttribute('data-topic'));
-        sent.hidden = true;
-        form.hidden = false;
-        form.querySelector('input:not([type="hidden"])').focus();
-    });
 })();

public/js/app.js

@@ -284,24 +284,38 @@ html[data-theme="dark"] .contact-page {
   }
 }
 
-.contact-consent {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  font-size: 14px;
+.contact-error {
+  margin: 0;
+  font-size: 13px;
+  color: var(--rose);
+}
+
+.contact-alert {
+  margin: 0;
+  padding: 14px 16px;
+  border-radius: 8px;
+  border: 1px solid;
+  font-size: 14.5px;
   line-height: 1.55;
-  color: var(--text-muted);
-  cursor: pointer;
 
-  input {
-    width: 18px;
-    height: 18px;
-    margin: 2px 0 0;
-    flex-shrink: 0;
-    accent-color: var(--amber);
+  a {
+    color: inherit;
+    text-decoration: underline;
   }
 }
 
+.contact-alert-success {
+  color: var(--teal);
+  background: var(--teal-dim);
+  border-color: var(--teal);
+}
+
+.contact-alert-error {
+  color: var(--rose);
+  background: var(--rose-dim);
+  border-color: var(--rose);
+}
+
 .contact-form-foot {
   display: flex;
   align-items: center;
@@ -323,61 +337,6 @@ html[data-theme="dark"] .contact-page {
   }
 }
 
-.contact-sent {
-  min-height: 560px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 18px;
-
-  &[hidden] {
-    display: none;
-  }
-
-  h2 {
-    font-size: 28px;
-    line-height: 1.2;
-  }
-
-  p {
-    max-width: 460px;
-    font-size: 16.5px;
-    line-height: 1.7;
-  }
-
-  strong {
-    color: var(--text);
-    font-weight: 600;
-  }
-
-  .btn {
-    height: 44px;
-    padding: 0 18px;
-    color: var(--text-muted);
-
-    &:hover {
-      border-color: var(--amber);
-      color: var(--text);
-    }
-  }
-}
-
-.contact-sent-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--radius);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--teal-dim);
-  color: var(--teal);
-
-  svg {
-    width: 22px;
-    height: 22px;
-  }
-}
-
 /* FAQ */
 .contact-faq-layout {
   display: grid;
@@ -488,8 +447,4 @@ html[data-theme="dark"] .contact-page {
       justify-content: center;
     }
   }
-
-  .contact-sent {
-    min-height: 360px;
-  }
 }

src/App/assets/js/components/_contact.js

@@ -11,6 +11,7 @@
 use Dot\Cache\Adapter\ArrayAdapter;
 use Dot\Cache\Adapter\FilesystemAdapter;
 use Light\App\DBAL\Types\UuidType;
+use Light\App\Factory\ContactServiceFactory;
 use Light\App\Factory\EntityListenerResolverFactory;
 use Light\App\Factory\FeedGeneratorFactory;
 use Light\App\Factory\GetFeedViewHandlerFactory;
@@ -24,13 +25,16 @@
 use Light\App\Factory\MarkdownExtensionFactory;
 use Light\App\Factory\MarkdownRuntimeLoaderFactory;
 use Light\App\Factory\PackageGeneratorFactory;
+use Light\App\Factory\PostContactCreateHandlerFactory;
 use Light\App\Factory\SitemapGeneratorFactory;
 use Light\App\Handler\GetFeedViewHandler;
 use Light\App\Handler\GetIndexViewHandler;
 use Light\App\Handler\GetMarkdownArticleHandler;
 use Light\App\Handler\GetPackagesViewHandler;
 use Light\App\Handler\GetSitemapViewHandler;
+use Light\App\Handler\PostContactCreateHandler;
 use Light\App\Resolver\EntityListenerResolver;
+use Light\App\Service\ContactService;
 use Light\App\Service\FeedGenerator;
 use Light\App\Service\GitHubClient;
 use Light\App\Service\GitHubClientInterface;
@@ -142,6 +146,8 @@ public function getDependencies(): array
                 GetMarkdownArticleHandler::class      => GetMarkdownArticleHandlerFactory::class,
                 GetSitemapViewHandler::class          => GetSitemapViewHandlerFactory::class,
                 GetPackagesViewHandler::class         => GetPackagesViewHandlerFactory::class,
+                PostContactCreateHandler::class       => PostContactCreateHandlerFactory::class,
+                ContactService::class                 => ContactServiceFactory::class,
                 FeedGenerator::class                  => FeedGeneratorFactory::class,
                 SitemapGenerator::class               => SitemapGeneratorFactory::class,
                 GitHubClient::class                   => GitHubClientFactory::class,