LTI-405: add banner if enhanced protection is on in firefox, safari (#…

…345)

app/javascript/packs/rooms.js

@@ -17,7 +17,6 @@
  */
 
 $(document).on('turbolinks:load', function () {
-    var room = window.location.pathname.split('/')[3];
 
     $('#end-meeting-btn').on('click', function () {
         var end_meeting_url = $(this).data('url');
@@ -34,21 +33,9 @@ $(document).on('turbolinks:load', function () {
     var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
 
 
-    console.log("Firefox? " + isFirefox + " Safari? " + isSafari);
     /*
     With Dynamic State Partitioning enabled, Firefox provides embedded resources with a separate storage bucket for every top-level website, causing the request to be denied if it comes from a third party. Embedded third-parties may request access to the top-level storage bucket, which is what we're doing with the requestAccess() method.
     */
-    function requestAccess() {
-        document.requestStorageAccess().then(
-            () => {
-                console.log('access granted!');
-                $('#access-alert').hide();
-                // the user needs to reload and then press the button again for it to work
-            },
-            () => { console.log('access denied') }
-        );
-    }
-
     if (isFirefox || isSafari) {
         document.hasStorageAccess().then((hasAccess) => {
             if (!hasAccess && (isFirefox || isSafari)) {
@@ -60,7 +47,4 @@ $(document).on('turbolinks:load', function () {
             }
         });
     }
-
-    $('#accept-btn').on('click', requestAccess);
-
 });

app/views/shared/_room.html.erb

@@ -18,9 +18,7 @@
   <div id="access-alert" style="background-color: #fffacd;" class="mb-4 p-4 rounded-lg hidden">
 
     <h4><b><%= t('warning.cookies.title')%></b></h4>
-    <h5> <%= t('warning.cookies.message')%> <b> <%= t('warning.cookies.emphasis')%> </b> </h5>
-
-    <button type="button" id="accept-btn" style="background-color: black; border-color: black" class="border border-black text-white bg-black hover:bg-slate-200 rounded-lg p-2 mt-2" ><%= t('warning.cookies.continue')%> </button>
+    <h5> <%= t('warning.cookies.message')%> </h5>
 
   </div>
 

config/locales/en.yml

@@ -167,10 +167,8 @@ en:
       redirect_msg: "You will be automatically redirected once the meeting starts."
   warning:
     cookies:
-      title: "Enable Storage Access"
-      message: "To ensure the proper functioning of this application, your browser must allow access to cookies, session storage, and partitioned storage. By clicking 'Continue', you will grant the necessary access. Please note that this permission may not work depending on the version of Firefox or Safari you are using. Therefore, we recommend using Chrome for the best experience."
-      emphasis: "You may need to refresh this page after enabling storage access."
-      continue: "Continue"
+      title: "Enable Third Party Cookies"
+      message: "To ensure proper functioning of this application, you must turn off enhanced protection for this site to allow access to third party cookies. To do this, click on the shield icon to the left of the address bar and toggle 'Enhanced Tracking Protection'"
   error:
     http:
       _401: