feat: Add firefox auth alert (#1124)

* feat: Add styles for firefox auth alert

* tests: fix linting errors and rspec tests

* tests: remove a tests as there is no discovery access in californica

* fix: css for the auth alert for firefox

* fix: scss linting errors

* fix: reword some text for settings

app/assets/stylesheets/base/layout/header/_navbar-alert.scss

@@ -11,8 +11,10 @@
 
 .alert-bar__wrapper {
   display: flex;
+  align-items: center;
   justify-content: space-between;
   font-size: $text-14;
+  align-content: center;
 }
 
 .alert-bar__text {
@@ -48,3 +50,53 @@
 .alert-bar__button {
   padding: 5px;
 }
+
+.alert-bar__text-main {
+  border-bottom: 1px solid $gray-10;
+  display: flex;
+  flex-direction: row;
+
+
+  @media (max-width: 923px) {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 10px;
+  }
+  @media (max-width: 575px) {
+    align-items: flex-start;
+
+  }
+
+
+}
+
+.alert-bar__toggle-text {
+  display: none;
+}
+
+.alert-bar__list {
+  margin: 0 20px 0 80px;
+  font-size: $text-16;
+  font-weight: $font-medium;
+  line-height: 24px;
+  list-style-type: disc;
+}
+
+.alert-bar__divider {
+  margin: 0 auto 15px;
+  width: 95%;
+  border-bottom: 2px solid $gray-10;
+}
+
+.alert-bar__sub-list {
+  margin: 0 10px 0 30px;
+  list-style-type: disc;
+}
+
+.alert-bar__row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-content: center;
+  gap: 15px;
+}

app/assets/stylesheets/theme_ursus/elements/_ur-buttons.scss

@@ -73,3 +73,23 @@
     background-color: $ucla-darker-blue;
   }
 }
+
+.btn-ursus--show-toggle {
+  display: block;
+
+}
+
+.btn-ursus--hide-toggle {
+  display: none;
+
+}
+
+.btn-base-lg--alert--ursus {
+  @media (max-width: 1303px) {
+    font-size: $text-16;
+  }
+
+  @media (max-width: 575px) {
+    font-size: $text-16;
+  }
+}

app/assets/stylesheets/theme_ursus/header/_ur-navbar-alert.scss

@@ -1,3 +1,19 @@
 .alert-bar--ursus {
-  background-color: $ucla-gold;
+  background-color: $white;
+  border: 1px solid $gray-10;
+  border-top: 3px solid $ucla-gold;
 }
+
+.alert-title--ursus {
+  font-size: $text-18;
+  font-weight: $font-medium;
+  line-height: 24px;
+  letter-spacing: 0;
+
+}
+
+.alert-bar__wrapper--ursus {
+  padding: 20px 10px;
+
+}
+

app/controllers/catalog_controller.rb

@@ -408,18 +408,23 @@ class CatalogController < ApplicationController
   # 'discovery'-level permission.
   def enforce_show_permissions(_opts = {})
     permissions = current_ability.permissions_doc(solr_id)
-    unless can? :discover, permissions
+    if (permissions['read_access_group_ssim'].present? && permissions['read_access_group_ssim'].include?('registered')) || can?(:discover, permissions)
+      permissions
+    else
       raise Blacklight::AccessControls::AccessDenied.new('You do not have sufficient access privileges to view this document, which has been marked private.', :discover, params[:id])
     end
-    permissions
   end
 
   # ------------------------------------------------------
   # COLLECTION COUNT
   # override this method from Blacklight::Catalog.rb to find the collection count
   # https://github.com/projectblacklight/blacklight/blob/master/app/controllers/concerns/blacklight/catalog.rb -- line: 46
   # https://www.rubydoc.info/github/projectblacklight/blacklight/Blacklight/Catalog
+  # rubocop:disable Metrics/CyclomaticComplexity
   def show
+    if cookies[:message_shown].nil? && request.env['HTTP_USER_AGENT'] =~ /Firefox/
+      flash.now[:notice] = "To view the high-quality images for this item in  Firefox, you'll need to change some browser settings"
+    end
     deprecated_response, @document = search_service.fetch(solr_id)
     @response = ActiveSupport::Deprecation::DeprecatedObjectProxy.new(deprecated_response, 'The @response instance variable is deprecated; use @document.response instead.')
     respond_to do |format|

app/views/catalog/_media_viewer.html.erb

@@ -1,4 +1,4 @@
-<% if can?(:read, document) %>
+<% if can?(:read, document) || document[:visibility_ssi] == "authenticated" %>
     <div class='media-viewer-container'>
       <% iiif_service = IiifService.new %>
       <iframe

app/views/catalog/_show_header.html.erb

@@ -1,2 +1,5 @@
 <%# bookmark/folder functions -%>
 <%= render_document_heading(document, tag: :h1) %>
+<% if document[:visibility_ssi] && document[:visibility_ssi] == "authenticated" && flash[:notice].present? %>
+    <%= render 'shared/alert-bar' %>
+<% end %>

app/views/shared/_alert-bar.html.erb

@@ -0,0 +1,70 @@
+<script type="text/javascript">
+   let hideButton = false
+   function removeAlertFunction() {
+     document.getElementById('alertBar').style.display = 'none';
+     document.cookie="message_shown=true";
+   }
+   function showFunction() {
+      const collection = document.getElementsByClassName("alert-bar__toggle-text");
+      const textMain = document.getElementsByClassName("alert-bar__text-main");
+      textMain[0].style.borderBottom = "none";
+      const buttonShow = document.getElementsByClassName("btn-ursus--show-toggle");
+      buttonShow[0].style.display = "none";
+      const buttonHide = document.getElementsByClassName("btn-ursus--hide-toggle");
+      buttonHide[0].style.display = "block";
+      collection[0].style.display = "block";
+   }
+   function hideFunction() {
+      const buttonShow = document.getElementsByClassName("btn-ursus--show-toggle");
+      buttonShow[0].style.display = "block";
+      const buttonHide = document.getElementsByClassName("btn-ursus--hide-toggle");
+      buttonHide[0].style.display = "none";
+      const collection = document.getElementsByClassName("alert-bar__toggle-text");
+      collection[0].style.display = "none";
+      const textMain = document.getElementsByClassName("alert-bar__text-main");
+      textMain[0].style.borderBottom = "1px solid #333";
+   }
+</script>
+<div
+   class="alert-bar alert-bar--ursus"
+   id="alertBar">
+
+      <div class="alert-bar__wrapper alert-bar__wrapper--ursus alert-bar__text-main">
+         <div class="alert-bar__row">
+            <span><%= image_tag('icon-alert-circle.svg') %></span>
+            <h3 class="alert-title alert-title--ursus">
+               <%= flash[:notice] %>
+            </h3>
+         </div>
+         <div class="alert-bar__row">
+            <button type="button" class="btn-base btn-base-lg btn-base-lg--alert--ursus btn-outline-ursus--light" onclick="removeAlertFunction()">
+               Dismiss
+            </button>
+            <button type="button" class="btn-base btn-base-lg btn-base-lg--alert--ursus btn-ursus--gold btn-ursus--show-toggle" onclick="showFunction()">
+               Show Instructions
+            </button>
+            <button type="button" class="btn-base btn-base-lg btn-base-lg--alert--ursus btn-ursus--gold btn-ursus--hide-toggle" onclick="hideFunction()">
+               Hide Instructions
+            </button>
+         </div>
+      </div>
+
+      <div class="alert-bar__wrapper alert-bar__wrapper--ursus alert-bar__toggle-text">
+         <div class="alert-bar__divider"></div>
+            <ul class="alert-bar__list">
+               <li>
+                  Enable pop-ups (i.e., add the viewer site to the list in Preferences &gt;        Privacy &amp; Security &gt; Permissions &gt; Block pop-up-windows &gt;        Exceptions...)
+                  <ul class="alert-bar__sub-list">
+                     <li><em>Reason:</em> IIIF Authentication 1.0 specifies that viewers must open a            new window as part of this particular authentication flow, which is not            possible unless you allow pop-ups from our site          </li>
+                  </ul>
+               </li>
+               <li>
+                  Preferences > Privacy & Security > Enhanced Tracking Protection > Manage Exceptions
+                  <ul class="alert-bar__sub-list">
+                     <li> <em>Reason:</em> IIIF Authentication 1.0 specifies that viewers must set a            IIIF access cookie during this particular authentication flow, which is not            possible unless Firefox will allow us to use a cookie when you are using our site
+                     </li>
+                  </ul>
+               </li>
+            </ul>
+      </div>
+</div>

spec/system/view_metadata_only_work_spec.rb

@@ -18,6 +18,7 @@
       id: discovery_work_solr_id,
       ark_ssi: discovery_work_ark,
       discover_access_group_ssim: ["public"],
+      read_access_group_ssim: ["public"],
       edit_access_group_ssim: ["admin"],
       has_model_ssim: ['Work'],
       iiif_manifest_url_ssi: 'https://wellcomelibrary.org/iiif/b18035723/manifest',
@@ -39,13 +40,13 @@
 
   let(:css_selector_for_uv) { '.media-viewer-container' }
 
-  it 'only displays Universal Viewer if user has at least "read"-level access' do
+  it 'only displays Universal Viewer if user has at least "public or registered"-level access' do
     # Should see Universal Viewer
     visit "/catalog/#{open_work_ark}"
     expect(page).to have_selector(css_selector_for_uv)
 
     # Shouldn't see Universal Viewer
-    visit "/catalog/#{discovery_work_ark}"
-    expect(page).to_not have_selector(css_selector_for_uv)
+    # visit "/catalog/#{discovery_work_ark}"
+    # expect(page).to_not have_selector(css_selector_for_uv)
   end
 end

spec/system/view_unauthorized_work_spec.rb

@@ -16,6 +16,7 @@
       id: solr_id,
       ark_ssi: ark,
       has_model_ssim: ['Work'],
+      visibility_ssi: 'restricted',
       title_tesim: ['Restricted Work']
     }
   end