Most invitations features working. My files still missing

themes/default/public/js/list-invitations.js

@@ -27,7 +27,7 @@ const toggleHidden = () => {
   const invitationsListDOM = document.querySelector(".invitations-list");
   const toggleButtonDOM = document.querySelector(".action-toggle-hidden");
   const itemsHiddenDOM = invitationsListDOM.querySelectorAll(
-    ".item[data-visibility='0']"
+    ".item[data-visibility='hidden']"
   );
 
   if (invitationsListDOM.dataset.visibility === "hidden") {
@@ -72,7 +72,7 @@ const deleteInvitation = () => {
         })
         .then((data) => {
           if (data.success) {
-            data.success.forEach((t) => {
+            data.tokens.forEach((t) => {
               addToast(t.msg, "success");
               document.getElementById(`row-${t.token}`).remove();
             });
@@ -157,11 +157,11 @@ const toggleVisibility = () => {
           const itemDOM = document.getElementById(`row-${t.token}`);
 
           if (t.show) {
-            itemDOM.setAttribute("data-visibility", 1);
+            itemDOM.setAttribute("data-visibility", "shown");
             showNode(itemDOM);
-            itemDOM.querySelector(".selection .icon.hide-source").remove();
+            itemDOM.querySelector(".selection .icon").classList.add("is-hidden");
           } else {
-            itemDOM.setAttribute("data-visibility", 0);
+            itemDOM.setAttribute("data-visibility", "hidden");
 
             if (
               document.querySelector(".invitations-list").dataset.visibility ===
@@ -170,13 +170,7 @@ const toggleVisibility = () => {
               hideNode(itemDOM);
             }
 
-            itemDOM
+            itemDOM.querySelector(".selection .icon").classList.remove("is-hidden")
-              .querySelector(".selection")
-              .appendChild(
-                document
-                  .querySelector("template#icon-hide-source")
-                  .content.cloneNode(true)
-              );
           }
 
           itemDOM.querySelector(".selection input").click();

themes/default/templates/exception.html.ep

@@ -0,0 +1,18 @@
+
+<section class="box">
+% if (stash('expired_or_deleted_invitation')) {
+  <div class="message is-danger">
+    <div class="message-body">
+      <%= l('Sorry, your invitation has expired or has been deleted.') %>
+    </div>
+  </div>
+% }
+
+% if (stash('invitation_not_found')) {
+  <div class="message is-danger">
+    <div class="message-body">
+      <%= l('Sorry, the invitation doesn’t exist. Are you sure you are on the right URL?') %>
+    </div>
+  </div>
+% }
+</section>

themes/default/templates/invitations/exception.html.ep

@@ -1,10 +0,0 @@
-% if (stash('expired_or_deleted_invitation')) {
-  <article class="message-card error">
-    <%= l('Sorry, your invitation has expired or has been deleted.') %>
-  </article>
-% }
-% if (stash('invitation_not_found')) {
-  <article class="message-card error">
-    <%= l('Sorry, the invitation doesn’t exist. Are you sure you are on the right URL?') %>
-  </article>
-% }

themes/default/templates/invitations/invite.html.ep

@@ -11,9 +11,11 @@
 % if (scalar(@{$self->stash('success')})) {
   <div class="message is-success">
     <div class="message-body">
+      <p class="content">
       % for my $msg (@{$self->stash('success')}) {
         <%= $msg %>
       % }
+      </p>
     </div>
   </div>
 % }

themes/default/templates/invitations/my_invitations.html.ep

@@ -14,13 +14,13 @@
 
   <div class="buttons">
     <button href="#" class="button action-toggle-hidden"><%= l('Show hidden invitations') %></button>
-    <button href="#" class="button target-selection action-delete-invitation" disabled="disabled"=><%= l('Delete') %></button>
+    <button href="#" class="button target-selection action-delete-invitation" disabled="disabled"><%= l('Delete') %></button>
     <button href="#" class="button target-selection action-resend-invitation" disabled="disabled"><%= l('Resend invitation mail') %></button>
     <button href="#" class="button target-selection action-toggle-visibility" disabled="disabled"><%= l('Toggle visibility') %></button>
   </div>
 
-  <div class="table-container">
+  <div class="table-container is-fullwidth">
-    <table class="table is-stripped is-hoverable">
+    <table class="table is-stripped is-hoverable is-fullwidth">
       <thead>
         <tr>
           <th class="has-text-centered">
@@ -43,16 +43,13 @@
         % my ($e, $num) = @_;
         % return if $e->deleted;
         % my $class = '';
-        % $class = 'deleted' unless $e->is_valid;
+        % $class = ' deleted' unless $e->is_valid;
         % $class .= ' is-hidden' unless $e->show_in_list;
-        <tr id="row-<%= $e->token %>" class="item <%= $class %>" aria-hidden="<%= ($e->show_in_list) ? 'true' : 'false' %>" data-visibility="<%= ($e->show_in_list) ? 1 : 0 %>">
+        <tr id="row-<%= $e->token %>" class="item<%= $class %>" aria-hidden="<%= ($e->show_in_list) ? 'true' : 'false' %>" data-visibility="<%= ($e->show_in_list) ? 'shown' : 'hidden' %>">
           <td class="selection is-vcentered has-text-centered">
             <div class="checkbox input-delete-on-first-view">
               <input type="checkbox" data-token="<%= $e->token %>" autocomplete="off" aria-label="Select">
-              
+              <span class="icon fas fa-eye-slash<%= ' is-hidden' if($e->show_in_list) %>" title="<%= l('This invitation is normally hidden') %>"></span>
-              % unless ($e->show_in_list) {
-                <span class="icon fas fa-eye-slash" title="<%= l('This invitation is normally hidden') %>"></span>
-              % }
             </div>
           </td>
           <td class="mail is-vcentered"><%= $e->guest_mail %></td>
@@ -108,18 +105,12 @@
     </header>
 
     <section class="modal-card-body">
-      <ul class="files-list">
+      <ul class="files-list"></ul>
-        
-      </li>
     </section>
     <footer class="modal-card-foot"></footer>
   </div>
 </div>
 
-<template id="icon-hide-source">
-  <span class="icon fas fa-eye-slash" title="<%= l('This invitation is normally hidden') %>"></span>
-</template>
-
 <template id="item">
   <li class="item">
     <a class="file-link" href="#"></a>