Affiche une animation après soumission d'un formulaire

elections/templates/elections/delete_vote.html

@@ -16,7 +16,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

elections/templates/elections/election_create.html

@@ -38,7 +38,7 @@
 
   <div class="field">
     <div class="control">
-      <button class="button is-fullwidth is-outlined is-primary is-light">{% trans "Enregistrer" %}</button>
+      <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">{% trans "Enregistrer" %}</button>
     </div>
   </div>
 </form>

elections/templates/elections/election_update.html

@@ -40,7 +40,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

elections/templates/elections/mail_voters.html

@@ -27,7 +27,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

elections/templates/elections/question_update.html

@@ -22,7 +22,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

elections/templates/elections/upload_voters.html

@@ -78,7 +78,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

elections/templates/elections/vote.html

@@ -62,7 +62,7 @@
             </section>
 
             <footer class="modal-card-foot">
-              <button class="button is-fullwidth is-outlined is-primary is-light">
+              <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
                 <span class="icon">
                   <i class="fas fa-check"></i>
                 </span>

shared/templates/auth/create-user.html

@@ -16,7 +16,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

shared/templates/auth/election_login.html

@@ -18,7 +18,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

shared/templates/authens/pwd_login.html

@@ -18,7 +18,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

shared/templates/authens/pwd_reset.html

@@ -18,7 +18,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

shared/templates/authens/pwd_reset_confirm.html

@@ -18,7 +18,7 @@
 
       <div class="field is-grouped is-centered">
         <div class="control is-expanded">
-          <button class="button is-fullwidth is-outlined is-primary is-light">
+          <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
             <span class="icon">
               <i class="fas fa-check"></i>
             </span>

shared/templates/base.html

@@ -92,6 +92,17 @@
         });
       });
 
+      // Disable button after form submission
+      var $forms = document.querySelectorAll('form');
+
+      $forms.forEach($form => {
+        const $submit = $form.querySelector('button[type=submit]');
+
+        $form.addEventListener('submit', () => {
+          $submit.classList.add('is-loading');
+        });
+
+      });
     });
 
   </script>

shared/templates/forms/modal-form.html

@@ -16,7 +16,7 @@
       </section>
 
       <footer class="modal-card-foot">
-        <button class="button is-fullwidth is-outlined is-primary is-light">
+        <button class="button is-fullwidth is-outlined is-primary is-light" type="submit">
           <span class="icon">
             <i class="fas fa-check"></i>
           </span>