diff options
author | Tayane Fernandes <tayane.rmf@gmail.com> | 2016-11-18 15:50:48 -0200 |
---|---|---|
committer | Tayane Fernandes <tayane.rmf@gmail.com> | 2016-11-18 15:50:48 -0200 |
commit | ae63265323f63e3287d59033748830c38d9e964e (patch) | |
tree | c1abe68214d77ee8b0044854de9228cf8a4c034b | |
parent | 18bfeae8ec1e7e91248c90d5b76d2fe07598db9e (diff) |
[#801] Add validation to the invite code
Disable the submit button when the invite code is empty
-rw-r--r-- | web-ui/src/js/index.js | 20 |
1 files changed, 16 insertions, 4 deletions
diff --git a/web-ui/src/js/index.js b/web-ui/src/js/index.js index 35de6407..57ec42a6 100644 --- a/web-ui/src/js/index.js +++ b/web-ui/src/js/index.js @@ -26,10 +26,8 @@ class PixelatedForm extends PixelatedComponent { const immutableActionProperties = new Map(actionProperties); this.props.store.dispatch(immutableActionProperties.merge({status: 'STARTED'}).toJS()); fetch(url).then((response) => { - console.debug('got a reply', response); return response.json() }).then((json) => { - console.debug('got json', json); setTimeout(() => { this.props.store.dispatch(immutableActionProperties.merge({status: 'SUCCESS', json: json}).toJS()); }, 3000); @@ -43,13 +41,19 @@ class PixelatedForm extends PixelatedComponent { class InviteCodeForm extends PixelatedForm { render() { + let className = "blue-button validation-link"; + + if(!this.state.inviteCodeValidation) { + className = className + " disabled"; + } + return ( <form onSubmit={this._handleClick.bind(this)}> <div className="field-group"> - <input type="text" name="invite-code" className="invite-code" required/> + <input type="text" name="invite-code" className="invite-code" onChange={this._handleInputEmpty.bind(this)} required/> <label className="animated-label" htmlFor="invite-code">invite code</label> </div> - <input type="submit" value="Get Started" className="blue-button validation-link" /> + <input type="submit" value="Get Started" className={className} /> </form> ); } @@ -59,6 +63,10 @@ class InviteCodeForm extends PixelatedForm { event.preventDefault(); this.props.store.dispatch({type: 'SUBMIT_INVITE_CODE', inviteCode: event.target['invite-code'].value}); } + + _handleInputEmpty(event) { + this.props.store.dispatch({type: 'VALIDATE_INVITE_CODE', inviteCode: event.target.value}); + } } @@ -211,6 +219,10 @@ const store = createStore((state=initialState, action) => { } case 'SUBMIT_BACKUP_EMAIL_SENT': return state.merge({}); + case 'VALIDATE_INVITE_CODE': + return state.merge({ + inviteCodeValidation: Boolean(action.inviteCode) + }); default: return state; } |