Form works in multiple places now

contact_form/templates/contact_form/contact_form.html

@@ -1,5 +1,24 @@
-<form action="{% url 'contact_form:contact_form' %}" method="post">
-  {% csrf_token %}
-  {{ form.as_p }}
-  <button type="submit">Submit</button>
-</form>
+<dialog open>
+  <form hx-post="{% url 'contact_form:contact_form' %}" hx-target="#result">
+    <article class="success">
+      <header>
+        <button aria-label="Close" rel="prev" onclick="closeModal(event)"></button>
+        <h3>{{ contact_form_title }}</h3>
+      </header>
+      <fieldset>
+        {% csrf_token %}
+        {% for field in form %}
+          {{ field }}
+        {% endfor %}
+      </fieldset>
+      <footer>
+        <button class="primary">
+          📧 Send
+        </button>
+        <button class="secondary" onclick="closeModal(event)">
+          Cancel
+        </button>
+      </footer>
+    </article>
+  </form>
+</dialog>

contact_form/templates/contact_form/success.html

@@ -1 +1,14 @@
-Success!
+<dialog open>
+  <article class="success">
+    <header>
+      <button aria-label="Close" rel="prev" onclick="closeModal(event)"></button>
+      <h3>Thanks!</h3>
+    </header>
+    <p>Your message has been sent and should be with me soon.</p>
+    <footer>
+      <button class="secondary" onclick="closeModal(event)">
+        Close
+      </button>
+    </footer>
+  </article>
+</dialog>

contact_form/views.py

@@ -12,7 +12,7 @@
 
 
 # A simple view to display the converter HTML template.
-async def contact_form(request: HttpRequest) -> HttpResponse:
+async def contact_form(request: HttpRequest, contact_form_title: str = "Contact Form") -> HttpResponse:
     """Render the contact form template."""
     if request.method == "POST":
         form = ContactForm(request.POST)
@@ -23,7 +23,7 @@ async def contact_form(request: HttpRequest) -> HttpResponse:
             message = form.cleaned_data["message"]
 
             # Send the email - see RUFF006
-            task = asyncio.create_task(send_email_async(name, email, message))
+            task = asyncio.create_task(send_email_async(name=name, email=email, message=message))
             background_tasks.add(task)
             task.add_done_callback(background_tasks.discard)
 
@@ -32,4 +32,8 @@ async def contact_form(request: HttpRequest) -> HttpResponse:
     else:
         form = ContactForm()
 
-    return TemplateResponse(request, "contact_form/contact_form.html", {"form": form})
+    return TemplateResponse(
+        request,
+        "contact_form/contact_form.html",
+        {"form": form, "contact_form_title": contact_form_title},
+    )

spf_generator/templates/spf_generator/generator.html

@@ -12,11 +12,10 @@
     <header>
       <h1>SPF Record Generator</h1>
       <p><strong>Please note:</strong> I have made best efforts to ensure the information below is correct. But I highly recommend checking and validating the SPF record before updating it in your DNS. Please contact me if you spot any mistakes.</p>
-      <p>Select the email services that you use with your domain from the lists below.</p>
+      <p>Select the email services that you use with your domain from the lists below. If you don't see the service you want, please <a href="{% url 'spf_generator:contact_form' %}" hx-get="{% url 'spf_generator:contact_form' %}" hx-target="#result">send me a message to let me know</a>.</p>
     </header>
 
-    <form hx-post="{% url 'spf_generator:spf_generator' %}"
-          hx-target="#result">
+    <form hx-post="{% url 'spf_generator:spf_generator' %}" hx-target="#result">
       {% csrf_token %}
 
       <div class="grid">
@@ -80,46 +79,6 @@ <h2>Default Policy</h2>
 
       <button type="submit">Generate SPF Record</button>
     </form>
-
-    <div id="result" role="alert"></div>
   </article>
 
 {% endblock content %}
-
-{% block body_close %}
-  <script>
-    function closeModal(event) {
-      event.preventDefault();
-      const modal = document.querySelector('dialog');
-      if (modal) {
-        modal.remove();
-      }
-    }
-
-    async function copySpfRecord(button) {
-      const spfRecord = document.getElementById('spf-record');
-      if (spfRecord) {
-        try {
-          await navigator.clipboard.writeText(spfRecord.textContent);
-
-              // Show feedback
-          const originalText = button.textContent;
-          button.textContent = 'Copied!';
-
-              // Reset button text after 2 seconds
-          setTimeout(() => {
-            button.textContent = originalText;
-          }, 2000);
-
-        } catch (err) {
-          console.error('Failed to copy text:', err);
-          button.textContent = 'Failed to copy';
-
-          setTimeout(() => {
-            button.textContent = originalText;
-          }, 2000);
-        }
-      }
-    }
-  </script>
-{% endblock body_close %}

spf_generator/templates/spf_generator/partials/result.html

@@ -4,16 +4,17 @@
       <button aria-label="Close" rel="prev" onclick="closeModal(event)"></button>
       <h3>Your SPF Record</h3>
     </header>
-    <pre><code id="spf-record">{{ spf_record }}</code></pre>
+    <pre><code id="spf-record">"{{ spf_record }}"</code></pre>
+    <p>Add this record as a TXT record in your domain's DNS settings.</p>
+    <p><strong>Note:</strong> This record uses <em>{{ all_mechanism }}</em> as the default policy.<br>
+      <small>{{ all_mechanism_help|safe }}</small></p>
     <footer>
-      Add this record as a TXT record in your domain's DNS settings.<br>
-      <strong>Note:</strong> This record uses <em>{{ all_mechanism }}</em> as the default policy.<br>
-      <small>{{ all_mechanism_help|safe }}</small>
-      <div style="margin-top: 1rem;">
-        <button class="primary" onclick="copySpfRecord(this)">
-          Copy SPF Record
-        </button>
-      </div>
+      <button class="primary" onclick="copySpfRecord(this)">
+        📋 Copy SPF Record
+      </button>
+      <button class="secondary" onclick="closeModal(event)">
+        Close
+      </button>
     </footer>
   </article>
 </dialog>

spf_generator/urls.py

@@ -2,10 +2,12 @@
 
 from django.urls import path
 
+from contact_form.views import contact_form
 from spf_generator.views import generate_spf_record
 
 app_name = "spf_generator"
 
 urlpatterns = [
+    path("contact/", contact_form, {"contact_form_title": "Request a New SPF Record"}, name="contact_form"),
     path("", generate_spf_record, name="spf_generator"),
 ]

templates/base.html

@@ -36,6 +36,44 @@
       {% endblock content %}
     </main>
 
-    {% block body_close %}{% endblock %}
+    {% block body_close %}
+      <div id="result"></div>
+
+      <script>
+        function closeModal(event) {
+          event.preventDefault();
+          const modal = document.querySelector('dialog');
+          if (modal) {
+            modal.remove();
+          }
+        }
+
+        async function copySpfRecord(button) {
+          const spfRecord = document.getElementById('spf-record');
+          if (spfRecord) {
+            try {
+              await navigator.clipboard.writeText(spfRecord.textContent);
+
+                  // Show feedback
+              const originalText = button.textContent;
+              button.textContent = '👍 Copied!';
+
+                  // Reset button text after 2 seconds
+              setTimeout(() => {
+                button.textContent = originalText;
+              }, 2000);
+
+            } catch (err) {
+              console.error('Failed to copy text:', err);
+              button.textContent = '❗️ Failed to copy';
+
+              setTimeout(() => {
+                button.textContent = originalText;
+              }, 2000);
+            }
+          }
+        }
+      </script>
+    {% endblock body_close %}
   </body>
 </html>

templates/snippets/navbar.html

@@ -38,6 +38,10 @@
           {% include "svg/house-gear.svg" %}<span class="hide-at-s"> Admin</span></a>
       </li>
     {% endif %}
+    <li>
+      <a role="button" class="outline" href="{% url "contact_form:contact_form" %}" hx-get="{% url 'contact_form:contact_form' %}" hx-target="#result">
+        {% include "svg/email-heart.svg" %}<span class="hide-at-s">  @email</span></a>
+    </li>
     <li>
       <a rel="me" role="button" class="outline" href="https://fosstodon.org/@stuartm">
         {% include "svg/mastodon.svg" %}<span class="hide-at-s">  @stuartm</span></a>