Merge pull request #845 from Ducz0r/lm-sci-1670

Input validation extracting to reusable service [SCI-1670]
2025-09-06 05:04:35 +08:00 · 2017-10-25 09:42:33 +02:00 · 2017-10-25 09:42:33 +02:00 · be2c3b807f
commit be2c3b807f
parent 324ecf1bb4 a60e4c28bb
23 changed files with 974 additions and 655 deletions
--- a/app/controllers/client_api/users/users_controller.rb
+++ b/app/controllers/client_api/users/users_controller.rb
@ -57,19 +57,21 @@ module ClientApi
      end

      def update
-        user_service = ClientApi::UserService.new(
+        service = ClientApi::Users::UpdateService.new(
          current_user: current_user,
          params: user_params
        )
-        if user_service.update_user!
+        result = service.execute
+
+        if result[:status] == :success
          bypass_sign_in(current_user)
          success_response
        else
-          unsuccess_response(current_user.errors.full_messages,
-                             :unprocessable_entity)
+          error_response(
+            message: result[:message],
+            details: service.user.errors
+          )
        end
-      rescue CustomUserError => error
-        unsuccess_response(error.to_s)
      end

      private
@ -84,22 +86,35 @@ module ClientApi
                      :system_message_email_notification)
      end

-      def success_response(template = nil, locals = nil)
+      def success_response(args = {})
+        template = args.fetch(:template) { nil }
+        locals = args.fetch(:locals) { {} }
+        details = args.fetch(:details) { {} }
+
        respond_to do |format|
          format.json do
-            if template && locals
-              render template: template, status: :ok, locals: locals
+            if template
+              render template: template,
+                     status: :ok,
+                     locals: locals
            else
-              render json: {}, status: :ok
+              render json: { details: details }, status: :ok
            end
          end
        end
      end

-      def unsuccess_response(message, status = :unprocessable_entity)
+      def error_response(args = {})
+        message = args.fetch(:message) { t('client_api.generic_error_message') }
+        details = args.fetch(:details) { {} }
+        status = args.fetch(:status) { :unprocessable_entity }
+
        respond_to do |format|
          format.json do
-            render json: { message: message },
+            render json: {
+              message: message,
+              details: details
+            },
            status: status
          end
        end
--- a/app/javascript/src/components/validation/components/ValidatedErrorHelpBlock.jsx
+++ b/app/javascript/src/components/validation/components/ValidatedErrorHelpBlock.jsx
@ -0,0 +1,56 @@
+import React, { Component } from "react";
+import { HelpBlock } from "react-bootstrap";
+import { FormattedMessage } from "react-intl";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import shortid from "shortid";
+
+const MyHelpBlock = styled(HelpBlock)`
+  & > span {
+    margin-right: 5px;
+  }
+`;
+
+class ValidatedErrorHelpBlock extends Component {
+  static renderErrorMessage(error) {
+    const key = shortid.generate();
+    if (error.intl) {
+      return (
+        <FormattedMessage
+          key={key}
+          id={error.messageId}
+          values={error.values}
+        />
+      );
+    }
+    return <span key={key}>{error.message}</span>;
+  }
+
+  cleanProps() {
+    // Remove additional props from the props
+    const { tag, ...cleanProps } = this.props;
+    return cleanProps;
+  }
+
+  render() {
+    // Remove additional props from the props
+    const { tag, ...cleanProps } = this.props;
+
+    const errors = this.context.errors(tag) || [];
+    return (
+      <MyHelpBlock {...cleanProps}>
+        {errors.map((error) => ValidatedErrorHelpBlock.renderErrorMessage(error))}
+      </MyHelpBlock>
+    );
+  }
+}
+
+ValidatedErrorHelpBlock.propTypes = {
+  tag: PropTypes.string.isRequired
+};
+
+ValidatedErrorHelpBlock.contextTypes = {
+  errors: PropTypes.func
+}
+
+export default ValidatedErrorHelpBlock;
--- a/app/javascript/src/components/validation/components/ValidatedForm.jsx
+++ b/app/javascript/src/components/validation/components/ValidatedForm.jsx
@ -0,0 +1,119 @@
+import React, { Component } from "react";
+import update from "immutability-helper";
+import PropTypes from "prop-types";
+import _ from "lodash";
+
+class ValidatedForm extends Component {
+  static parseErrors(errors) {
+    // This method is quite smart, in the sense that accepts either
+    // errors in 3 shapes: localized error messages ({}),
+    // unlocalized error messages ({}), or mere strings (unlocalized)
+    const arr = _.isString(errors) ? [errors] : errors;
+    return arr.map((el) => _.isString(el) ? { message: el } : el);
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {}
+
+    this.setErrors = this.setErrors.bind(this);
+    this.setErrorsForTag = this.setErrorsForTag.bind(this);
+    this.errors = this.errors.bind(this);
+    this.hasAnyError = this.hasAnyError.bind(this);
+    this.hasErrorForTag = this.hasErrorForTag.bind(this);
+    this.addErrorsForTag = this.addErrorsForTag.bind(this);
+    this.clearErrorsForTag = this.clearErrorsForTag.bind(this);
+    this.clearErrors = this.clearErrors.bind(this);
+  }
+
+  getChildContext() {
+    // Pass functions downstream via context
+    return {
+      setErrors: this.setErrors,
+      setErrorsForTag: this.setErrorsForTag,
+      errors: this.errors,
+      hasAnyError: this.hasAnyError,
+      hasErrorForTag: this.hasErrorForTag,
+      addErrorsForTag: this.addErrorsForTag,
+      clearErrorsForTag: this.clearErrorsForTag,
+      clearErrors: this.clearErrors
+    };
+  }
+
+  setErrors(errors) {
+    const newState = {};
+    _.entries(errors).forEach(([key, value]) => {
+      newState[key] = ValidatedForm.parseErrors(value);
+    });
+    this.setState(newState);
+  }
+
+  setErrorsForTag(tag, errors) {
+    const newState = update(this.state, {
+      [tag]: { $set: ValidatedForm.parseErrors(errors) }
+    });
+    this.setState(newState);
+  }
+
+  errors(tag) {
+    return this.state[tag];
+  }
+
+  hasAnyError() {
+    return _.values(this.state) &&
+      _.flatten(_.values(this.state)).length > 0;
+  }
+
+  hasErrorForTag(tag) {
+    return _.has(this.state, tag) && this.state[tag].length > 0;
+  }
+
+  addErrorsForTag(tag, errors) {
+    let newState;
+    if (_.has(this.state, tag)) {
+      newState = update(this.state, { [tag]: { $push: errors } });
+    } else {
+      newState = update(this.state, { [tag]: { $set: errors } });
+    }
+    this.setState(newState);
+  }
+
+  clearErrorsForTag(tag) {
+    const newState = update(this.state, { [tag]: { $set: [] } });
+    this.setState(newState);
+  }
+
+  clearErrors() {
+    this.setState({});
+  }
+
+  render() {
+    return (
+      <form {...this.props}>
+        {this.props.children}
+      </form>
+    );
+  }
+}
+
+ValidatedForm.propTypes = {
+  children: PropTypes.node
+}
+
+ValidatedForm.defaultProps = {
+  children: undefined
+}
+
+ValidatedForm.childContextTypes = {
+  setErrors: PropTypes.func,
+  setErrorsForTag: PropTypes.func,
+  errors: PropTypes.func,
+  hasAnyError: PropTypes.func,
+  hasErrorForTag: PropTypes.func,
+  addErrorsForTag: PropTypes.func,
+  clearErrorsForTag: PropTypes.func,
+  clearErrors: PropTypes.func
+}
+
+export default ValidatedForm;
--- a/app/javascript/src/components/validation/components/ValidatedFormControl.jsx
+++ b/app/javascript/src/components/validation/components/ValidatedFormControl.jsx
@ -0,0 +1,70 @@
+import React, { Component } from "react";
+import { FormControl } from "react-bootstrap";
+import PropTypes from "prop-types";
+
+class ValidatedFormControl extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+    this.cleanProps = this.cleanProps.bind(this);
+  }
+
+  handleChange(e) {
+    const tag = this.props.tag;
+    const messageIds = this.props.messageIds;
+    const target = e.target;
+
+    // Pass-through "original" onChange
+    if (_.has(this.props, "onChange") && this.props.onChange !== undefined) {
+      this.props.onChange(e);
+    }
+
+    // Validate the field
+    let errors = [];
+    this.props.validatorsOnChange.forEach((validator) => {
+      errors = errors.concat(validator(target, messageIds));
+    });
+    this.context.setErrorsForTag(tag, errors);
+  }
+
+  cleanProps() {
+    // Remove additional props from the props
+    const {
+      tag,
+      messageIds,
+      validatorsOnChange,
+      onChange,
+      ...cleanProps
+    } = this.props;
+    return cleanProps;
+  }
+
+  render() {
+    return (
+      <FormControl
+        onChange={this.handleChange}
+        {...this.cleanProps()}
+      />
+    );
+  }
+}
+
+ValidatedFormControl.propTypes = {
+  tag: PropTypes.string.isRequired,
+  messageIds: PropTypes.objectOf(PropTypes.string),
+  validatorsOnChange: PropTypes.arrayOf(PropTypes.func),
+  onChange: PropTypes.func
+}
+
+ValidatedFormControl.defaultProps = {
+  messageIds: {},
+  validatorsOnChange: [],
+  onChange: undefined
+}
+
+ValidatedFormControl.contextTypes = {
+  setErrorsForTag: PropTypes.func
+}
+
+export default ValidatedFormControl;
--- a/app/javascript/src/components/validation/components/ValidatedFormGroup.jsx
+++ b/app/javascript/src/components/validation/components/ValidatedFormGroup.jsx
@ -0,0 +1,30 @@
+import React from "react";
+import { FormGroup } from "react-bootstrap";
+import PropTypes from "prop-types";
+
+const ValidatedFormGroup = (props, context) => {
+  // Remove additional props from the props
+  const { tag, ...cleanProps } = props;
+
+  const hasError = context.hasErrorForTag(tag);
+  const formGroupClass = `form-group ${hasError ? " has-error" : ""}`;
+  const validationState = hasError ? "error" : null;
+
+  return (
+    <FormGroup
+      className={formGroupClass}
+      validationState={validationState}
+      {...cleanProps}
+    />
+  );
+};
+
+ValidatedFormGroup.propTypes = {
+  tag: PropTypes.string.isRequired
+}
+
+ValidatedFormGroup.contextTypes = {
+  hasErrorForTag: PropTypes.func
+}
+
+export default ValidatedFormGroup;
--- a/app/javascript/src/components/validation/components/ValidatedSubmitButton.jsx
+++ b/app/javascript/src/components/validation/components/ValidatedSubmitButton.jsx
@ -0,0 +1,23 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import PropTypes from "prop-types";
+
+const ValidatedSubmitButton = (props, context) =>
+  <Button {...props} disabled={context.hasAnyError()}>
+    {props.children}
+  </Button>
+;
+
+ValidatedSubmitButton.propTypes = {
+  children: PropTypes.node
+}
+
+ValidatedSubmitButton.defaultProps = {
+  children: undefined
+}
+
+ValidatedSubmitButton.contextTypes = {
+  hasAnyError: PropTypes.func
+}
+
+export default ValidatedSubmitButton;
--- a/app/javascript/src/components/validation/index.js
+++ b/app/javascript/src/components/validation/index.js
@ -0,0 +1,5 @@
+export {default as ValidatedErrorHelpBlock} from "./components/ValidatedErrorHelpBlock";
+export {default as ValidatedForm} from "./components/ValidatedForm";
+export {default as ValidatedFormControl} from "./components/ValidatedFormControl";
+export {default as ValidatedFormGroup} from "./components/ValidatedFormGroup";
+export {default as ValidatedSubmitButton} from "./components/ValidatedSubmitButton";
--- a/app/javascript/src/components/validation/validators/file.js
+++ b/app/javascript/src/components/validation/validators/file.js
@ -0,0 +1,45 @@
+import _ from "lodash";
+import { AVATAR_MAX_SIZE_MB } from "../../../config/constants/numeric";
+import { AVATAR_VALID_EXTENSIONS } from "../../../config/constants/strings";
+
+export const avatarExtensionValidator = (target, messageIds = {}) => {
+  const messageId = _.has(messageIds, "invalid_file_extension") ?
+    messageIds.invalid_file_extension :
+    "validators.file.invalid_file_extension";
+
+  const filePath = target.value;
+  const ext = filePath
+              .substring(filePath.lastIndexOf(".") + 1)
+              .toLowerCase();
+  const validExtsString = AVATAR_VALID_EXTENSIONS
+                          .map(val => `.${val}`)
+                          .join(", ");
+
+  if (!_.includes(AVATAR_VALID_EXTENSIONS, ext)) {
+    return [{
+      intl: true,
+      messageId,
+      values: { valid_extensions: validExtsString }
+    }];
+  }
+  return [];
+}
+
+export const avatarSizeValidator = (target, messageIds = {}) => {
+  const messageId = _.has(messageIds, "file_too_large") ?
+    messageIds.file_too_large :
+    "validators.file.file_too_large";
+  const maxSizeKb = AVATAR_MAX_SIZE_MB * 1024;
+
+  if (target.files && target.files[0]) {
+    const fileSize = target.files[0].size / 1024; // size in KB
+    if (fileSize > maxSizeKb) {
+      return [{
+      intl: true,
+      messageId,
+      values: { max_size: AVATAR_MAX_SIZE_MB }
+    }];
+    }
+  }
+  return [];
+}
--- a/app/javascript/src/components/validation/validators/text.js
+++ b/app/javascript/src/components/validation/validators/text.js
@ -0,0 +1,139 @@
+import _ from "lodash";
+import {
+  NAME_MIN_LENGTH,
+  NAME_MAX_LENGTH,
+  TEXT_MAX_LENGTH,
+  PASSWORD_MIN_LENGTH,
+  PASSWORD_MAX_LENGTH,
+  USER_INITIALS_MAX_LENGTH
+} from "../../../config/constants/numeric";
+import { EMAIL_REGEX } from "../../../config/constants/strings";
+
+export const nameMinLengthValidator = (target, messageIds = {}) => {
+  const messageId = _.has(messageIds, "text_too_short") ?
+    messageIds.text_too_short :
+    "validators.text.text_too_short";
+  const value = target.value;
+
+  if (value.length < NAME_MIN_LENGTH) {
+    return [{
+      intl: true,
+      messageId,
+      values: { min_length: NAME_MIN_LENGTH }
+    }];
+  }
+  return [];
+};
+
+export const nameMaxLengthValidator = (target, messageIds = {}) => {
+  const messageId = _.has(messageIds, "text_too_long") ?
+  messageIds.text_too_long :
+  "validators.text.text_too_long";
+  const value = target.value;
+
+  if (value.length > NAME_MAX_LENGTH) {
+    return [{
+      intl: true,
+      messageId,
+      values:{ max_length: NAME_MAX_LENGTH }
+    }];
+  }
+  return [];
+};
+
+export const nameLengthValidator = (target, messageIds = {}) => {
+  const res = nameMinLengthValidator(target, messageIds);
+  if (res.length > 0) {
+    return res;
+  }
+  return nameMaxLengthValidator(target, messageIds);
+};
+
+export const textBlankValidator = (target, messageIds = {}) => {
+  const messageId = _.has(messageIds, "text_blank") ?
+    messageIds.text_blank :
+    "validators.text.text_blank";
+  const value = target.value;
+
+    if (value.length === 0) {
+    return [{
+      intl: true,
+      messageId
+    }];
+  }
+  return [];
+}
+
+export const textMaxLengthValidator = (target, messageIds = {}) => {
+  const messageId = _.has(messageIds, "text_too_long") ?
+    messageIds.text_too_long :
+    "validators.text.text_too_long";
+  const value = target.value;
+
+  if (value.length > TEXT_MAX_LENGTH) {
+    return [{
+      intl: true,
+      messageId,
+      values: { max_length: TEXT_MAX_LENGTH }
+    }];
+  }
+  return [];
+};
+
+export const passwordLengthValidator = (target, messageIds = {}) => {
+  const messageIdTooShort = _.has(messageIds, "text_too_short") ?
+    messageIds.text_too_short :
+    "validators.text.text_too_short";
+  const messageIdTooLong = _.has(messageIds, "text_too_long") ?
+    messageIds.text_too_long :
+    "validators.text.text_too_long";
+  const value = target.value;
+
+  if (value.length < PASSWORD_MIN_LENGTH) {
+    return [{
+      intl: true,
+      messageId: messageIdTooShort,
+      values:{ min_length: PASSWORD_MIN_LENGTH }
+    }];
+  } else if (value.length > PASSWORD_MAX_LENGTH) {
+    return [{
+      intl: true,
+      messageId: messageIdTooLong,
+      values:{ max_length: PASSWORD_MAX_LENGTH }
+    }];
+  }
+  return [];
+};
+
+export const userInitialsMaxLengthValidator = (target, messageIds = {}) => {
+  const messageId = _.has(messageIds, "text_too_long") ?
+    messageIds.text_too_long :
+    "validators.text.text_too_long";
+  const value = target.value;
+
+  if (value.length > USER_INITIALS_MAX_LENGTH) {
+    return [{
+      intl: true,
+      messageId,
+      values: { max_length: USER_INITIALS_MAX_LENGTH }
+    }];
+  }
+  return [];
+};
+
+export const emailValidator = (target, messageIds = {}) => {
+  const res = textBlankValidator(target, messageIds);
+  if (res.length > 0) {
+    return res;
+  }
+
+  const messageId = _.has(messageIds, "invalid_email") ?
+    messageIds.invalid_email :
+    "validators.text.invalid_email";
+  const value = target.value;
+
+  if (!EMAIL_REGEX.test(value)) {
+    return [{ intl: true, messageId }];
+  }
+  return [];
+};
--- a/app/javascript/src/config/constants/numeric.js
+++ b/app/javascript/src/config/constants/numeric.js
@ -6,3 +6,4 @@ export const PASSWORD_MAX_LENGTH = 72;
 export const NAME_MAX_LENGTH = 255;
 export const TEXT_MAX_LENGTH = 10000;
 export const INVITE_USERS_LIMIT = 20;
+export const AVATAR_MAX_SIZE_MB = 0.2;
--- a/app/javascript/src/config/constants/strings.js
+++ b/app/javascript/src/config/constants/strings.js
@ -2,3 +2,4 @@ export const ASSIGNMENT_NOTIFICATION = "ASSIGNMENT";
 export const RECENT_NOTIFICATION = "RECENT_NOTIFICATION";
 export const SYSTEM_NOTIFICATION = "SYSTEM_NOTIFICATION";
 export const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+export const AVATAR_VALID_EXTENSIONS = ["jpg", "jpeg", "png", "gif"];
--- a/app/javascript/src/config/locales/messages.js
+++ b/app/javascript/src/config/locales/messages.js
@ -16,12 +16,17 @@ export default {
      all_teams_page: "SciNote | Settings | Teams",
      new_team_page: "SciNote | Settings | Teams | New"
    },
-    error_messages: {
-      text_too_short: "is too short (minimum is {min_length} characters)",
-      text_too_long: "is too long (maximum is {max_length} characters)",
-      cant_be_blank: "can't be blank",
-      invalid_email: "invalid email",
-      passwords_dont_match: "Passwords don't match"
+    validators: {
+      text: {
+        text_too_short: "is too short (minimum is {min_length} characters)",
+        text_too_long: "is too long (maximum is {max_length} characters)",
+        text_blank: "can't be blank",
+        invalid_email: "invalid email"
+      },
+      file: {
+        invalid_file_extension: "invalid file extension (valid extensions are {valid_extensions})",
+        file_too_large: "file too large (maximum size is {max_size} MB)"
+      }
    },
    navbar: {
      page_title: "sciNote",
--- a/app/javascript/src/scenes/SettingsPage/scenes/profile/components/InputEnabled.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/profile/components/InputEnabled.jsx
@ -4,29 +4,39 @@ import { string, func } from "prop-types";
 import styled from "styled-components";
 import { FormattedMessage, FormattedHTMLMessage } from "react-intl";
 import {
-  FormGroup,
-  FormControl,
  ControlLabel,
  Button,
  ButtonToolbar,
-  HelpBlock
 } from "react-bootstrap";
+import update from "immutability-helper";
 import { updateUser } from "../../../../../services/api/users_api";
 import { transformName } from "../../../../../services/helpers/string_helper";
 import { addAlert } from "../../../../../components/actions/AlertsActions";

 import {
  BORDER_LIGHT_COLOR,
-  COLOR_APPLE_BLOSSOM
 } from "../../../../../config/constants/colors";
 import {
  ENTER_KEY_CODE,
-  USER_INITIALS_MAX_LENGTH,
-  NAME_MAX_LENGTH,
-  PASSWORD_MAX_LENGTH,
-  PASSWORD_MIN_LENGTH
 } from "../../../../../config/constants/numeric";
-import { EMAIL_REGEX } from "../../../../../config/constants/strings";
+import {
+  ValidatedForm,
+  ValidatedFormGroup,
+  ValidatedFormControl,
+  ValidatedErrorHelpBlock,
+  ValidatedSubmitButton
+} from "../../../../../components/validation";
+import {
+  textBlankValidator,
+  nameMaxLengthValidator,
+  passwordLengthValidator,
+  userInitialsMaxLengthValidator,
+  emailValidator
+} from "../../../../../components/validation/validators/text";
+import {
+  avatarExtensionValidator,
+  avatarSizeValidator
+} from "../../../../../components/validation/validators/file";

 const StyledInputEnabled = styled.div`
  border: 1px solid ${BORDER_LIGHT_COLOR};
@ -38,10 +48,6 @@ const StyledInputEnabled = styled.div`
  }
 `;

-const StyledHelpBlock = styled(HelpBlock)`
-  color: ${COLOR_APPLE_BLOSSOM};
-`;
-
 class InputEnabled extends Component {
  constructor(props) {
    super(props);
@ -49,30 +55,16 @@ class InputEnabled extends Component {
    this.state = {
      value: this.props.inputValue === "********" ? "" : this.props.inputValue,
      current_password: "",
-      password_confirmation: "",
-      errorMessage: ""
+      password_confirmation: ""
    };

-    this.handleChange = this.handleChange.bind(this);
-    this.handlePasswordConfirmation = this.handlePasswordConfirmation.bind(
-      this
-    );
    this.handleKeyPress = this.handleKeyPress.bind(this);
-    this.confirmationField = this.confirmationField.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.getValidationState = this.getValidationState.bind(this);
-    this.handleFullNameValidation = this.handleFullNameValidation.bind(this);
-    this.handleEmailValidation = this.handleEmailValidation.bind(this);
-    this.handleInitialsValidation = this.handleInitialsValidation.bind(this);
-    this.handlePasswordConfirmationValidation = this.handlePasswordConfirmationValidation.bind(
-      this
-    );
+    this.handleChange = this.handleChange.bind(this);
    this.handleCurrentPassword = this.handleCurrentPassword.bind(this);
-    this.handleFileChange = this.handleFileChange.bind(this);
-  }
-
-  getValidationState() {
-    return this.state.errorMessage.length > 0 ? "error" : null;
+    this.handlePasswordConfirmation = this.handlePasswordConfirmation.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.inputField = this.inputField.bind(this);
+    this.confirmationField = this.confirmationField.bind(this);
  }

  handleKeyPress(event) {
@ -83,170 +75,30 @@ class InputEnabled extends Component {
  }

  handleChange(event) {
-    event.preventDefault();
-    switch (this.props.dataField) {
-      case "full_name":
-        this.handleFullNameValidation(event);
-        break;
-      case "email":
-        this.handleEmailValidation(event);
-        break;
-      case "initials":
-        this.handleInitialsValidation(event);
-        break;
-      case "password":
-        this.handlePasswordValidation(event);
-        break;
-      case "avatar":
-        this.handleFileChange(event);
-        break;
-      default:
-        this.setState({ value: event.target.value, errorMessage: "" });
-    }
-  }
-
-  handleFileChange(event) {
-    this.setState({ value: event.currentTarget.files[0], errorMessage: "" });
-  }
-
-  handlePasswordConfirmation(event) {
-    const { value } = event.target;
-    if (value.length === 0) {
-      this.setState({
-        password_confirmation: value,
-        errorMessage: <FormattedMessage id="error_messages.cant_be_blank" />
-      });
-    }
-    this.setState({ password_confirmation: value });
-  }
-
-  handleFullNameValidation(event) {
-    const { value } = event.target;
-    if (value.length > NAME_MAX_LENGTH) {
-      this.setState({
-        value,
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: NAME_MAX_LENGTH }}
-          />
-        )
-      });
-    } else if (value.length === 0) {
-      this.setState({
-        value,
-        errorMessage: <FormattedMessage id="error_messages.cant_be_blank" />
-      });
+    let newVal;
+    if (this.props.dataField === "avatar") {
+      newVal = event.currentTarget.files[0];
    } else {
-      this.setState({ value, errorMessage: "" });
-    }
-  }
-
-  handleEmailValidation(event) {
-    const { value } = event.target;
-    if (!EMAIL_REGEX.test(value)) {
-      this.setState({
-        value,
-        errorMessage: <FormattedMessage id="error_messages.invalid_email" />
-      });
-    } else if (value.length === 0) {
-      this.setState({
-        value,
-        errorMessage: <FormattedMessage id="error_messages.cant_be_blank" />
-      });
-    } else {
-      this.setState({ value, errorMessage: "" });
-    }
-  }
-
-  handleInitialsValidation(event) {
-    const { value } = event.target;
-    if (value.length > USER_INITIALS_MAX_LENGTH) {
-      this.setState({
-        value,
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: USER_INITIALS_MAX_LENGTH }}
-          />
-        )
-      });
-    } else if (value.length === 0) {
-      this.setState({
-        value,
-        errorMessage: <FormattedMessage id="error_messages.cant_be_blank" />
-      });
-    } else {
-      this.setState({ value, errorMessage: "" });
-    }
-  }
-
-  handlePasswordValidation(event) {
-    const { value } = event.target;
-    if (value.length > PASSWORD_MAX_LENGTH) {
-      this.setState({
-        value,
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: PASSWORD_MAX_LENGTH }}
-          />
-        )
-      });
-    } else if (value.length < PASSWORD_MIN_LENGTH) {
-      this.setState({
-        value,
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_short"
-            values={{ min_length: PASSWORD_MIN_LENGTH }}
-          />
-        )
-      });
-    } else {
-      this.setState({ value, errorMessage: "" });
-    }
-  }
-
-  handlePasswordConfirmationValidation(event) {
-    const { value } = event.target;
-    if (value !== this.state.value) {
-      this.setState({
-        password_confirmation: value,
-        errorMessage: (
-          <FormattedMessage id="error_messages.passwords_dont_match" />
-        )
-      });
-    } else {
-      this.setState({ password_confirmation: value, errorMessage: "" });
+      newVal = event.target.value;
    }
+    const newState = update(this.state, {
+      value: { $set: newVal }
+    });
+    this.setState(newState);
  }

  handleCurrentPassword(event) {
-    const { value } = event.target;
-    if (value.length > PASSWORD_MAX_LENGTH) {
-      this.setState({
-        current_password: value,
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: PASSWORD_MAX_LENGTH }}
-          />
-        )
-      });
-    } else if (value.length < PASSWORD_MIN_LENGTH) {
-      this.setState({
-        current_password: value,
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_short"
-            values={{ min_length: PASSWORD_MIN_LENGTH }}
-          />
-        )
-      });
-    } else {
-      this.setState({ current_password: value, errorMessage: "" });
-    }
+    const newState = update(this.state, {
+      current_password: { $set: event.target.value }
+    });
+    this.setState(newState);
+  }
+
+  handlePasswordConfirmation(event) {
+    const newState = update(this.state, {
+      password_confirmation: { $set: event.target.value }
+    });
+    this.setState(newState);
  }

  handleSubmit(event) {
@ -292,7 +144,7 @@ class InputEnabled extends Component {
        }
      })
      .catch(({ response }) => {
-        this.setState({ errorMessage: response.data.message.toString() });
+        this.form.setErrors(response.data.details);
      });
  }

@ -301,108 +153,156 @@ class InputEnabled extends Component {

    if (type === "email") {
      return (
-        <div>
-          <FormattedHTMLMessage id="settings_page.password_confirmation" />
-          <FormControl
+        <ValidatedFormGroup tag="current_password">
+          <ControlLabel>
+            <FormattedHTMLMessage id="settings_page.password_confirmation" />
+          </ControlLabel>
+          <ValidatedFormControl
            id="settings_page.current_password"
+            tag="current_password"
            type="password"
            value={this.state.current_password}
+            validatorsOnChange={[passwordLengthValidator]}
            onChange={this.handleCurrentPassword}
+            onKeyPress={this.handleKeyPress}
          />
-        </div>
+          <ValidatedErrorHelpBlock tag="current_password" />
+        </ValidatedFormGroup>
      );
    }
    return "";
  }

  inputField() {
-    const { inputType } = this.props;
+    const { inputType, dataField } = this.props;
+
+    let validatorsOnChange = [];
+    if (dataField === "full_name") {
+      validatorsOnChange = [textBlankValidator, nameMaxLengthValidator];
+    } else if (dataField === "initials") {
+      validatorsOnChange = [textBlankValidator, userInitialsMaxLengthValidator];
+    } else if (dataField === "email") {
+      validatorsOnChange = [emailValidator];
+    } else if (dataField === "avatar") {
+      validatorsOnChange = [avatarExtensionValidator, avatarSizeValidator];
+    }
+
    if (inputType === "password") {
      return (
        <div>
-          <FormattedHTMLMessage id="settings_page.password_confirmation" />
-          <FormControl
-            id="settings_page.current_password"
-            type={inputType}
-            value={this.state.current_password}
-            onChange={this.handleCurrentPassword}
-            autoFocus
-          />
-          <ControlLabel>
-            <FormattedMessage id="settings_page.new_password" />
-          </ControlLabel>
-          <FormControl
-            id="settings_page.new_password"
-            type={inputType}
-            value={this.state.value}
-            onChange={this.handleChange}
-            autoFocus
-          />
-          <ControlLabel>
-            <FormattedMessage id="settings_page.new_password_confirmation" />
-          </ControlLabel>
-          <FormControl
-            id="settings_page.new_password_confirmation"
-            type={inputType}
-            value={this.state.password_confirmation}
-            onChange={this.handlePasswordConfirmationValidation}
-          />
+          <ValidatedFormGroup tag="current_password">
+            <ControlLabel>
+              <FormattedHTMLMessage id="settings_page.password_confirmation" />
+            </ControlLabel>
+            <ValidatedFormControl
+              id="settings_page.current_password"
+              type="password"
+              value={this.state.current_password}
+              tag="current_password"
+              validatorsOnChange={[passwordLengthValidator]}
+              onChange={this.handleCurrentPassword}
+              onKeyPress={this.handleKeyPress}
+              autoFocus
+            />
+            <ValidatedErrorHelpBlock tag="current_password" />
+          </ValidatedFormGroup>
+          <ValidatedFormGroup tag="new_password">
+            <ControlLabel>
+              <FormattedMessage id="settings_page.new_password" />
+            </ControlLabel>
+            <ValidatedFormControl
+              id="settings_page.new_password"
+              type="password"
+              value={this.state.value}
+              onChange={this.handleChange}
+              onKeyPress={this.handleKeyPress}
+              tag="new_password"
+              validatorsOnChange={[passwordLengthValidator]}
+              autoFocus
+            />
+            <ValidatedErrorHelpBlock tag="new_password" />
+          </ValidatedFormGroup>
+          <ValidatedFormGroup tag="new_password_confirmation">
+            <ControlLabel>
+              <FormattedMessage id="settings_page.new_password_confirmation" />
+            </ControlLabel>
+            <ValidatedFormControl
+              id="settings_page.new_password_confirmation"
+              type="password"
+              value={this.state.password_confirmation}
+              onChange={this.handlePasswordConfirmation}
+              onKeyPress={this.handleKeyPress}
+              tag="new_password_confirmation"
+              validatorsOnChange={[passwordLengthValidator]}
+            />
+            <ValidatedErrorHelpBlock tag="new_password_confirmation" />
+          </ValidatedFormGroup>
        </div>
      );
    }
    if (inputType === "file") {
      return (
-        <FormControl
-          id="user_avatar_input"
-          type={this.props.inputType}
-          onChange={this.handleChange}
-          onKeyPress={this.handleKeyPress}
-          autoFocus
-        />
+        <ValidatedFormGroup tag={dataField}>
+          <ValidatedFormControl
+            id="user_avatar_input"
+            tag={dataField}
+            type={this.props.inputType}
+            onChange={this.handleChange}
+            onKeyPress={this.handleKeyPress}
+            validatorsOnChange={validatorsOnChange}
+            autoFocus
+          />
+          <ValidatedErrorHelpBlock tag={dataField} />
+        </ValidatedFormGroup>
      );
    }
    return (
-      <FormControl
-        type={this.props.inputType}
-        value={this.state.value}
-        onChange={this.handleChange}
-        onKeyPress={this.handleKeyPress}
-        autoFocus
-      />
+      <ValidatedFormGroup tag={dataField}>
+        <ValidatedFormControl
+          tag={dataField}
+          type={this.props.inputType}
+          onChange={this.handleChange}
+          onKeyPress={this.handleKeyPress}
+          validatorsOnChange={validatorsOnChange}
+          value={this.state.value}
+          autoFocus
+        />
+        <ValidatedErrorHelpBlock tag={dataField} />
+      </ValidatedFormGroup>
    );
  }

  render() {
    return (
-      <StyledInputEnabled id={transformName(this.props.labelTitle)}>
-        <form onSubmit={this.handleSubmit}>
-          <FormGroup validationState={this.getValidationState()}>
-            <h4>
-              <FormattedMessage id="settings_page.change" />&nbsp;
-              <FormattedMessage id={this.props.labelTitle} />
-            </h4>
-            {this.props.labelValue !== "none" && (
-              <ControlLabel>
-                <FormattedMessage id={this.props.labelValue} />
-              </ControlLabel>
-            )}
-            {this.inputField()}
-            {this.confirmationField()}
-            <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
-            <ButtonToolbar>
-              <Button bsStyle="primary" type="submit">
-                <FormattedMessage
-                  id={`general.${this.props.dataField === "avatar"
-                    ? "upload"
-                    : "update"}`}
-                />
-              </Button>
-              <Button bsStyle="default" onClick={this.props.disableEdit}>
-                <FormattedMessage id="general.cancel" />
-              </Button>
-            </ButtonToolbar>
-          </FormGroup>
-        </form>
+      <StyledInputEnabled>
+        <ValidatedForm
+          onSubmit={this.handleSubmit}
+          ref={(f) => { this.form = f; }}
+        >
+          <h4>
+            <FormattedMessage id="settings_page.change" />&nbsp;
+            <FormattedMessage id={this.props.labelTitle} />
+          </h4>
+          {this.props.labelValue !== "none" && (
+            <ControlLabel>
+              <FormattedMessage id={this.props.labelValue} />
+            </ControlLabel>
+          )}
+          {this.inputField()}
+          {this.confirmationField()}
+          <ButtonToolbar>
+            <ValidatedSubmitButton bsStyle="primary" type="submit">
+              <FormattedMessage
+                id={`general.${this.props.dataField === "avatar"
+                  ? "upload"
+                  : "update"}`}
+              />
+            </ValidatedSubmitButton>
+            <Button bsStyle="default" onClick={this.props.disableEdit}>
+              <FormattedMessage id="general.cancel" />
+            </Button>
+          </ButtonToolbar>
+        </ValidatedForm>
      </StyledInputEnabled>
    );
  }
--- a/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx
@ -3,55 +3,40 @@ import PropTypes, { bool, number, string, func } from "prop-types";
 import {
  Modal,
  Button,
-  FormGroup,
  ControlLabel,
  FormControl,
-  HelpBlock
 } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
-import _ from "lodash";
-import styled from "styled-components";
 import axios from "../../../../../config/axios";
+import {
+  ValidatedForm,
+  ValidatedFormGroup,
+  ValidatedFormControl,
+  ValidatedErrorHelpBlock,
+  ValidatedSubmitButton
+} from "../../../../../components/validation";
+import {
+  textMaxLengthValidator
+} from "../../../../../components/validation/validators/text";

-import { TEXT_MAX_LENGTH } from "../../../../../config/constants/numeric";
 import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
-import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
-
-const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;

 class UpdateTeamDescriptionModal extends Component {
  constructor(props) {
    super(props);
-    this.state = { errorMessage: "", description: "" };
+    this.state = { description: "" };
    this.onCloseModal = this.onCloseModal.bind(this);
    this.updateDescription = this.updateDescription.bind(this);
    this.handleDescription = this.handleDescription.bind(this);
-    this.getValidationState = this.getValidationState.bind(this);
  }

  onCloseModal() {
-    this.setState({ errorMessage: "", description: "" });
+    this.setState({ description: "" });
    this.props.hideModal();
  }

-  getValidationState() {
-    return this.state.errorMessage.length > 0 ? "error" : null;
-  }
-
  handleDescription(el) {
-    const { value } = el.target;
-    if (value.length > TEXT_MAX_LENGTH) {
-      this.setState({
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: TEXT_MAX_LENGTH }}
-          />
-        )
-      });
-    } else {
-      this.setState({ errorMessage: "", description: value });
-    }
+    this.setState({ description: el.target.value });
  }

  updateDescription() {
@ -74,40 +59,40 @@ class UpdateTeamDescriptionModal extends Component {
  render() {
    return (
      <Modal show={this.props.showModal} onHide={this.onCloseModal}>
-        <Modal.Header closeButton>
-          <Modal.Title>
-            <FormattedMessage id="settings_page.update_team_description_modal.title" />
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup
-            controlId="teamDescription"
-            validationState={this.getValidationState()}
-          >
-            <ControlLabel>
-              <FormattedMessage id="settings_page.update_team_description_modal.label" />
-            </ControlLabel>
-            <FormControl
-              componentClass="textarea"
-              defaultValue={this.props.team.description}
-              onChange={this.handleDescription}
-            />
-            <FormControl.Feedback />
-            <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button
-            bsStyle="primary"
-            onClick={this.updateDescription}
-            disabled={!_.isEmpty(this.state.errorMessage)}
-          >
-            <FormattedMessage id="general.update" />
-          </Button>
-          <Button onClick={this.onCloseModal}>
-            <FormattedMessage id="general.close" />
-          </Button>
-        </Modal.Footer>
+        <ValidatedForm ref={(f) => { this.form = f; }}>
+          <Modal.Header closeButton>
+            <Modal.Title>
+              <FormattedMessage id="settings_page.update_team_description_modal.title" />
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <ValidatedFormGroup tag="description">
+              <ControlLabel>
+                <FormattedMessage id="settings_page.update_team_description_modal.label" />
+              </ControlLabel>
+              <ValidatedFormControl
+                componentClass="textarea"
+                tag="description"
+                defaultValue={this.props.team.description}
+                onChange={this.handleDescription}
+                validatorsOnChange={[textMaxLengthValidator]}
+              />
+              <FormControl.Feedback />
+              <ValidatedErrorHelpBlock tag="description" />
+            </ValidatedFormGroup>
+          </Modal.Body>
+          <Modal.Footer>
+            <ValidatedSubmitButton
+              bsStyle="primary"
+              onClick={this.updateDescription}
+            >
+              <FormattedMessage id="general.update" />
+            </ValidatedSubmitButton>
+            <Button onClick={this.onCloseModal}>
+              <FormattedMessage id="general.close" />
+            </Button>
+          </Modal.Footer>
+        </ValidatedForm>
      </Modal>
    );
  }
--- a/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx
@ -3,55 +3,40 @@ import PropTypes, { bool, number, string, func } from "prop-types";
 import {
  Modal,
  Button,
-  FormGroup,
  ControlLabel,
  FormControl,
-  HelpBlock
 } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
-import _ from "lodash";
-import styled from "styled-components";
 import axios from "../../../../../config/axios";
+import {
+  ValidatedForm,
+  ValidatedFormGroup,
+  ValidatedFormControl,
+  ValidatedErrorHelpBlock,
+  ValidatedSubmitButton
+} from "../../../../../components/validation";
+import {
+  nameLengthValidator
+} from "../../../../../components/validation/validators/text";

-import { NAME_MAX_LENGTH } from "../../../../../config/constants/numeric";
 import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
-import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
-
-const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;

 class UpdateTeamNameModal extends Component {
  constructor(props) {
    super(props);
-    this.state = { errorMessage: "", name: props.team.name };
+    this.state = { name: props.team.name };
    this.onCloseModal = this.onCloseModal.bind(this);
    this.updateName = this.updateName.bind(this);
    this.handleName = this.handleName.bind(this);
-    this.getValidationState = this.getValidationState.bind(this);
  }

  onCloseModal() {
-    this.setState({ errorMessage: "", name: "" });
+    this.setState({ name: "" });
    this.props.hideModal();
  }

-  getValidationState() {
-    return this.state.errorMessage.length > 0 ? "error" : null;
-  }
-
-  handleName(el) {
-    const { value } = el.target;
-    if (value.length > NAME_MAX_LENGTH) {
-      this.setState({
-        errorMessage: (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: NAME_MAX_LENGTH }}
-          />
-        )
-      });
-    } else {
-      this.setState({ errorMessage: "", name: value });
-    }
+  handleName(e) {
+    this.setState({ name: e.target.value });
  }

  updateName() {
@ -68,46 +53,48 @@ class UpdateTeamNameModal extends Component {
        this.props.updateTeamCallback(response.data.team);
        this.onCloseModal();
      })
-      .catch(error => this.setState({ errorMessage: error.message }));
+      .catch(error => {
+        this.form.setErrorsForTag("name", [error.message]);
+      });
  }

  render() {
    return (
      <Modal show={this.props.showModal} onHide={this.onCloseModal}>
-        <Modal.Header closeButton>
-          <Modal.Title>
-            <FormattedMessage id="settings_page.update_team_name_modal.title" />
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormGroup
-            controlId="teamName"
-            validationState={this.getValidationState()}
-          >
-            <ControlLabel>
-              <FormattedMessage id="settings_page.update_team_name_modal.label" />
-            </ControlLabel>
-            <FormControl
-              type="text"
-              onChange={this.handleName}
-              value={this.state.name}
-            />
-            <FormControl.Feedback />
-            <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
-          </FormGroup>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button
-            bsStyle="primary"
-            onClick={this.updateName}
-            disabled={!_.isEmpty(this.state.errorMessage)}
-          >
-            <FormattedMessage id="general.update" />
-          </Button>
-          <Button onClick={this.onCloseModal}>
-            <FormattedMessage id="general.close" />
-          </Button>
-        </Modal.Footer>
+        <ValidatedForm ref={(f) => { this.form = f; }}>
+          <Modal.Header closeButton>
+            <Modal.Title>
+              <FormattedMessage id="settings_page.update_team_name_modal.title" />
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <ValidatedFormGroup tag="name">
+              <ControlLabel>
+                <FormattedMessage id="settings_page.update_team_name_modal.label" />
+              </ControlLabel>
+              <ValidatedFormControl
+                type="text"
+                tag="name"
+                validatorsOnChange={[nameLengthValidator]}
+                onChange={this.handleName}
+                value={this.state.name}
+              />
+              <FormControl.Feedback />
+              <ValidatedErrorHelpBlock tag="name" />
+            </ValidatedFormGroup>
+          </Modal.Body>
+          <Modal.Footer>
+            <ValidatedSubmitButton
+              onClick={this.updateName}
+              bsStyle="primary"
+            >
+              <FormattedMessage id="general.update" />
+            </ValidatedSubmitButton>
+            <Button onClick={this.onCloseModal}>
+              <FormattedMessage id="general.close" />
+            </Button>
+          </Modal.Footer>
+        </ValidatedForm>
      </Modal>
    );
  }
--- a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/components/NameFormControl.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/teams/new/components/NameFormControl.jsx
@ -1,13 +1,13 @@
 import React from "react";
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
-import { FormControl } from "react-bootstrap";
+import { ValidatedFormControl } from "../../../../../../components/validation";

 const messages = defineMessages({
    placeholder: { id: "settings_page.new_team.name_placeholder" }
 });

 const NameFormControl = ({ intl, ...props }) =>
-  <FormControl
+  <ValidatedFormControl
    type="text"
    placeholder={intl.formatMessage(messages.placeholder)}
    autoFocus={true}
--- a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
@ -3,10 +3,8 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import {
  Breadcrumb,
-  FormGroup,
  FormControl,
  ControlLabel,
-  HelpBlock,
  Button,
  ButtonToolbar
 } from "react-bootstrap";
@ -22,13 +20,19 @@ import {
  SETTINGS_TEAMS_ROUTE,
  SETTINGS_TEAM_ROUTE
 } from "../../../../../config/routes";
-
-import {
-  NAME_MIN_LENGTH,
-  NAME_MAX_LENGTH,
-  TEXT_MAX_LENGTH
-} from "../../../../../config/constants/numeric";
 import { getTeamsList } from "../../../../../components/actions/TeamsActions";
+import {
+  ValidatedForm,
+  ValidatedFormGroup,
+  ValidatedFormControl,
+  ValidatedErrorHelpBlock,
+  ValidatedSubmitButton
+} from "../../../../../components/validation";
+import {
+  nameLengthValidator,
+  textMaxLengthValidator
+
+} from "../../../../../components/validation/validators/text";

 import { BORDER_LIGHT_COLOR } from "../../../../../config/constants/colors";

@ -53,14 +57,8 @@ type Props = {
  getTeamsList: Function
 };

-type FormErrors = {
-  name: string,
-  description: string
-};
-
 type State = {
  team: Teams$NewTeam,
-  formErrors: FormErrors,
  redirectTo: string
 };

@ -72,15 +70,10 @@ class SettingsNewTeam extends Component<Props, State> {
        name: "",
        description: ""
      },
-      formErrors: {
-        name: "",
-        description: ""
-      },
      redirectTo: ""
    };

    (this: any).onSubmit = this.onSubmit.bind(this);
-    (this: any).validateField = this.validateField.bind(this);
    (this: any).handleChange = this.handleChange.bind(this);
    (this: any).renderTeamNameFormGroup = this.renderTeamNameFormGroup.bind(
      this
@ -100,138 +93,62 @@ class SettingsNewTeam extends Component<Props, State> {
      .then(response => {
        // Redirect to the new team page
        this.props.getTeamsList();
-        (this: any).newState = { ...this.state };
-        (this: any).newState = update((this: any).newState, {
+
+        const newState = update((this: any).state, {
          redirectTo: {
            $set: SETTINGS_TEAM_ROUTE.replace(":id", response.details.id)
          }
        });
-        (this: any).setState((this: any).newState);
+        (this: any).setState(newState);
      })
      .catch(er => {
        // Display errors
-        (this: any).newState = { ...this.state };
-        ["name", "description"].forEach(el => {
-          if (er.response.data.details[el]) {
-            (this: any).newState = update((this: any).newState, {
-              formErrors: {
-                name: { $set: <span>{er.response.data.details[el]}</span> }
-              }
-            });
-          }
-        });
-        (this: any).setState((this: any).newState);
+        (this: any).newTeamForm.setErrors(er.response.data.details);
      });
  }

-  validateField(key: string, value: string) {
-    let errorMessage;
-    if (key === "name") {
-      errorMessage = "";
-
-      if (value.length < NAME_MIN_LENGTH) {
-        errorMessage = (
-          <FormattedMessage
-            id="error_messages.text_too_short"
-            values={{ min_length: NAME_MIN_LENGTH }}
-          />
-        );
-      } else if (value.length > NAME_MAX_LENGTH) {
-        errorMessage = (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: NAME_MAX_LENGTH }}
-          />
-        );
-      }
-
-      (this: any).newState = update((this: any).newState, {
-        formErrors: { name: { $set: errorMessage } }
-      });
-    } else if (key === "description") {
-      errorMessage = "";
-
-      if (value.length > TEXT_MAX_LENGTH) {
-        errorMessage = (
-          <FormattedMessage
-            id="error_messages.text_too_long"
-            values={{ max_length: TEXT_MAX_LENGTH }}
-          />
-        );
-      }
-
-      (this: any).newState = update((this: any).newState, {
-        formErrors: { description: { $set: errorMessage } }
-      });
-    }
-  }
-
-  handleChange(e: SyntheticInputEvent<HTMLInputElement>): void {
-    const key = e.target.name;
+  handleChange(e: SyntheticInputEvent<HTMLInputElement>, tag: string): void {
    const value = e.target.value;

-    (this: any).newState = { ...this.state };
-
-    // Update value in the state
-    (this: any).newState = update((this: any).newState, {
-      team: { [key]: { $set: value } }
+    const newState = update((this: any).state, {
+      team: { [tag]: { $set: value } }
    });
-
-    // Validate the input
-    (this: any).validateField(key, value);
-
-    // Refresh state
-    (this: any).setState((this: any).newState);
+    (this: any).setState(newState);
  }

  renderTeamNameFormGroup() {
-    const formGroupClass = this.state.formErrors.name
-      ? "form-group has-error"
-      : "form-group";
-    const validationState = this.state.formErrors.name ? "error" : null;
    return (
-      <FormGroup
-        controlId="formTeamName"
-        className={formGroupClass}
-        validationState={validationState}
-      >
+      <ValidatedFormGroup tag="name">
        <ControlLabel>
          <FormattedMessage id="settings_page.new_team.name_label" />
        </ControlLabel>
        <NameFormControl
          value={this.state.team.name}
-          onChange={this.handleChange}
-          name="name"
+          tag="name"
+          validatorsOnChange={[nameLengthValidator]}
+          onChange={(e) => this.handleChange(e, "name")}
        />
        <FormControl.Feedback />
-        <HelpBlock>{this.state.formErrors.name}</HelpBlock>
-      </FormGroup>
+        <ValidatedErrorHelpBlock tag="name" />
+      </ValidatedFormGroup>
    );
  }

  renderTeamDescriptionFormGroup() {
-    const formGroupClass = this.state.formErrors.description
-      ? "form-group has-error"
-      : "form-group";
-    const validationState = this.state.formErrors.description ? "error" : null;
    return (
-      <FormGroup
-        controlId="formTeamDescription"
-        className={formGroupClass}
-        validationState={validationState}
-      >
+      <ValidatedFormGroup tag="description">
        <ControlLabel>
          <FormattedMessage id="settings_page.new_team.description_label" />
        </ControlLabel>
-        <FormControl
+        <ValidatedFormControl
          componentClass="textarea"
          value={this.state.team.description}
-          onChange={this.handleChange}
-          name="description"
+          tag="description"
+          validatorsOnChange={[textMaxLengthValidator]}
+          onChange={(e) => this.handleChange(e, "description")}
        />
-        <FormControl.Feedback />
-        <HelpBlock>{this.state.formErrors.description}</HelpBlock>
-      </FormGroup>
+        <ValidatedErrorHelpBlock tag="description" />
+      </ValidatedFormGroup>
    );
  }

@ -241,10 +158,6 @@ class SettingsNewTeam extends Component<Props, State> {
      return <Redirect to={this.state.redirectTo} />;
    }

-    const btnDisabled =
-      !_.isEmpty(this.state.formErrors.name) ||
-      !_.isEmpty(this.state.formErrors.description);
-
    return (
      <PageTitle localeID="page_title.new_team_page">
        <Wrapper>
@ -259,7 +172,11 @@ class SettingsNewTeam extends Component<Props, State> {
            </Breadcrumb.Item>
          </Breadcrumb>

-          <form onSubmit={this.onSubmit} style={{ maxWidth: "500px" }}>
+          <ValidatedForm
+            onSubmit={this.onSubmit}
+            ref={(f) => { (this: any).newTeamForm = f; }}
+            style={{ maxWidth: "500px" }}
+          >
            <MyFormGroupDiv>
              {this.renderTeamNameFormGroup()}
              <small>
@ -274,20 +191,19 @@ class SettingsNewTeam extends Component<Props, State> {
              </small>
            </MyFormGroupDiv>
            <ButtonToolbar>
-              <Button
+              <ValidatedSubmitButton
                type="submit"
                className="btn-primary"
-                disabled={btnDisabled}
              >
                <FormattedMessage id="settings_page.new_team.create" />
-              </Button>
+              </ValidatedSubmitButton>
              <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
                <Button>
                  <FormattedMessage id="general.cancel" />
                </Button>
              </LinkContainer>
            </ButtonToolbar>
-          </form>
+          </ValidatedForm>
        </Wrapper>
      </PageTitle>
    );
--- a/app/services/client_api/user_service.rb
+++ b/app/services/client_api/user_service.rb
@ -1,28 +0,0 @@
-module ClientApi
-  class UserService < BaseService
-    def update_user!
-      error = I18n.t('client_api.user.password_invalid')
-      raise CustomUserError, error unless check_current_password
-      @params.delete(:current_password) # removes unneeded element
-      @current_user.update(@params)
-    end
-
-    private
-
-    def check_current_password
-      return true unless @params[:email] || @params[:password]
-      pass_blank_err = I18n.t('client_api.user.blank_password_error')
-      pass_match_err = I18n.t('client_api.user.passwords_dont_match')
-      current_password = @params[:current_password]
-      raise CustomUserError, pass_blank_err unless current_password
-      raise CustomUserError, pass_match_err unless check_password_confirmation
-      @current_user.valid_password? current_password
-    end
-
-    def check_password_confirmation
-      return true if @params[:email]
-      @params[:password] == @params[:password_confirmation]
-    end
-  end
-  CustomUserError = Class.new(StandardError)
-end
--- a/app/services/client_api/users/update_service.rb
+++ b/app/services/client_api/users/update_service.rb
@ -0,0 +1,53 @@
+module ClientApi
+  module Users
+    class UpdateService < BaseService
+      attr_accessor :user
+
+      def execute
+        @user = @current_user
+
+        if current_password_valid? &&
+           password_confirmation_valid? &&
+           @user.update(@params.except(:current_password))
+          success
+        else
+          error(@user.errors.full_messages.uniq.join('. '))
+        end
+      end
+
+      private
+
+      def current_password_valid?
+        # Only check for current_password when updating
+        # email or password
+        return true unless @params[:email] || @params[:password]
+
+        if @user.valid_password?(@params[:current_password])
+          return true
+        else
+          @user.errors.add(
+            :current_password,
+            I18n.t('client_api.user.current_password_invalid')
+          )
+          return false
+        end
+      end
+
+      def password_confirmation_valid?
+        # Only check for password_confirmation when
+        # updating password
+        return true unless @params[:password]
+
+        if @params[:password] == @params[:password_confirmation]
+          return true
+        else
+          @user.errors.add(
+            :password_confirmation,
+            I18n.t('client_api.user.password_confirmation_not_match')
+          )
+          return false
+        end
+      end
+    end
+  end
+end
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -1822,9 +1822,7 @@ en:
      leave_team_error: "An error occured."
      leave_flash: "Successfuly left team %{team}."
    user:
-      blank_password_error: "Password can't be blank!"
-      passwords_dont_match: "Passwords don't match"
-      password_invalid: "Password is invalid!"
-      avatar_too_big: "Avatar file size must be less than 0.2 MB"
+      current_password_invalid: "incorrect password"
+      password_confirmation_not_match: "doesn't match"
    invite_users:
      permission_error: "You don't have permission to invite additional users to team. Contact its administrator/s."
--- a/features/settings_page/profile.feature
+++ b/features/settings_page/profile.feature
@ -24,7 +24,7 @@ Scenario: Unsuccessful avatar image upload, file is too big
  Then I click on image within ".avatar-container" element
  And I attach a "Moon.png" file to "user_avatar_input" field
  Then I click "Update" button
-  And I should see "Avatar file size must be less than 0.2 MB" error message under "user_avatar_input" field
+  And I should see "file too large (maximum size is 0.2 MB)" error message under "user_avatar_input" field

@javascript
 Scenario: Unsuccessful avatar image upload, file is invalid
@ -32,7 +32,7 @@ Scenario: Unsuccessful avatar image upload, file is invalid
  Then I click on image within ".avatar-container" element
  And I attach a "File.txt" file to "user_avatar_input" field
  Then I click "Update" button
-  And I should see "Avatar content type is invalid" error message under "user_avatar_input" field
+  And I should see "invalid file extension" error message under "user_avatar_input" field

@javascript
 Scenario: Successful upload avatar image
@ -93,7 +93,7 @@ Scenario: Unsuccessful Password Change, passwords does not match
  And I fill in "mypassword5678" in New password field
  And I fill in "mypassword56788" in New password confirmation field
  Then I click "Update" button
-  And I should see "Passwords don't match"
+  And I should see "doesn't match"

@javascript
 Scenario: Unsuccessful Password Change, current password is invalid
@ -103,7 +103,7 @@ Scenario: Unsuccessful Password Change, current password is invalid
  And I fill in "mypassword5678" in New password field
  And I fill in "mypassword5678" in New password confirmation field
  Then I click "Update" button
-  And I should see "Password is invalid!"
+  And I should see "incorrect password"

@javascript
 Scenario: Successful Password Change
--- a/spec/services/client_api/user_service_spec.rb
+++ b/spec/services/client_api/user_service_spec.rb
@ -1,80 +0,0 @@
-require 'rails_helper'
-
-describe ClientApi::UserService do
-  let(:user) do
-    create :user,
-           full_name: 'User One',
-           initials: 'UO',
-           email: 'user@happy.com',
-           password: 'asdf1234',
-           password_confirmation: 'asdf1234'
-  end
-
-  describe '#update_user!' do
-    it 'should update user email if the password is correct' do
-      email = 'new_user@happy.com'
-      params = { email: email, current_password: 'asdf1234' }
-      user_service = ClientApi::UserService.new(current_user: user,
-                                                params: params)
-      user_service.update_user!
-      expect(user.email).to eq(email)
-    end
-
-    it 'should raise CustomUserError error if the password is not correct' do
-      email = 'new_user@happy.com'
-      params = { email: email, current_password: 'banana' }
-      user_service = ClientApi::UserService.new(current_user: user,
-                                                params: params)
-      expect {
-        user_service.update_user!
-      }.to raise_error(ClientApi::CustomUserError)
-    end
-
-    it 'should update initials and full name without password confirmation' do
-      full_name = 'Happy User'
-      initials = 'HU'
-      user_service = ClientApi::UserService.new(
-        current_user: user,
-        params: { full_name: full_name, initials: initials }
-      )
-      user_service.update_user!
-      expect(user.full_name).to eq(full_name)
-      expect(user.initials).to eq(initials)
-    end
-
-    it 'should raise an error if current password not present' do
-      user_service = ClientApi::UserService.new(
-        current_user: user,
-        params: { password: 'hello1234', password_confirmation: 'hello1234' }
-      )
-      expect {
-        user_service.update_user!
-      }.to raise_error(ClientApi::CustomUserError)
-    end
-
-    it 'should raise an error if password_confirmation don\'t match' do
-      user_service = ClientApi::UserService.new(
-        current_user: user,
-        params: { password: 'hello1234',
-                  password_confirmation: 'hello1234567890',
-                  current_password: 'asdf1234' }
-      )
-
-      expect {
-        user_service.update_user!
-      }.to raise_error(ClientApi::CustomUserError, 'Passwords don\'t match')
-    end
-
-    it 'should update the password' do
-      new_password = 'hello1234'
-      user_service = ClientApi::UserService.new(
-        current_user: user,
-        params: { password: new_password,
-                  password_confirmation: new_password,
-                  current_password: 'asdf1234' }
-      )
-      user_service.update_user!
-      expect(user.valid_password?(new_password)).to be(true)
-    end
-  end
-end
--- a/spec/services/client_api/users/update_service_spec.rb
+++ b/spec/services/client_api/users/update_service_spec.rb
@ -0,0 +1,79 @@
+require 'rails_helper'
+
+include ClientApi::Users
+
+describe ClientApi::Users::UpdateService do
+  let(:user) do
+    create :user,
+           full_name: 'User One',
+           initials: 'UO',
+           email: 'user@happy.com',
+           password: 'asdf1234',
+           password_confirmation: 'asdf1234'
+  end
+
+  it 'should update user email if the password is correct' do
+    email = 'new_user@happy.com'
+    params = { email: email, current_password: 'asdf1234' }
+    service = UpdateService.new(current_user: user,
+                                     params: params)
+    result = service.execute
+    expect(result[:status]).to eq :success
+    expect(user.email).to eq(email)
+  end
+
+  it 'should raise CustomUserError error if the password is not correct' do
+    email = 'new_user@happy.com'
+    params = { email: email, current_password: 'banana' }
+    service = UpdateService.new(current_user: user,
+                                              params: params)
+    result = service.execute
+    expect(result[:status]).to eq :error
+  end
+
+  it 'should update initials and full name without password confirmation' do
+    full_name = 'Happy User'
+    initials = 'HU'
+    service = UpdateService.new(
+      current_user: user,
+      params: { full_name: full_name, initials: initials }
+    )
+    result = service.execute
+    expect(result[:status]).to eq :success
+    expect(user.full_name).to eq(full_name)
+    expect(user.initials).to eq(initials)
+  end
+
+  it 'should raise an error if current password not present' do
+    service = UpdateService.new(
+      current_user: user,
+      params: { password: 'hello1234', password_confirmation: 'hello1234' }
+    )
+    result = service.execute
+    expect(result[:status]).to eq :error
+  end
+
+  it 'should raise an error if password_confirmation don\'t match' do
+    service = UpdateService.new(
+      current_user: user,
+      params: { password: 'hello1234',
+                password_confirmation: 'hello1234567890',
+                current_password: 'asdf1234' }
+    )
+    result = service.execute
+    expect(result[:status]).to eq :error
+  end
+
+  it 'should update the password' do
+    new_password = 'hello1234'
+    service = UpdateService.new(
+      current_user: user,
+      params: { password: new_password,
+                password_confirmation: new_password,
+                current_password: 'asdf1234' }
+    )
+    result = service.execute
+    expect(result[:status]).to eq :success
+    expect(user.valid_password?(new_password)).to be(true)
+  end
+end