OTWO-7630 Implement BDSA Page Design and SEO

.gitignore

@@ -22,4 +22,4 @@ tags
 logfile
 .vscode/settings.json
 .vscode/launch.json
-.tool-versions
+.tool-versions

app/assets/javascripts/api/vulnerability.js.coffee

@@ -53,32 +53,152 @@ cve_cvss3 = (cvss_data, severity) ->
     }
   ]
 
-search_bdsa = (id) ->
+search_bdsa = (id, source = 'landing') ->
   if id != ''
     id = id.toUpperCase()
     bdsa_format = /^BDSA-(19|[2-9][0-9])\d{2}-\d{4,}$/
     if bdsa_format.test(id)
       window.location.href = '/vulnerabilities/bdsa/' + id
     else
-      alert('Please enter a valid BDSA search term in the format: BDSA-YYYY-NNNN.\n"YYYY" is the 4-digit year, and "NNNN" is a number with 4 or more digits.');
+      errorText = 'Please enter a valid BDSA search term in the format: BDSA-YYYY-NNNN. "YYYY" is the 4-digit year, and "NNNN" is a number with 4 or more digits.'
+      if source == 'header' || source == 'mobile'
+        $errorPopup = $('.header-search-error-popup')
+        $errorPopup.find('.header-search-error-content').text(errorText)
+        $errorPopup.fadeIn(200)
+      else
+        $errorMsg = $('.bdsa-search-error')
+        $errorMsg.text(errorText)
+        $errorMsg.show()
 
 $(document).ready ->
   BdsaCookieConsent.init()
-  $('.bdsa-vulnerability input').keypress (e) ->
+
+  if $('.bdsa-landing-page').length > 0
+    $('.header-search-bar').hide()
+
+  # Theme Toggle Functionality
+  $('.theme-toggle').on 'click', ->
+    $html = $('html')
+    if $html.hasClass('dark')
+      $html.removeClass('dark').addClass('light')
+      localStorage.setItem('bdsa-theme', 'light')
+    else
+      $html.removeClass('light').addClass('dark')
+      localStorage.setItem('bdsa-theme', 'dark')
+
+  # Load saved theme preference
+  savedTheme = localStorage.getItem('bdsa-theme')
+  if savedTheme
+    $('html').removeClass('dark light').addClass(savedTheme)
+  else
+    # Default to light theme
+    $('html').addClass('light') unless $('html').hasClass('dark')
+
+  # Learn More Toggle
+  $('.bdsa-learn-more-toggle').on 'click', ->
+    $content = $('.bdsa-learn-more-content')
+    $chevronDown = $('.bdsa-chevron-down')
+    $chevronUp = $('.bdsa-chevron-up')
+
+    if $content.is(':visible')
+      $content.slideUp(200)
+      $chevronDown.show()
+      $chevronUp.hide()
+    else
+      $content.slideDown(200)
+      $chevronDown.hide()
+      $chevronUp.show()
+
+  # Search handlers - Landing page
+  $('.bdsa-search-input').keypress (e) ->
     if e.keyCode == 13
       search_bdsa $(this).val()
-  $('.bdsa-vulnerability button.bdsa-search').click () ->
-    search_bdsa $('.bdsa-vulnerability input').val()
+  $('.bdsa-search-input').on 'input', ->
+    if $(this).val().length > 0
+      $('.bdsa-search-clear').show()
+    else
+      $('.bdsa-search-clear').hide()
+    $('.bdsa-search-error').hide()
+  $('.bdsa-search-clear').click () ->
+    $('.bdsa-search-input').val('').focus()
+    $(this).hide()
+    $('.bdsa-search-error').hide()
+  $('.bdsa-search-button').click () ->
+    search_bdsa $('.bdsa-search-input').val()
+
+  # Search handlers - Header
+  $('.header-search-input').keypress (e) ->
+    if e.keyCode == 13
+      search_bdsa $(this).val(), 'header'
+  $('.header-search-input').on 'input', ->
+    if $(this).val().length > 0
+      $('.header-search-clear').show()
+    else
+      $('.header-search-clear').hide()
+    $('.header-search-error-popup').fadeOut(200)
+  $('.header-search-clear').click () ->
+    $('.header-search-input').val('').focus()
+    $(this).hide()
+    $('.header-search-error-popup').fadeOut(200)
+  $('.header-search-button').click () ->
+    search_bdsa $('.header-search-input').val(), 'header'
+
+  # Mobile Search Toggle
+  $('.header-search-icon').on 'click', ->
+    $mobileSearch = $('.header-mobile-search')
+    if $mobileSearch.is(':visible')
+      $mobileSearch.fadeOut(200)
+    else
+      $mobileSearch.fadeIn(200)
+      $('.mobile-search-input').focus()
+
+  # Search handlers - Mobile
+  $('.mobile-search-input').keypress (e) ->
+    if e.keyCode == 13
+      search_bdsa $(this).val(), 'mobile'
+  $('.mobile-search-input').on 'input', ->
+    if $(this).val().length > 0
+      $('.mobile-search-clear').show()
+    else
+      $('.mobile-search-clear').hide()
+    $('.header-search-error-popup').fadeOut(200)
+  $('.mobile-search-clear').click () ->
+    $('.mobile-search-input').val('').focus()
+    $(this).hide()
+    $('.header-search-error-popup').fadeOut(200)
+  $('.mobile-search-button').click () ->
+    search_bdsa $('.mobile-search-input').val(), 'mobile'
+
   if $('.bdsa-vulnerability .details').length > 0
     setDefaultChartOptions()
-    Highcharts.chart 'cvss3',
-      title: text: undefined
-      xAxis: categories: ['Overall (Base and Temporal)', 'Base', 'Exploitability', 'Impact']
-      series: [ { data: bdsa_cvss3($('#cvss3').data('cvss'), $('#cvss3').data('severity')) } ]
-    Highcharts.chart 'cve-cvss3',
-      title: text: undefined
-      xAxis: categories: ['Overall (Base)', 'Exploitability', 'Impact']
-      series: [ { data: cve_cvss3($('#cve-cvss3').data('cvss'), $('#cve-cvss3').data('severity')) } ]
+
+    # Initialize desktop BDSA chart
+    if $('#cvss3').length > 0
+      Highcharts.chart 'cvss3',
+        title: text: undefined
+        xAxis: categories: ['Overall (Base and Temporal)', 'Base', 'Exploitability', 'Impact']
+        series: [ { data: bdsa_cvss3($('#cvss3').data('cvss'), $('#cvss3').data('severity')) } ]
+
+    # Initialize mobile BDSA chart
+    if $('#cvss3-mobile').length > 0
+      Highcharts.chart 'cvss3-mobile',
+        title: text: undefined
+        xAxis: categories: ['Overall (Base and Temporal)', 'Base', 'Exploitability', 'Impact']
+        series: [ { data: bdsa_cvss3($('#cvss3-mobile').data('cvss'), $('#cvss3-mobile').data('severity')) } ]
+
+    # Initialize desktop CVE chart
+    if $('#cve-cvss3').length > 0
+      Highcharts.chart 'cve-cvss3',
+        title: text: undefined
+        xAxis: categories: ['Overall (Base)', 'Exploitability', 'Impact']
+        series: [ { data: cve_cvss3($('#cve-cvss3').data('cvss'), $('#cve-cvss3').data('severity')) } ]
+
+    # Initialize mobile CVE chart
+    if $('#cve-cvss3-mobile').length > 0
+      Highcharts.chart 'cve-cvss3-mobile',
+        title: text: undefined
+        xAxis: categories: ['Overall (Base)', 'Exploitability', 'Impact']
+        series: [ { data: cve_cvss3($('#cve-cvss3-mobile').data('cvss'), $('#cve-cvss3-mobile').data('severity')) } ]
 
 setDefaultChartOptions = ->
   Highcharts.setOptions
@@ -113,7 +233,7 @@ BdsaCookieConsent =
     if bdsaCookiesAllowed
       bdsaVisitedCount = parseInt(bdsaCookiesAllowed)
       if bdsaVisitedCount < 35
-        Cookies.set 'bdsa_cookie_disclaimer', bdsaVisitedCount + 1
+        Cookies.set 'bdsa_cookie_disclaimer', bdsaVisitedCount + 1, { path: '/' }
       else
         cookieStore.delete('bdsa_cookie_disclaimer')
         $('#bdsa_disclaimer_cookies').show()
@@ -126,5 +246,64 @@ BdsaCookieConsent =
         $('.bdsa_disclaimer_accept').attr 'disabled', 'disabled'
 
   set: () ->
-    Cookies.set 'bdsa_cookie_disclaimer', 0
-    location.reload()
+    Cookies.set 'bdsa_cookie_disclaimer', 0, { path: '/' }
+    if $('#bdsa-content-placeholder').length > 0
+      BdsaCookieConsent.loadContent()
+    else
+      location.reload()
+
+  loadContent: () ->
+    $.ajax
+      url: window.location.href
+      type: 'GET'
+      headers:
+        'X-Requested-With': 'XMLHttpRequest'
+      cache: false
+      success: (data) ->
+        # Parse the response
+        $response = $('<div>').html(data)
+        $newContent = $response.find('.container-fluid')
+
+        if $newContent.length > 0
+          # Hide modal and replace content
+          $('#bdsa_disclaimer_cookies').fadeOut 300, ->
+            $('.container-fluid').html($newContent.html())
+
+            # Initialize charts after a short delay
+            setTimeout ->
+              if $('.details').length > 0
+                setDefaultChartOptions()
+
+                # Initialize desktop BDSA chart
+                if $('#cvss3').length > 0
+                  Highcharts.chart 'cvss3',
+                    title: text: undefined
+                    xAxis: categories: ['Overall (Base and Temporal)', 'Base', 'Exploitability', 'Impact']
+                    series: [ { data: bdsa_cvss3($('#cvss3').data('cvss'), $('#cvss3').data('severity')) } ]
+
+                # Initialize mobile BDSA chart
+                if $('#cvss3-mobile').length > 0
+                  Highcharts.chart 'cvss3-mobile',
+                    title: text: undefined
+                    xAxis: categories: ['Overall (Base and Temporal)', 'Base', 'Exploitability', 'Impact']
+                    series: [ { data: bdsa_cvss3($('#cvss3-mobile').data('cvss'), $('#cvss3-mobile').data('severity')) } ]
+
+                # Initialize desktop CVE chart
+                if $('#cve-cvss3').length > 0
+                  Highcharts.chart 'cve-cvss3',
+                    title: text: undefined
+                    xAxis: categories: ['Overall (Base)', 'Exploitability', 'Impact']
+                    series: [ { data: cve_cvss3($('#cve-cvss3').data('cvss'), $('#cve-cvss3').data('severity')) } ]
+
+                # Initialize mobile CVE chart
+                if $('#cve-cvss3-mobile').length > 0
+                  Highcharts.chart 'cve-cvss3-mobile',
+                    title: text: undefined
+                    xAxis: categories: ['Overall (Base)', 'Exploitability', 'Impact']
+                    series: [ { data: cve_cvss3($('#cve-cvss3-mobile').data('cvss'), $('#cve-cvss3-mobile').data('severity')) } ]
+            , 100
+        else
+          location.reload()
+      error: (xhr, status, error) ->
+        console.error 'Failed to load content:', error
+        location.reload()