Replace collapsible reply button with submit button for sending clarification.

Author: nickygerritsen

webapp/templates/team/base.html.twig

@@ -11,10 +11,23 @@
 
     <script>
         $(function () {
-            $('body').on('submit', 'form[name=team_clarification]', function () {
+            var $body = $('body');
+            $body.on('submit', 'form[name=team_clarification]', function () {
                 return confirm("Send clarification request to Jury?");
             });
 
+            $body.on('click', '#clarification-reply-button', function() {
+                var $submitButton = $('<button type="submit" name="submit" class="btn btn-primary"><i class="fas fa-envelope"></i> Send</button>');
+                $(this).replaceWith($submitButton);
+
+                $submitButton.on('click', function() {
+                    var $form = $('form[name="team_clarification"]');
+                    if ($form[0].reportValidity()) {
+                        $form.submit();
+                    }
+                })
+            });
+
             /* Show the notification options if the browser supports it */
             if ('Notification' in window) {
                 $('#notify_disable').click(disableNotifications);

webapp/templates/team/clarification.html.twig

@@ -10,7 +10,7 @@
 
     <div class="container clarificationform mt-3">
     <button class="btn btn-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#collapsereplyform"
-            aria-expanded="false" aria-controls="collapsereplyform">
+            aria-expanded="false" aria-controls="collapsereplyform" id="clarification-reply-button">
         <i class="fa fa-reply"></i> reply to this clarification
     </button>
     </div>

webapp/templates/team/clarification_modal.html.twig

@@ -13,7 +13,7 @@ View clarification
 {% endblock %}
 {% block extraButton %}
         <button class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#collapsereplyform"
-                aria-expanded="false" aria-controls="collapsereplyform">
+                aria-expanded="false" aria-controls="collapsereplyform" id="clarification-reply-button">
             <i class="fa fa-reply"></i> reply to this clarification
         </button>
 {% endblock %}

webapp/templates/team/partials/clarification_content.html.twig

@@ -28,11 +28,6 @@
                 </div>
             </div>
         </div>
-        <div>
-            <button type="submit" name="submit" class="btn btn-primary">
-                <i class="fas fa-envelope"></i> Send
-            </button>
-        </div>
         {{ form_end(form) }}
     </div>
 </div>