2015-11-30 21:11:04 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2017-02-24 14:41:23 +03:00
|
|
|
Copyright 2017 Vector Creations 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.
|
|
|
|
*/
|
|
|
|
|
2017-02-24 14:41:23 +03:00
|
|
|
import React from 'react';
|
|
|
|
import { field_input_incorrect } from '../../../UiEffects';
|
|
|
|
import sdk from '../../../index';
|
|
|
|
import Email from '../../../email';
|
2017-03-14 14:50:13 +03:00
|
|
|
import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
|
2017-02-24 14:41:23 +03:00
|
|
|
import Modal from '../../../Modal';
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2017-02-24 14:41:23 +03:00
|
|
|
const FIELD_EMAIL = 'field_email';
|
2017-03-14 14:50:13 +03:00
|
|
|
const FIELD_PHONE_COUNTRY = 'field_phone_country';
|
|
|
|
const FIELD_PHONE_NUMBER = 'field_phone_number';
|
2017-02-24 14:41:23 +03:00
|
|
|
const FIELD_USERNAME = 'field_username';
|
|
|
|
const FIELD_PASSWORD = 'field_password';
|
|
|
|
const FIELD_PASSWORD_CONFIRM = 'field_password_confirm';
|
2016-01-15 16:31:41 +03:00
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
/**
|
|
|
|
* A pure UI component which displays a registration form.
|
|
|
|
*/
|
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'RegistrationForm',
|
|
|
|
|
|
|
|
propTypes: {
|
2016-07-07 13:23:08 +03:00
|
|
|
// Values pre-filled in the input boxes when the component loads
|
2015-11-30 21:11:04 +03:00
|
|
|
defaultEmail: React.PropTypes.string,
|
2017-03-14 14:50:13 +03:00
|
|
|
defaultPhoneCountry: React.PropTypes.string,
|
|
|
|
defaultPhoneNumber: React.PropTypes.string,
|
2015-11-30 21:11:04 +03:00
|
|
|
defaultUsername: React.PropTypes.string,
|
2016-07-06 17:22:06 +03:00
|
|
|
defaultPassword: React.PropTypes.string,
|
2017-01-18 14:48:28 +03:00
|
|
|
teamsConfig: React.PropTypes.shape({
|
|
|
|
// Email address to request new teams
|
|
|
|
supportEmail: React.PropTypes.string,
|
|
|
|
teams: React.PropTypes.arrayOf(React.PropTypes.shape({
|
|
|
|
// The displayed name of the team
|
|
|
|
"name": React.PropTypes.string,
|
2017-01-27 19:31:36 +03:00
|
|
|
// The domain of team email addresses
|
|
|
|
"domain": React.PropTypes.string,
|
2017-01-18 14:48:28 +03:00
|
|
|
})).required,
|
|
|
|
}),
|
2016-07-07 13:23:08 +03:00
|
|
|
|
2016-07-07 15:03:27 +03:00
|
|
|
// A username that will be used if no username is entered.
|
|
|
|
// Specifying this param will also warn the user that entering
|
2016-07-07 13:23:08 +03:00
|
|
|
// a different username will cause a fresh account to be generated.
|
2016-07-06 17:22:06 +03:00
|
|
|
guestUsername: React.PropTypes.string,
|
2016-07-07 13:23:08 +03:00
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
minPasswordLength: React.PropTypes.number,
|
|
|
|
onError: React.PropTypes.func,
|
2017-02-24 14:41:23 +03:00
|
|
|
onRegisterClick: React.PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
|
2015-11-30 21:11:04 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
minPasswordLength: 6,
|
|
|
|
onError: function(e) {
|
|
|
|
console.error(e);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2017-01-18 14:48:28 +03:00
|
|
|
fieldValid: {},
|
|
|
|
selectedTeam: null,
|
2017-03-14 14:50:13 +03:00
|
|
|
// The ISO2 country code selected in the phone number entry
|
|
|
|
phoneCountry: this.props.defaultPhoneCountry,
|
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);
|
2017-03-14 14:50:13 +03:00
|
|
|
this.validateField(FIELD_PHONE_NUMBER);
|
2016-01-15 19:17:27 +03:00
|
|
|
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() {
|
2017-01-19 12:51:40 +03:00
|
|
|
let email = this.refs.email.value.trim();
|
2016-03-21 04:15:11 +03:00
|
|
|
var promise = this.props.onRegisterClick({
|
2016-07-06 17:22:06 +03:00
|
|
|
username: this.refs.username.value.trim() || this.props.guestUsername,
|
2016-03-21 04:15:11 +03:00
|
|
|
password: this.refs.password.value.trim(),
|
2017-01-19 12:51:40 +03:00
|
|
|
email: email,
|
2017-03-14 14:50:13 +03:00
|
|
|
phoneCountry: this.state.phoneCountry,
|
|
|
|
phoneNumber: this.refs.phoneNumber.value.trim(),
|
2016-03-21 04:15:11 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
if (promise) {
|
|
|
|
ev.target.disabled = true;
|
|
|
|
promise.finally(function() {
|
|
|
|
ev.target.disabled = false;
|
|
|
|
});
|
2016-08-03 17:59:17 +03:00
|
|
|
}
|
2016-03-21 04:15:11 +03:00
|
|
|
},
|
|
|
|
|
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;
|
|
|
|
},
|
|
|
|
|
2017-01-27 19:31:36 +03:00
|
|
|
_isUniEmail: function(email) {
|
2017-02-09 12:29:55 +03:00
|
|
|
return email.endsWith('.ac.uk') || email.endsWith('.edu') || email.endsWith('matrix.org');
|
2017-01-27 19:31:36 +03:00
|
|
|
},
|
|
|
|
|
2016-01-15 16:31:41 +03:00
|
|
|
validateField: function(field_id) {
|
|
|
|
var pwd1 = this.refs.password.value.trim();
|
2017-01-20 17:22:27 +03:00
|
|
|
var pwd2 = this.refs.passwordConfirm.value.trim();
|
2016-01-15 16:31:41 +03:00
|
|
|
|
|
|
|
switch (field_id) {
|
|
|
|
case FIELD_EMAIL:
|
2017-01-27 19:31:36 +03:00
|
|
|
const email = this.refs.email.value;
|
|
|
|
if (this.props.teamsConfig && this._isUniEmail(email)) {
|
|
|
|
const matchingTeam = this.props.teamsConfig.teams.find(
|
|
|
|
(team) => {
|
|
|
|
return email.split('@').pop() === team.domain;
|
|
|
|
}
|
|
|
|
) || null;
|
|
|
|
this.setState({
|
|
|
|
selectedTeam: matchingTeam,
|
|
|
|
showSupportEmail: !matchingTeam,
|
|
|
|
});
|
|
|
|
this.props.onTeamSelected(matchingTeam);
|
|
|
|
} else {
|
|
|
|
this.props.onTeamSelected(null);
|
|
|
|
this.setState({
|
|
|
|
selectedTeam: null,
|
|
|
|
showSupportEmail: false,
|
|
|
|
});
|
2017-01-18 14:48:28 +03:00
|
|
|
}
|
2017-02-24 14:41:23 +03:00
|
|
|
const emailValid = email === '' || Email.looksValid(email);
|
|
|
|
this.markFieldValid(field_id, emailValid, "RegistrationForm.ERR_EMAIL_INVALID");
|
2016-01-15 16:31:41 +03:00
|
|
|
break;
|
2017-03-14 14:50:13 +03:00
|
|
|
case FIELD_PHONE_NUMBER:
|
|
|
|
const phoneNumber = this.refs.phoneNumber.value;
|
|
|
|
const phoneNumberValid = phoneNumber === '' || phoneNumberLooksValid(phoneNumber);
|
|
|
|
this.markFieldValid(field_id, phoneNumberValid, "RegistrationForm.ERR_PHONE_NUMBER_INVALID");
|
|
|
|
break;
|
2016-01-15 16:31:41 +03:00
|
|
|
case FIELD_USERNAME:
|
|
|
|
// XXX: SPEC-1
|
2016-07-06 17:22:06 +03:00
|
|
|
var username = this.refs.username.value.trim() || this.props.guestUsername;
|
2016-03-15 21:35:09 +03:00
|
|
|
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) {
|
2017-02-24 14:41:23 +03:00
|
|
|
field_input_incorrect(this.fieldElementById(field_id));
|
2016-01-15 16:31:41 +03:00
|
|
|
this.props.onError(error_code);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
fieldElementById(field_id) {
|
|
|
|
switch (field_id) {
|
|
|
|
case FIELD_EMAIL:
|
|
|
|
return this.refs.email;
|
2017-03-14 14:50:13 +03:00
|
|
|
case FIELD_PHONE_NUMBER:
|
|
|
|
return this.refs.phoneNumber;
|
2016-01-15 16:31:41 +03:00
|
|
|
case FIELD_USERNAME:
|
|
|
|
return this.refs.username;
|
|
|
|
case FIELD_PASSWORD:
|
|
|
|
return this.refs.password;
|
|
|
|
case FIELD_PASSWORD_CONFIRM:
|
|
|
|
return this.refs.passwordConfirm;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-02-24 14:41:23 +03:00
|
|
|
_classForField: function(field_id, ...baseClasses) {
|
|
|
|
let cls = baseClasses.join(' ');
|
2016-01-15 16:31:41 +03:00
|
|
|
if (this.state.fieldValid[field_id] === false) {
|
2016-08-03 17:59:17 +03:00
|
|
|
if (cls) cls += ' ';
|
|
|
|
cls += 'error';
|
2016-01-15 16:31:41 +03:00
|
|
|
}
|
2016-08-03 17:59:17 +03:00
|
|
|
return cls;
|
2016-01-15 16:31:41 +03:00
|
|
|
},
|
|
|
|
|
2017-03-14 14:50:13 +03:00
|
|
|
_onPhoneCountryChange(newVal) {
|
|
|
|
this.setState({
|
2017-04-25 13:21:47 +03:00
|
|
|
phoneCountry: newVal.iso2,
|
|
|
|
phonePrefix: newVal.prefix,
|
2017-03-14 14:50:13 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
render: function() {
|
2016-01-15 16:31:41 +03:00
|
|
|
var self = this;
|
2017-02-24 14:41:23 +03:00
|
|
|
|
|
|
|
const emailSection = (
|
|
|
|
<div>
|
2017-01-27 19:31:36 +03:00
|
|
|
<input type="text" ref="email"
|
|
|
|
autoFocus={true} placeholder="Email address (optional)"
|
|
|
|
defaultValue={this.props.defaultEmail}
|
|
|
|
className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
|
|
|
|
onBlur={function() {self.validateField(FIELD_EMAIL);}}
|
|
|
|
value={self.state.email}/>
|
2017-02-24 14:41:23 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
let belowEmailSection;
|
|
|
|
if (this.props.teamsConfig) {
|
|
|
|
if (this.props.teamsConfig.supportEmail && this.state.showSupportEmail) {
|
|
|
|
belowEmailSection = (
|
|
|
|
<p className="mx_Login_support">
|
|
|
|
Sorry, but your university is not registered with us just yet.
|
|
|
|
Email us on
|
|
|
|
<a href={"mailto:" + this.props.teamsConfig.supportEmail}>
|
|
|
|
{this.props.teamsConfig.supportEmail}
|
|
|
|
</a>
|
|
|
|
to get your university signed up. Or continue to register with Riot to enjoy our open source platform.
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
} else if (this.state.selectedTeam) {
|
|
|
|
belowEmailSection = (
|
|
|
|
<p className="mx_Login_support">
|
|
|
|
You are registering with {this.state.selectedTeam.name}
|
|
|
|
</p>
|
|
|
|
);
|
2017-01-18 14:48:28 +03:00
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
}
|
|
|
|
|
2017-03-14 14:50:13 +03:00
|
|
|
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
|
|
|
|
const phoneSection = (
|
|
|
|
<div className="mx_Login_phoneSection">
|
|
|
|
<CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
|
2017-05-17 15:04:06 +03:00
|
|
|
className="mx_Login_phoneCountry mx_Login_field_prefix"
|
2017-03-14 14:50:13 +03:00
|
|
|
value={this.state.phoneCountry}
|
2017-05-17 15:04:06 +03:00
|
|
|
isSmall={true}
|
|
|
|
showPrefix={true}
|
|
|
|
/>
|
|
|
|
<input type="text" ref="phoneNumber"
|
|
|
|
placeholder="Mobile phone number (optional)"
|
|
|
|
defaultValue={this.props.defaultPhoneNumber}
|
|
|
|
className={this._classForField(
|
|
|
|
FIELD_PHONE_NUMBER,
|
|
|
|
'mx_Login_phoneNumberField',
|
|
|
|
'mx_Login_field',
|
|
|
|
'mx_Login_field_has_prefix'
|
|
|
|
)}
|
|
|
|
onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}}
|
|
|
|
value={self.state.phoneNumber}
|
2017-03-14 14:50:13 +03:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
2017-02-24 14:41:23 +03:00
|
|
|
const registerButton = (
|
|
|
|
<input className="mx_Login_submit" type="submit" value="Register" />
|
|
|
|
);
|
|
|
|
|
|
|
|
let placeholderUserName = "User name";
|
2016-07-06 17:22:06 +03:00
|
|
|
if (this.props.guestUsername) {
|
2017-01-20 17:22:27 +03:00
|
|
|
placeholderUserName += " (default: " + this.props.guestUsername + ")";
|
2016-03-15 21:35:09 +03:00
|
|
|
}
|
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<form onSubmit={this.onSubmit}>
|
|
|
|
{emailSection}
|
2017-01-27 19:31:36 +03:00
|
|
|
{belowEmailSection}
|
2017-03-14 14:50:13 +03:00
|
|
|
{phoneSection}
|
2016-08-03 17:59:17 +03:00
|
|
|
<input type="text" ref="username"
|
2016-07-06 17:22:06 +03:00
|
|
|
placeholder={ placeholderUserName } defaultValue={this.props.defaultUsername}
|
2016-08-03 17:59:17 +03:00
|
|
|
className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
|
2017-01-20 17:22:27 +03:00
|
|
|
onBlur={function() {self.validateField(FIELD_USERNAME);}} />
|
2015-11-30 21:11:04 +03:00
|
|
|
<br />
|
2016-07-06 17:22:06 +03:00
|
|
|
{ this.props.guestUsername ?
|
2016-03-15 21:35:09 +03:00
|
|
|
<div className="mx_Login_fieldLabel">Setting a user name will create a fresh account</div> : null
|
|
|
|
}
|
2016-08-03 17:59:17 +03:00
|
|
|
<input type="password" ref="password"
|
|
|
|
className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
|
2017-01-20 17:22:27 +03:00
|
|
|
onBlur={function() {self.validateField(FIELD_PASSWORD);}}
|
2016-07-06 17:22:06 +03:00
|
|
|
placeholder="Password" defaultValue={this.props.defaultPassword} />
|
2015-11-30 21:11:04 +03:00
|
|
|
<br />
|
2016-08-03 17:59:17 +03:00
|
|
|
<input type="password" ref="passwordConfirm"
|
2015-11-30 21:11:04 +03:00
|
|
|
placeholder="Confirm password"
|
2016-08-03 17:59:17 +03:00
|
|
|
className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
|
2017-01-20 17:22:27 +03:00
|
|
|
onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM);}}
|
2016-07-06 17:22:06 +03:00
|
|
|
defaultValue={this.props.defaultPassword} />
|
2015-11-30 21:11:04 +03:00
|
|
|
<br />
|
|
|
|
{registerButton}
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|