@standardnotes/authenticator 2.3.9 → 2.4.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/standardnotes/plugins/compare/@standardnotes/authenticator@2.3.9...@standardnotes/authenticator@2.4.0) (2023-05-03)
+
+### Features
+
+* **authenticator:** add export option for entries ([6704483](https://github.com/standardnotes/plugins/commit/67044839b3bc45e366795ecbfb12c78bdbcc22cb))
+
 ## [2.3.9](https://github.com/standardnotes/plugins/compare/@standardnotes/authenticator@2.3.7...@standardnotes/authenticator@2.3.9) (2022-11-04)
 
 **Note:** Version bump only for package @standardnotes/authenticator

package/app/components/AuthEntry.jsx

@@ -114,7 +114,7 @@ export default class AuthEntry extends React.Component {
 
   render() {
     const { service, account, notes, password, secret } = this.props.entry
-    const { id, onEdit, onRemove, canEdit, style, innerRef, ...divProps } = this.props
+    const { id, onEdit, onRemove, onExport, canEdit, style, innerRef, ...divProps } = this.props
     const { token, timeLeft, entryStyle } = this.state
 
     delete divProps.onCopyValue
@@ -178,6 +178,7 @@ export default class AuthEntry extends React.Component {
               <AuthMenu
                 onEdit={onEdit.bind(this, id)}
                 onRemove={onRemove.bind(this, id)}
+                onExport={onExport.bind(this, id)}
                 buttonColor={entryStyle.color}
               />
             </div>
@@ -193,6 +194,7 @@ AuthEntry.propTypes = {
   entry: PropTypes.object.isRequired,
   onEdit: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
+  onExport: PropTypes.func.isRequired,
   onEntryChange: PropTypes.func,
   onCopyValue: PropTypes.func.isRequired,
   canEdit: PropTypes.bool.isRequired,

package/app/components/AuthMenu.jsx

@@ -26,6 +26,11 @@ export default class AuthMenu extends React.Component {
     this.props.onRemove()
   }
 
+  onExport = () => {
+    this.onToggle()
+    this.props.onExport()
+  }
+
   render() {
     const { buttonColor } = this.props
 
@@ -49,6 +54,9 @@ export default class AuthMenu extends React.Component {
               <div className="sk-menu-panel-row" onClick={this.onRemove}>
                 <div className="sk-label">Remove</div>
               </div>
+              <div className="sk-menu-panel-row" onClick={this.onExport}>
+                <div className="sk-label">Export</div>
+              </div>
             </div>
           ))}
       </div>
@@ -59,5 +67,6 @@ export default class AuthMenu extends React.Component {
 AuthMenu.propTypes = {
   onEdit: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
+  onExport: PropTypes.func.isRequired,
   buttonColor: PropTypes.string,
 }

package/app/components/Home.jsx

@@ -1,15 +1,15 @@
-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'
+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: '',
+  text: "",
   entries: [],
   parseError: false,
   editMode: false,
@@ -18,7 +18,7 @@ const initialState = {
   confirmReorder: false,
   displayCopy: false,
   canEdit: true,
-  searchValue: '',
+  searchValue: "",
   lastUpdated: 0,
 }
 
@@ -84,7 +84,7 @@ export default class Home extends React.Component {
     }
 
     this.editorKit = new EditorKit(delegate, {
-      mode: 'json',
+      mode: "json",
     })
   }
 
@@ -97,12 +97,12 @@ export default class Home extends React.Component {
       }
 
       for (const entry of entries) {
-        if (!('service' in entry)) {
-          throw Error('Service key is missing for an entry.')
+        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.')
+        if (!("secret" in entry) && !("password" in entry)) {
+          throw Error("An entry does not have a secret key or a password.")
         }
       }
 
@@ -180,6 +180,24 @@ export default class Home extends React.Component {
     }))
   }
 
+  onExport = (id) => {
+    const entry = this.state.entries[id]
+    const blob = new Blob([JSON.stringify(entry, null, 2)], {
+      type: "application/json",
+    })
+
+    const link = document.createElement("a")
+    link.setAttribute("download", `${entry.service}-${entry.account}.json`)
+
+    const objUrl = window.URL.createObjectURL(blob)
+    link.href = objUrl
+    document.body.appendChild(link)
+    link.click()
+
+    link.remove()
+    window.URL.revokeObjectURL(objUrl)
+  }
+
   onCancel = () => {
     this.setState({
       confirmRemove: false,
@@ -252,7 +270,7 @@ export default class Home extends React.Component {
 
   clearSearchValue = () => {
     this.setState({
-      searchValue: '',
+      searchValue: "",
     })
   }
 
@@ -297,7 +315,11 @@ export default class Home extends React.Component {
         <CopyNotification isVisible={displayCopy} />
         {!editMode && (
           <div id="header">
-            <div className={`sk-horizontal-group left align-items-center ${!canEdit && 'full-width'}`}>
+            <div
+              className={`sk-horizontal-group left align-items-center ${
+                !canEdit && "full-width"
+              }`}
+            >
               <input
                 name="search"
                 className="sk-input contrast search-bar"
@@ -308,7 +330,10 @@ export default class Home extends React.Component {
                 type="text"
               />
               {searchValue && (
-                <div onClick={this.clearSearchValue} className="sk-button danger">
+                <div
+                  onClick={this.clearSearchValue}
+                  className="sk-button danger"
+                >
                   <div className="sk-label">✕</div>
                 </div>
               )}
@@ -316,7 +341,10 @@ export default class Home extends React.Component {
             {canEdit && (
               <div className="sk-horizontal-group right">
                 <div className="sk-button-group stretch">
-                  <div onClick={this.onReorderEntries} className="sk-button info">
+                  <div
+                    onClick={this.onReorderEntries}
+                    className="sk-button info"
+                  >
                     <ReorderIcon />
                   </div>
                   <div onClick={this.onAddNew} className="sk-button info">
@@ -329,13 +357,19 @@ export default class Home extends React.Component {
         )}
         <div id="content">
           {editMode ? (
-            <EditEntry id={editEntry.id} entry={editEntry.entry} onSave={this.onSave} onCancel={this.onCancel} />
+            <EditEntry
+              id={editEntry.id}
+              entry={editEntry.entry}
+              onSave={this.onSave}
+              onCancel={this.onCancel}
+            />
           ) : (
             <ViewEntries
               entries={entries}
               searchValue={searchValue}
               onEdit={this.onEdit}
               onRemove={this.onRemove}
+              onExport={this.onExport}
               onCopyValue={this.onCopyValue}
               canEdit={canEdit}
               lastUpdated={lastUpdated}
@@ -352,7 +386,7 @@ export default class Home extends React.Component {
           )}
           {confirmReorder && (
             <ConfirmDialog
-              title={'Auto-sort entries'}
+              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}

package/app/components/ViewEntries.jsx

@@ -1,6 +1,6 @@
-import AuthEntry from '@Components/AuthEntry'
-import PropTypes from 'prop-types'
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'
+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)
@@ -10,14 +10,28 @@ const reorderEntries = (list, startIndex, endIndex) => {
   return result
 }
 
-const ViewEntries = ({ entries, onEdit, onRemove, onCopyValue, canEdit, updateEntries, searchValue, lastUpdated }) => {
+const ViewEntries = ({
+  entries,
+  onEdit,
+  onRemove,
+  onExport,
+  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)
+    const orderedEntries = reorderEntries(
+      entries,
+      result.source.index,
+      result.destination.index
+    )
 
     updateEntries(orderedEntries)
   }
@@ -26,12 +40,17 @@ const ViewEntries = ({ entries, onEdit, onRemove, onCopyValue, canEdit, updateEn
     <DragDropContext onDragEnd={onDragEnd}>
       <Droppable droppableId="droppable" isDropDisabled={!canEdit}>
         {(provided) => (
-          <div {...provided.droppableProps} ref={provided.innerRef} className="auth-list">
+          <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()
+              const combinedString =
+                `${entry.account}${entry.service}${entry.notes}`.toLowerCase()
               if (searchValue && !combinedString.includes(searchValue)) {
                 return
               }
@@ -52,6 +71,7 @@ const ViewEntries = ({ entries, onEdit, onRemove, onCopyValue, canEdit, updateEn
                       entry={entry}
                       onEdit={onEdit}
                       onRemove={onRemove}
+                      onExport={onExport}
                       onCopyValue={onCopyValue}
                       canEdit={canEdit}
                       lastUpdated={lastUpdated}
@@ -72,6 +92,7 @@ ViewEntries.propTypes = {
   entries: PropTypes.arrayOf(PropTypes.object),
   onEdit: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
+  onExport: PropTypes.func.isRequired,
   onCopyValue: PropTypes.func.isRequired,
   canEdit: PropTypes.bool.isRequired,
   lastUpdated: PropTypes.number.isRequired,