Integrate the PasswordModal

src/components/SettingsPage/PasswordModal.js

@@ -0,0 +1,77 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import Input from 'components/base/Input'
+import Label from 'components/base/Label'
+import { Modal, ModalContent, ModalBody, ModalTitle, ModalFooter } from 'components/base/Modal'
+
+import type { T } from 'types/common'
+
+type Props = {
+  t: T,
+  onClose: Function,
+}
+
+class PasswordModal extends PureComponent<Props> {
+  render() {
+    const { t, onClose, ...props } = this.props
+    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"
+                    />
+                  </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>
+        )}
+      />
+    )
+  }
+}
+
+export default PasswordModal

src/components/SettingsPage/sections/Profile.js

@@ -10,9 +10,12 @@ import { unlock } from 'reducers/application'
 import db from 'helpers/db'
 
 import Input from 'components/base/Input'
+import CheckBox from 'components/base/CheckBox'
+import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import { ConfirmModal } from 'components/base/Modal'
 import IconUser from 'icons/User'
+import PasswordModal from '../PasswordModal'
 
 import {
   SettingsSection as Section,
@@ -21,10 +24,6 @@ import {
   SettingsSectionRow as Row,
 } from '../SettingsSection'
 
-const mapStateToProps = state => ({
-  username: state.settings,
-})
-
 const mapDispatchToProps = {
   unlock,
 }
@@ -57,6 +56,8 @@ class TabProfile extends PureComponent<Props, State> {
 
   handleOpenHardResetModal = () => this.setState({ isHardResetModalOpened: true })
   handleCloseHardResetModal = () => this.setState({ isHardResetModalOpened: false })
+  handleOpenPasswordModal = () => this.setState({ isPasswordModalOpened: true })
+  handleClosePasswordModal = () => this.setState({ isPasswordModalOpened: false })
 
   handleHardReset = () => {
     db.resetAll()
@@ -64,10 +65,18 @@ class TabProfile extends PureComponent<Props, State> {
     remote.app.exit()
   }
 
-  render() {
-    const { t } = this.props
-    const { username, isHardResetModalOpened } = this.state
+  handleChangePasswordCheck = isChecked => {
+    if (isChecked) {
+      this.handleOpenPasswordModal()
+    } else {
+      // console.log(`decrypting data`)
+    }
+  }
 
+  render() {
+    const { t, settings } = this.props
+    const { username, isHardResetModalOpened, isPasswordModalOpened } = this.state
+    const isPasswordEnabled = settings.password.isEnabled === true
     return (
       <Section>
         <Header
@@ -85,7 +94,10 @@ class TabProfile extends PureComponent<Props, State> {
             />
           </Row>
           <Row title={t('settings:profile.password')} desc={t('settings:profile.passwordDesc')}>
-            {'-'}
+            <Box horizontal flow={2} align="center">
+              {isPasswordEnabled && <Button>{t('settings:profile.changePassword')}</Button>}
+              <CheckBox isChecked={isPasswordEnabled} onChange={this.handleChangePasswordCheck} />
+            </Box>
           </Row>
           <Row title={t('settings:profile.sync')} desc={t('settings:profile.syncDesc')}>
             <Button primary>{t('settings:profile.sync')}</Button>
@@ -110,9 +122,15 @@ class TabProfile extends PureComponent<Props, State> {
           subTitle={t('settings:hardResetModal.subTitle')}
           desc={t('settings:hardResetModal.desc')}
         />
+
+        <PasswordModal
+          t={t}
+          isOpened={isPasswordModalOpened}
+          onClose={this.handleClosePasswordModal}
+        />
       </Section>
     )
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(TabProfile)
+export default connect(null, mapDispatchToProps)(TabProfile)

src/components/base/CheckBox/index.js

@@ -24,13 +24,13 @@ const Base = styled(Tabbable).attrs({
 `
 
 const Ball = styled.div`
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   background: white;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
   transition: 250ms ease-in-out transform;
-  transform: translate3d(${p => (p.isChecked ? '28px' : '0')}, 0, 0);
+  transform: translate3d(${p => (p.isChecked ? '28px' : '2px')}, 0, 0);
 `
 
 type Props = {

src/components/base/Label.js

@@ -8,6 +8,7 @@ export default styled.label.attrs({
   ff: 'Museo Sans|Regular',
   color: 'grey',
   align: 'center',
+  display: 'block',
 })`
   ${alignItems};
   ${color};

static/i18n/en/settings.yml

@@ -27,6 +27,14 @@ profile:
   usernameDesc: Lorem ipsum dolor sit amet
   password: Password
   passwordDesc: Lorem ipsum dolor sit amet
+  changePassword: Change password
+  passwordModalTitle: Password
+  passwordModalSubtitle: Set a password to lock your application
+  passwordModalDesc: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non nibh diam.
+  passwordModalPasswordInput: Current password
+  passwordModalNewPasswordInput: New password
+  passwordModalRepeatPasswordInput: Repeat password
+  passwordModalSave: Save
   sync: Sync accounts
   syncDesc: Lorem ipsum dolor sit amet
   export: Export logs