2015-11-30 21:11:04 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-11-30 21:11:04 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var React = require('react');
|
2016-01-15 16:31:41 +03:00
|
|
|
var Velocity = require('velocity-animate');
|
2016-06-07 20:22:01 +03:00
|
|
|
require('velocity-animate/velocity.ui');
|
2015-11-30 21:11:04 +03:00
|
|
|
var sdk = require('../../../index');
|
2016-01-19 19:36:54 +03:00
|
|
|
var Email = require('../../../email');
|
2016-03-21 04:15:11 +03:00
|
|
|
var Modal = require("../../../Modal");
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2016-01-15 16:31:41 +03:00
|
|
|
var FIELD_EMAIL = 'field_email';
|
|
|
|
var FIELD_USERNAME = 'field_username';
|
|
|
|
var FIELD_PASSWORD = 'field_password';
|
|
|
|
var FIELD_PASSWORD_CONFIRM = 'field_password_confirm';
|
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
/**
|
|
|
|
* A pure UI component which displays a registration form.
|
|
|
|
*/
|
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'RegistrationForm',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
defaultEmail: React.PropTypes.string,
|
|
|
|
defaultUsername: React.PropTypes.string,
|
|
|
|
showEmail: React.PropTypes.bool,
|
|
|
|
minPasswordLength: React.PropTypes.number,
|
|
|
|
onError: React.PropTypes.func,
|
|
|
|
onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
|
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
showEmail: false,
|
|
|
|
minPasswordLength: 6,
|
|
|
|
onError: function(e) {
|
|
|
|
console.error(e);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
email: this.props.defaultEmail,
|
2016-03-15 21:35:09 +03:00
|
|
|
username: null,
|
2015-11-30 21:11:04 +03:00
|
|
|
password: null,
|
2016-01-15 16:31:41 +03:00
|
|
|
passwordConfirm: null,
|
|
|
|
fieldValid: {}
|
2015-11-30 21:11:04 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
onSubmit: function(ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
|
2016-01-15 19:17:27 +03:00
|
|
|
// validate everything, in reverse order so
|
|
|
|
// the error that ends up being displayed
|
|
|
|
// is the one from the first invalid field.
|
|
|
|
// It's not super ideal that this just calls
|
|
|
|
// onError once for each invalid field.
|
|
|
|
this.validateField(FIELD_PASSWORD_CONFIRM);
|
|
|
|
this.validateField(FIELD_PASSWORD);
|
|
|
|
this.validateField(FIELD_USERNAME);
|
|
|
|
this.validateField(FIELD_EMAIL);
|
|
|
|
|
2016-03-21 04:15:11 +03:00
|
|
|
var self = this;
|
2016-01-15 19:17:27 +03:00
|
|
|
if (this.allFieldsValid()) {
|
2016-03-21 04:15:11 +03:00
|
|
|
if (this.refs.email.value == '') {
|
|
|
|
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
|
|
|
Modal.createDialog(QuestionDialog, {
|
|
|
|
title: "Warning",
|
|
|
|
description:
|
|
|
|
<div>
|
|
|
|
If you don't specify an email address, you won't be able to reset your password.<br/>
|
|
|
|
Are you sure?
|
|
|
|
</div>,
|
|
|
|
button: "Continue",
|
|
|
|
onFinished: function(confirmed) {
|
|
|
|
if (confirmed) {
|
|
|
|
self._doSubmit();
|
|
|
|
}
|
|
|
|
},
|
2016-01-15 19:17:27 +03:00
|
|
|
});
|
|
|
|
}
|
2016-03-21 04:15:11 +03:00
|
|
|
else {
|
|
|
|
self._doSubmit();
|
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-03-21 04:15:11 +03:00
|
|
|
_doSubmit: function() {
|
|
|
|
var promise = this.props.onRegisterClick({
|
|
|
|
username: this.refs.username.value.trim() || this.props.defaultUsername,
|
|
|
|
password: this.refs.password.value.trim(),
|
|
|
|
email: this.refs.email.value.trim()
|
|
|
|
});
|
|
|
|
|
|
|
|
if (promise) {
|
|
|
|
ev.target.disabled = true;
|
|
|
|
promise.finally(function() {
|
|
|
|
ev.target.disabled = false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-01-15 19:17:27 +03:00
|
|
|
/**
|
|
|
|
* Returns true if all fields were valid last time
|
|
|
|
* they were validated.
|
|
|
|
*/
|
|
|
|
allFieldsValid: function() {
|
|
|
|
var keys = Object.keys(this.state.fieldValid);
|
|
|
|
for (var i = 0; i < keys.length; ++i) {
|
|
|
|
if (this.state.fieldValid[keys[i]] == false) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
},
|
|
|
|
|
2016-01-15 16:31:41 +03:00
|
|
|
validateField: function(field_id) {
|
|
|
|
var pwd1 = this.refs.password.value.trim();
|
|
|
|
var pwd2 = this.refs.passwordConfirm.value.trim()
|
|
|
|
|
|
|
|
switch (field_id) {
|
|
|
|
case FIELD_EMAIL:
|
|
|
|
this.markFieldValid(
|
|
|
|
field_id,
|
2016-01-19 19:36:54 +03:00
|
|
|
this.refs.email.value == '' || Email.looksValid(this.refs.email.value),
|
2016-01-15 16:31:41 +03:00
|
|
|
"RegistrationForm.ERR_EMAIL_INVALID"
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
case FIELD_USERNAME:
|
|
|
|
// XXX: SPEC-1
|
2016-03-15 21:35:09 +03:00
|
|
|
var username = this.refs.username.value.trim() || this.props.defaultUsername;
|
|
|
|
if (encodeURIComponent(username) != username) {
|
2016-01-15 16:31:41 +03:00
|
|
|
this.markFieldValid(
|
|
|
|
field_id,
|
|
|
|
false,
|
|
|
|
"RegistrationForm.ERR_USERNAME_INVALID"
|
|
|
|
);
|
2016-03-15 21:35:09 +03:00
|
|
|
} else if (username == '') {
|
2016-01-15 16:31:41 +03:00
|
|
|
this.markFieldValid(
|
|
|
|
field_id,
|
|
|
|
false,
|
|
|
|
"RegistrationForm.ERR_USERNAME_BLANK"
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
this.markFieldValid(field_id, true);
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case FIELD_PASSWORD:
|
|
|
|
if (pwd1 == '') {
|
|
|
|
this.markFieldValid(
|
|
|
|
field_id,
|
|
|
|
false,
|
|
|
|
"RegistrationForm.ERR_PASSWORD_MISSING"
|
|
|
|
);
|
|
|
|
} else if (pwd1.length < this.props.minPasswordLength) {
|
|
|
|
this.markFieldValid(
|
|
|
|
field_id,
|
|
|
|
false,
|
|
|
|
"RegistrationForm.ERR_PASSWORD_LENGTH"
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
this.markFieldValid(field_id, true);
|
|
|
|
}
|
|
|
|
break;
|
2016-01-15 19:17:27 +03:00
|
|
|
case FIELD_PASSWORD_CONFIRM:
|
|
|
|
this.markFieldValid(
|
|
|
|
field_id, pwd1 == pwd2,
|
|
|
|
"RegistrationForm.ERR_PASSWORD_MISMATCH"
|
|
|
|
);
|
|
|
|
break;
|
2016-01-15 16:31:41 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
markFieldValid: function(field_id, val, error_code) {
|
|
|
|
var fieldValid = this.state.fieldValid;
|
|
|
|
fieldValid[field_id] = val;
|
|
|
|
this.setState({fieldValid: fieldValid});
|
|
|
|
if (!val) {
|
|
|
|
Velocity(this.fieldElementById(field_id), "callout.shake", 300);
|
|
|
|
this.props.onError(error_code);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
fieldElementById(field_id) {
|
|
|
|
switch (field_id) {
|
|
|
|
case FIELD_EMAIL:
|
|
|
|
return this.refs.email;
|
|
|
|
case FIELD_USERNAME:
|
|
|
|
return this.refs.username;
|
|
|
|
case FIELD_PASSWORD:
|
|
|
|
return this.refs.password;
|
|
|
|
case FIELD_PASSWORD_CONFIRM:
|
|
|
|
return this.refs.passwordConfirm;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_styleField: function(field_id, baseStyle) {
|
|
|
|
var style = baseStyle || {};
|
|
|
|
if (this.state.fieldValid[field_id] === false) {
|
|
|
|
style['borderColor'] = 'red';
|
|
|
|
}
|
|
|
|
return style;
|
|
|
|
},
|
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
render: function() {
|
2016-01-15 16:31:41 +03:00
|
|
|
var self = this;
|
2015-11-30 21:11:04 +03:00
|
|
|
var emailSection, registerButton;
|
|
|
|
if (this.props.showEmail) {
|
|
|
|
emailSection = (
|
|
|
|
<input className="mx_Login_field" type="text" ref="email"
|
2016-03-15 21:35:09 +03:00
|
|
|
autoFocus={true} placeholder="Email address (optional)"
|
2016-01-15 16:31:41 +03:00
|
|
|
defaultValue={this.state.email}
|
|
|
|
style={this._styleField(FIELD_EMAIL)}
|
|
|
|
onBlur={function() {self.validateField(FIELD_EMAIL)}} />
|
2015-11-30 21:11:04 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
if (this.props.onRegisterClick) {
|
|
|
|
registerButton = (
|
|
|
|
<input className="mx_Login_submit" type="submit" value="Register" />
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-03-15 21:35:09 +03:00
|
|
|
var placeholderUserName = "User name";
|
|
|
|
if (this.props.defaultUsername) {
|
|
|
|
placeholderUserName += " (default: " + this.props.defaultUsername + ")"
|
|
|
|
}
|
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<form onSubmit={this.onSubmit}>
|
|
|
|
{emailSection}
|
|
|
|
<br />
|
|
|
|
<input className="mx_Login_field" type="text" ref="username"
|
2016-03-15 21:35:09 +03:00
|
|
|
placeholder={ placeholderUserName } defaultValue={this.state.username}
|
2016-01-15 16:31:41 +03:00
|
|
|
style={this._styleField(FIELD_USERNAME)}
|
2016-03-15 21:35:09 +03:00
|
|
|
onBlur={function() {self.validateField(FIELD_USERNAME)}} />
|
2015-11-30 21:11:04 +03:00
|
|
|
<br />
|
2016-03-15 21:35:09 +03:00
|
|
|
{ this.props.defaultUsername ?
|
|
|
|
<div className="mx_Login_fieldLabel">Setting a user name will create a fresh account</div> : null
|
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
<input className="mx_Login_field" type="password" ref="password"
|
2016-01-15 16:31:41 +03:00
|
|
|
style={this._styleField(FIELD_PASSWORD)}
|
|
|
|
onBlur={function() {self.validateField(FIELD_PASSWORD)}}
|
2015-11-30 21:11:04 +03:00
|
|
|
placeholder="Password" defaultValue={this.state.password} />
|
|
|
|
<br />
|
|
|
|
<input className="mx_Login_field" type="password" ref="passwordConfirm"
|
|
|
|
placeholder="Confirm password"
|
2016-01-15 16:31:41 +03:00
|
|
|
style={this._styleField(FIELD_PASSWORD_CONFIRM)}
|
|
|
|
onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM)}}
|
2015-11-30 21:11:04 +03:00
|
|
|
defaultValue={this.state.passwordConfirm} />
|
|
|
|
<br />
|
|
|
|
{registerButton}
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|