profile: import token shadowing

[tiborsimko]

Current behaviour

The "Your profile" page hides the user token via shadowing:

And clicking on the icon allows to reveal the secret.

However, when a user uses a browser with Dark Reader extension, the shadowing does not work.

Expected behaviour

The shadowing should work with the Dark Reader mode being either "on" or "off" equally well.

Let's try to find the colour configuration and/or another shadowing solution.

(reported by @klieret)

[giuseppe-steduto]

The problem arises in the "Dynamic" mode of the Dark Reader extension, but the website appears to work fine in the "Filter"/"Filter+" mode. This is due to the fact that the Dynamic mode analyzes the page and tries to edit the stylesheets so that there is always a contrast high enough to read the text comfortably. Since our shadowing method works by making the background color of the token the same as the text color, it doesn't work with Dynamic Dark Reader.

This probably could be solved using other shadowing techniques, like changing the characters or using some non-standard typeface.

In the meanwhile, however, there are some patches that could be considered:

• client-side: in Dark Reader -> Settings -> Developer Tools, add these lines:

  ================================
  
  reana.cern.ch [or the REANA url that's being used]
  
  CSS
  span.revealable {
    background-color: var(--darkreader-selection-text) !important;
    color: var(--darkreader-selection-text) !important;
  }

  (More info). Note that this solution will only work on the client on which Dark Reader is being edited. Even if we opened a pull request to globally add this fix in the next Dark Reader release, it would only work on the specified URL and not on all the REANA deployments.

• server-side: disable Dark Reader including the <meta name="darkreader-lock"> tag (either in the profile page or REANA-wide) (source). However, this has the obvious disadvantage of not allowing to use the Dark Reader extension.