summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTayane Fernandes <tayane.rmf@gmail.com>2016-11-18 15:50:48 -0200
committerTayane Fernandes <tayane.rmf@gmail.com>2016-11-18 15:50:48 -0200
commitae63265323f63e3287d59033748830c38d9e964e (patch)
treec1abe68214d77ee8b0044854de9228cf8a4c034b
parent18bfeae8ec1e7e91248c90d5b76d2fe07598db9e (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.js20
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;
}