diff --git a/src/components/profile/changePassword/ChangePassword.jsx b/src/components/profile/changePassword/ChangePassword.jsx index d4f64cd..e85d970 100644 --- a/src/components/profile/changePassword/ChangePassword.jsx +++ b/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, Checkbox } from 'components/ui/Form'; +import { Input, Button, Checkbox } from 'components/ui/Form'; import FormModel from 'models/Form'; import { Form } from 'components/ui/Form'; @@ -50,7 +50,7 @@ export default class ChangePassword extends Component {
-
- + {label} + + ); + } + if (props.placeholder && props.placeholder.id) { props.placeholder = this.context.intl.formatMessage(props.placeholder); } @@ -46,13 +71,25 @@ export class Input extends Component { ); } + if (error) { + error = ( +
+ error +
+ ); + } + return (
- - {icon} + {label} +
+ + {icon} +
+ {error}
); } @@ -71,62 +108,6 @@ export class Input extends Component { } } -export class LabeledInput extends Component { - static displayName = 'LabeledInput'; - - static propTypes = { - label: PropTypes.oneOfType([ - PropTypes.shape({ - id: PropTypes.string - }), - PropTypes.string - ]).isRequired, - id: PropTypes.string, - icon: PropTypes.string, - skin: PropTypes.oneOf(['dark', 'light']), - color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue']) - }; - - static contextTypes = { - intl: intlShape.isRequired - }; - - render() { - let { label } = this.props; - - let props = Object.assign({}, this.props); - - if (!props.id) { - props.id = uniqueId('input'); - } - - if (label && label.id) { - label = this.context.intl.formatMessage(label); - } - - return ( -
- - -
- ); - } - - setEl = (el) => { - this.el = el; - }; - - getValue() { - return this.el.getValue(); - } - - focus() { - this.el.focus(); - } -} - export class Checkbox extends Component { static displayName = 'Checkbox'; @@ -297,9 +278,3 @@ export class Form extends Component { } }; } - - -let lastId = 0; -function uniqueId(prefix = 'id') { - return `${prefix}${++lastId}`; -} diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss index 4748b26..7d4fb58 100644 --- a/src/components/ui/form.scss +++ b/src/components/ui/form.scss @@ -30,9 +30,6 @@ } .formRow { - position: relative; - height: 50px; - max-width: 100%; margin: 10px 0; } @@ -44,6 +41,12 @@ } } +.textFieldContainer { + position: relative; + height: 50px; + max-width: 100%; +} + .textField { box-sizing: border-box; position: absolute; @@ -120,11 +123,20 @@ } .textFieldLabel { + margin: 10px 0; + display: block; + font-family: $font-family-title; color: #666; font-size: 18px; } +.fieldError { + color: $red; + font-size: 12px; + margin: 3px 0; +} + @include input-theme('green', $green); @include input-theme('blue', $blue); @include input-theme('red', $red); diff --git a/src/functions.js b/src/functions.js new file mode 100644 index 0000000..3d79912 --- /dev/null +++ b/src/functions.js @@ -0,0 +1,4 @@ +let lastId = 0; +export function uniqueId(prefix = 'id') { + return `${prefix}${++lastId}`; +} diff --git a/tests/components/profile/changePassword/ChangePassword.test.jsx b/tests/components/profile/changePassword/ChangePassword.test.jsx index 8659a35..ac68179 100644 --- a/tests/components/profile/changePassword/ChangePassword.test.jsx +++ b/tests/components/profile/changePassword/ChangePassword.test.jsx @@ -5,10 +5,10 @@ import { shallow } from 'enzyme'; import ChangePassword from 'components/profile/changePassword/ChangePassword'; describe('', () => { - it('renders two components', () => { + it('renders two components', () => { const component = shallow( {}} />); - expect(component.find('LabeledInput')).to.have.length(2); + expect(component.find('Input')).to.have.length(2); });