Update authentication-related UI elements

[ggeisler]

The intention (based on discussion with @cbeer and @jvine) is to switch the authentication UI elements currently a snackbar and a modal dialog to a single, expandable div that is displayed at the top of the object window, just below the window top bar (example on left below).

This div does not overlay the window canvas but is inserted between the window top bar and the canvas/side panel/companion window content. This means when the user clicks "Continue", the div expands and pushes the canvas/sidebar panel/companion windows down (example on right below).

Here are same examples but in a scenario where the user has the window side panel open:

The same div should be used to show the failure message when necessary:

Initial collapsed state

Details of the initial, collapsed div (or a variation of a companion window; whatever makes sense technically):

• div is full width of the window, inserted directly after the window top bar. Background color is the current palette's secondary color. (Presumably the onText color is calculated automatically based on the background color? If not, we might have to discuss expanding the theme configuration to give the auth div explicit background and text colors.)
• Lock icon: lock icon (@material-ui/icons/LockSharp). Ensure it has something like margin-right: 12px to separate it from the label text.
• Value of the 'label' property is the text next to the lock icon.
• Make 'label' an h3 but style it using the body1 typography.
• The text "CONTINUE", in body1 typography, with something like margin-left: 20px to offset it from the label text.
• Although the "CONTINUE" text looks like a text button, we'd rather make the whole lock icon/label text/CONTINUE block a single button, which when selected would toggle the div open (showing the full auth message and action buttons) and closed (the initial state).

Expanded state

When the user toggles the auth div open, it expands to show the "recommended" elements header and description and the action buttons:

• If provided, display the 'header' value, styled using body1 typography.
• If provided, display the 'description' value.
• If both header' and 'description' are provided, insert a colon after value so it reads as in the mockup above.
• Add a text button labelled "Cancel", as in the mockup.
• When selected, the "Cancel" button should collapse the div back to its initial state.
• Add a primary action button next to the "Cancel" button, using the filled button style. If provided, use the confirmLabel value as the button label. If confirmLabel is not provided, use the fallback text in Customize auth details for Login pattern #2637 and Customize auth details for Clickthrough pattern #2638 for the button label.
• When selected, the primary action button should trigger the opening of the authentication service, as it does in the current implementation.
• The "CONTINUE" text should be hidden when the div is in the expanded state (forgot to remove it from the mockup).

Failure state

If the user succeeds in authenticating (or agrees to the terms of service), the auth div should be removed. If the user's authentication/terms of service action results in failure, however, we need to show a failure message(s):

• Maintain the lock icon and the action buttons from the expanded state of the div, but replace the text as described next:
• If provided, show the 'failureHeader' value next to the lock icon. If not provided, use the fallback text in Customize auth details for Login pattern #2637, Customize auth details for Clickthrough pattern #2638, and Customize auth details for Kiosk and External patterns #2639 instead.
• If provided, show the 'failureDescription' value below. If not provided, omit the description.
• If the user selects the "Cancel" button in the failure state, the div should return to the initial state (collapsed, showing the label as described in the "Initial collapsed state" section above).
• The "Login" button should trigger opening the authentication service, same as when in the expanded state.

Example manifest

Mockups above based on:

• Manifest: https://iiifauth.digtest.co.uk/manifest/11_kitty_joyner
• Auth section: https://iiifauth.digtest.co.uk/img/11_kitty_joyner_degraded.jpg/info.json

Fallback text

Since only one of the six auth text properties is required, we should in some cases provide fallback text when a given property doesn't have a value. The fallback text depends on context (which authentication pattern is in play), so I'm creating separate tickets with the details for each auth pattern:

#2637 - Customize auth details for Login pattern
#2638 - Customize auth details for Clickthrough pattern
#2639 - Customize auth details for Kiosk and External patterns

Theme examples

If we base the background color of the auth div on the secondary color of the theme as suggested earlier, the mockups above are what we'd get from the current Mirador 3 default light theme. Here's how it would look when switching to the default dark theme:

And a custom theme: