hypothesis / hypothesis/checkmate

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

Open
#118 0 comments 0 reactions 0 assignees View on GitHub
frontend
Dominant language
Python
Stars
8
Forks
2
PR merge metrics
No merged PRs in 30d

Description

Depends on:

* [Serve block warning pages from Checkmate ](https://github.com/hypothesis/checkmate/issues/15) (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

![Screenshot from 2021-01-21 13-36-29](https://user-images.githubusercontent.com/22498/105358323-f1616200-5bed-11eb-865a-37f2ff945556.png)

### 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:

![Screenshot from 2021-01-21 13-42-48](https://user-images.githubusercontent.com/22498/105358896-a7c54700-5bee-11eb-846d-0494401271f7.png)

### 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

![not-allowed](https://user-images.githubusercontent.com/22498/105357680-10abbf80-5bed-11eb-8fcd-d332d695edf8.png)

#### 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

![malicious](https://user-images.githubusercontent.com/22498/105357745-29b47080-5bed-11eb-90bb-7477f3ac0f9d.png)

#### 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

![publisher-blocked](https://user-images.githubusercontent.com/22498/105357807-418bf480-5bed-11eb-81a3-8e8e2fc4301c.png)

#### 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

![other](https://user-images.githubusercontent.com/22498/105357884-5c5e6900-5bed-11eb-826a-c7dc922d9634.png)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.