feat: prevent adding entries when note is locked (#46)

app/components/AuthEntry.js

@@ -67,7 +67,7 @@ export default class AuthEntry extends React.Component {
 
   render() {
     const { service, account, notes } = this.props.entry;
-    const { id, onEdit, onRemove } = this.props;
+    const { id, onEdit, onRemove, canEdit } = this.props;
     const { token } = this.state;
     const timeLeft = this.getTimeLeft();
 
@@ -89,12 +89,14 @@ export default class AuthEntry extends React.Component {
               </div>
             </div>
           </div>
-          <div className="auth-options">
-            <AuthMenu
-              onEdit={onEdit.bind(this, id)}
-              onRemove={onRemove.bind(this, id)}
-            />
-          </div>
+          {canEdit && (
+            <div className="auth-options">
+              <AuthMenu
+                onEdit={onEdit.bind(this, id)}
+                onRemove={onRemove.bind(this, id)}
+              />
+            </div>
+          )}
         </div>
         {notes && (
           <div className="auth-notes-row">
@@ -112,5 +114,6 @@ AuthEntry.propTypes = {
   onEdit: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
   onEntryChange: PropTypes.func,
-  onCopyToken: PropTypes.func.isRequired
+  onCopyToken: PropTypes.func.isRequired,
+  canEdit: PropTypes.bool.isRequired
 };

app/components/Home.js

@@ -4,7 +4,7 @@ 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';
+import EditorKit from '@standardnotes/editor-kit';
 
 const initialState = {
   text: '',
@@ -13,7 +13,8 @@ const initialState = {
   editMode: false,
   editEntry: null,
   confirmRemove: false,
-  displayCopy: false
+  displayCopy: false,
+  canEdit: true
 };
 
 export default class Home extends React.Component {
@@ -24,7 +25,7 @@ export default class Home extends React.Component {
   }
 
   configureEditorKit() {
-    let delegate = new EditorKitDelegate({
+    const delegate = {
       setEditorRawText: text => {
         let parseError = false;
         let entries = [];
@@ -61,14 +62,20 @@ export default class Home extends React.Component {
         }
       },
       clearUndoHistory: () => {},
-      getElementsBySelector: () => []
-    });
+      getElementsBySelector: () => [],
+      onNoteLockToggle: (isLocked) => {
+        this.setState({
+          canEdit: !isLocked
+        });
+      }
+    };
 
-    this.editorKit = new EditorKit({
-      delegate: delegate,
-      mode: 'json',
-      supportsFilesafe: false
-    });
+    this.editorKit = new EditorKit(delegate,
+      {
+        mode: 'json',
+        supportsFileSafe: false
+      }
+    );
   }
 
   saveNote(entries) {
@@ -117,13 +124,19 @@ export default class Home extends React.Component {
 
   // Event Handlers
   onAddNew = () => {
+    if (!this.state.canEdit) {
+      return;
+    }
     this.setState({
       editMode: true,
       editEntry: null
     });
   };
 
   onEdit = id => {
+    if (!this.state.canEdit) {
+      return;
+    }
     this.setState(state => ({
       editMode: true,
       editEntry: {
@@ -142,6 +155,9 @@ export default class Home extends React.Component {
   };
 
   onRemove = id => {
+    if (!this.state.canEdit) {
+      return;
+    }
     this.setState(state => ({
       confirmRemove: true,
       editEntry: {
@@ -177,11 +193,13 @@ export default class Home extends React.Component {
 
   render() {
     const editEntry = this.state.editEntry || {};
+    const { canEdit, displayCopy, parseError, editMode, entries, confirmRemove } = this.state;
+
     return (
       <div className="sn-component">
         <div
           className={`auth-copy-notification ${
-            this.state.displayCopy ? 'visible' : 'hidden'
+            displayCopy ? 'visible' : 'hidden'
           }`}
         >
           <div className="sk-panel">
@@ -190,17 +208,17 @@ export default class Home extends React.Component {
             </div>
           </div>
         </div>
-        {this.state.parseError && <DataErrorAlert />}
-        <div id="header">
+        {parseError && <DataErrorAlert />}
+        <div id="header" className={!canEdit ? 'hidden' : '' }>
           <div className="sk-button-group">
-            <div onClick={this.onAddNew} className="sk-button info">
+            <div onClick={this.onAddNew} className="sk-button info" aria-disabled={!canEdit}>
               <div className="sk-label">Add New</div>
             </div>
           </div>
         </div>
 
         <div id="content">
-          {this.state.editMode ? (
+          {editMode ? (
             <EditEntry
               id={editEntry.id}
               entry={editEntry.entry}
@@ -209,13 +227,14 @@ export default class Home extends React.Component {
             />
           ) : (
             <ViewEntries
-              entries={this.state.entries}
+              entries={entries}
               onEdit={this.onEdit}
               onRemove={this.onRemove}
               onCopyToken={this.onCopyToken}
+              canEdit={canEdit}
             />
           )}
-          {this.state.confirmRemove && (
+          {confirmRemove && (
             <ConfirmDialog
               title={`Remove ${editEntry.entry.service}`}
               message="Are you sure you want to remove this entry?"

app/components/ViewEntries.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import AuthEntry from '@Components/AuthEntry';
 
-const ViewEntries = ({ entries, onEdit, onRemove, onCopyToken }) => (
+const ViewEntries = ({ entries, onEdit, onRemove, onCopyToken, canEdit }) => (
   <div className="auth-list">
     {entries.map((entry, idx) => (
       <AuthEntry
@@ -12,6 +12,7 @@ const ViewEntries = ({ entries, onEdit, onRemove, onCopyToken }) => (
         onEdit={onEdit}
         onRemove={onRemove}
         onCopyToken={onCopyToken}
+        canEdit={canEdit}
       />
     ))}
   </div>
@@ -21,7 +22,8 @@ ViewEntries.propTypes =  {
   entries: PropTypes.arrayOf(PropTypes.object),
   onEdit: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
-  onCopyToken: PropTypes.func.isRequired
+  onCopyToken: PropTypes.func.isRequired,
+  canEdit: PropTypes.bool.isRequired
 };
 
 export default ViewEntries;

app/stylesheets/main.scss

@@ -38,6 +38,10 @@ html {
   align-items: flex-end;
 }
 
+#header.hidden {
+  display: none;
+}
+
 #content {
   background-color: var(--sn-stylekit-contrast-background-color);
   flex: 1;

dist/index.html

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

editor.index.ejs

@@ -4,7 +4,6 @@
     <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><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body></body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sn-token-vault",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "dist/dist.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -19,7 +19,7 @@
     "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-react": "^7.12.13",
-    "@standardnotes/component-relay": "2.0.3",
+    "@standardnotes/editor-kit": "2.0.2",
     "@standardnotes/eslint-config-extensions": "^1.0.1",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.1.3",
@@ -37,7 +37,6 @@
     "react-dom": "^17.0.1",
     "regenerator-runtime": "^0.13.2",
     "sass-loader": "^11.0.1",
-    "sn-editor-kit": "1.0.9",
     "sn-stylekit": "2.0.15",
     "style-loader": "~0.13.1",
     "terser-webpack-plugin": "^5.1.1",

webpack.config.js

@@ -4,7 +4,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   context: __dirname,
-  entry: path.resolve(__dirname, 'app/main.js'),
+  entry: [
+    path.resolve(__dirname, 'app/main.js'),
+    path.resolve(__dirname, 'app/stylesheets/main.scss')
+  ],
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'dist.js'
@@ -21,22 +24,14 @@ module.exports = {
           MiniCssExtractPlugin.loader,
           "css-loader",
           {
-            loader: "sass-loader",
-            options: {
-              sassOptions: {
-                includePaths: [
-                  path.resolve(__dirname, 'app/stylesheets/main.scss')
-                ],
-              },
-            },
+            loader: "sass-loader"
           },
         ],
       },
       {
         test: /\.js[x]?$/,
         include: [
-          path.resolve(__dirname, 'app'),
-          path.resolve(__dirname, 'node_modules/@standardnotes/component-relay/dist/dist.js')
+          path.resolve(__dirname, 'app')
         ],
         exclude: /node_modules/,
         use: ['babel-loader']

yarn.lock

@@ -923,10 +923,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@standardnotes/component-relay@2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/component-relay/-/component-relay-2.0.3.tgz#bdf9ccbc2cfe9bfd6dcb1f478202c19e38a4b1fc"
-  integrity sha512-Gx8L1GEdR4UnGkP464/fyRxQ+SPxucBqItRsvJCZm0JgGxrfaQKJrI0DOSQs/Hn5bpgQOo00Fxe3428pSkXcPA==
+"@standardnotes/editor-kit@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/editor-kit/-/editor-kit-2.0.2.tgz#cfe147888406ac1e61f6ef33a8e2523cd5c13638"
+  integrity sha512-/nHp96PzZ8Dp9SwrkiDRumuztdxKC6iUJ1Ufj/uggPgwAI6MSOI9o0cx4tvA8/T4CadF9WZFDC06nh4QnlSNrA==
 
 "@standardnotes/eslint-config-extensions@^1.0.1":
   version "1.0.1"
@@ -5272,11 +5272,6 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-sn-editor-kit@1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/sn-editor-kit/-/sn-editor-kit-1.0.9.tgz#e37e884dfa820db0bb508192623ff7f3efc5f0e2"
-  integrity sha512-Ryx7h91dGigDAqrwZ67n74d0g7M3E1xbQsewoY/4b7s7u4D5u9JMq4QvBZtBOdossthlLtnU5nJ41GjhcmmpQQ==
-
 sn-stylekit@2.0.15:
   version "2.0.15"
   resolved "https://registry.npmjs.org/sn-stylekit/-/sn-stylekit-2.0.15.tgz"