Web UI copy-to-clipboard not working

[cpaelzer]

Note: This is not a UA-client issue, but I file it here for you to re-route it accordingly.

That failing button is defined as:

<div class="p-code-snippet">
  <input type="text"
         id="ua-token"
         class="p-code-snippet__input"
         value="..."
         readonly="readonly">
  <button class="p-code-snippet__action">Copy to clipboard</button>
</div>

Affected Browsers (What is in Bionic as of today):

• Chrome 74.0.3729.108-1
• Firefox 66.0.3+build1-0ubuntu0.18.04.1

The css is from the vanilla framework, inspection shows vanilla-framework-version-1.8.1.css

Based on that I guessed that some JS in the vanilla framework would assign an onclick to this class, but I haven't found any JS other than the google analytics. Of course my 20 year old web-foo might just be outdated.

But knowing that we use that style all over out tutorials and such I tried there and it worked fine e.g. on provisioning maas

Inspecting (and comparing) that showed the same button tech: <button class="p-code-snippet__action">Copy to clipboard</button>

But the broken (contracts.canonical.com) had no Event Listeners at all on that button. While the tutorial had several registered, those were a bunch of google analytics tags but more importantly also this:

This seems to be the missing code

    n.commandLine = function() {
        document.querySelectorAll(".p-code-snippet").forEach(function(a) {
            var e = a.querySelector(".p-code-snippet__action")
              , n = a.querySelector(".p-code-snippet__input");
            e && n && e.addEventListener("click", function(e) {
                n.select(),
                e.preventDefault;
                try {
                    document.execCommand("copy");

And knowing that we find in the main page the loaders:

</footer>
        <!-- Polyfill functions -->
[...]
    <script src="/static/js/build/main.min.js?v=a3555ea"></script>
    <script src="https://assets.ubuntu.com/v1/f5bf3854-respond.min.js"></script>

And the broken page has nothing there:

        </div>
      </footer>
    </div>
  </body>
</html>

Please fix https://auth.contracts.canonical.com/ to carry the code to be active on that copy-to-clipboard button

[blackboxsw]

As mentioned, this is an issue with the UA frontend not ua-client or ua-contracts specifically. Forwarding this issue to the appropriate project https://github.com/canonical-web-and-design/ua-token

[blackboxsw]

Closing in favor of https://github.com/canonical-web-and-design/ua-token/issues/1