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

feat: add message to warn users before changing name (#37527)

Browse Source 
Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
This commit is contained in:
Parth Parth
2019-11-04 18:54:18 +05:30
committed by mrugesh
parent 94340c7b1a
commit c2e7809ccd
1 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/settings/Username.js
View File

@ -47,11 +47,14 @@ const mapDispatchToProps = dispatch =>
const invalidCharsRE = /[/\s?:@=&"'<>#%{}|\\^~[\]`,.;!*()$]/; const invalidCharsRE = /[/\s?:@=&"'<>#%{}|\\^~[\]`,.;!*()$]/;
const invlaidCharError = { const invlaidCharError = {
valid: false, valid: false,
error: 'Username contains invalid characters' error: 'Username contains invalid characters.'
}; };
const valididationSuccess = { valid: true, error: null }; const valididationSuccess = { valid: true, error: null };
const usernameTooShort = { valid: false, error: 'Username is too short' }; 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}$`);
class UsernameSettings extends Component { class UsernameSettings extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -60,7 +63,8 @@ class UsernameSettings extends Component {
isFormPristine: true, isFormPristine: true,
formValue: props.username, formValue: props.username,
characterValidation: { valid: false, error: null }, characterValidation: { valid: false, error: null },
submitClicked: false submitClicked: false,
isUserNew: tempUserRegex.test(props.username)
}; };
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
@ -77,7 +81,8 @@ class UsernameSettings extends Component {
/* eslint-disable-next-line react/no-did-update-set-state */ /* eslint-disable-next-line react/no-did-update-set-state */
return this.setState({ return this.setState({
isFormPristine: username === formValue, isFormPristine: username === formValue,
submitClicked: false submitClicked: false,
isUserNew: tempUserRegex.test(username)
}); });
} }
return null; return null;
@ -138,21 +143,31 @@ class UsernameSettings extends Component {
if (!validating && !isValidUsername) { if (!validating && !isValidUsername) {
return ( return (
<FullWidthRow> <FullWidthRow>
<Alert bsStyle='warning'>Username not available</Alert> <Alert bsStyle='warning'>Username not available.</Alert>
</FullWidthRow> </FullWidthRow>
); );
} }
if (validating) { if (validating) {
return ( return (
<FullWidthRow> <FullWidthRow>
<Alert bsStyle='info'>Validating username</Alert> <Alert bsStyle='info'>Validating username...</Alert>
</FullWidthRow> </FullWidthRow>
); );
} }
if (!validating && isValidUsername) { if (!validating && isValidUsername && this.state.isUserNew) {
return ( return (
<FullWidthRow> <FullWidthRow>
<Alert bsStyle='success'>Username is available</Alert> <Alert bsStyle='success'>Username is available.</Alert>
</FullWidthRow>
);
} else if (!validating && isValidUsername && !this.state.isUserNew) {
return (
<FullWidthRow>
<Alert bsStyle='success'>Username is available.</Alert>
<Alert bsStyle='info'>
Please note, changing your username will also change the URL to your
profile and your certifications.
</Alert>
</FullWidthRow> </FullWidthRow>
); );
} }