Ngfw 15870 block page css modify

[DhirajM09]

Summary

Restyle the NGFW block page (served to end-users when traffic is blocked by Web Filter, Virus Blocker, or Threat Prevention) to match the Vue UI (vuntangle) design language — consistent with the captive portal restyling done in 0e1c86f59b.

Motivation

The admin UI is migrating from ExtJS to Vue/Vuetify. The block page still used old Untangle-era styling: PT Sans font, gray/dark-gray color scheme, green (#67BD4A) accents, and Font Awesome icons loaded from the ExtJS directory tree (/ext6.2/). This change aligns it with the Arista/vuntangle design system (colors, typography, layout) and removes the ExtJS dependency.

Changes

Block Page Template (blockpage_template.jspx)

• Removed Font Awesome CSS link from /ext6.2/fonts/font-awesome/ — eliminates ExtJS directory dependency
• Replaced <uvm:skin> tag with a direct <link> to /skins/common/css/user.css — bypasses skin name indirection and Apache rewrite fallback
• Replaced Font Awesome <i class="fa fa-ban"> and <i class="fa fa-link"> with <span class="bp-icon bp-icon-block/link"> elements styled via CSS SVG data URIs
• Removed all inline style attributes (icon colors, font sizes, table margins, logo sizing) — moved to CSS classes (bp-details-table, bp-description, bp-contact)

Block Page CSS (common/css/user.css)

• Full rewrite using CSS custom properties (--bp-arista-blue, --bp-arista-medium-blue, etc.) sourced from vuntangle/src/config/theme.js and variables.scss
• Light theme: #F5F5F5 background, white card with shadow, Arista Blue (#16325B) headings and buttons
• Roboto font with system fallback stack (no self-hosted font files, matching captive portal approach)
• SVG data URI icons via background-image for the ban and link icons — zero external font dependencies
• Vuetify-style buttons: uppercase, 500 weight, letter-spacing, blue background with hover transition
• Password input field with lock icon overlay (matching captive portal's input-wrapper + input-icon-lock pattern), focus ring, placeholder text, and autofill styling
• Responsive breakpoint at 480px for mobile viewports
• Removed ~130 lines of dead CSS for the unused simple.jspx template

Password Field HTML (WebFilterBlockPageServlet.java)

• Wrapped the password <input> in a <div class="bp-input-wrapper"> with a <span class="bp-input-icon bp-input-icon-lock"> lock icon — matching captive portal pattern
• Removed the external "Password:" label (the placeholder text "Enter password" inside the input is sufficient)
• Added i18n wrapping for the placeholder text

Testing

Manually verified all block page flows on NGFW (LAN: 192.168.56.186) with client (192.168.56.175):

1. HTTP URL block (unblock mode: None) — card, header, icons, title, description, contact, Host/URL/Reason/Details all render correctly
2. HTTP URL block (unblock mode: Temporary) — "UNBLOCK FOR NOW" button visible, click unblocks site
3. Temporary + password required — password input with lock icon appears, styled matching captive portal
4. Wrong password — orange error message "The password you entered is incorrect." displayed
5. Correct password — redirects to unblocked site
6. Permanent and Global mode — both "UNBLOCK FOR NOW" and "UNBLOCK PERMANENTLY" buttons visible, permanent unblock adds to Pass Sites
7. Category block (Shopping → amazon.com) — category name shown as reason
8. Search term block — search term shown in details
9. HTTPS SNI block — same block page rendered via SSL-wrapped redirect
10. Custom block page URL — redirects to configured external URL
11. Image request — returns 1x1 transparent GIF (HTTP 403), no block page
12. Virus Blocker (EICAR test file) — block page with "Virus Blocker" title, no unblock buttons
13. Threat Prevention — block page with "Threat Prevention" title, no unblock buttons
14. Mobile viewport (375px) — responsive layout, no overflow

Screenshots

Checklist

• Code compiles and existing tests pass
• New behavior is manually verified
• No unintended side-effects in related features