Visual feedback for registration

view-webapp/src/main/sass/tour.scss

@@ -80,6 +80,20 @@
         display: none;
       }
     }
+    .success-feedback {
+      display: none;
+      position: absolute;
+      bottom: 1em;
+      right: 1em;
+      opacity: 1;
+      transition: opacity 2s ease-in;
+    }
+    &.successful .success-feedback {
+      display: block;
+      &.done {
+        opacity: 0;
+      }
+    }
   }
 
   #player-form {

view-webapp/src/main/webapp/js/tour-registration.inc.js

@@ -174,7 +174,10 @@ onLoad(() => {
         ctl.setCustomValidity(msg('required_field'));
       }
     }
-    if (!valid) return;
+    if (!valid) {
+      $('#player :invalid').forEach(elem => elem.reportValidity());
+      return;
+    }
     // $('#player-form')[0].requestSubmit() not working?!
     $('#player-form')[0].dispatchEvent(new CustomEvent('submit', {cancelable: true}));
   });
@@ -196,6 +199,7 @@ onLoad(() => {
         .then(player => {
           console.log(player)
           if (player !== 'error') {
+            store('registrationSuccess', true);
             window.location.reload();
           }
         });
@@ -204,8 +208,8 @@ onLoad(() => {
       player['id'] = id;
       api.putJson(`tour/${tour_id}/part/${id}`, player)
         .then(player => {
-          console.log(player)
           if (player !== 'error') {
+            store('registrationSuccess', true);
             window.location.reload();
           }
         });
@@ -337,6 +341,11 @@ onLoad(() => {
   });
   if (store('addingPlayers')) {
     addPlayers();
+    if (store('registrationSuccess')) {
+      $('#player').addClass('successful');
+      setTimeout(() => $('#player .success-feedback').addClass('done'), 0);
+    }
+    store.remove('registrationSuccess');
   }
   if (store('macmahonGroups')) {
     modal('macmahon-groups');

view-webapp/src/main/webapp/tour-registration.inc.html

@@ -197,6 +197,7 @@
         </button>
       </div>
     </form>
+    <div class="success-feedback"><i class="big green check icon"></i></div>
   </div>
 </div>
 #if($tour.pairing.type == 'MAC_MAHON')