Merge pull request #1 from spark-c/conditional-modal

Conditional logic for rendering django messages via message-box vs new modal

Author: spark-c

chipy_org/apps/contact/templates/contact/contact.html

@@ -35,8 +35,44 @@ <h3>Did you know ChiPy has a mailing list?</h3>
           </div>
         </div>
     </div>
+    
+    {% if messages %}
+      <!-- CONTACT MODAL STARTS-->
+      <div id="contact-modal-show" style="display:none" data-bs-toggle="modal" data-bs-target="#contact-modal"></div>
+      
+      <div class="modal fade" id="contact-modal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <img src="https://via.placeholder.com/150"></img>
+                    <h5 class="modal-title black-text" id="contactModalLabel">Thank You.</h5>
+                </div>
+                <div class="modal-body">
+                    {% include "_messages.html" %}
+                    <button
+                      type="button"
+                      class="btn btn-primary"
+                      data-bs-dismiss="modal"
+                      aria-label="Close"
+                      onclick="javascript:window.location='/'">
+                      Return to home
+                    </button>
+                </div>
+            </div>
+        </div>
+      </div>
+
+      <script>
+        window.addEventListener('load', function () {
+          document.querySelector("#contact-modal-show").click();
+        });
+      </script>
+      <!-- CONTACT MODAL ENDS-->
+    {% endif %}
 {% endblock %}
 
+
+
 {% block extra-javascript %}
 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 {% endblock %}

chipy_org/apps/contact/views.py

@@ -7,7 +7,8 @@
 class ContactView(FormView):
     template_name = "contact/contact.html"
     form_class = ContactForm
-    success_url = "/"
+    success_url = "/contact"
+    message_as_modal = True
 
     def form_valid(self, form):
         try:
@@ -17,3 +18,9 @@ def form_valid(self, form):
             messages.error(self.request, "Your message was NOT sent to Chipy's organizers")
 
         return super().form_valid(form)
+
+    def get_context_data(self, **kwargs):
+        """ Used to access message_as_modal in template as context """
+        context = super(ContactView, self).get_context_data(**kwargs)
+        context.update({'message_as_modal': self.message_as_modal})
+        return context

chipy_org/templates/_messages.html

@@ -1,6 +1,19 @@
-{% for message in messages %}
-    <div class="alert alert-dismissible {% if message.tags %} {% for tag in message.tags.split %}alert-{{ tag }} {% endfor %}{% endif %} fade show">
-        <a class="close" href="#" data-bs-dismiss="alert" aria-label="Close">&times;</a>
-        {{ message|linebreaks }}
-    </div>
-{% endfor %}
+{% if message_as_modal %}
+    {% for message in messages %}
+        <div>{{ message|linebreaks }}</div>
+    {% endfor %}
+
+{% else %}
+    {% for message in messages %}
+    <div class="container-xl">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="alert alert-dismissible {% if message.tags %} {% for tag in message.tags.split %}alert-{{ tag }} {% endfor %}{% endif %} fade show">
+                    <a class="close" href="#" data-bs-dismiss="alert" aria-label="Close">&times;</a>
+                    {{ message|linebreaks }}
+                </div>
+            </div>
+        </div>
+    </div><!--closes container xl-->
+    {% endfor %}
+{% endif %}

chipy_org/templates/shiny/slim.html

@@ -17,14 +17,9 @@
 
 {% block content %}
 
-{% if messages %}
-<div class="container-xl">
-    <div class="row">
-        <div class="col-md-12">
-            {% include "_messages.html" %}
-        </div>
-    </div>
-</div><!--closes container xl-->
+<!-- Renders message box unless View declares message_as_modal instead -->
+{% if messages and not message_as_modal %}
+    {% include "_messages.html" %}
 {% endif %}
 
 <div class="container-xl">