diff --git a/client/src/components/settings/Email.js b/client/src/components/settings/Email.js index 60b1a852acf..dbc70ad64d7 100644 --- a/client/src/components/settings/Email.js +++ b/client/src/components/settings/Email.js @@ -100,7 +100,7 @@ class EmailSettings extends Component { return { state: 'success', message: '' }; } else { return { - state: 'warning', + state: 'error', message: 'We could not validate your email correctly, ' + 'please ensure it is correct' diff --git a/client/src/components/settings/Internet.js b/client/src/components/settings/Internet.js index 00ce42226c1..a81f0a600e3 100644 --- a/client/src/components/settings/Internet.js +++ b/client/src/components/settings/Internet.js @@ -1,6 +1,7 @@ import React, { Fragment, Component } from 'react'; import PropTypes from 'prop-types'; import { + HelpBlock, FormControl, FormGroup, ControlLabel @@ -40,12 +41,23 @@ class InternetSettings extends Component { getValidationStateFor(maybeURl = '') { if (!maybeURl || !maybeUrlRE.test(maybeURl)) { - return null; + return { + state: null, + message: '' + }; } if (isURL(maybeURl)) { - return 'success'; + return { + state: 'success', + message: '' + }; } - return 'error'; + return { + state: 'error', + message: + 'We could not validate your URL correctly, ' + + 'please ensure it is correct' + }; } createHandleChange = key => e => { @@ -88,6 +100,27 @@ class InternetSettings extends Component { const { formValues: { githubProfile, linkedin, twitter, website } } = this.state; + + const { + state: githubProfileValidation, + message: githubProfileValidationMessage + } = this.getValidationStateFor(githubProfile); + + const { + state: linkedinValidation, + message: linkedinValidationMessage + } = this.getValidationStateFor(linkedin); + + const { + state: twitterValidation, + message: twitterValidationMessage + } = this.getValidationStateFor(twitter); + + const { + state: websiteValidation, + message: websiteValidationMessage + } = this.getValidationStateFor(website); + return ( Your Internet Presence @@ -95,55 +128,59 @@ class InternetSettings extends Component {
- - GitHub - + GitHub + {githubProfileValidationMessage ? ( + {githubProfileValidationMessage} + ) : null} - - LinkedIn - + LinkedIn + {linkedinValidationMessage ? ( + {linkedinValidationMessage} + ) : null} - - Twitter - + Twitter + {twitterValidationMessage ? ( + {twitterValidationMessage} + ) : null} - - Personal Website - + Personal Website + {websiteValidationMessage ? ( + {websiteValidationMessage} + ) : null}