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
|
2019-01-21 21:05:07 +03:00
|
|
|
Copyright 2018, 2019 New Vector 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 Matrix from 'matrix-js-sdk';
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2017-07-12 15:58:14 +03:00
|
|
|
import Promise from 'bluebird';
|
2017-02-28 18:05:49 +03:00
|
|
|
import React from 'react';
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2017-02-28 18:05:49 +03:00
|
|
|
import sdk from '../../../index';
|
2018-08-16 15:31:17 +03:00
|
|
|
import { _t, _td } from '../../../languageHandler';
|
2017-11-12 02:46:43 +03:00
|
|
|
import SdkConfig from '../../../SdkConfig';
|
2018-08-16 15:31:17 +03:00
|
|
|
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
|
2019-01-29 21:09:07 +03:00
|
|
|
import * as ServerType from '../../views/auth/ServerTypeSelector';
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2017-02-28 18:05:49 +03:00
|
|
|
const MIN_PASSWORD_LENGTH = 6;
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2019-01-29 21:09:07 +03:00
|
|
|
// Phases
|
|
|
|
// Show controls to configure server details
|
|
|
|
const PHASE_SERVER_DETAILS = 0;
|
|
|
|
// Show the appropriate registration flow(s) for the server
|
|
|
|
const PHASE_REGISTRATION = 1;
|
|
|
|
|
|
|
|
// Enable phases for registration
|
|
|
|
const PHASES_ENABLED = true;
|
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'Registration',
|
|
|
|
|
|
|
|
propTypes: {
|
2017-12-26 04:03:18 +03:00
|
|
|
onLoggedIn: PropTypes.func.isRequired,
|
|
|
|
clientSecret: PropTypes.string,
|
|
|
|
sessionId: PropTypes.string,
|
|
|
|
makeRegistrationUrl: PropTypes.func.isRequired,
|
|
|
|
idSid: PropTypes.string,
|
|
|
|
customHsUrl: PropTypes.string,
|
|
|
|
customIsUrl: PropTypes.string,
|
|
|
|
defaultHsUrl: PropTypes.string,
|
|
|
|
defaultIsUrl: PropTypes.string,
|
|
|
|
brand: PropTypes.string,
|
|
|
|
email: PropTypes.string,
|
2018-12-05 09:34:57 +03:00
|
|
|
// An error passed along from higher up explaining that something
|
|
|
|
// went wrong when finding the defaultHsUrl.
|
|
|
|
defaultServerDiscoveryError: PropTypes.string,
|
2015-11-30 21:11:04 +03:00
|
|
|
// registration shouldn't know or care how login is done.
|
2017-12-26 04:03:18 +03:00
|
|
|
onLoginClick: PropTypes.func.isRequired,
|
2018-02-07 18:51:03 +03:00
|
|
|
onServerConfigChange: PropTypes.func.isRequired,
|
2015-11-30 21:11:04 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
2019-02-05 08:25:13 +03:00
|
|
|
const customURLsAllowed = !SdkConfig.get()['disable_custom_urls'];
|
2019-02-13 21:12:34 +03:00
|
|
|
let initialPhase = PHASE_SERVER_DETAILS;
|
|
|
|
if (
|
|
|
|
// if we have these two, skip to the good bit
|
2019-02-13 22:06:44 +03:00
|
|
|
// (they could come in from the URL params in a
|
|
|
|
// registration email link)
|
2019-02-13 21:12:34 +03:00
|
|
|
(this.props.clientSecret && this.props.sessionId) ||
|
|
|
|
// or if custom URLs aren't allowed, skip them
|
|
|
|
!customURLsAllowed
|
|
|
|
) {
|
|
|
|
initialPhase = PHASE_REGISTRATION;
|
|
|
|
}
|
2019-02-05 08:25:13 +03:00
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
return {
|
|
|
|
busy: false,
|
|
|
|
errorText: null,
|
2016-07-07 13:26:35 +03:00
|
|
|
// We remember the values entered by the user because
|
|
|
|
// the registration form will be unmounted during the
|
|
|
|
// course of registration, but if there's an error we
|
|
|
|
// want to bring back the registration form with the
|
2016-07-07 15:03:27 +03:00
|
|
|
// values the user entered still in it. We can keep
|
2016-07-07 13:26:35 +03:00
|
|
|
// them in this component's state since this component
|
|
|
|
// persist for the duration of the registration process.
|
2016-07-06 17:22:06 +03:00
|
|
|
formVals: {
|
|
|
|
email: this.props.email,
|
|
|
|
},
|
2017-02-24 14:41:23 +03:00
|
|
|
// true if we're waiting for the user to complete
|
|
|
|
// user-interactive auth
|
|
|
|
// If we've been given a session ID, we're resuming
|
|
|
|
// straight back into UI auth
|
|
|
|
doingUIAuth: Boolean(this.props.sessionId),
|
2019-02-20 14:23:36 +03:00
|
|
|
serverType: ServerType.getTypeFromHsUrl(this.props.customHsUrl),
|
2017-02-27 20:24:28 +03:00
|
|
|
hsUrl: this.props.customHsUrl,
|
|
|
|
isUrl: this.props.customIsUrl,
|
2019-02-05 08:25:13 +03:00
|
|
|
// Phase of the overall registration dialog.
|
2019-02-13 21:12:34 +03:00
|
|
|
phase: initialPhase,
|
2018-09-04 20:26:09 +03:00
|
|
|
flows: null,
|
2015-11-30 21:11:04 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount: function() {
|
2017-01-27 19:31:36 +03:00
|
|
|
this._unmounted = false;
|
2017-02-24 14:41:23 +03:00
|
|
|
this._replaceClient();
|
2015-11-30 21:11:04 +03:00
|
|
|
},
|
|
|
|
|
2017-04-25 21:21:09 +03:00
|
|
|
onServerConfigChange: function(config) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const newState = {};
|
2017-04-25 21:21:09 +03:00
|
|
|
if (config.hsUrl !== undefined) {
|
|
|
|
newState.hsUrl = config.hsUrl;
|
|
|
|
}
|
|
|
|
if (config.isUrl !== undefined) {
|
|
|
|
newState.isUrl = config.isUrl;
|
|
|
|
}
|
2018-02-07 18:51:03 +03:00
|
|
|
this.props.onServerConfigChange(config);
|
2018-06-21 16:04:08 +03:00
|
|
|
this.setState(newState, () => {
|
2017-04-25 21:21:09 +03:00
|
|
|
this._replaceClient();
|
2017-02-27 20:24:28 +03:00
|
|
|
});
|
2015-11-30 21:11:04 +03:00
|
|
|
},
|
|
|
|
|
2019-02-20 14:23:36 +03:00
|
|
|
onServerTypeChange(type) {
|
2019-01-29 21:09:07 +03:00
|
|
|
this.setState({
|
|
|
|
serverType: type,
|
|
|
|
});
|
|
|
|
|
|
|
|
// When changing server types, set the HS / IS URLs to reasonable defaults for the
|
|
|
|
// the new type.
|
|
|
|
switch (type) {
|
|
|
|
case ServerType.FREE: {
|
|
|
|
const { hsUrl, isUrl } = ServerType.TYPES.FREE;
|
|
|
|
this.onServerConfigChange({
|
|
|
|
hsUrl,
|
|
|
|
isUrl,
|
|
|
|
});
|
|
|
|
// Move directly to the registration phase since the server details are fixed.
|
|
|
|
this.setState({
|
|
|
|
phase: PHASE_REGISTRATION,
|
|
|
|
});
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case ServerType.PREMIUM:
|
|
|
|
case ServerType.ADVANCED:
|
|
|
|
this.onServerConfigChange({
|
|
|
|
hsUrl: this.props.defaultHsUrl,
|
|
|
|
isUrl: this.props.defaultIsUrl,
|
|
|
|
});
|
2019-02-20 14:23:36 +03:00
|
|
|
// Reset back to server details on type change.
|
|
|
|
this.setState({
|
|
|
|
phase: PHASE_SERVER_DETAILS,
|
|
|
|
});
|
2019-01-29 21:09:07 +03:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-09-04 20:26:09 +03:00
|
|
|
_replaceClient: async function() {
|
2019-01-30 08:47:35 +03:00
|
|
|
this.setState({
|
|
|
|
errorText: null,
|
|
|
|
});
|
2017-02-24 14:41:23 +03:00
|
|
|
this._matrixClient = Matrix.createClient({
|
2017-02-27 20:24:28 +03:00
|
|
|
baseUrl: this.state.hsUrl,
|
|
|
|
idBaseUrl: this.state.isUrl,
|
2016-01-27 18:44:12 +03:00
|
|
|
});
|
2018-09-04 20:26:09 +03:00
|
|
|
try {
|
2018-09-04 20:51:24 +03:00
|
|
|
await this._makeRegisterRequest({});
|
2018-09-04 20:26:09 +03:00
|
|
|
// This should never succeed since we specified an empty
|
|
|
|
// auth object.
|
|
|
|
console.log("Expecting 401 from register request but got success!");
|
|
|
|
} catch (e) {
|
|
|
|
if (e.httpStatus === 401) {
|
|
|
|
this.setState({
|
|
|
|
flows: e.data.flows,
|
|
|
|
});
|
2019-02-01 00:54:53 +03:00
|
|
|
} else if (e.httpStatus === 403 && e.errcode === "M_UNKNOWN") {
|
|
|
|
this.setState({
|
2019-02-01 17:31:36 +03:00
|
|
|
errorText: _t("Registration has been disabled on this homeserver."),
|
2019-02-01 00:54:53 +03:00
|
|
|
});
|
2018-09-04 20:26:09 +03:00
|
|
|
} else {
|
|
|
|
this.setState({
|
2019-02-01 17:32:47 +03:00
|
|
|
errorText: _t("Unable to query for supported registration methods."),
|
2018-09-04 20:26:09 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onFormSubmit: function(formVals) {
|
2018-12-05 09:34:57 +03:00
|
|
|
// Don't allow the user to register if there's a discovery error
|
|
|
|
// Without this, the user could end up registering on the wrong homeserver.
|
|
|
|
if (this.props.defaultServerDiscoveryError) {
|
|
|
|
this.setState({errorText: this.props.defaultServerDiscoveryError});
|
|
|
|
return;
|
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
this.setState({
|
|
|
|
errorText: "",
|
2016-07-06 17:22:06 +03:00
|
|
|
busy: true,
|
|
|
|
formVals: formVals,
|
2017-02-24 14:41:23 +03:00
|
|
|
doingUIAuth: true,
|
2015-11-30 21:11:04 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2019-01-26 01:10:54 +03:00
|
|
|
_onUIAuthFinished: async function(success, response, extra) {
|
2017-02-27 20:24:28 +03:00
|
|
|
if (!success) {
|
2017-03-15 19:44:56 +03:00
|
|
|
let msg = response.message || response.toString();
|
|
|
|
// can we give a better error message?
|
2018-08-15 19:03:54 +03:00
|
|
|
if (response.errcode == 'M_RESOURCE_LIMIT_EXCEEDED') {
|
2018-08-16 15:31:17 +03:00
|
|
|
const errorTop = messageForResourceLimitError(
|
|
|
|
response.data.limit_type,
|
|
|
|
response.data.admin_contact, {
|
|
|
|
'monthly_active_user': _td(
|
|
|
|
"This homeserver has hit its Monthly Active User limit.",
|
|
|
|
),
|
|
|
|
'': _td(
|
|
|
|
"This homeserver has exceeded one of its resource limits.",
|
|
|
|
),
|
|
|
|
});
|
|
|
|
const errorDetail = messageForResourceLimitError(
|
|
|
|
response.data.limit_type,
|
|
|
|
response.data.admin_contact, {
|
|
|
|
'': _td(
|
2018-08-15 19:03:54 +03:00
|
|
|
"Please <a>contact your service administrator</a> to continue using this service.",
|
2018-08-16 15:31:17 +03:00
|
|
|
),
|
|
|
|
});
|
|
|
|
msg = <div>
|
|
|
|
<p>{errorTop}</p>
|
|
|
|
<p>{errorDetail}</p>
|
2018-08-02 18:09:57 +03:00
|
|
|
</div>;
|
|
|
|
} else if (response.required_stages && response.required_stages.indexOf('m.login.msisdn') > -1) {
|
2018-06-21 16:04:08 +03:00
|
|
|
let msisdnAvailable = false;
|
2017-03-15 19:44:56 +03:00
|
|
|
for (const flow of response.available_flows) {
|
2018-06-21 16:04:08 +03:00
|
|
|
msisdnAvailable |= flow.stages.indexOf('m.login.msisdn') > -1;
|
2017-03-15 19:44:56 +03:00
|
|
|
}
|
2018-06-21 16:04:08 +03:00
|
|
|
if (!msisdnAvailable) {
|
2017-05-23 17:16:31 +03:00
|
|
|
msg = _t('This server does not support authentication with a phone number.');
|
2017-03-15 19:44:56 +03:00
|
|
|
}
|
|
|
|
}
|
2017-02-27 20:24:28 +03:00
|
|
|
this.setState({
|
|
|
|
busy: false,
|
|
|
|
doingUIAuth: false,
|
2017-03-15 19:44:56 +03:00
|
|
|
errorText: msg,
|
2017-02-27 20:24:28 +03:00
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-02-24 14:41:23 +03:00
|
|
|
this.setState({
|
|
|
|
// we're still busy until we get unmounted: don't show the registration form again
|
|
|
|
busy: true,
|
|
|
|
doingUIAuth: false,
|
|
|
|
});
|
2016-06-02 15:14:52 +03:00
|
|
|
|
2019-01-26 01:10:54 +03:00
|
|
|
const cli = await this.props.onLoggedIn({
|
|
|
|
userId: response.user_id,
|
|
|
|
deviceId: response.device_id,
|
|
|
|
homeserverUrl: this._matrixClient.getHomeserverUrl(),
|
|
|
|
identityServerUrl: this._matrixClient.getIdentityServerUrl(),
|
|
|
|
accessToken: response.access_token,
|
2017-03-06 20:31:21 +03:00
|
|
|
});
|
2019-01-26 01:10:54 +03:00
|
|
|
|
|
|
|
this._setupPushers(cli);
|
2015-11-30 21:11:04 +03:00
|
|
|
},
|
|
|
|
|
2017-06-19 12:22:18 +03:00
|
|
|
_setupPushers: function(matrixClient) {
|
2017-02-28 18:18:00 +03:00
|
|
|
if (!this.props.brand) {
|
2017-07-12 16:02:00 +03:00
|
|
|
return Promise.resolve();
|
2017-02-24 14:41:23 +03:00
|
|
|
}
|
2017-06-19 12:22:18 +03:00
|
|
|
return matrixClient.getPushers().then((resp)=>{
|
2017-03-01 13:45:17 +03:00
|
|
|
const pushers = resp.pushers;
|
|
|
|
for (let i = 0; i < pushers.length; ++i) {
|
2018-06-21 16:04:08 +03:00
|
|
|
if (pushers[i].kind === 'email') {
|
2017-03-01 13:45:17 +03:00
|
|
|
const emailPusher = pushers[i];
|
2017-02-28 18:18:00 +03:00
|
|
|
emailPusher.data = { brand: this.props.brand };
|
2017-06-19 12:22:18 +03:00
|
|
|
matrixClient.setPusher(emailPusher).done(() => {
|
2017-02-28 18:18:00 +03:00
|
|
|
console.log("Set email branding to " + this.props.brand);
|
2017-02-28 18:05:49 +03:00
|
|
|
}, (error) => {
|
|
|
|
console.error("Couldn't set email branding: " + error);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, (error) => {
|
|
|
|
console.error("Couldn't get pushers: " + error);
|
|
|
|
});
|
2015-11-30 21:11:04 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onFormValidationFailed: function(errCode) {
|
2017-10-11 19:56:17 +03:00
|
|
|
let errMsg;
|
2015-11-30 21:11:04 +03:00
|
|
|
switch (errCode) {
|
|
|
|
case "RegistrationForm.ERR_PASSWORD_MISSING":
|
2017-05-23 17:16:31 +03:00
|
|
|
errMsg = _t('Missing password.');
|
2015-11-30 21:11:04 +03:00
|
|
|
break;
|
|
|
|
case "RegistrationForm.ERR_PASSWORD_MISMATCH":
|
2017-05-23 17:16:31 +03:00
|
|
|
errMsg = _t('Passwords don\'t match.');
|
2015-11-30 21:11:04 +03:00
|
|
|
break;
|
|
|
|
case "RegistrationForm.ERR_PASSWORD_LENGTH":
|
2018-06-21 16:04:08 +03:00
|
|
|
errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH});
|
2015-11-30 21:11:04 +03:00
|
|
|
break;
|
2016-01-15 16:31:41 +03:00
|
|
|
case "RegistrationForm.ERR_EMAIL_INVALID":
|
2017-05-23 17:16:31 +03:00
|
|
|
errMsg = _t('This doesn\'t look like a valid email address.');
|
2016-01-15 16:31:41 +03:00
|
|
|
break;
|
2017-03-14 14:50:13 +03:00
|
|
|
case "RegistrationForm.ERR_PHONE_NUMBER_INVALID":
|
2017-05-23 17:16:31 +03:00
|
|
|
errMsg = _t('This doesn\'t look like a valid phone number.');
|
2017-03-14 14:50:13 +03:00
|
|
|
break;
|
2018-09-27 20:53:45 +03:00
|
|
|
case "RegistrationForm.ERR_MISSING_EMAIL":
|
|
|
|
errMsg = _t('An email address is required to register on this homeserver.');
|
|
|
|
break;
|
|
|
|
case "RegistrationForm.ERR_MISSING_PHONE_NUMBER":
|
|
|
|
errMsg = _t('A phone number is required to register on this homeserver.');
|
|
|
|
break;
|
2016-01-15 16:31:41 +03:00
|
|
|
case "RegistrationForm.ERR_USERNAME_INVALID":
|
2018-12-14 02:05:34 +03:00
|
|
|
errMsg = _t("Only use lower case letters, numbers and '=_-./'");
|
2016-01-15 16:31:41 +03:00
|
|
|
break;
|
|
|
|
case "RegistrationForm.ERR_USERNAME_BLANK":
|
2019-01-25 23:25:29 +03:00
|
|
|
errMsg = _t('You need to enter a username.');
|
2016-01-15 16:31:41 +03:00
|
|
|
break;
|
2015-11-30 21:11:04 +03:00
|
|
|
default:
|
|
|
|
console.error("Unknown error code: %s", errCode);
|
2017-05-23 17:16:31 +03:00
|
|
|
errMsg = _t('An unknown error occurred.');
|
2015-11-30 21:11:04 +03:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
this.setState({
|
2017-10-11 19:56:17 +03:00
|
|
|
errorText: errMsg,
|
2015-11-30 21:11:04 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
Fix browser navigation not working between /home, /login, /register, etc
All of the anchors were pointed at `#` which, when clicked, would trigger a hash change in the browser. This change races the change made by the screen handling where the screen handling ends up losing. Because the hash is then tracked as empty rather than `#/login` (for example), the state machine considers future changes as no-ops and doesn't do anything with them.
By using `preventDefault` and `stopPropagation` on the anchor click events, we prevent the browser from automatically going to an empty hash, which then means the screen handling isn't racing the browser, and the hash change state machine doesn't no-op.
After applying that fix, going between pages worked great unless you were going from /login to /home. This is because the MatrixChat state machine was now out of sync (a `view` of `LOGIN` but a `page` of `HomePage` - an invalid state). All we have to do here is ensure the right view is used when navigating to the homepage.
Fixes https://github.com/vector-im/riot-web/issues/4061
Note: the concerns in 4061 about logging out upon entering the view appear to have been solved. Navigating to the login page doesn't obliterate your session, at least in my testing.
2018-12-21 03:26:13 +03:00
|
|
|
onLoginClick: function(ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.props.onLoginClick();
|
|
|
|
},
|
|
|
|
|
2019-01-29 21:24:27 +03:00
|
|
|
onServerDetailsNextPhaseClick(ev) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.setState({
|
|
|
|
phase: PHASE_REGISTRATION,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2019-01-30 00:05:15 +03:00
|
|
|
onEditServerDetailsClick(ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.setState({
|
|
|
|
phase: PHASE_SERVER_DETAILS,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-02-24 14:41:23 +03:00
|
|
|
_makeRegisterRequest: function(auth) {
|
2017-03-14 14:50:13 +03:00
|
|
|
// Only send the bind params if we're sending username / pw params
|
|
|
|
// (Since we need to send no params at all to use the ones saved in the
|
|
|
|
// session).
|
|
|
|
const bindThreepids = this.state.formVals.password ? {
|
|
|
|
email: true,
|
|
|
|
msisdn: true,
|
|
|
|
} : {};
|
|
|
|
|
2017-02-24 14:41:23 +03:00
|
|
|
return this._matrixClient.register(
|
2017-11-11 18:59:43 +03:00
|
|
|
this.state.formVals.username,
|
2017-02-24 14:41:23 +03:00
|
|
|
this.state.formVals.password,
|
|
|
|
undefined, // session id: included in the auth dict already
|
|
|
|
auth,
|
2017-03-14 14:50:13 +03:00
|
|
|
bindThreepids,
|
2017-06-08 22:57:05 +03:00
|
|
|
null,
|
2015-11-30 21:11:04 +03:00
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2017-03-06 20:31:21 +03:00
|
|
|
_getUIAuthInputs: function() {
|
2017-02-24 14:41:23 +03:00
|
|
|
return {
|
|
|
|
emailAddress: this.state.formVals.email,
|
|
|
|
phoneCountry: this.state.formVals.phoneCountry,
|
|
|
|
phoneNumber: this.state.formVals.phoneNumber,
|
2017-10-11 19:56:17 +03:00
|
|
|
};
|
2017-02-24 14:41:23 +03:00
|
|
|
},
|
|
|
|
|
2019-01-29 21:09:07 +03:00
|
|
|
renderServerComponent() {
|
|
|
|
const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
|
|
|
|
const ServerConfig = sdk.getComponent("auth.ServerConfig");
|
|
|
|
const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
|
|
|
|
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
|
|
|
|
|
|
|
|
if (SdkConfig.get()['disable_custom_urls']) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
// If we're on a different phase, we only show the server type selector,
|
|
|
|
// which is always shown if we allow custom URLs at all.
|
|
|
|
if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS) {
|
|
|
|
return <div>
|
|
|
|
<ServerTypeSelector
|
2019-02-20 14:23:36 +03:00
|
|
|
selected={this.state.serverType}
|
2019-01-29 21:09:07 +03:00
|
|
|
onChange={this.onServerTypeChange}
|
|
|
|
/>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
|
|
|
let serverDetails = null;
|
|
|
|
switch (this.state.serverType) {
|
|
|
|
case ServerType.FREE:
|
|
|
|
break;
|
|
|
|
case ServerType.PREMIUM:
|
|
|
|
serverDetails = <ModularServerConfig
|
|
|
|
customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
|
|
|
|
defaultHsUrl={this.props.defaultHsUrl}
|
|
|
|
defaultIsUrl={this.props.defaultIsUrl}
|
|
|
|
onServerConfigChange={this.onServerConfigChange}
|
2019-01-30 08:47:35 +03:00
|
|
|
delayTimeMs={250}
|
2019-01-29 21:09:07 +03:00
|
|
|
/>;
|
|
|
|
break;
|
|
|
|
case ServerType.ADVANCED:
|
|
|
|
serverDetails = <ServerConfig
|
|
|
|
customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
|
|
|
|
customIsUrl={this.state.discoveredIsUrl || this.props.customIsUrl}
|
|
|
|
defaultHsUrl={this.props.defaultHsUrl}
|
|
|
|
defaultIsUrl={this.props.defaultIsUrl}
|
|
|
|
onServerConfigChange={this.onServerConfigChange}
|
2019-01-30 08:47:35 +03:00
|
|
|
delayTimeMs={250}
|
2019-01-29 21:09:07 +03:00
|
|
|
/>;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
let nextButton = null;
|
|
|
|
if (PHASES_ENABLED) {
|
|
|
|
nextButton = <AccessibleButton className="mx_Login_submit"
|
|
|
|
onClick={this.onServerDetailsNextPhaseClick}
|
|
|
|
>
|
|
|
|
{_t("Next")}
|
|
|
|
</AccessibleButton>;
|
|
|
|
}
|
|
|
|
|
|
|
|
return <div>
|
|
|
|
<ServerTypeSelector
|
2019-02-20 14:23:36 +03:00
|
|
|
selected={this.state.serverType}
|
2019-01-29 21:09:07 +03:00
|
|
|
onChange={this.onServerTypeChange}
|
|
|
|
/>
|
|
|
|
{serverDetails}
|
|
|
|
{nextButton}
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
|
|
|
renderRegisterComponent() {
|
|
|
|
if (PHASES_ENABLED && this.state.phase !== PHASE_REGISTRATION) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2017-02-24 14:41:23 +03:00
|
|
|
const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
|
2019-01-29 21:09:07 +03:00
|
|
|
const Spinner = sdk.getComponent('elements.Spinner');
|
|
|
|
const RegistrationForm = sdk.getComponent('auth.RegistrationForm');
|
2017-02-24 14:41:23 +03:00
|
|
|
|
|
|
|
if (this.state.doingUIAuth) {
|
2019-01-29 21:09:07 +03:00
|
|
|
return <InteractiveAuth
|
|
|
|
matrixClient={this._matrixClient}
|
|
|
|
makeRequest={this._makeRegisterRequest}
|
|
|
|
onAuthFinished={this._onUIAuthFinished}
|
|
|
|
inputs={this._getUIAuthInputs()}
|
|
|
|
makeRegistrationUrl={this.props.makeRegistrationUrl}
|
|
|
|
sessionId={this.props.sessionId}
|
|
|
|
clientSecret={this.props.clientSecret}
|
|
|
|
emailSid={this.props.idSid}
|
|
|
|
poll={true}
|
|
|
|
/>;
|
2019-01-26 01:10:54 +03:00
|
|
|
} else if (this.state.busy || !this.state.flows) {
|
2019-01-29 21:09:07 +03:00
|
|
|
return <Spinner />;
|
2017-02-24 14:41:23 +03:00
|
|
|
} else {
|
2019-01-30 00:05:15 +03:00
|
|
|
let onEditServerDetailsClick = null;
|
|
|
|
// If custom URLs are allowed and we haven't selected the Free server type, wire
|
|
|
|
// up the server details edit link.
|
|
|
|
if (
|
|
|
|
PHASES_ENABLED &&
|
|
|
|
!SdkConfig.get()['disable_custom_urls'] &&
|
|
|
|
this.state.serverType !== ServerType.FREE
|
|
|
|
) {
|
|
|
|
onEditServerDetailsClick = this.onEditServerDetailsClick;
|
|
|
|
}
|
2019-01-29 21:09:07 +03:00
|
|
|
return <RegistrationForm
|
|
|
|
defaultUsername={this.state.formVals.username}
|
|
|
|
defaultEmail={this.state.formVals.email}
|
|
|
|
defaultPhoneCountry={this.state.formVals.phoneCountry}
|
|
|
|
defaultPhoneNumber={this.state.formVals.phoneNumber}
|
|
|
|
defaultPassword={this.state.formVals.password}
|
|
|
|
minPasswordLength={MIN_PASSWORD_LENGTH}
|
|
|
|
onError={this.onFormValidationFailed}
|
|
|
|
onRegisterClick={this.onFormSubmit}
|
2019-01-30 00:05:15 +03:00
|
|
|
onEditServerDetailsClick={onEditServerDetailsClick}
|
2019-01-29 21:09:07 +03:00
|
|
|
flows={this.state.flows}
|
2019-01-29 21:23:01 +03:00
|
|
|
hsUrl={this.state.hsUrl}
|
2019-01-29 21:09:07 +03:00
|
|
|
/>;
|
2017-02-24 14:41:23 +03:00
|
|
|
}
|
2019-01-29 21:09:07 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
const AuthHeader = sdk.getComponent('auth.AuthHeader');
|
|
|
|
const AuthBody = sdk.getComponent("auth.AuthBody");
|
|
|
|
const AuthPage = sdk.getComponent('auth.AuthPage');
|
2017-02-24 14:41:23 +03:00
|
|
|
|
2017-10-25 04:04:02 +03:00
|
|
|
let errorText;
|
2018-12-05 09:34:57 +03:00
|
|
|
const err = this.state.errorText || this.props.defaultServerDiscoveryError;
|
2019-01-21 21:05:07 +03:00
|
|
|
if (err) {
|
|
|
|
errorText = <div className="mx_Login_error">{ err }</div>;
|
2017-10-25 04:04:02 +03:00
|
|
|
}
|
|
|
|
|
2017-10-26 19:57:49 +03:00
|
|
|
let signIn;
|
|
|
|
if (!this.state.doingUIAuth) {
|
|
|
|
signIn = (
|
2019-01-30 21:46:40 +03:00
|
|
|
<a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
|
2019-01-23 23:33:56 +03:00
|
|
|
{ _t('Sign in instead') }
|
2017-10-26 19:57:49 +03:00
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-11-30 21:11:04 +03:00
|
|
|
return (
|
2019-01-22 03:33:17 +03:00
|
|
|
<AuthPage>
|
2019-01-26 01:10:54 +03:00
|
|
|
<AuthHeader />
|
2019-01-23 04:28:23 +03:00
|
|
|
<AuthBody>
|
2019-01-24 00:00:06 +03:00
|
|
|
<h2>{ _t('Create your account') }</h2>
|
2019-01-29 07:14:08 +03:00
|
|
|
{ errorText }
|
2019-01-29 21:09:07 +03:00
|
|
|
{ this.renderServerComponent() }
|
|
|
|
{ this.renderRegisterComponent() }
|
2019-01-23 04:28:23 +03:00
|
|
|
{ signIn }
|
|
|
|
</AuthBody>
|
2019-01-22 03:33:17 +03:00
|
|
|
</AuthPage>
|
2015-11-30 21:11:04 +03:00
|
|
|
);
|
2017-10-11 19:56:17 +03:00
|
|
|
},
|
2015-11-30 21:11:04 +03:00
|
|
|
});
|