diff --git a/client/src/components/settings/Username.js b/client/src/components/settings/Username.js index 32bacb2760..fdd9e7f39f 100644 --- a/client/src/components/settings/Username.js +++ b/client/src/components/settings/Username.js @@ -9,7 +9,6 @@ import { Alert, FormGroup } from '@freecodecamp/react-bootstrap'; -import isAscii from 'validator/lib/isAscii'; import { validateUsername, @@ -18,6 +17,7 @@ import { } from '../../redux/settings'; import BlockSaveButton from '../helpers/form/BlockSaveButton'; import FullWidthRow from '../helpers/FullWidthRow'; +import { validate } from '../../../../utils/validate'; const propTypes = { isValidUsername: PropTypes.bool, @@ -44,14 +44,6 @@ const mapDispatchToProps = dispatch => dispatch ); -const invalidCharsRE = /[/\s?:@=&"'<>#%{}|\\^~[\]`,.;!*()$]/; -const invlaidCharError = { - valid: false, - error: 'Username contains invalid characters.' -}; -const valididationSuccess = { valid: true, error: null }; -const usernameTooShort = { valid: false, error: 'Username is too short' }; - const hex = '[0-9a-f]'; const tempUserRegex = new RegExp(`^fcc${hex}{8}-(${hex}{4}-){3}${hex}{12}$`); @@ -119,24 +111,14 @@ class UsernameSettings extends Component { } validateFormInput(formValue) { - if (formValue.length < 3) { - return usernameTooShort; - } - - if (!isAscii(formValue)) { - return invlaidCharError; - } - if (invalidCharsRE.test(formValue)) { - return invlaidCharError; - } - return valididationSuccess; + return validate(formValue); } renderAlerts(validating, error, isValidUsername) { if (!validating && error) { return ( - {error} + {'Username ' + error} ); }