Browse Source

Merge pull request #33 from loeck/master

Add lock application button
master
Meriadec Pillet 7 years ago
committed by GitHub
parent
commit
666c7546d8
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      src/components/AppRegionDrag.js
  2. 2
      src/components/IsUnlocked/index.js
  3. 8
      src/components/SettingsPage.js
  4. 51
      src/components/TopBar.js
  5. 6
      src/reducers/application.js
  6. 4
      src/reducers/settings.js

1
src/components/AppRegionDrag.js

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

2
src/components/IsUnlocked/index.js

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

8
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)
}

51
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)

6
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

4
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)

Loading…
Cancel
Save