Merge pull request #35 from standardnotes/update

feat: update codebase

.babelrc

@@ -1,12 +1,15 @@
 {
-  "presets": [ "es2015", "stage-0", "react"],
-
-  /* if you want to use babel runtime, uncomment the following line */
-  // "plugins": ["transform-runtime"],
-
-  "env": {
-    "build": {
-      "optional": ["optimisation", "minification"]
-    }
-  }
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
 }

.browserlistrc

@@ -0,0 +1,2 @@
+> 0.25%
+not dead

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/**
+dist/**
+webpack.*

.eslintrc

@@ -0,0 +1,26 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "@standardnotes/eslint-config-extensions",
+    "plugin:react/recommended"
+  ],
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -48,3 +48,5 @@ build
 
 # Editor
 .idea
+
+ext.json

.npmignore

@@ -0,0 +1 @@
+ext.json

app/App.js

@@ -1,18 +1,14 @@
-import "regenerator-runtime/runtime";
+import 'regenerator-runtime/runtime';
 
 import React from 'react';
-import Home from './components/Home';
+import Home from '@Components/Home';
 
 export default class App extends React.Component {
   constructor(props) {
     super(props);
   }
 
   render() {
-    return (
-      <div>
-        <Home />
-      </div>
-    );
+    return <Home />;
   }
 }

app/components/AuthEntry.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { totp } from '../lib/otp';
-import CountdownPie from './CountdownPie';
-import AuthMenu from './AuthMenu';
+import PropTypes from 'prop-types';
+import { totp } from '@Lib/otp';
+import CountdownPie from '@Components/CountdownPie';
+import AuthMenu from '@Components/AuthMenu';
 
 export default class AuthEntry extends React.Component {
   constructor(props) {
@@ -29,11 +30,11 @@ export default class AuthEntry extends React.Component {
     });
 
     this.timer = setTimeout(this.updateToken, timeLeft * 1000);
-  };
+  }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     // If the secret changed make sure to recalculate token
-    if (nextProps.entry.secret !== this.props.entry.secret) {
+    if (prevProps.entry.secret !== this.props.entry.secret) {
       clearTimeout(this.timer);
       this.timer = setTimeout(this.updateToken, 0);
     }
@@ -52,17 +53,17 @@ export default class AuthEntry extends React.Component {
       name,
       value: target.value
     });
-  };
+  }
 
-  copyToken = event => {
+  copyToken = () => {
     const textField = document.createElement('textarea');
     textField.innerText = this.state.token;
     document.body.appendChild(textField);
     textField.select();
     document.execCommand('copy');
     textField.remove();
     this.props.onCopyToken();
-  };
+  }
 
   render() {
     const { service, account, notes } = this.props.entry;
@@ -104,3 +105,12 @@ export default class AuthEntry extends React.Component {
     );
   }
 }
+
+AuthEntry.propTypes = {
+  id: PropTypes.any.isRequired,
+  entry: PropTypes.object.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onEntryChange: PropTypes.func,
+  onCopyToken: PropTypes.func.isRequired
+};

app/components/AuthMenu.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class AuthMenu extends React.Component {
   constructor(props) {
@@ -13,25 +14,25 @@ export default class AuthMenu extends React.Component {
     this.setState({
       show: !this.state.show
     });
-  };
+  }
 
   onEdit = () => {
     this.onToggle();
     this.props.onEdit();
-  };
+  }
 
   onRemove = () => {
     this.onToggle();
     this.props.onRemove();
-  };
+  }
 
   render() {
     return (
       <div className="auth-menu">
         <div className="sk-button" onClick={this.onToggle}>
           <div className="sk-label">•••</div>
         </div>
-        {this.state.show && [
+        {this.state.show && (
           <div className="auth-overlay" onClick={this.onToggle} />,
           <div className="sk-menu-panel">
             <div className="sk-menu-panel-row" onClick={this.onEdit}>
@@ -41,8 +42,13 @@ export default class AuthMenu extends React.Component {
               <div className="sk-label">Remove</div>
             </div>
           </div>
-        ]}
+        )}
       </div>
     );
   }
 }
+
+AuthMenu.propTypes = {
+  onEdit: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired
+};

app/components/ConfirmDialog.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const ConfirmDialog = ({ title, message, onConfirm, onCancel }) => (
   <div className="auth-overlay">
@@ -27,4 +28,11 @@ const ConfirmDialog = ({ title, message, onConfirm, onCancel }) => (
   </div>
 );
 
+ConfirmDialog.propTypes = {
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired
+};
+
 export default ConfirmDialog;

app/components/Countdown.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const animationName = token => `countdown${token}`;
 const animation = (token, offset) => `@keyframes ${animationName(token)} {
@@ -10,7 +11,7 @@ const animation = (token, offset) => `@keyframes ${animationName(token)} {
   }
 }`;
 
-class Countdown extends React.Component {
+export default class Countdown extends React.Component {
   componentWillUnmount() {
     clearTimeout(this.timer);
   }
@@ -67,4 +68,8 @@ class Countdown extends React.Component {
   }
 }
 
-export default Countdown;
+Countdown.propTypes = {
+  token: PropTypes.string.isRequired,
+  left: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired
+};

app/components/CountdownPie.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const animationName = token => `countdown${token}`;
 
@@ -41,7 +42,7 @@ const opaReverseAnimation = (
   }
 }`;
 
-class CountdownPie extends React.Component {
+export default class CountdownPie extends React.Component {
   componentWillUnmount() {
     clearTimeout(this.timer);
   }
@@ -148,4 +149,8 @@ class CountdownPie extends React.Component {
   }
 }
 
-export default CountdownPie;
+CountdownPie.propTypes = {
+  token: PropTypes.string.isRequired,
+  left: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired
+};

app/components/EditEntry.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import QRCodeReader from './QRCodeReader';
-import { secretPattern } from '../lib/otp';
+import PropTypes from 'prop-types';
+import QRCodeReader from '@Components/QRCodeReader';
+import { secretPattern } from '@Lib/otp';
 
 export default class EditEntry extends React.Component {
   static defaultProps = {
@@ -130,3 +131,10 @@ export default class EditEntry extends React.Component {
     );
   }
 }
+
+EditEntry.propTypes = {
+  id: PropTypes.number,
+  entry: PropTypes.object.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired
+};

app/components/Home.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import update from 'immutability-helper';
-import EditEntry from './EditEntry';
-import ViewEntries from './ViewEntries';
-import ConfirmDialog from './ConfirmDialog';
-import DataErrorAlert from './DataErrorAlert';
+import EditEntry from '@Components/EditEntry';
+import ViewEntries from '@Components/ViewEntries';
+import ConfirmDialog from '@Components/ConfirmDialog';
+import DataErrorAlert from '@Components/DataErrorAlert';
 import { EditorKit, EditorKitDelegate } from 'sn-editor-kit';
 
 const initialState = {
@@ -53,6 +53,7 @@ export default class Home extends React.Component {
         try {
           entries = JSON.parse(text);
         } finally {
+          // eslint-disable-next-line no-unsafe-finally
           return {
             html: `<div><strong>${entries.length}</strong> TokenVault Entries </div>`,
             plain: `${entries.length} TokenVault Entries`,

app/components/QRCodeReader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import jsQR from 'jsqr';
-import { parseKeyUri } from '../lib/otp';
+import { parseKeyUri } from '@Lib/otp';
 
 export default class QRCodeReader extends React.Component {
   onImageSelected = evt => {

app/components/ViewEntries.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import AuthEntry from './AuthEntry';
+import PropTypes from 'prop-types';
+import AuthEntry from '@Components/AuthEntry';
 
 const ViewEntries = ({ entries, onEdit, onRemove, onCopyToken }) => (
   <div className="auth-list">
@@ -16,4 +17,11 @@ const ViewEntries = ({ entries, onEdit, onRemove, onCopyToken }) => (
   </div>
 );
 
+ViewEntries.propTypes =  {
+  entries: PropTypes.arrayOf(PropTypes.object),
+  onEdit: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onCopyToken: PropTypes.func.isRequired
+};
+
 export default ViewEntries;

app/index.html

@@ -1,14 +1,14 @@
+<!DOCTYPE html>
 <html>
+  <head>
+    <base target="_blank">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="dist.css">
+    <title>TokenVault</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" type="text/css" href="dist.css">
-  <title>TokenVault</title>
-</head>
-
-<body>
-  <script type="text/javascript" src="dist.js"></script>
-</body>
-
+  <body>
+    <script type="text/javascript" src="dist.js"></script>
+  </body>
 </html>

app/lib/otp.js

@@ -5,8 +5,8 @@ import {
   bufToHex,
   hextoBuf,
   hexToBytes
-} from './utils';
-export { secretPattern, parseKeyUri } from './utils';
+} from '@Lib/utils';
+export { secretPattern, parseKeyUri } from '@Lib/utils';
 
 class Hotp {
   /**