Add info section, alter css for mobile.

Create footer and info components.
Info component contains modal that popups onClick of more info. It
explains reasons behind diceware and what list is used.
Alter css of site to prevent rejigging of buttons on change of words.
Make button padding smaller on smaller screens.
Change colour of download windows button.
Remove useless diceware1 file.

(cherry picked from commit 23b854b)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "diceware",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "main": "public/main.js",
   "homepage": "./",
   "private": true,

public/main.js

@@ -12,10 +12,18 @@ function createWindow () {
   })
 
   // and load the index.html of the app.
+  // win.loadURL('http://localhost:3000/')
   win.loadURL(`file://${path.join(__dirname, '../build/index.html')}`)
 
   // Open the DevTools.
   // win.webContents.openDevTools()
+
+  const shell = require('electron').shell;
+
+  win.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  });
 }
 
 // This method will be called when Electron has finished
@@ -41,4 +49,4 @@ app.on('activate', () => {
 })
 
 // In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and require them here.
+// code. You can also put them in separate files and require them here.

src/Components/App.js

@@ -3,20 +3,19 @@ import '../css/style.css';
 import {Words} from './Words';
 import WordButtons from './WordButtons';
 import CopyButton from './CopyButton';
+import Footer from './Footer';
 
 class App extends React.Component {
 
     render() {
           return (
               <div className="App">
-                    <div id={"content-wrap"}>
+                    <div id={"content-wrap"} className={"min-w-full"}>
                         <Words />
                         <WordButtons />
                         <CopyButton />
                     </div>
-                    <div id={"footer"}>
-                        Inspired by <a href={"https://diceware.herokuapp.com/"}>Michael Henriksen</a> | Created by <a href={"https://twitter.com/RMcElhinney"}>Rob McElhinney</a>
-                    </div>
+                    <Footer />
               </div>
           );
     }

src/Components/Footer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import '../css/style.css';
+import Info from './Info';
+
+
+const Footer = ({pass}) => {
+
+
+	const click = (event) => {
+        console.log("click: href ", 
+        event.target.href)
+        // event.preventDefault();
+	}
+
+
+	return (
+        <div id={"footer"}>
+            Inspired by <a href="https://diceware.herokuapp.com/" onClick={click}
+            className="text-blue-500 hover:text-blue-800" >Michael Henriksen</a> | <Info /> | Created 
+            by <a className="text-blue-500 hover:text-blue-800" 
+            href={"https://twitter.com/RMcElhinney"}>Rob McElhinney</a>
+        </div>
+	);
+}
+
+export default Footer;

src/Components/Info.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import '../css/style.css';
+import { makeStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+
+const useStyles = makeStyles((theme) => ({
+    modal: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    paper: {
+      position: 'absolute',
+      textAlign: 'left',
+      width: '80%',
+      backgroundColor: theme.palette.background.paper,
+      border: '2px solid #000',
+      boxShadow: theme.shadows[5],
+      padding: theme.spacing(2, 4, 3),
+      paddingTop: '2em',
+      paddingBottom: '2em'
+    },
+  }));
+
+
+const Info = ({pass}) => {
+    const classes = useStyles();
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = (event) => {
+        setOpen(true);
+        event.preventDefault()
+    };
+
+    const handleClose = (event) => {
+        setOpen(false);
+        ignoreClick(event)
+    };
+
+    const link = (link, text) => {
+        return (
+            <a className="text-blue-500 hover:text-blue-800" href={link}>{text}</a>
+        )
+    }
+
+	const ignoreClick = (event) => {
+        console.log("click: href ", 
+        event.target.href)
+        event.preventDefault();
+	}
+
+
+    const body = (
+        <div className={classes.paper} id={"modal"}>
+            <p className={"text-lg font-semibold mb-2"}>What's Diceware?</p>
+            <div><i>"Diceware is a method for creating passphrases, 
+                    passwords, and other cryptographic variables 
+                    using ordinary dice as a hardware random 
+                    number generator"</i> {link(
+                    "https://en.wikipedia.org/wiki/Diceware", 
+                    "- Wiki")}</div>
+            <div>Read more about password Dice generated passwords from 
+                    the {link("https://www.eff.org/dice", "EFF")}.</div>
+
+            <p className={"text-lg font-semibold mt-3 mb-2"}>What 
+                    list is used?</p>
+            <div>{link("https://www.eff.org/files/2016/07/18/" +
+                    "eff_large_wordlist.txt", "EFF Large Word List")} I 
+                    converted this list into a json file to make it easier 
+                    to import.</div>
+
+            <p className={"text-lg font-semibold mt-3 mb-2"}>
+                    Should I trust this site?</p>
+            <div>Probably not, but it is open source so please have a look 
+                    at the {link("https://github.com/robmcelhinney/diceware/", 
+                    "code on github")}. If you spot any issues, let me know 
+                    or make a pull request.</div>
+            <div>It is always better to use real dice to verify the 
+                    randomness yourself but that's a lot of hassle so here 
+                    we are.</div>
+
+            <p className={"text-lg font-semibold mt-3 mb-2"}>
+                How is randomness verified?</p>
+            <div>The {link("https://developer.mozilla.org/en-US/docs/Web/" +
+                    "API/Crypto", "Web Crypto API's")} Window.Crypto.getRandom 
+                    which was copied from the {link(
+                    "https://github.com/EFForg/OpenWireless/blob" +
+                    "/master/app/js/diceware.js", "EFF")}.</div>
+
+            <p className={"text-lg font-semibold mt-3 mb-2"}>
+                Are you saving any data?</p>
+            <div>All code is completely run on the client side so it's 
+                    staying on your device. If you use Windows you can 
+                    download this site as a program to use it completely 
+                    offline.</div>
+        </div>
+    );
+
+	return (
+        <>
+        <a href="/#" className="text-blue-500 hover:text-blue-800"
+                onClick={handleOpen}>More Info</a>
+        <Modal
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="simple-modal-title"
+            aria-describedby="simple-modal-description"
+            className={classes.modal}
+        >
+            {body}
+        </Modal>
+        </>
+	);
+}
+
+export default Info;

src/Components/WordButtons.js

@@ -36,7 +36,11 @@ const WordButtons = (props) => {
 
 	const wordButton = (number) => {
 		return (
-			<button key={number} className={"word-count-button font-bold py-2 px-4 border border-white-500 hover:text-purple-500 hover:border-purple-500 rounded my-2 mx-1 inline-block" + (selectedNumber === number ? " border-purple-600 text-purple-600" : "")}
+			<button key={number} className={"font-bold py-2 px-2 md:px-4 " +
+					"border border-white-500 hover:text-purple-500 " +
+					"hover:border-purple-500 rounded my-2 mx-1 " +
+					"inline-block" + (selectedNumber === number ? 
+					" border-purple-600 text-purple-600" : "")}
 					value={number} onClick={() => clickButton(number)}>
 				{number} words
 			</button>
@@ -58,30 +62,30 @@ const WordButtons = (props) => {
 
 	return (
 		<div>
-			<div className="max-w-full">
+			<div className={"max-w-full"}>
 				{mapButtons()}
 			</div>
 			<div>
-				<button className={"word-count-button font-bold py-2 " +
-						"px-4 border hover:border-purple-500 rounded " +
-						"my-2 mx-2 +.w-2" + (minNumberWords <= 1 ? 
+				<button className={"font-bold py-1 md:py-2 " +
+						"px-3 md:px-4 border hover:border-purple-500 " +
+						"rounded my-2 mx-2 +.w-2" + (minNumberWords <= 1 ? 
 						" opacity-50 cursor-not-allowed" : "")}
 						onClick={decreaseMin}
 						disabled={minNumberWords <= 1}>
 					-
 				</button>
-				<button className={"word-count-button font-bold py-2 px-4 " +
-						"border hover:border-purple-500 rounded my-2 mx-2 " +
-						".w-2" + (minNumberWords === 
+				<button className={"font-bold py-1 md:py-2 px-3 md:px-4 " +
+						"border hover:border-purple-500 rounded my-2 " +
+						"mx-1 md:mx-2 .w-2" + (minNumberWords === 
 						myConstClass.MIN_NUM_WORDS && maxNumberWords === 
 						myConstClass.MAX_NUM_WORDS ? 
 						" opacity-50 cursor-not-allowed" : "")}
 						onClick={reloadMinMax}>
 					↻
 				</button>
-				<button className="word-count-button font-bold py-2 px-4 
-						border hover:border-purple-500 rounded my-2 mx-2 
-						.w-2"
+				<button className="font-bold py-1 md:py-2 px-3 md:px-4 
+						border hover:border-purple-500 rounded my-2
+						mx-1 md:mx-2 .w-2"
 						onClick={increaseMax}>
 					+
 				</button>

src/Components/Words.js

@@ -6,13 +6,13 @@ import {get_all_die, get_all_words} from '../utils/Diceware';
 const word = (word, numbers, key) => {
 	return (
 		<span key={key} className={"mx-2 my-3 inline-block"}>
-			<div className={"text-3xl font-bold"}>
+			<div className={"text-xl md:text-3xl font-bold"}>
 				{word}
 			</div>
-			<div className={"text-lg font-medium tracking-wide"}>
+			<div className={"text-base md:text-lg font-medium tracking-wide"}>
 				{dice(numbers)}
 			</div>
-			<div className={"text-lg font-medium tracking-wide"}>
+			<div className={"text-base md:text-lg font-medium tracking-wide"}>
 				{numbers}
 			</div>
 		</span>
@@ -72,7 +72,7 @@ export const Words = () => {
 
 
 	return (
-		<div className="max-w-full mb-8">{words}</div>
+		<div className={"words mb-8"}>{words}</div>
 	);
 
 }