From 621b0cf5b565e214a698d9967c74b2831f4d3eee Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 7 Feb 2018 17:11:08 +0100
Subject: [PATCH] Use CheckBox component inside Profile tab

---
 src/components/SettingsPage/Profile.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/SettingsPage/Profile.js b/src/components/SettingsPage/Profile.js
index 6591e401..41e97c18 100644
--- a/src/components/SettingsPage/Profile.js
+++ b/src/components/SettingsPage/Profile.js
@@ -15,6 +15,7 @@ import { unlock } from 'reducers/application'
 
 import Box, { Card } from 'components/base/Box'
 import Input from 'components/base/Input'
+import CheckBox from 'components/base/CheckBox'
 import Button from 'components/base/Button'
 import Label from 'components/base/Label'
 
@@ -80,17 +81,21 @@ class TabProfile extends PureComponent<Props, State> {
 
   render() {
     const { inputValue } = this.state
+
+    const isPasswordChecked = get(inputValue, 'password.state', false)
     return (
       <form onSubmit={this.handleSubmit}>
         <Card flow={3}>
           <label>
-            <Box horizontal align="center" flow={1} style={{ cursor: 'pointer' }}>
-              <input
-                type="checkbox"
-                checked={get(inputValue, 'password.state', false)}
-                onChange={e => this.handleChangeInput('password.state')(e.target.checked)}
-              />
-              <div>{' with password'}</div>
+            <Box
+              horizontal
+              align="center"
+              flow={1}
+              style={{ cursor: 'pointer' }}
+              onClick={() => this.handleChangeInput('password.state')(!isPasswordChecked)}
+            >
+              <CheckBox isChecked={isPasswordChecked} />
+              <div>{' Protect local data with a password'}</div>
             </Box>
           </label>
           {get(inputValue, 'password.state') === true && (