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)}