Add lock application button

src/components/AppRegionDrag.js

@@ -9,4 +9,5 @@ export default styled.div`
   position: absolute;
   right: 0;
   top: 0;
+  z-index: -1;
 `

src/components/IsUnlocked/index.js

@@ -67,6 +67,8 @@ class IsUnlocked extends PureComponent<Props, State> {
       setEncryptionKey('accounts', inputValue.password)
       fetchAccounts()
       unlock()
+
+      this.handleChangeInput('password')('')
     }
   }
 

src/components/SettingsPage.js

@@ -14,6 +14,7 @@ import type { MapStateToProps } from 'react-redux'
 import type { Settings } from 'types/common'
 
 import { saveSettings } from 'actions/settings'
+import { unlock } from 'reducers/application'
 
 import Box from 'components/base/Box'
 import Input from 'components/base/Input'
@@ -29,6 +30,7 @@ type InputValue = Settings
 type Props = {
   settings: Settings,
   saveSettings: Function,
+  unlock: Function,
 }
 type State = {
   inputValue: InputValue,
@@ -40,6 +42,7 @@ const mapStateToProps: MapStateToProps<*, *, *> = state => ({
 
 const mapDispatchToProps = {
   saveSettings,
+  unlock,
 }
 
 class SettingsPage extends PureComponent<Props, State> {
@@ -63,7 +66,7 @@ class SettingsPage extends PureComponent<Props, State> {
   handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
 
-    const { saveSettings } = this.props
+    const { saveSettings, unlock } = this.props
     const { inputValue } = this.state
 
     const settings = {
@@ -80,8 +83,11 @@ class SettingsPage extends PureComponent<Props, State> {
       settings.password.value = bcrypt.hashSync(password.value, 8)
 
       setEncryptionKey('accounts', password.value)
+    } else {
+      setEncryptionKey('accounts', undefined)
     }
 
+    unlock()
     saveSettings(settings)
   }
 

src/components/TopBar.js

@@ -8,8 +8,9 @@ import type { Device, Devices } from 'types/common'
 import type { SetCurrentDevice } from 'actions/devices'
 
 import { getDevices, getCurrentDevice } from 'reducers/devices'
-
 import { setCurrentDevice } from 'actions/devices'
+import { lock } from 'reducers/application'
+import { hasPassword } from 'reducers/settings'
 
 import Box from 'components/base/Box'
 import Overlay from 'components/base/Overlay'
@@ -17,18 +18,21 @@ import Overlay from 'components/base/Overlay'
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   devices: getDevices(state),
   currentDevice: getCurrentDevice(state),
+  hasPassword: hasPassword(state),
 })
 
 const mapDispatchToProps: MapDispatchToProps<*, *, *> = {
   setCurrentDevice,
+  lock,
 }
 
 type Props = {
+  setCurrentDevice: SetCurrentDevice,
+  lock: Function,
+  hasPassword: boolean,
   devices: Devices,
   currentDevice: Device,
-  setCurrentDevice: SetCurrentDevice,
 }
-
 type State = {
   changeDevice: boolean,
 }
@@ -68,8 +72,10 @@ class TopBar extends PureComponent<Props, State> {
     })
   }
 
+  handleLock = () => this.props.lock()
+
   render() {
-    const { devices } = this.props
+    const { devices, hasPassword } = this.props
     const { changeDevice } = this.state
 
     return (
@@ -88,7 +94,15 @@ class TopBar extends PureComponent<Props, State> {
             ))}
           </Overlay>
         )}
-        <Box bg="white" noShrink style={{ height: 60 }} justify="center" align="flex-end">
+        <Box
+          bg="white"
+          noShrink
+          style={{ height: 60 }}
+          justify="flex-end"
+          align="center"
+          horizontal
+        >
+          {hasPassword && <LockApplication onLock={this.handleLock} />}
           <CountDevices count={devices.length} onChangeDevice={this.handleChangeDevice} />
         </Box>
       </Fragment>
@@ -112,6 +126,20 @@ const CountDevices = ({ count, onChangeDevice } = { count: Number, onChangeDevic
   </Box>
 )
 
+const LockApplication = ({ onLock }: { onLock: Function }) => (
+  <Box
+    relative
+    color="night"
+    mr={20}
+    horizontal
+    flow={10}
+    onClick={onLock}
+    style={{ cursor: 'pointer' }}
+  >
+    <LockIcon height={20} width={20} />
+  </Box>
+)
+
 const DeviceIcon = props => (
   <svg {...props} viewBox="0 0 19.781 19.781">
     <path
@@ -121,4 +149,17 @@ const DeviceIcon = props => (
   </svg>
 )
 
+const LockIcon = props => (
+  <svg {...props} viewBox="0 0 482.8 482.8">
+    <path
+      d="M395.95 210.4h-7.1v-62.9c0-81.3-66.1-147.5-147.5-147.5-81.3 0-147.5 66.1-147.5 147.5 0 7.5 6 13.5 13.5 13.5s13.5-6 13.5-13.5c0-66.4 54-120.5 120.5-120.5 66.4 0 120.5 54 120.5 120.5v62.9h-275c-14.4 0-26.1 11.7-26.1 26.1v168.1c0 43.1 35.1 78.2 78.2 78.2h204.9c43.1 0 78.2-35.1 78.2-78.2V236.5c0-14.4-11.7-26.1-26.1-26.1zm-.9 194.2c0 28.2-22.9 51.2-51.2 51.2h-204.8c-28.2 0-51.2-22.9-51.2-51.2V237.4h307.2v167.2z"
+      fill="currentColor"
+    />
+    <path
+      d="M241.45 399.1c27.9 0 50.5-22.7 50.5-50.5 0-27.9-22.7-50.5-50.5-50.5-27.9 0-50.5 22.7-50.5 50.5s22.6 50.5 50.5 50.5zm0-74.1c13 0 23.5 10.6 23.5 23.5s-10.5 23.6-23.5 23.6-23.5-10.6-23.5-23.5 10.5-23.6 23.5-23.6z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
 export default connect(mapStateToProps, mapDispatchToProps)(TopBar)

src/reducers/application.js

@@ -2,7 +2,7 @@
 
 import { handleActions, createAction } from 'redux-actions'
 
-import get from 'lodash/get'
+import { hasPassword } from 'reducers/settings'
 
 export type ApplicationState = {}
 
@@ -23,9 +23,7 @@ export const lock = createAction('APPLICATION_SET_DATA', () => ({ isLocked: true
 // Selectors
 
 export const isLocked = (state: Object) =>
-  state.application.isLocked === undefined
-    ? get(state.settings, 'password.state', false)
-    : state.application.isLocked
+  state.application.isLocked === undefined ? hasPassword(state) : state.application.isLocked
 
 // Exporting reducer
 

src/reducers/settings.js

@@ -2,6 +2,8 @@
 
 import { handleActions } from 'redux-actions'
 
+import get from 'lodash/get'
+
 import type { Settings } from 'types/common'
 
 export type SettingsState = Object
@@ -13,4 +15,6 @@ const handlers: Object = {
   FETCH_SETTINGS: (state: SettingsState, { payload: settings }: { payload: Settings }) => settings,
 }
 
+export const hasPassword = (state: Object) => get(state.settings, 'password.state', false)
+
 export default handleActions(handlers, state)