Add copy to clipboard for credentials dialogs

[Steve-Mcl]

closes #2199

Description

Adds a new mixin "clipboard"

Example Usage:

<template>
    <ff-dialog ref="dialog" header="Device Credentials">
        <ff-button v-if="clipboardSupported" kind="secondary" @click="copy()">Copy to Clipboard</ff-button>
    </ff-dialog>
</template>

<script>
import clipboardMixin from '../../../../mixins/Clipboard.js'
export default {
    name: 'myForm',
    mixins: [clipboardMixin],
    methods: {
        copy () {
            this.copyToClipboard(this.dataToCopy).then(() => {
                // Success
            }).catch((err) => {
                console.warn('Clipboard write permission denied: ', err)
            })
        }
    }
}
</script>

Adds a copy to clipboard button to the device credentials and provisioning credentials dialog.

This issue was identified during the dev demo of Device UI work as a good UX feature as it complements the UI for setting up a device via its new UI

NOTE: Since this uses navigator.clipboard the buttons will only be shown in Secure Contexts

Non Secure Context:

Secure Context:

Related Issue(s)

#2199

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on flowforge/helm to update ConfigMap Template
  • Issue/PR raised on flowforge/CloudProject to update values for Staging/Production

Labels

• Backport needed? -> add the backport label
• Includes a DB migration? -> add the area:migration label

[Steve-Mcl]

@Pezmc please (re)review. Added Clipboard mixin as suggested - to deduplicate clipboard code in the touched files.

[Pezmc]

Love it! 🚢