Merge pull request #61 from dmuth/fix-webpack-file-size

Fix webpack file size

README.md

@@ -62,6 +62,9 @@ A local webserver can be set up by running `npm install http-server -g` to insta
     - `http-server`
     - `vim src/lib.js src/index.js`
         - Be sure to check in your changes before the next step!
+    - `ngrok http 8080` - Stand up an Ngrok endpoint
+      - Paste that URL into [my QR Code Generator](https://httpbin.dmuth.org/qrcode/)
+      - Scan the generated URL code on my iPhone and test from there.
 - Testing
     - `rm -fv src/index.js && git co src/index.js` - Get the new SHA1 hash that will be displayed in debug messages.
         - The hash can be crosschecked with the results of `git hash-object src/index.js`

assets/css/dice.css

@@ -1,49 +1,49 @@
 
 .die {
-    width: 100px;
-    height: 100px;
-    background: #ff1111;
-    border-radius: 10px;
+  width: 100px;
+  height: 100px;
+  background: #ff1111;
+  border-radius: 10px;
 	margin-left: 20px;
 	margin-bottom: 20px;
 }
 
 .dot {
-    position:absolute;
-    width: 18px;
-    height: 18px;
-    border-radius: 18px;
-    background: white;
-    box-shadow: inset 5px 0 10px white;
+  position:absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  background: white;
+  box-shadow: inset 5px 0 10px white;
 }
 
 .dot.center {
 	/* Orders of margins are: top right bottom left */
-    margin: 39px 0 0 41px;
+  margin: 39px 0 0 41px;
 }
 
 .dot.dtop {
-    margin-top: 14px;
+  margin-top: 14px;
 }
 
 .dot.dleft {
-    margin-left: 65px;
+  margin-left: 65px;
 }
 
 .dot.dright {
-    margin-left: 16px;
+  margin-left: 16px;
 }
 
 .dot.dbottom {
-    margin-top: 63px;
+  margin-top: 63px;
 }
 
 .dot.center.dleft {
-    margin: 38px 0 0 16px;
+  margin: 38px 0 0 16px;
 }
 
 .dot.center.dright {
-    margin: 38px 0 0 65px;
+  margin: 38px 0 0 65px;
 }
 
 .responsive {

dist/bundle.js.LICENSE.txt

@@ -0,0 +1,35 @@
+/* @preserve
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) 2013-2018 Petka Antonov
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ * 
+ */
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */

index.html

@@ -97,8 +97,12 @@ <h1>Diceware Password Generator</h1>
 		<div class="results_words_key" >Your words are: </div>
 		<div class="results_words_value" data-test="results-words" ></div>
 
-		<div class="results_phrase_key" >Your passphrase is: </div>
+		<div class="results_phrase_key" >Your passphrase is:</div>
 		<div class="results_phrase_value" data-test="results-phrase" ></div>
+
+		<button type="button" class="btn btn-primary copy-button">
+			<span class="glyphicon glyphicon-copy"></span> Copy to Clipboard
+		</button>
 
 		<div class="results_num_possible_key" ># of possible passwords: </div>
 		<div class="results_num_possible_value" ></div>
@@ -217,7 +221,6 @@ <h3>FAQ: Why not use 1Password or BitKeeper or something similar?</h3>
 By all means, feel free to do so.  <a href="https://1password.com/">1Password</a> is an excellent product and I highly recommend it. 
 That said, there's no reason that Diceware cannot be used concurrently with a password manager. 
 But I <em>also</em> happen to like passwords I can remember. :-)
-</p>
 
 If you want the absolute highest levels of password security, consider using <a href="https://strongboxsafe.com/">Strongbox</a>.  One neat thing about Strongbox is that it comes with a built-in Diceware client!</p>
 
@@ -406,7 +409,7 @@ <h3>FAQ: Are there any other Diceware websites out there?</h3>
 
 <ul>
 <li>
-<a href="https://strongphrase.net/">https://strongphrase.net/</a> - StrongPhrase.net  This website goes into more detail on password strengths and efforts requires to crack particular passwords.
+<a href="https://strongphrase.net/">https://strongphrase.net/</a> - StrongPhrase.net  This website goes into more detail on password strengths and efforts requires to crack particular passwords.  Also, the author of StrongPhrase <a href="https://github.com/dmuth/diceware/pull/57">contributed code for the clipboard feature</a>!
 </li>
 </ul>
 
@@ -464,7 +467,21 @@ <h3>Who built this? / Contact</h3>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="./dist/bootstrap.min.js"></script>
 
-	<script src="./dist/bundle.js"></script>
+    <script>
+
+      // If "debug" is in GET method data, add the current time to not use cached Javascript.
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      const debug = location.search.indexOf("debug");
+
+      if (urlParams.get("debug")) {
+        console.log("Debugging set, busting Javascript cache...");
+        document.write('<script src="./dist/bundle.js?v=' + new Date().getTime() + '"><\/script>');
+      } else {
+        document.write('<script src="./dist/bundle.js"><\/script>');
+      }
+
+    </script>
 
   </body>
 </html>

package.json

@@ -9,8 +9,8 @@
   "scripts": {
     "test": "mocha ./tests/test.js",
     "clean": "rm -rfv dist/*bundle.js* node_modules package-lock.json",
-    "build": "npm install; webpack --mode production",
-    "dev-build": "npm install; webpack --watch --mode development",
+    "build": "webpack --mode production",
+    "dev-build": "webpack --watch --mode development",
     "release-build": "rm -fv diceware.zip ; zip -r ../diceware.zip *; mv ../diceware.zip ."
   },
   "repository": {

src/display.js

@@ -1,5 +1,3 @@
-
-
 let lib = require("./lib.js")();
 
 // Functions that relate to rolling dice
@@ -145,8 +143,20 @@ function results(cb) {
 	jQuery(".results_words_value").hide().clone().appendTo(".results");
 	jQuery(".results").append("<br clear=\"all\" />");
 
-	jQuery(".results_phrase_key").hide().clone().appendTo(".results");
-	jQuery(".results_phrase_value").hide().clone().appendTo(".results");
+	// Create a container for phrase and copy button
+	jQuery("<div class='phrase-container' style='margin-bottom: 15px;'></div>").appendTo(".results");
+
+	// Add phrase key and value to container
+	jQuery(".results_phrase_key").hide().clone().appendTo(".results .phrase-container");
+	jQuery(".results_phrase_value").hide().clone().appendTo(".results .phrase-container");
+
+	// Clone the copy button directly from source
+	const copyBtn = jQuery(".source .copy-button").clone();
+	jQuery("<div class='copy-button-container' style='text-align: center; margin-top: 10px;'></div>")
+		.hide()
+		.append(copyBtn)
+		.appendTo(".results .phrase-container");
+
 	jQuery(".results").append("<br clear=\"all\" />");
 
 	jQuery(".results_num_possible_key").hide().clone().appendTo(".results");
@@ -155,13 +165,15 @@ function results(cb) {
     jQuery(".results .results_words_key").fadeIn(500).promise().then(function() {
         return(jQuery(".results .results_words_value").fadeIn(500).promise())
     }).then(function() {
-		return(jQuery(".results .results_phrase_key").fadeIn(400).promise());
+        return(jQuery(".results .results_phrase_key").fadeIn(400).promise());
+    }).then(function() {
+        return(jQuery(".results .results_phrase_value").fadeIn(400).promise());
     }).then(function() {
-		return(jQuery(".results .results_phrase_value").fadeIn(400).promise());
+        return(jQuery(".results .copy-button-container").fadeIn(400).promise());
     }).then(function() {
-		return(jQuery(".results .results_num_possible_key").fadeIn(300).promise());
+        return(jQuery(".results .results_num_possible_key").fadeIn(300).promise());
     }).then(function() {
-		return(jQuery(".results .results_num_possible_value").fadeIn(300).promise());
+        return(jQuery(".results .results_num_possible_value").fadeIn(300).promise());
     }).then(function() {
         if (cb) {
             cb();

src/index.js

@@ -34,7 +34,6 @@ window.Diceware.num_dice_per_roll = 5;
 * Set the handlers 
 */
 function set_handlers() {
-
 	//
 	// Handler to mark the clicked number of dice button as active.
 	//
@@ -45,6 +44,21 @@ function set_handlers() {
 
 	jQuery("#roll_dice").on("click", display.rollDiceHandler);
 
+	// Use event delegation for copy button
+	console.log("Setting up copy button handler...");
+	jQuery(document).on("click", ".copy-button", async function() {
+		console.log("Copy button clicked!");
+		const passphrase = jQuery('.results .results_phrase_value').text();
+		console.log("Passphrase from the element: " + passphrase);
+		try {
+			await util.copyToClipboard(passphrase);
+			console.log("Done copying!");
+		} catch (err) {
+			console.error('Failed to copy:', err);
+		}
+	});
+	console.log("Copy button handler setup complete");
+
 } // End of set_handlers()
 
 
@@ -73,7 +87,7 @@ function run_preflight_checks() {
 */
 function go() {
 
-	console.log("Thanks for checking out my code! You can find the Git repo at https://github.com/dmuth/diceware, my blog at https://www.dmuth.org/, or you can bug me on Twitter at https://twitter.com/dmuth");
+	console.log("Thanks for checking out my code! You can find the Git repo at https://github.com/dmuth/diceware, my blog at https://www.dmuth.org/, or you can bug me on Bsky at https://dmuth.bsky.social/");
 
 	console.log("Version: $Id$");
 

src/util.js

@@ -1,5 +1,3 @@
-
-
 let Promise = require("bluebird");
 
 module.exports = function(arg) {
@@ -11,6 +9,7 @@ module.exports = function(arg) {
         is_mobile: is_mobile,
         get_word: get_word,
         extract_get_data: extract_get_data,
+        copyToClipboard: copyToClipboard,
     });
 
 }
@@ -90,5 +89,29 @@ function extract_get_data(get_data) {
 
 } // End of extractGetData()
 
+/**
+* Copy text to clipboard and provide visual feedback
+*
+* @param {string} text The text to copy
+* @return {Promise} Resolves when copying is complete
+*/
+async function copyToClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    const $copyBtn = $('.copy-button');
+    const originalText = $copyBtn.html();
+
+    $copyBtn
+      .html('<span class="glyphicon glyphicon-ok"></span> Copied!')
+      .fadeIn();
+
+    setTimeout(() => {
+      $copyBtn.html(originalText);
+    }, 5000);
+  } catch (err) {
+    console.error('Failed to copy text:', err);
+  }
+}
+
 
 

webpack.config.js

@@ -1,25 +1,36 @@
-
 //
 // Use the path module so that this will work on Windows systems
 //
-var path = require('path');
+const path = require('path');
 
 const webpack = require('webpack')
 
 //
 // Compile main.js (and its dependencies) into dist/bundle.js.
 //
-module.exports = {
+module.exports = (env, argv) => ({
+  mode: argv.mode || 'development',  // Default to development mode
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist')
+    path: path.resolve(__dirname, 'dist'),
+  },
+  // Use source maps only in development
+  devtool: argv.mode === 'development' ? 'eval-source-map' : false,  
+  watch: argv.mode === 'development', // Enable watch only in development
+  watchOptions: {
+    ignored: /node_modules/,
+    poll: 1000, // Check for changes every second
+  },
+  optimization: {
+    moduleIds: 'named', // Makes it easier to debug
   },
   resolve: {
     fallback: {
       "crypto": require.resolve("crypto-browserify"),
+      "buffer": require.resolve("buffer/"),
       "stream": require.resolve("stream-browserify"),
-      "vm": require.resolve("vm-browserify")
+      "vm": require.resolve("vm-browserify"),
     }
   },
   plugins: [
@@ -28,5 +39,5 @@ module.exports = {
       process: 'process/browser.js'
     })
   ]
-};
+});