Added redux, copy pass, tidied up css

robmcelhinney · Apr 15, 2020 · 2202ccc · 2202ccc
1 parent 79d3750
commit 2202ccc
Show file tree

Hide file tree

Showing 28 changed files with 48,458 additions and 47,132 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,22 +4,25 @@
   "main": "public/Main.js",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.9.10",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "csprng": "^0.1.2",
     "electron": "^8.2.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-redux": "^7.2.0",
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5"
   },
   "scripts": {
     "start": "npm run watch:css && react-scripts start",
     "build": "npm run build:css && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "electron-start": "electron .",
-    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css", 
+    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
     "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
   },
   "eslintConfig": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -23,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Diceware</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Components/App.js b/src/Components/App.js
@@ -1,43 +1,25 @@
 import React from 'react';
 import '../css/style.css';
-import NumSelect from './NumSelect';
-import Buttons from './Buttons';
+import {Words} from './Words';
+import WordButtons from './WordButtons';
 import CopyButton from './CopyButton';
 
 class App extends React.Component {
 
-
-	constructor(props) {
-		super(props);
-		this.state = {
-      number: 8,
-      textToCopy: ""
-		};
-	}
-
-	handleNumberClick = (e) => {
-		console.log("clicked: ", e.target.value)
-		this.setState({
-		  number: e.target.value
-		})
-	}
-
-	handleNewPass = (words) => {
-		console.log("words: ", words)
-		this.setState({
-		  textToCopy: words
-		})
-	}
-
-  render() {
-    return (
-      <div className="App">
-        <NumSelect number={this.state.number} handleNewPass={this.handleNewPass} />
-        <Buttons handleNumberClick={this.handleNumberClick} />
-        <CopyButton textToCopy={this.state.textToCopy}/>
-      </div>
-    );
-  }
+    render() {
+          return (
+              <div className="App">
+                    <div id={"content-wrap"}>
+                        <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>
+              </div>
+          );
+    }
 }
 
 export default App;
diff --git a/src/Components/Buttons.js b/src/Components/Buttons.js
diff --git a/src/Components/CopyButton.js b/src/Components/CopyButton.js
@@ -1,24 +1,66 @@
-import React, {useState, useEffect} from 'react';
+import React from 'react';
+import { connect } from "react-redux";
 import '../css/style.css';
-import * as myConstClass from '../constants.js';
+import Tooltip from '@material-ui/core/Tooltip';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 
 
-const CopyButton = (props) => {
+const mapStateToProps = state => {
+  return { pass: state.pass };
+};
 
 
-	// const copyPass = () => {
-	// 	alert("Copied")
-	// }
+const CopyButtonPass = ({pass}) => {
+
+	const [open, setOpen] = React.useState(false);
 
-	return (
-        <button className="word-count-button font-bold py-2 px-4 
-                hover:border-blue-500 rounded my-2 mx-2 .w-2" 
-                onClick={() => {navigator.clipboard.writeText(props.textToCopy)}}>
-            Copy Password
-        </button>
-	);
-}
+	const handleTooltipClose = () => {
+	  setOpen(false);
+	};
+
+	const handleTooltipOpen = () => {
+	  setOpen(true);
+	};
+  
 
+	const copyPass = () => {
+		navigator.clipboard.writeText(pass)
+		handleTooltipOpen()
+	}
 
+	if(navigator.clipboard === undefined) {
+		return (null)
+	}
+	else{
+		return (
+			<ClickAwayListener onClickAway={handleTooltipClose}>
+				<div>
+					<Tooltip
+					PopperProps={{
+					disablePortal: true,
+					}}
+					onClose={handleTooltipClose}
+					open={open}
+					disableFocusListener
+					disableHoverListener
+					disableTouchListener
+					title="Copied"
+					arrow
+				>
+					<button className="word-count-button font-bold py-2 px-4 
+							hover:text-purple-500 hover:border-purple-500 rounded 
+							my-2 mx-2 .w-2 text-sm border"
+						onClick={() => {copyPass()}}
+					>
+						Copy Passphrase
+					</button>
+				</Tooltip>
+				</div>
+			</ClickAwayListener>
+			);
+		}
+	}
+
+const CopyButton = connect(mapStateToProps)(CopyButtonPass);
 
 export default CopyButton;
diff --git a/src/Components/NumSelect.js b/src/Components/NumSelect.js