Work on set password

src/components/IsUnlocked.js

@@ -1,10 +1,10 @@
 // @flow
 
+import bcrypt from 'bcryptjs'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { compose } from 'redux'
 import { translate } from 'react-i18next'
-import bcrypt from 'bcryptjs'
 import type { Account } from '@ledgerhq/wallet-common/lib/types'
 
 import type { Settings, T } from 'types/common'

src/components/SettingsPage/PasswordModal.js

@@ -1,6 +1,10 @@
 // @flow
 
 import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import bcrypt from 'bcryptjs'
+
+import { unlock } from 'reducers/application'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
@@ -10,68 +14,128 @@ import { Modal, ModalContent, ModalBody, ModalTitle, ModalFooter } from 'compone
 
 import type { T } from 'types/common'
 
+const mapDispatchToProps = {
+  unlock,
+}
+
 type Props = {
   t: T,
   onClose: Function,
+  unlock: Function,
+  isPasswordEnabled: boolean,
+  currentPasswordHash: string,
+  onChangePassword: Function,
+}
+
+type State = {
+  currentPassword: string,
+  newPassword: string,
+  repeatPassword: string,
 }
 
-class PasswordModal extends PureComponent<Props> {
+class PasswordModal extends PureComponent<Props, State> {
+  state = {
+    currentPassword: '',
+    newPassword: '',
+    repeatPassword: '',
+  }
+
+  handleSave = (e: SyntheticEvent<HTMLFormElement>) => {
+    if (e) {
+      e.preventDefault()
+    }
+    if (!this.isValid()) {
+      return
+    }
+    const { currentPassword, newPassword, repeatPassword } = this.state
+    const { isPasswordEnabled, currentPasswordHash, onChangePassword } = this.props
+    if (isPasswordEnabled) {
+      const calculatedPasswordHash = bcrypt.hashSync(currentPassword, 8)
+      if (calculatedPasswordHash !== currentPasswordHash) {
+        return
+      }
+      onChangePassword(newPassword)
+    } else if (newPassword === repeatPassword) {
+      onChangePassword(newPassword)
+    }
+  }
+
+  handleInputChange = key => value => this.setState({ [key]: value })
+
+  isValid = () => {
+    const { newPassword, repeatPassword } = this.state
+    return newPassword && newPassword === repeatPassword
+  }
+
   render() {
-    const { t, onClose, ...props } = this.props
+    const { t, isPasswordEnabled, onClose, ...props } = this.props
+    const isValid = this.isValid()
     return (
       <Modal
         {...props}
         onClose={onClose}
         render={({ onClose }) => (
-          <ModalBody onClose={onClose}>
-            <ModalTitle>{t('settings:profile.passwordModalTitle')}</ModalTitle>
-            <ModalContent>
-              <Box ff="Museo Sans|Regular" color="dark" textAlign="center" mb={2} mt={3}>
-                {t('settings:profile.passwordModalSubtitle')}
-              </Box>
-              <Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center" px={4}>
-                {t('settings:profile.passwordModalDesc')}
-                <Box px={7} mt={4} flow={3}>
-                  <Box flow={1}>
-                    <Label htmlFor="password">
-                      {t('settings:profile.passwordModalPasswordInput')}
-                    </Label>
-                    <Input
-                      placeholder={t('settings:profile.passwordModalPasswordInput')}
-                      autoFocus
-                      id="password"
-                    />
-                  </Box>
-                  <Box flow={1}>
-                    <Label htmlFor="newPassword">
-                      {t('settings:profile.passwordModalNewPasswordInput')}
-                    </Label>
-                    <Input
-                      placeholder={t('settings:profile.passwordModalNewPasswordInput')}
-                      id="newPassword"
-                    />
-                  </Box>
-                  <Box flow={1}>
-                    <Label htmlFor="repeatPassword">
-                      {t('settings:profile.passwordModalRepeatPasswordInput')}
-                    </Label>
-                    <Input
-                      placeholder={t('settings:profile.passwordModalRepeatPasswordInput')}
-                      id="repeatPassword"
-                    />
+          <form onSubmit={this.handleSave}>
+            <ModalBody onClose={onClose}>
+              <ModalTitle>{t('settings:profile.passwordModalTitle')}</ModalTitle>
+              <ModalContent>
+                <Box ff="Museo Sans|Regular" color="dark" textAlign="center" mb={2} mt={3}>
+                  {t('settings:profile.passwordModalSubtitle')}
+                </Box>
+                <Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center" px={4}>
+                  {t('settings:profile.passwordModalDesc')}
+                  <Box px={7} mt={4} flow={3}>
+                    {isPasswordEnabled && (
+                      <Box flow={1}>
+                        <Label htmlFor="password">
+                          {t('settings:profile.passwordModalPasswordInput')}
+                        </Label>
+                        <Input
+                          type="password"
+                          placeholder={t('settings:profile.passwordModalPasswordInput')}
+                          autoFocus
+                          id="password"
+                          onChange={this.handleInputChange('currentPassword')}
+                        />
+                      </Box>
+                    )}
+                    <Box flow={1}>
+                      <Label htmlFor="newPassword">
+                        {t('settings:profile.passwordModalNewPasswordInput')}
+                      </Label>
+                      <Input
+                        type="password"
+                        placeholder={t('settings:profile.passwordModalNewPasswordInput')}
+                        id="newPassword"
+                        onChange={this.handleInputChange('newPassword')}
+                      />
+                    </Box>
+                    <Box flow={1}>
+                      <Label htmlFor="repeatPassword">
+                        {t('settings:profile.passwordModalRepeatPasswordInput')}
+                      </Label>
+                      <Input
+                        type="password"
+                        placeholder={t('settings:profile.passwordModalRepeatPasswordInput')}
+                        id="repeatPassword"
+                        onChange={this.handleInputChange('repeatPassword')}
+                      />
+                    </Box>
                   </Box>
                 </Box>
-              </Box>
-            </ModalContent>
-            <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
-              <Button onClick={onClose}>{t('common:cancel')}</Button>
-              <Button primary>{t('settings:profile.passwordModalSave')}</Button>
-            </ModalFooter>
-          </ModalBody>
+              </ModalContent>
+              <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
+                <Button onClick={onClose}>{t('common:cancel')}</Button>
+                <Button primary onClick={this.handleSave} disabled={!isValid}>
+                  {t('settings:profile.passwordModalSave')}
+                </Button>
+              </ModalFooter>
+            </ModalBody>
+          </form>
         )}
       />
     )
   }
 }
 
-export default PasswordModal
+export default connect(null, mapDispatchToProps)(PasswordModal)

src/components/SettingsPage/index.js

@@ -43,7 +43,7 @@ type State = {
 
 class SettingsPage extends PureComponent<Props, State> {
   state = {
-    tab: 0,
+    tab: 2,
   }
 
   _items = []

src/components/SettingsPage/sections/Profile.js

@@ -3,11 +3,12 @@
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import { remote } from 'electron'
+import bcrypt from 'bcryptjs'
 
 import type { Settings, T } from 'types/common'
 
 import { unlock } from 'reducers/application'
-import db from 'helpers/db'
+import db, { setEncryptionKey } from 'helpers/db'
 
 import Input from 'components/base/Input'
 import CheckBox from 'components/base/CheckBox'
@@ -32,7 +33,6 @@ type Props = {
   t: T,
   settings: Settings,
   saveSettings: Function,
-  // unlock: Function,
 }
 
 type State = {
@@ -73,6 +73,21 @@ class TabProfile extends PureComponent<Props, State> {
     }
   }
 
+  handleChangePassword = (password: ?string) => {
+    const { saveSettings, unlock } = this.props
+    const hash = bcrypt.hashSync(password, 8)
+    setEncryptionKey('accounts', password)
+    window.requestIdleCallback(() => {
+      saveSettings({
+        password: {
+          isEnabled: hash !== undefined,
+          value: hash,
+        },
+      })
+      unlock()
+    })
+  }
+
   render() {
     const { t, settings } = this.props
     const { username, isHardResetModalOpened, isPasswordModalOpened } = this.state
@@ -125,8 +140,11 @@ class TabProfile extends PureComponent<Props, State> {
 
         <PasswordModal
           t={t}
-          isOpened={isPasswordModalOpened}
+          isOpened={true || isPasswordModalOpened}
           onClose={this.handleClosePasswordModal}
+          onChangePassword={this.handleChangePassword}
+          isPasswordEnabled={isPasswordEnabled}
+          currentPasswordHash={settings.password.value}
         />
       </Section>
     )

src/reducers/settings.js

@@ -15,7 +15,8 @@ const defaultState: SettingsState = {
   language: 'en',
   orderAccounts: 'balance|asc',
   password: {
-    state: false,
+    isEnabled: false,
+    value: '',
   },
 }
 
@@ -35,7 +36,7 @@ const handlers: Object = {
 }
 
 export const hasPassword = (state: Object) =>
-  get(state.settings, 'password.state', defaultState.password.state)
+  get(state.settings, 'password.isEnabled', defaultState.password.isEnabled)
 
 export const getCounterValueCode = (state: Object) =>
   get(state.settings, 'counterValue', defaultState.counterValue)