@standardnotes/authenticator 2.3.5

package/.babelrc

@@ -0,0 +1,21 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": "defaults"
+      }
+    ],
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
+}

package/.browserlistrc

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

package/.eslintignore

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

package/.eslintrc

@@ -0,0 +1,30 @@
+{
+  "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"
+    }
+  },
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,136 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.3.5](https://github.com/standardnotes/plugins/compare/@standardnotes/authenticator@2.3.4...@standardnotes/authenticator@2.3.5) (2022-11-04)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.3.4](https://github.com/standardnotes/plugins/compare/@standardnotes/authenticator@2.3.3...@standardnotes/authenticator@2.3.4) (2022-11-04)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.3.3](https://github.com/standardnotes/plugins/compare/@standardnotes/authenticator@2.3.2...@standardnotes/authenticator@2.3.3) (2022-11-04)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.3.2](https://github.com/standardnotes/plugins/compare/@standardnotes/authenticator@2.3.1...@standardnotes/authenticator@2.3.2) (2022-11-04)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.3.1](https://github.com/standardnotes/plugins/compare/@standardnotes/authenticator@2.3.0...@standardnotes/authenticator@2.3.1) (2022-11-04)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+# 2.3.0 (2022-11-04)
+
+### Features
+
+* add core plugins ([b607787](https://github.com/standardnotes/plugins/commit/b60778762306f5647cb715102eab23083b266718))
+
+## [2.2.7](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.2.6...@standardnotes/authenticator@2.2.7) (2022-11-01)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.2.6](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.2.5...@standardnotes/authenticator@2.2.6) (2022-10-27)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.2.5](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.2.4...@standardnotes/authenticator@2.2.5) (2022-10-05)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.2.4](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.2.3...@standardnotes/authenticator@2.2.4) (2022-08-22)
+
+### Bug Fixes
+
+* trigger the `onChange` event of qr code uploading input when clicking on the button ([#1421](https://github.com/standardnotes/app/issues/1421)) ([2a976a0](https://github.com/standardnotes/app/commit/2a976a0de499ba33186a52a6bd2c10a709b86fee))
+
+## [2.2.3](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.2.2...@standardnotes/authenticator@2.2.3) (2022-07-13)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.2.2](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.2.1...@standardnotes/authenticator@2.2.2) (2022-07-06)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.2.1](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.2.0...@standardnotes/authenticator@2.2.1) (2022-06-30)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+# [2.2.0](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.1.2...@standardnotes/authenticator@2.2.0) (2022-06-29)
+
+### Features
+
+* deprecated editors ([#1166](https://github.com/standardnotes/app/issues/1166)) ([60ca415](https://github.com/standardnotes/app/commit/60ca4150446f9a14bb6a31416686c6d07a7d0cd9))
+
+## [2.1.2](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.1.2-alpha.0...@standardnotes/authenticator@2.1.2) (2022-06-23)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.1.2-alpha.0](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.1.1...@standardnotes/authenticator@2.1.2-alpha.0) (2022-06-23)
+
+### Bug Fixes
+
+* **components:** disable minification in themes build due to limitations in mobile css parser ([#1143](https://github.com/standardnotes/app/issues/1143)) ([2d069fd](https://github.com/standardnotes/app/commit/2d069fd4bdca95d857ba20b5f3c946db1ae1735a))
+
+## [2.1.1](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.1.1-alpha.0...@standardnotes/authenticator@2.1.1) (2022-06-23)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.1.1-alpha.0](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.1.0...@standardnotes/authenticator@2.1.1-alpha.0) (2022-06-23)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+# [2.1.0](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.1.0-alpha.0...@standardnotes/authenticator@2.1.0) (2022-06-22)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+# [2.1.0-alpha.0](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.0.14...@standardnotes/authenticator@2.1.0-alpha.0) (2022-06-22)
+
+### Bug Fixes
+
+* components scripts ([#1136](https://github.com/standardnotes/app/issues/1136)) ([e80b4d0](https://github.com/standardnotes/app/commit/e80b4d0ffad495c758b593c30e1c4c754dda9b7e))
+
+### Features
+
+* optional secret field ([#1115](https://github.com/standardnotes/app/issues/1115)) ([7c0938b](https://github.com/standardnotes/app/commit/7c0938b877f21787dd53fbf46e591487ef02a1c8))
+
+## [2.0.14](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.0.14-alpha.0...@standardnotes/authenticator@2.0.14) (2022-06-18)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.0.14-alpha.0](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.0.13...@standardnotes/authenticator@2.0.14-alpha.0) (2022-06-18)
+
+### Bug Fixes
+
+* plus editor icons ([#1120](https://github.com/standardnotes/app/issues/1120)) ([ba65948](https://github.com/standardnotes/app/commit/ba65948364a3fca7bfa5005c56802102c73ccd99))
+
+## 2.0.13 (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## 2.0.12 (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.0.11](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.0.11-alpha.3...@standardnotes/authenticator@2.0.11) (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## [2.0.11-alpha.3](https://github.com/standardnotes/app/compare/@standardnotes/authenticator@2.0.11-alpha.2...@standardnotes/authenticator@2.0.11-alpha.3) (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## 2.0.11-alpha.2 (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## 2.0.11-alpha.1 (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/authenticator
+
+## 2.0.11-alpha.0 (2022-06-15)
+
+**Note:** Version bump only for package @standardnotes/authenticator

package/README.md

@@ -0,0 +1,7 @@
+## LICENSE
+
+As of version 2.0, TokenVault houses a public-source, but not open-source presence. This means you are free to browse the code and even use the code _privately_, but you may not redistribute, repackage, or otherwise use its public distributable/release assets on GitHub, for free or for profit.
+
+For more information, read [this blog post](https://blog.standardnotes.com/why-tokenvault-is-going-public-source/).
+
+Previous versions of TokenVault retain the license they were released with.

package/app/assets/svg/drag-indicator.svg

@@ -0,0 +1,14 @@
+<svg width="10px" height="16px" viewBox="0 0 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+    <g transform="translate(-617.000000, -246.000000)">
+      <g transform="translate(100.000000, 100.000000)">
+        <g transform="translate(510.000000, 142.000000)">
+          <g>
+            <polygon points="0 0 24 0 24 24 0 24"></polygon>
+            <path d="M11,18 C11,19.1 10.1,20 9,20 C7.9,20 7,19.1 7,18 C7,16.9 7.9,16 9,16 C10.1,16 11,16.9 11,18 Z M9,10 C7.9,10 7,10.9 7,12 C7,13.1 7.9,14 9,14 C10.1,14 11,13.1 11,12 C11,10.9 10.1,10 9,10 Z M9,4 C7.9,4 7,4.9 7,6 C7,7.1 7.9,8 9,8 C10.1,8 11,7.1 11,6 C11,4.9 10.1,4 9,4 Z M15,8 C16.1,8 17,7.1 17,6 C17,4.9 16.1,4 15,4 C13.9,4 13,4.9 13,6 C13,7.1 13.9,8 15,8 Z M15,10 C13.9,10 13,10.9 13,12 C13,13.1 13.9,14 15,14 C16.1,14 17,13.1 17,12 C17,10.9 16.1,10 15,10 Z M15,16 C13.9,16 13,16.9 13,18 C13,19.1 13.9,20 15,20 C16.1,20 17,19.1 17,18 C17,16.9 16.1,16 15,16 Z" fill="currentColor"></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/app/assets/svg/palette.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.5833 8C12.2518 8 11.9339 7.8683 11.6995 7.63388C11.465 7.39946 11.3333 7.08152 11.3333 6.75C11.3333 6.41848 11.465 6.10054 11.6995 5.86612C11.9339 5.6317 12.2518 5.5 12.5833 5.5C12.9149 5.5 13.2328 5.6317 13.4672 5.86612C13.7016 6.10054 13.8333 6.41848 13.8333 6.75C13.8333 7.08152 13.7016 7.39946 13.4672 7.63388C13.2328 7.8683 12.9149 8 12.5833 8ZM10.0833 4.66667C9.75181 4.66667 9.43387 4.53497 9.19945 4.30055C8.96503 4.06613 8.83333 3.74819 8.83333 3.41667C8.83333 3.08515 8.96503 2.7672 9.19945 2.53278C9.43387 2.29836 9.75181 2.16667 10.0833 2.16667C10.4149 2.16667 10.7328 2.29836 10.9672 2.53278C11.2016 2.7672 11.3333 3.08515 11.3333 3.41667C11.3333 3.74819 11.2016 4.06613 10.9672 4.30055C10.7328 4.53497 10.4149 4.66667 10.0833 4.66667ZM5.91667 4.66667C5.58515 4.66667 5.2672 4.53497 5.03278 4.30055C4.79836 4.06613 4.66667 3.74819 4.66667 3.41667C4.66667 3.08515 4.79836 2.7672 5.03278 2.53278C5.2672 2.29836 5.58515 2.16667 5.91667 2.16667C6.24819 2.16667 6.56613 2.29836 6.80055 2.53278C7.03497 2.7672 7.16667 3.08515 7.16667 3.41667C7.16667 3.74819 7.03497 4.06613 6.80055 4.30055C6.56613 4.53497 6.24819 4.66667 5.91667 4.66667ZM3.41667 8C3.08515 8 2.7672 7.8683 2.53278 7.63388C2.29836 7.39946 2.16667 7.08152 2.16667 6.75C2.16667 6.41848 2.29836 6.10054 2.53278 5.86612C2.7672 5.6317 3.08515 5.5 3.41667 5.5C3.74819 5.5 4.06613 5.6317 4.30055 5.86612C4.53497 6.10054 4.66667 6.41848 4.66667 6.75C4.66667 7.08152 4.53497 7.39946 4.30055 7.63388C4.06613 7.8683 3.74819 8 3.41667 8ZM8 0.5C6.01088 0.5 4.10322 1.29018 2.6967 2.6967C1.29018 4.10322 0.5 6.01088 0.5 8C0.5 9.98912 1.29018 11.8968 2.6967 13.3033C4.10322 14.7098 6.01088 15.5 8 15.5C8.33152 15.5 8.64946 15.3683 8.88388 15.1339C9.1183 14.8995 9.25 14.5815 9.25 14.25C9.25 13.925 9.125 13.6333 8.925 13.4167C8.73333 13.1917 8.60833 12.9 8.60833 12.5833C8.60833 12.2518 8.74003 11.9339 8.97445 11.6995C9.20887 11.465 9.52681 11.3333 9.85833 11.3333H11.3333C12.4384 11.3333 13.4982 10.8943 14.2796 10.1129C15.061 9.33154 15.5 8.27174 15.5 7.16667C15.5 3.48333 12.1417 0.5 8 0.5Z" fill="#FFF"/>
+</svg>

package/app/assets/svg/reorder-icon.svg

@@ -0,0 +1,37 @@
+<svg
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  width="12px" height="10px"
+  viewBox="0 0 300 300"
+  xmlSpace="preserve"
+>
+  <g fill="currentColor">
+    <path
+      d="M159.365,23.736v-10c0-5.523-4.477-10-10-10H10c-5.523,0-10,4.477-10,10v10c0,5.523,4.477,10,10,10h139.365
+  C154.888,33.736,159.365,29.259,159.365,23.736z"
+    />
+    <path
+      d="M130.586,66.736H10c-5.523,0-10,4.477-10,10v10c0,5.523,4.477,10,10,10h120.586c5.523,0,10-4.477,10-10v-10
+  C140.586,71.213,136.109,66.736,130.586,66.736z"
+    />
+    <path
+      d="M111.805,129.736H10c-5.523,0-10,4.477-10,10v10c0,5.523,4.477,10,10,10h101.805c5.523,0,10-4.477,10-10v-10
+  C121.805,134.213,117.328,129.736,111.805,129.736z"
+    />
+    <path
+      d="M93.025,199.736H10c-5.523,0-10,4.477-10,10v10c0,5.523,4.477,10,10,10h83.025c5.522,0,10-4.477,10-10v-10
+  C103.025,204.213,98.548,199.736,93.025,199.736z"
+    />
+    <path
+      d="M74.244,262.736H10c-5.523,0-10,4.477-10,10v10c0,5.523,4.477,10,10,10h64.244c5.522,0,10-4.477,10-10v-10
+  C84.244,267.213,79.767,262.736,74.244,262.736z"
+    />
+    <path
+      d="M298.29,216.877l-7.071-7.071c-1.875-1.875-4.419-2.929-7.071-2.929c-2.652,0-5.196,1.054-7.072,2.929l-34.393,34.393
+  V18.736c0-5.523-4.477-10-10-10h-10c-5.523,0-10,4.477-10,10v225.462l-34.393-34.393c-1.876-1.875-4.419-2.929-7.071-2.929
+  c-2.652,0-5.196,1.054-7.071,2.929l-7.072,7.071c-3.904,3.905-3.904,10.237,0,14.142l63.536,63.536
+  c1.953,1.953,4.512,2.929,7.071,2.929c2.559,0,5.119-0.976,7.071-2.929l63.536-63.536
+  C302.195,227.113,302.195,220.781,298.29,216.877z"
+    />
+  </g>
+</svg>

package/app/components/AuthEntry.jsx

@@ -0,0 +1,202 @@
+import AuthMenu from '@Components/AuthMenu'
+import CountdownPie from '@Components/CountdownPie'
+import { totp } from '@Lib/otp'
+import { getEntryColor, getVarColorForContrast, hexColorToRGB } from '@Lib/utils'
+import PropTypes from 'prop-types'
+import React from 'react'
+import DragIndicator from '../assets/svg/drag-indicator.svg'
+
+export default class AuthEntry extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      token: '',
+      timeLeft: 0,
+      entryStyle: {
+        color: '',
+        backgroundColor: '',
+      },
+    }
+
+    this.updateToken()
+  }
+
+  getTimeLeft() {
+    const seconds = new Date().getSeconds()
+    return seconds > 29 ? 60 - seconds : 30 - seconds
+  }
+
+  updateToken = async () => {
+    const { secret } = this.props.entry
+    if (!secret) {
+      return
+    }
+
+    const token = await totp.gen(secret)
+    const timeLeft = this.getTimeLeft()
+    this.setState({
+      token,
+      timeLeft,
+    })
+
+    this.timer = setTimeout(this.updateToken, timeLeft * 1000)
+  }
+
+  componentDidMount() {
+    this.updateEntryStyle()
+  }
+
+  componentDidUpdate(prevProps) {
+    // If the secret changed make sure to recalculate token
+    if (prevProps.entry.secret !== this.props.entry.secret) {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(this.updateToken, 0)
+    }
+
+    if (prevProps.lastUpdated !== this.props.lastUpdated) {
+      this.updateEntryStyle(true)
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer)
+  }
+
+  handleInputChange = (event) => {
+    const target = event.target
+    const name = target.name
+
+    this.props.onEntryChange({
+      id: this.props.id,
+      name,
+      value: target.value,
+    })
+  }
+
+  copyToClipboard = (value) => {
+    const textField = document.createElement('textarea')
+    textField.innerText = value
+    document.body.appendChild(textField)
+    textField.select()
+    document.execCommand('copy')
+    textField.remove()
+    this.props.onCopyValue()
+  }
+
+  updateEntryStyle = (useDelay = false) => {
+    /**
+     * A short amount of time to wait in order to prevent reading
+     * stale information from the DOM after a theme is activated.
+     */
+    const DELAY_BEFORE_READING_PROPERTIES = useDelay ? 0 : 50
+
+    setTimeout(() => {
+      const { entryStyle } = this.state
+      const entryColor = getEntryColor(document, this.props.entry)
+
+      if (entryColor) {
+        // The background color for the entry.
+        entryStyle.backgroundColor = entryColor
+
+        const rgbColor = hexColorToRGB(entryColor)
+        const varColor = getVarColorForContrast(rgbColor)
+
+        // The foreground color for the entry.
+        entryStyle.color = `var(${varColor})`
+      }
+
+      this.setState({
+        entryStyle,
+      })
+    }, DELAY_BEFORE_READING_PROPERTIES)
+  }
+
+  render() {
+    const { service, account, notes, password, secret } = this.props.entry
+    const { id, onEdit, onRemove, canEdit, style, innerRef, ...divProps } = this.props
+    const { token, timeLeft, entryStyle } = this.state
+
+    delete divProps.onCopyValue
+    delete divProps.lastUpdated
+
+    return (
+      <div
+        {...divProps}
+        className="sk-notification sk-base-custom"
+        style={{
+          ...entryStyle,
+          ...style,
+        }}
+        ref={innerRef}
+      >
+        <div className="auth-entry">
+          {canEdit && (
+            <div className="auth-drag-indicator-container">
+              <DragIndicator className="grab-cursor" />
+            </div>
+          )}
+          <div className="auth-details">
+            <div className="auth-info">
+              <div className="auth-service">{service}</div>
+              <div className="auth-account">{account}</div>
+              <div className="auth-optional">
+                {notes && (
+                  <div className="auth-notes-row">
+                    <div className="auth-notes">{notes}</div>
+                  </div>
+                )}
+                {password && (
+                  <div className="auth-password-row">
+                    <div className="auth-password" onClick={() => this.copyToClipboard(password)}>
+                      {'•'.repeat(password.length)}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+            {secret && (
+              <div className="auth-token-info">
+                <div className="auth-token" onClick={() => this.copyToClipboard(token)}>
+                  <div>{token.slice(0, 3)}</div>
+                  <div>{token.slice(3, 6)}</div>
+                </div>
+                <div className="auth-countdown">
+                  <CountdownPie
+                    token={token}
+                    timeLeft={timeLeft}
+                    total={30}
+                    bgColor={entryStyle.backgroundColor}
+                    fgColor={entryStyle.color}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+          {canEdit && (
+            <div className="auth-options">
+              <AuthMenu
+                onEdit={onEdit.bind(this, id)}
+                onRemove={onRemove.bind(this, id)}
+                buttonColor={entryStyle.color}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+}
+
+AuthEntry.propTypes = {
+  id: PropTypes.any.isRequired,
+  entry: PropTypes.object.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onEntryChange: PropTypes.func,
+  onCopyValue: PropTypes.func.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+  innerRef: PropTypes.func.isRequired,
+  lastUpdated: PropTypes.number.isRequired,
+  style: PropTypes.object.isRequired,
+}

package/app/components/AuthMenu.jsx

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export default class AuthMenu extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      show: false,
+    }
+  }
+
+  onToggle = () => {
+    this.setState({
+      show: !this.state.show,
+    })
+  }
+
+  onEdit = () => {
+    this.onToggle()
+    this.props.onEdit()
+  }
+
+  onRemove = () => {
+    this.onToggle()
+    this.props.onRemove()
+  }
+
+  render() {
+    const { buttonColor } = this.props
+
+    const buttonStyle = {}
+    if (buttonColor) {
+      buttonStyle.color = buttonColor
+    }
+
+    return (
+      <div className="auth-menu">
+        <div className="sk-button" onClick={this.onToggle} style={buttonStyle}>
+          <div className="sk-label">•••</div>
+        </div>
+        {this.state.show &&
+          ((<div className="auth-overlay" onClick={this.onToggle} />),
+          (
+            <div className="sk-menu-panel">
+              <div className="sk-menu-panel-row" onClick={this.onEdit}>
+                <div className="sk-label">Edit</div>
+              </div>
+              <div className="sk-menu-panel-row" onClick={this.onRemove}>
+                <div className="sk-label">Remove</div>
+              </div>
+            </div>
+          ))}
+      </div>
+    )
+  }
+}
+
+AuthMenu.propTypes = {
+  onEdit: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  buttonColor: PropTypes.string,
+}

package/app/components/ConfirmDialog.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+
+const ConfirmDialog = ({ title, message, onConfirm, onCancel }) => (
+  <div className="auth-overlay">
+    <div className="auth-dialog sk-panel">
+      <div className="sk-panel-header">
+        <div className="sk-panel-header-title">{title}</div>
+      </div>
+      <div className="sk-panel-content">
+        <div className="sk-panel-section sk-panel-hero">
+          <div className="sk-panel-row">
+            <div className="sk-h1">{message}</div>
+          </div>
+        </div>
+      </div>
+      <div className="sk-panel-footer">
+        <div className="sk-button-group stretch">
+          <div className="sk-button neutral" onClick={onCancel}>
+            <div className="sk-label">Cancel</div>
+          </div>
+          <div className="sk-button info" onClick={onConfirm}>
+            <div className="sk-label">Confirm</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+ConfirmDialog.propTypes = {
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+}
+
+export default ConfirmDialog

package/app/components/CopyNotification.jsx

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types'
+
+const CopyNotification = ({ isVisible }) => (
+  <div className={`auth-copy-notification ${isVisible ? 'visible' : 'hidden'}`}>
+    <div className="sk-panel">
+      <div className="sk-font-small sk-bold">Copied value to clipboard.</div>
+    </div>
+  </div>
+)
+
+CopyNotification.propTypes = {
+  isVisible: PropTypes.bool.isRequired,
+}
+
+export default CopyNotification