Improve the pages that're shown when a site is blocked

[seanh]

Depends on:

• Serve block warning pages from Checkmate (done)

The pages that Via shows when sites are blocked aren't very good, either in visual design or in wording. Re-design and re-write them to be better.

The block pages are implemented in Checkmate

The code for these block pages can be found in Checkmate:

• https://github.com/hypothesis/checkmate/blob/main/checkmate/views/ui/present_block.py
• https://github.com/hypothesis/checkmate/blob/main/checkmate/templates/blocked_page.html.jinja2
• https://github.com/hypothesis/checkmate/blob/main/checkmate/templates/wrapper.html.jinja2
• https://github.com/hypothesis/checkmate/blob/main/checkmate/static/static/img/warning.svg
• https://github.com/hypothesis/checkmate/blob/main/checkmate/static/static/css/wrapper-style.css

See below for screenshots and example links for the different block pages.

Checkmate's block pages are used by Via, Via 3 and Via HTML

All three Via's redirect to these Checkmate-hosted block pages when a page is blocked, so any changes made to the block pages in Checkmate apply to all three Via's. In particular, changes apply to both public Via and LMS's Via.

The design should be consistent with other pages in Via 3

The visual design should match the design of existing error pages in Via 3 so that the combined Via / Via 3 / Via HTML UI can be consistent. Via 3's existing error pages also match the design used in the LMS app, so that the combined LMS / Via experience is consistent.

The code for Via 3's error pages is here:

• https://github.com/hypothesis/via3/blob/6904743792449014a83a6a99ea864843b5d3e118/via/views/exceptions.py#L72-L99
• https://github.com/hypothesis/via3/blob/master/via/templates/exception.html.jinja2
• https://github.com/hypothesis/via3/blob/master/via/static/css/img/icons.svg

Here's what a Via 3 error page looks like:

• https://via3.hypothes.is/foo
• Local version: http://localhost:9083/foo

The design should work in the LMS context

We can't tell LMS users to install the browser extension. You can't log in to your LMS account in the browser extension, so this instruction doesn't make sense in the LMS context.

The Via 3 error page above features a white box floating on a grey background. The grey background is needed in the LMS context to distinguish our iframe from the surrounding LMS. If the background is white then the user can't see where Canvas ends and Hypothesis begins and can't tell whether the error message is coming from Hypothesis or Canvas.

The horizontal and vertical centering of the dialog is also important for this reason.

Here's what the Via 3 error dialog looks like in the LMS context:

Current pages

Current page when the domain is not on our allow-list

• https://checkmate.hypothes.is/ui/block?url=http%3A%2F%2Fanvils.co.uk&reason=not-explicitly-allowed&v=1&sec=cb039cfd146bb50adcfe718ff424b5ab6e3b0a7a09830859dae8fb9ba6920b31
• Local version: http://localhost:9099/ui/block?url=http%3A%2F%2Fwabblewabble.com%2Fpath%3Fa%3D2&reason=not-explicitly-allowed&v=1&sec=bbb39e8f8f600a3c200feab3fc753afaa98f00ac4be4de2155f34beb330dd4c8

Current page when the domain is marked as malicious on our blocklist

• http://checkmate.hypothes.is/ui/block?url=http%3A%2F%2Fbad.web.app&reason=malicious&v=1&sec=db7a996cbf463383a12622174c1404217e3bf12a4fb2a68dea90fd61a03dc7a8
• Local version: http://localhost:9099/ui/block?url=http%3A%2F%2Fbad.web.app&reason=malicious&v=1&sec=c13e01c72eaa510e28c35efec05eb608805f8ad27bf93730e77e07f2e125d483

Current page when a publisher has requested that we block their site

• http://checkmate.hypothes.is/ui/block?url=http%3A%2F%2Fnautil.us&reason=publisher-blocked&v=1&sec=8532955901545063e508c2f69468abfd670997a21a1e5492d938428de064c7d1
• Local version: http://localhost:9099/ui/block?url=http%3A%2F%2Fnautil.us&reason=publisher-blocked&v=1&sec=bdcefa4c2325326289d69d0844a7ac60b27a8603dd87d6c2dcede71e0c0e643c

Current page when a domain is an our blocklist for any other reason

E.g. when we block sites like YouTube.

• http://checkmate.hypothes.is/ui/block?url=http%3A%2F%2Fwww.youtube.com&reason=other&v=1&sec=d33b88cad2bbcc13573b5fce92585311114606ae0e2291e59d99a44be71606a3
• Local version: http://localhost:9099/ui/block?url=http%3A%2F%2Fwww.youtube.com&reason=other&v=1&sec=142d0a1c44d84ac346ab2ee328f654958ec16a0bd5e85bea73f2d4ad3062a306