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 (
);
}
@@ -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);
});