Logout on all devices for password change form

src/components/profile/changePassword/ChangePassword.jsx

@@ -4,7 +4,7 @@ import { FormattedMessage as Message } from 'react-intl';
 import { Link } from 'react-router';
 import Helmet from 'react-helmet';
 
-import { LabeledInput, Button } from 'components/ui/Form';
+import { LabeledInput, Button, Checkbox } from 'components/ui/Form';
 import FormModel from 'models/Form';
 import { Form } from 'components/ui/Form';
 
@@ -72,6 +72,14 @@ export default class ChangePassword extends Component {
                                     label={messages.repeatNewPasswordLabel}
                                 />
                             </div>
+
+                            <div className={styles.formRow}>
+                                <Checkbox {...form.bindField('logoutAll')}
+                                    defaultChecked
+                                    skin="light"
+                                    label={messages.logoutOnAllDevices}
+                                />
+                            </div>
                         </div>
 
                         <Button color="green" block label={messages.changePasswordButton} />

src/components/profile/changePassword/ChangePassword.messages.js

@@ -35,5 +35,9 @@ export default defineMessages({
         id: 'repeatNewPasswordLabel',
         defaultMessage: 'Repeat the password:'
         // defaultMessage: 'Повторите указанный пароль:'
+    },
+    logoutOnAllDevices: {
+        id: 'logoutOnAllDevices',
+        defaultMessage: 'Logout on all devices'
     }
 });

src/components/ui/Form.jsx

@@ -131,14 +131,29 @@ export class Checkbox extends Component {
     static displayName = 'Checkbox';
 
     static propTypes = {
-        color: PropTypes.oneOf(['green', 'blue', 'red'])
+        color: PropTypes.oneOf(['green', 'blue', 'red']),
+        skin: PropTypes.oneOf(['dark', 'light']),
+        label: PropTypes.oneOfType([
+            PropTypes.shape({
+                id: PropTypes.string
+            }),
+            PropTypes.string
+        ]).isRequired
+    };
+
+    static contextTypes = {
+        intl: intlShape.isRequired
     };
 
     render() {
-        const { label, color = 'green' } = this.props;
+        let { label, color = 'green', skin = 'dark' } = this.props;
+
+        if (label && label.id) {
+            label = this.context.intl.formatMessage(label);
+        }
 
         return (
-            <div className={styles[`${color}CheckboxRow`]}>
+            <div className={classNames(styles[`${color}CheckboxRow`], styles[`${skin}CheckboxRow`])}>
                 <label className={styles.checkboxContainer}>
                     <input ref={this.setEl} className={styles.checkboxInput} type="checkbox" {...this.props} />
                     <div className={styles.checkbox} />

src/components/ui/form.scss

@@ -171,7 +171,6 @@
     font-family: $font-family-title;
     font-size: 16px;
     line-height: 24px;
-    color: #fff;
 
     cursor: pointer;
 }
@@ -208,6 +207,8 @@
 
     font-size: 10px;
     line-height: 18px;
+    text-align: center;
+    color: #fff;
 
     @include form-transition();
 
@@ -217,6 +218,18 @@
     }
 }
 
+.lightCheckboxRow {
+    .checkboxContainer {
+        color: #666;
+    }
+}
+
+.darkCheckboxRow {
+    .checkboxContainer {
+        color: #fff;
+    }
+}
+
 @include checkbox-theme('green', $green);
 @include checkbox-theme('blue', $blue);
 @include checkbox-theme('red', $red);