copy on generate working

needed to update a bunch of the dependencies, several of them are still real out of date but at least working; fixed Clipboard call on generate; moved showTooltip to be usable by other components

package.json

@@ -11,30 +11,30 @@
   "author": "Quantum",
   "license": "AGPL-3.0-only",
   "devDependencies": {
+    "webpack": "4",
+    "css-loader": "5",
+    "file-loader": "6",
+    "optimize-css-assets-webpack-plugin": "6",
+    "mini-css-extract-plugin": "1",
+    "html-webpack-plugin": "4",
+    "terser-webpack-plugin": "4",
+    "node-sass": "8",
+    "sass-loader": "10",    
     "autoprefixer": "^9.8.0",
-    "css-loader": "^1.0.1",
     "ejs-loader": "^0.5.0",
     "exports-loader": "^0.7.0",
-    "file-loader": "^2.0.0",
     "html-loader": "^1.1.0",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.4.5",
     "mocha": "^8.1.3",
-    "node-sass": "^4.14.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "rimraf": "^2.7.1",
-    "sass-loader": "^7.3.1",
     "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "latest",
-    "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
     "bootstrap": "^4.5.0",
-    "clipboard": "^2.0.6",
-    "core-js": "^2.6.11",
-    "cross-env": "^5.2.1",
+    "core-js": "2",
+    "cross-env": "7.0.3",
+    "clipboard": "latest",
     "form-serializer": "^2.5.0",
     "jquery": "^3.5.1",
     "octicons": "^8.5.0",

src/clipboard.js

@@ -3,8 +3,7 @@ import $ from 'jquery/dist/jquery'
 import 'popper.js'
 import 'bootstrap/js/dist/tooltip'
 
-$(() => {
-  function showTooltip ($element, message) {
+export function showTooltip ($element, message) {
     $element.tooltip('dispose')
       .attr('data-original-title', message)
       .tooltip('show')
@@ -12,6 +11,7 @@ $(() => {
     setTimeout(() => $element.tooltip('dispose'), 1000)
   }
 
+$(() => {
   new Clipboard('.copy', {})
     .on('success', e => showTooltip($(e.trigger), 'Copied!'))
     .on('error', e => showTooltip($(e.trigger), 'Failed to copy!'))

src/index.ejs

@@ -101,7 +101,7 @@
       </div>
 
       <div>
-        <button class="btn btn-lg my-1 btn-primary" id="run-generator" data-clipboard-target="#generated-password">Generate</button>
+        <button class="btn btn-lg my-1 btn-primary" id="run-generator">Generate</button>
         <button class="btn btn-lg my-1 btn-success" id="save-settings">Save Settings</button>
         <button class="btn btn-lg my-1 btn-danger" id="clear-settings">Clear Settings</button>
       </div>

src/ui.js

@@ -1,5 +1,7 @@
+const Clipboard = require('clipboard/dist/clipboard')
 import $ from 'jquery/dist/jquery'
 import 'form-serializer/jquery.serialize-object'
+import { showTooltip } from './clipboard'
 
 import { generate, computeBits, defaultSymbol } from './generator'
 
@@ -62,10 +64,10 @@ $(() => {
     $('#run-generator').click(() => {
       const options = $options.serializeObject()
       $output.text(generate(options)).removeClass('placeholder')
-      if(options.copy)
-        new Clipboard("#run-generator", {})
-            .on('success', e => showTooltip($(e.trigger), 'Copied!'))
-            .on('error', e => showTooltip($(e.trigger), 'Failed to copy!'))
+      if(options.copy) {
+        const checkCopy = Clipboard.copy(document.querySelector("#generated-password"))
+        showTooltip($('#run-generator'), checkCopy ? 'Copied!' : 'Failed to copy!')
+      }
       $('#copy-password').prop('disabled', false)
       return false
     })