Create Button component

src/components/profile/changePassword/ChangePassword.jsx

@@ -3,10 +3,8 @@ import React, { Component } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Link } from 'react-router';
 import Helmet from 'react-helmet';
-import classNames from 'classnames';
 
-import { LabeledInput } from 'components/ui/Form';
+import { LabeledInput, Button } from 'components/ui/Form';
-import buttons from 'components/ui/buttons.scss';
 
 import styles from 'components/profile/profileForm.scss';
 import messages from './ChangePassword.messages';
@@ -55,9 +53,7 @@ export default class ChangePassword extends Component {
                         </div>
                     </div>
 
-                    <button className={classNames(buttons.green, buttons.block)}>
+                    <Button color="green" block label={messages.changePasswordButton} />
-                        <Message {...messages.changePasswordButton} />
-                    </button>
                 </div>
             </div>
         );

src/components/ui/Form.jsx

@@ -5,6 +5,7 @@ import { intlShape } from 'react-intl';
 
 import icons from './icons.scss';
 import styles from './form.scss';
+import buttons from './buttons.scss';
 
 export class Input extends Component {
     static displayName = 'Input';
@@ -160,6 +161,46 @@ export class Checkbox extends Component {
     }
 }
 
+
+export class Button extends Component {
+    static displayName = 'Button';
+
+    static propTypes = {
+        label: PropTypes.oneOfType([
+            PropTypes.shape({
+                id: PropTypes.string
+            }),
+            PropTypes.string
+        ]).isRequired,
+        block: PropTypes.bool,
+        color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue'])
+    };
+
+    static contextTypes = {
+        intl: intlShape.isRequired
+    };
+
+    render() {
+        const { color = 'green', block } = this.props;
+
+        const props = {
+            ...this.props
+        };
+
+        if (props.label.id) {
+            props.label = this.context.intl.formatMessage(props.label);
+        }
+
+        return (
+            <button className={classNames(buttons[color], {
+                [buttons.block]: block
+            })} {...props}>
+                {props.label}
+            </button>
+        );
+    }
+}
+
 export class Form extends Component {
     static displayName = 'Form';