add sodar-pr-btn-submit-once class and usage (#1233)

filesfolders/templates/filesfolders/file_form.html

@@ -73,7 +73,7 @@ <h3>
           >
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           {% if object.pk %}
             <i class="iconify" data-icon="mdi:lead-pencil"></i> Update
           {% else %}

filesfolders/templates/filesfolders/folder_form.html

@@ -60,7 +60,7 @@ <h3>
           >
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i>
           {% if object.pk %}Update{% else %}Add{% endif %}
         </button>

filesfolders/templates/filesfolders/hyperlink_form.html

@@ -61,7 +61,7 @@ <h3>
           >
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i>
           {% if object.pk %}
             Update

projectroles/static/projectroles/js/projectroles.js

@@ -317,3 +317,18 @@ $(document).ready(function () {
 $(window).on('resize', function () {
     toggleSidebar();
 });
+
+
+/* Disable submit button once clicked --------------------------------------- */
+
+
+$(document).ready(function () {
+    $('.sodar-pr-btn-submit-once').click(function () {
+        $(this).attr('disabled', true);
+        $(this).find('svg').remove();
+        $(this).prepend('<span class="spinner-border spinner-border-sm" ' +
+            'role="status" aria-hidden="true"></span>');
+        $("body").css("cursor", "progress");
+        $(this).closest('form').submit();
+    });
+});

projectroles/templates/projectroles/project_form.html

@@ -75,7 +75,7 @@ <h2 id="sodar-pr-project-form-title" data-project-type="CATEGORY">
              href="{{ request.session.real_referer }}">
             <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
           </a>
-          <button type="submit" class="btn btn-primary">
+          <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
             <i class="iconify" data-icon="mdi:check-bold"></i>
             {% if object.pk %}
               Update

projectroles/templates/projectroles/projectinvite_form.html

@@ -33,7 +33,7 @@ <h3>Send Invite</h3>
            data-toggle="modal" data-target="#sodar-modal">
           <i class="iconify" data-icon="mdi:eye"></i> Preview
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:send"></i> Send
         </button>
       </div>

projectroles/templates/projectroles/remotesite_form.html

@@ -25,7 +25,7 @@ <h2>{% if object.pk %}Update{% else %}Add{% endif %} {% if site_mode == 'TARGET'
            href="{{ request.session.real_referer }}">
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i>
           {% if object.pk %}Update{% else %}Add{% endif %}
         </button>

projectroles/templates/projectroles/roleassignment_form.html

@@ -44,7 +44,7 @@ <h3>Add Member</h3>
            data-toggle="modal" data-target="#sodar-modal">
           <i class="iconify" data-icon="mdi:eye"></i> Preview
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           {% if object.pk %}
             <i class="iconify" data-icon="mdi:check-bold"></i> Update
           {% elif promote_as %}

projectroles/templates/projectroles/user_form.html

@@ -23,7 +23,7 @@ <h2>
     {{ form | crispy }}
     <div class="row">
       <div class="btn-group ml-auto" role="group">
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i>
           {% if object %}Update{% else %}Create{% endif %}
         </button>

projectroles/tests/test_ui.py

@@ -1,6 +1,8 @@
 """UI tests for the projectroles app"""
 
 import socket
+import time
+
 from urllib.parse import urlencode
 
 from django.conf import settings
@@ -15,7 +17,10 @@
 from django.urls import reverse
 
 from selenium import webdriver
-from selenium.common.exceptions import NoSuchElementException
+from selenium.common.exceptions import (
+    NoSuchElementException,
+    StaleElementReferenceException,
+)
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as ec
 from selenium.webdriver.support.ui import WebDriverWait, Select
@@ -1688,6 +1693,34 @@ def test_settings_label_icon(self):
         ).find_element(By.TAG_NAME, 'svg')
         self.assertTrue(logo.is_displayed())
 
+    def test_submit_button(self):
+        """Test rendering of submit button"""
+        url = reverse(
+            'projectroles:create', kwargs={'project': self.category.sodar_uuid}
+        )
+        self.login_and_redirect(
+            self.superuser, url, wait_elem=None, wait_loc='ID'
+        )
+        element = self.selenium.find_element(
+            By.CLASS_NAME, 'sodar-pr-btn-submit-once'
+        )
+        self.assertEqual(element.text, 'Create')
+        self.assertTrue(element.is_enabled())
+        # Define maximum number of retries and retry interval
+        max_retries = 50
+        retry_interval = 0.2
+        element.click()
+        for i in range(max_retries):
+            try:
+                if element.is_enabled() and i < max_retries - 1:
+                    time.sleep(retry_interval)
+                else:
+                    self.fail(
+                        'Element did not become enabled within the timeout'
+                    )
+            except StaleElementReferenceException:
+                break
+
 
 class TestProjectUpdateView(TestUIBase):
     """Tests for ProjectUpdateView UI"""

tokens/templates/tokens/token_create.html

@@ -20,7 +20,7 @@ <h2>Create API Token</h2>
             href="{% url 'tokens:list' %}">
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i> Create
         </button>
       </div>