diff --git a/client/src/components/settings/Internet.js b/client/src/components/settings/Internet.js index aece69fb86..c6c813c5c5 100644 --- a/client/src/components/settings/Internet.js +++ b/client/src/components/settings/Internet.js @@ -1,5 +1,7 @@ import React, { Fragment, Component } from 'react'; import PropTypes from 'prop-types'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faCheck } from '@fortawesome/free-solid-svg-icons'; import { HelpBlock, FormControl, @@ -139,6 +141,18 @@ class InternetSettings extends Component { return null; }; + renderHelpBlock = validationMessage => + validationMessage ? {validationMessage} : null; + + renderCheck = (url, validation) => + url && validation === 'success' ? ( + + + + + + ) : null; + render() { const { formValues: { githubProfile, linkedin, twitter, website } @@ -176,12 +190,12 @@ class InternetSettings extends Component { GitHub - {githubProfileValidationMessage ? ( - {githubProfileValidationMessage} - ) : null} + {this.renderCheck(githubProfile, githubProfileValidation)} + {this.renderHelpBlock(githubProfileValidationMessage)} LinkedIn - {linkedinValidationMessage ? ( - {linkedinValidationMessage} - ) : null} + {this.renderCheck(linkedin, linkedinValidation)} + {this.renderHelpBlock(linkedinValidationMessage)} Twitter - {twitterValidationMessage ? ( - {twitterValidationMessage} - ) : null} + {this.renderCheck(twitter, twitterValidation)} + {this.renderHelpBlock(twitterValidationMessage)} Personal Website - {websiteValidationMessage ? ( - {websiteValidationMessage} - ) : null} + {this.renderCheck(website, websiteValidation)} + {this.renderHelpBlock(websiteValidationMessage)}