@standardnotes/authenticator 2.3.5

package/app/components/Home.jsx

@@ -0,0 +1,365 @@
+import ConfirmDialog from '@Components/ConfirmDialog'
+import DataErrorAlert from '@Components/DataErrorAlert'
+import EditEntry from '@Components/EditEntry'
+import ViewEntries from '@Components/ViewEntries'
+import EditorKit from '@standardnotes/editor-kit'
+import update from 'immutability-helper'
+import React from 'react'
+import ReorderIcon from '../assets/svg/reorder-icon.svg'
+import CopyNotification from './CopyNotification'
+
+const initialState = {
+  text: '',
+  entries: [],
+  parseError: false,
+  editMode: false,
+  editEntry: null,
+  confirmRemove: false,
+  confirmReorder: false,
+  displayCopy: false,
+  canEdit: true,
+  searchValue: '',
+  lastUpdated: 0,
+}
+
+export default class Home extends React.Component {
+  constructor(props) {
+    super(props)
+    this.configureEditorKit()
+    this.state = initialState
+  }
+
+  configureEditorKit() {
+    const delegate = {
+      setEditorRawText: (text) => {
+        let parseError = false
+        let entries = []
+
+        if (text) {
+          try {
+            entries = this.parseNote(text)
+          } catch (e) {
+            // Couldn't parse the content
+            parseError = true
+            this.setState({
+              parseError: true,
+            })
+          }
+        }
+
+        this.setState({
+          ...initialState,
+          text,
+          parseError,
+          entries,
+        })
+      },
+      generateCustomPreview: (text) => {
+        let entries = []
+        try {
+          entries = this.parseNote(text)
+        } finally {
+          // eslint-disable-next-line no-unsafe-finally
+          return {
+            html: `<div><strong>${entries.length}</strong> TokenVault Entries </div>`,
+            plain: `${entries.length} TokenVault Entries`,
+          }
+        }
+      },
+      clearUndoHistory: () => {},
+      getElementsBySelector: () => [],
+      onNoteLockToggle: (isLocked) => {
+        this.setState({
+          canEdit: !isLocked,
+        })
+      },
+      onThemesChange: () => {
+        this.setState({
+          lastUpdated: Date.now(),
+        })
+      },
+      handleRequestForContentHeight: () => {
+        return document.body.scrollHeight
+      },
+    }
+
+    this.editorKit = new EditorKit(delegate, {
+      mode: 'json',
+    })
+  }
+
+  parseNote(text) {
+    const entries = JSON.parse(text)
+
+    if (entries instanceof Array) {
+      if (entries.length === 0) {
+        return []
+      }
+
+      for (const entry of entries) {
+        if (!('service' in entry)) {
+          throw Error('Service key is missing for an entry.')
+        }
+
+        if (!('secret' in entry) && !('password' in entry)) {
+          throw Error('An entry does not have a secret key or a password.')
+        }
+      }
+
+      return entries
+    }
+
+    return []
+  }
+
+  saveNote(entries) {
+    this.editorKit.onEditorValueChanged(JSON.stringify(entries, null, 2))
+  }
+
+  // Entry operations
+  addEntry = (entry) => {
+    this.setState((state) => {
+      const entries = state.entries.concat([entry])
+      this.saveNote(entries)
+
+      return {
+        editMode: false,
+        editEntry: null,
+        entries,
+      }
+    })
+  }
+
+  editEntry = ({ id, entry }) => {
+    this.setState((state) => {
+      const entries = update(state.entries, { [id]: { $set: entry } })
+      this.saveNote(entries)
+
+      return {
+        editMode: false,
+        editEntry: null,
+        entries,
+      }
+    })
+  }
+
+  removeEntry = (id) => {
+    this.setState((state) => {
+      const entries = update(state.entries, { $splice: [[id, 1]] })
+      this.saveNote(entries)
+
+      return {
+        confirmRemove: false,
+        editEntry: null,
+        entries,
+      }
+    })
+  }
+
+  // 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: {
+        id,
+        entry: state.entries[id],
+      },
+    }))
+  }
+
+  onCancel = () => {
+    this.setState({
+      confirmRemove: false,
+      confirmReorder: false,
+      editMode: false,
+      editEntry: null,
+    })
+  }
+
+  onRemove = (id) => {
+    if (!this.state.canEdit) {
+      return
+    }
+    this.setState((state) => ({
+      confirmRemove: true,
+      editEntry: {
+        id,
+        entry: state.entries[id],
+      },
+    }))
+  }
+
+  onSave = ({ id, entry }) => {
+    // If there's no ID it's a new note
+    if (id != null) {
+      this.editEntry({ id, entry })
+    } else {
+      this.addEntry(entry)
+    }
+  }
+
+  onCopyValue = () => {
+    this.setState({
+      displayCopy: true,
+    })
+
+    if (this.clearTooltipTimer) {
+      clearTimeout(this.clearTooltipTimer)
+    }
+
+    this.clearTooltipTimer = setTimeout(() => {
+      this.setState({
+        displayCopy: false,
+      })
+    }, 2000)
+  }
+
+  updateEntries = (entries) => {
+    this.saveNote(entries)
+    this.setState({
+      entries,
+    })
+  }
+
+  onReorderEntries = () => {
+    if (!this.state.canEdit) {
+      return
+    }
+    this.setState({
+      confirmReorder: true,
+    })
+  }
+
+  onSearchChange = (event) => {
+    const target = event.target
+    this.setState({
+      searchValue: target.value.toLowerCase(),
+    })
+  }
+
+  clearSearchValue = () => {
+    this.setState({
+      searchValue: '',
+    })
+  }
+
+  reorderEntries = () => {
+    const { entries } = this.state
+    const orderedEntries = entries.sort((a, b) => {
+      const serviceA = a.service.toLowerCase()
+      const serviceB = b.service.toLowerCase()
+      return serviceA < serviceB ? -1 : serviceA > serviceB ? 1 : 0
+    })
+    this.saveNote(orderedEntries)
+    this.setState({
+      entries: orderedEntries,
+      confirmReorder: false,
+    })
+  }
+
+  render() {
+    const editEntry = this.state.editEntry || {}
+    const {
+      canEdit,
+      displayCopy,
+      parseError,
+      editMode,
+      entries,
+      confirmRemove,
+      confirmReorder,
+      searchValue,
+      lastUpdated,
+    } = this.state
+
+    if (parseError) {
+      return (
+        <div className="sn-component">
+          <DataErrorAlert />
+        </div>
+      )
+    }
+
+    return (
+      <div className="sn-component">
+        <CopyNotification isVisible={displayCopy} />
+        {!editMode && (
+          <div id="header">
+            <div className={`sk-horizontal-group left align-items-center ${!canEdit && 'full-width'}`}>
+              <input
+                name="search"
+                className="sk-input contrast search-bar"
+                placeholder="Search entries..."
+                value={searchValue}
+                onChange={this.onSearchChange}
+                autoComplete="off"
+                type="text"
+              />
+              {searchValue && (
+                <div onClick={this.clearSearchValue} className="sk-button danger">
+                  <div className="sk-label">✕</div>
+                </div>
+              )}
+            </div>
+            {canEdit && (
+              <div className="sk-horizontal-group right">
+                <div className="sk-button-group stretch">
+                  <div onClick={this.onReorderEntries} className="sk-button info">
+                    <ReorderIcon />
+                  </div>
+                  <div onClick={this.onAddNew} className="sk-button info">
+                    <div className="sk-label">Add new</div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        <div id="content">
+          {editMode ? (
+            <EditEntry id={editEntry.id} entry={editEntry.entry} onSave={this.onSave} onCancel={this.onCancel} />
+          ) : (
+            <ViewEntries
+              entries={entries}
+              searchValue={searchValue}
+              onEdit={this.onEdit}
+              onRemove={this.onRemove}
+              onCopyValue={this.onCopyValue}
+              canEdit={canEdit}
+              lastUpdated={lastUpdated}
+              updateEntries={this.updateEntries}
+            />
+          )}
+          {confirmRemove && (
+            <ConfirmDialog
+              title={`Remove ${editEntry.entry.service}`}
+              message="Are you sure you want to remove this entry?"
+              onConfirm={() => this.removeEntry(editEntry.id)}
+              onCancel={this.onCancel}
+            />
+          )}
+          {confirmReorder && (
+            <ConfirmDialog
+              title={'Auto-sort entries'}
+              message="Are you sure you want to auto-sort all entries alphabetically based on service name?"
+              onConfirm={this.reorderEntries}
+              onCancel={this.onCancel}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+}

package/app/components/QRCodeReader.jsx

@@ -0,0 +1,91 @@
+import { parseKeyUri } from '@Lib/otp'
+import jsQR from 'jsqr'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const convertToGrayScale = (imageData) => {
+  if (!imageData) {
+    return
+  }
+
+  for (let i = 0; i < imageData.data.length; i += 4) {
+    const count = imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]
+    let color = 0
+
+    if (count > 510) {
+      color = 255
+    } else if (count > 255) {
+      color = 127.5
+    }
+
+    imageData.data[i] = color
+    imageData.data[i + 1] = color
+    imageData.data[i + 2] = color
+    imageData.data[i + 3] = 255
+  }
+
+  return imageData
+}
+
+export default class QRCodeReader extends React.Component {
+  constructor() {
+    super()
+
+    this.fileInputRef = React.createRef(null)
+  }
+
+  onImageSelected = (evt) => {
+    const file = evt.target.files[0]
+    const url = URL.createObjectURL(file)
+    const img = new Image()
+    const self = this
+
+    img.onload = function () {
+      URL.revokeObjectURL(this.src)
+
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      canvas.width = this.width
+      canvas.height = this.height
+      context.drawImage(this, 0, 0)
+
+      let imageData = context.getImageData(0, 0, this.width, this.height)
+      imageData = convertToGrayScale(imageData)
+
+      const code = jsQR(imageData.data, imageData.width, imageData.height)
+
+      const { onError, onSuccess } = self.props
+
+      if (code) {
+        const otpData = parseKeyUri(code.data)
+        if (otpData.type !== 'totp') {
+          onError(`The '${otpData.type}' type is not supported.`)
+        } else {
+          onSuccess(otpData)
+        }
+      } else {
+        onError('Error reading QR code from image. Please try again.')
+      }
+    }
+
+    img.src = url
+
+    return false
+  }
+
+  render() {
+    return (
+      <div className="qr-code-reader-container">
+        <div className="sk-button info" onClick={() => this.fileInputRef.current.click()}>
+          <div className="sk-label">Upload QR Code</div>
+          <input type="file" style={{ display: 'none' }} ref={this.fileInputRef} onChange={this.onImageSelected} />
+        </div>
+      </div>
+    )
+  }
+}
+
+QRCodeReader.propTypes = {
+  onError: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+}

package/app/components/ViewEntries.jsx

@@ -0,0 +1,82 @@
+import AuthEntry from '@Components/AuthEntry'
+import PropTypes from 'prop-types'
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'
+
+const reorderEntries = (list, startIndex, endIndex) => {
+  const result = Array.from(list)
+  const [removed] = result.splice(startIndex, 1)
+  result.splice(endIndex, 0, removed)
+
+  return result
+}
+
+const ViewEntries = ({ entries, onEdit, onRemove, onCopyValue, canEdit, updateEntries, searchValue, lastUpdated }) => {
+  const onDragEnd = (result) => {
+    const droppedOutsideList = !result.destination
+    if (droppedOutsideList) {
+      return
+    }
+
+    const orderedEntries = reorderEntries(entries, result.source.index, result.destination.index)
+
+    updateEntries(orderedEntries)
+  }
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="droppable" isDropDisabled={!canEdit}>
+        {(provided) => (
+          <div {...provided.droppableProps} ref={provided.innerRef} className="auth-list">
+            {entries.map((entry, index) => {
+              /**
+               * Filtering entries by account, service and notes properties.
+               */
+              const combinedString = `${entry.account}${entry.service}${entry.notes}`.toLowerCase()
+              if (searchValue && !combinedString.includes(searchValue)) {
+                return
+              }
+              return (
+                <Draggable
+                  key={`${entry.service}-${index}`}
+                  draggableId={`${entry.service}-${index}`}
+                  index={index}
+                  isDragDisabled={!canEdit}
+                >
+                  {(provided) => (
+                    <AuthEntry
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      innerRef={provided.innerRef}
+                      key={index}
+                      id={index}
+                      entry={entry}
+                      onEdit={onEdit}
+                      onRemove={onRemove}
+                      onCopyValue={onCopyValue}
+                      canEdit={canEdit}
+                      lastUpdated={lastUpdated}
+                    />
+                  )}
+                </Draggable>
+              )
+            })}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  )
+}
+
+ViewEntries.propTypes = {
+  entries: PropTypes.arrayOf(PropTypes.object),
+  onEdit: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onCopyValue: PropTypes.func.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+  lastUpdated: PropTypes.number.isRequired,
+  updateEntries: PropTypes.func.isRequired,
+  searchValue: PropTypes.string,
+}
+
+export default ViewEntries

package/app/index.js

@@ -0,0 +1,4 @@
+import Home from '@Components/Home'
+import ReactDOM from 'react-dom'
+
+ReactDOM.render(<Home />, document.body.appendChild(document.createElement('div')))