gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(client): Improve client validation accessibility (#37459)

Browse Source
This commit is contained in:
Kishore Devaraj 2019-11-06 14:13:58 +00:00 committed by mrugesh
parent 699ffc5593
commit 06277c8436
1 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/components/settings/Internet.js
View File

@ -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 ? <HelpBlock>{validationMessage}</HelpBlock> : null;
renderCheck = (url, validation) =>
url && validation === 'success' ? (
<FormControl.Feedback>
<span>
<FontAwesomeIcon icon={faCheck} size='1x' />
</span>
</FormControl.Feedback>
) : null;
render() {
const {
formValues: { githubProfile, linkedin, twitter, website }
@ -176,12 +190,12 @@ class InternetSettings extends Component {
<ControlLabel>GitHub</ControlLabel>
<FormControl
onChange={this.createHandleChange('githubProfile')}
placeholder='https://github.com/user-name'
type='url'
value={githubProfile}
/>
{githubProfileValidationMessage ? (
<HelpBlock>{githubProfileValidationMessage}</HelpBlock>
) : null}
{this.renderCheck(githubProfile, githubProfileValidation)}
{this.renderHelpBlock(githubProfileValidationMessage)}
</FormGroup>
<FormGroup
controlId='internet-linkedin'
@ -190,12 +204,12 @@ class InternetSettings extends Component {
<ControlLabel>LinkedIn</ControlLabel>
<FormControl
onChange={this.createHandleChange('linkedin')}
placeholder='https://www.linkedin.com/in/user-name'
type='url'
value={linkedin}
/>
{linkedinValidationMessage ? (
<HelpBlock>{linkedinValidationMessage}</HelpBlock>
) : null}
{this.renderCheck(linkedin, linkedinValidation)}
{this.renderHelpBlock(linkedinValidationMessage)}
</FormGroup>
<FormGroup
controlId='internet-picture'
@ -204,12 +218,12 @@ class InternetSettings extends Component {
<ControlLabel>Twitter</ControlLabel>
<FormControl
onChange={this.createHandleChange('twitter')}
placeholder='https://twitter.com/user-name'
type='url'
value={twitter}
/>
{twitterValidationMessage ? (
<HelpBlock>{twitterValidationMessage}</HelpBlock>
) : null}
{this.renderCheck(twitter, twitterValidation)}
{this.renderHelpBlock(twitterValidationMessage)}
</FormGroup>
<FormGroup
controlId='internet-website'
@ -218,12 +232,12 @@ class InternetSettings extends Component {
<ControlLabel>Personal Website</ControlLabel>
<FormControl
onChange={this.createHandleChange('website')}
placeholder='https://example.com'
type='url'
value={website}
/>
{websiteValidationMessage ? (
<HelpBlock>{websiteValidationMessage}</HelpBlock>
) : null}
{this.renderCheck(website, websiteValidation)}
{this.renderHelpBlock(websiteValidationMessage)}
</FormGroup>
<BlockSaveButton
disabled={this.isFormPristine() || !this.isFormValid()}