AO3-7378 Add button to copy setup key to clipboard for totp

[jmalark]

Pull Request Checklist

• Have you read "How to write the perfect pull request"?
• Have you read the contributing guidelines?
• Have you added tests for any changed functionality?
• Have you added the Jira issue number
  as the first thing in your pull request title (e.g. AO3-1234 Fix thing)
• Do you have fewer than 5 pull requests already open? If not, please wait
  until they are reviewed and merged before creating new pull requests.

Issue

https://otwarchive.atlassian.net/browse/AO3-7378

Purpose

Context: an admin setting up two-step verification for their account

This PR adds a button to copy the setup key to the clipboard (as long as JavaScript is enabled, otherwise the button will not display)

Credit

Jesse Malark he/him

[sarken]

Thanks for working on this!

It looks like the issue didn't contain any design information, so I took a quick look. Can you please add the following CSS to the bottom of the .annotation styles in 22-system-messages.css? It will make sure the button is centered like the rest of the text, and take out the whitespace that was throwing off the vertical alignment.

.annotation .actions {
  float: none;
  margin-block-end: 0;
  padding-block-end: 0;
}

We can make a separate issue for this once this pull request is merged, but now that we have similar JavaScript in two places, we should also move the JavaScript to an external resource (most likely application.js). This makes it easier to maintain and reuse and is more in line with modern standards, particularly regarding security.

[sarken]

Thanks for the CSS changes! I'll leave the final approval to Brian.