2015-11-30 21:11:04 +03:00
|
|
|
/*
|
2020-11-19 17:57:57 +03:00
|
|
|
Copyright 2015, 2016, 2017, 2018, 2019, 2020 The Matrix.org Foundation C.I.C.
|
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';
|
2020-11-19 17:57:57 +03:00
|
|
|
import React, {ComponentProps, ReactNode} from 'react';
|
|
|
|
import {MatrixClient} from "matrix-js-sdk/src/client";
|
|
|
|
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as 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';
|
2019-06-05 08:41:59 +03:00
|
|
|
import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
|
2019-06-11 04:28:32 +03:00
|
|
|
import classNames from "classnames";
|
2019-06-13 18:24:09 +03:00
|
|
|
import * as Lifecycle from '../../../Lifecycle';
|
2019-12-21 00:13:46 +03:00
|
|
|
import {MatrixClientPeg} from "../../../MatrixClientPeg";
|
2019-12-13 05:31:52 +03:00
|
|
|
import AuthPage from "../../views/auth/AuthPage";
|
2020-03-04 09:19:36 +03:00
|
|
|
import Login from "../../../Login";
|
2020-05-14 05:41:41 +03:00
|
|
|
import dis from "../../../dispatcher/dispatcher";
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2019-01-29 21:09:07 +03:00
|
|
|
// Phases
|
2020-11-19 17:57:57 +03:00
|
|
|
enum Phase {
|
|
|
|
// Show controls to configure server details
|
|
|
|
ServerDetails = 0,
|
|
|
|
// Show the appropriate registration flow(s) for the server
|
|
|
|
Registration = 1,
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
serverConfig: ValidatedServerConfig;
|
|
|
|
defaultDeviceDisplayName: string;
|
|
|
|
email?: string;
|
|
|
|
brand?: string;
|
|
|
|
clientSecret?: string;
|
|
|
|
sessionId?: string;
|
|
|
|
idSid?: string;
|
|
|
|
|
|
|
|
// Called when the user has logged in. Params:
|
|
|
|
// - object with userId, deviceId, homeserverUrl, identityServerUrl, accessToken
|
|
|
|
// - The user's password, if available and applicable (may be cached in memory
|
|
|
|
// for a short time so the user is not required to re-enter their password
|
|
|
|
// for operations like uploading cross-signing keys).
|
|
|
|
onLoggedIn(params: {
|
|
|
|
userId: string;
|
|
|
|
deviceId: string
|
|
|
|
homeserverUrl: string;
|
|
|
|
identityServerUrl?: string;
|
|
|
|
accessToken: string;
|
|
|
|
}, password: string): void;
|
|
|
|
makeRegistrationUrl(params: {
|
|
|
|
/* eslint-disable camelcase */
|
|
|
|
client_secret: string;
|
|
|
|
hs_url: string;
|
|
|
|
is_url?: string;
|
|
|
|
session_id: string;
|
|
|
|
/* eslint-enable camelcase */
|
|
|
|
}): void;
|
|
|
|
// registration shouldn't know or care how login is done.
|
|
|
|
onLoginClick(): void;
|
|
|
|
onServerConfigChange(config: ValidatedServerConfig): void;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IState {
|
|
|
|
busy: boolean;
|
|
|
|
errorText?: ReactNode;
|
|
|
|
// true if we're waiting for the user to complete
|
|
|
|
// 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
|
|
|
|
// values the user entered still in it. We can keep
|
|
|
|
// them in this component's state since this component
|
|
|
|
// persist for the duration of the registration process.
|
|
|
|
formVals: Record<string, string>;
|
|
|
|
// user-interactive auth
|
|
|
|
// If we've been given a session ID, we're resuming
|
|
|
|
// straight back into UI auth
|
|
|
|
doingUIAuth: boolean;
|
|
|
|
// If set, we've registered but are not going to log
|
|
|
|
// the user in to their new account automatically.
|
|
|
|
completedNoSignin: boolean;
|
|
|
|
serverType: ServerType.FREE | ServerType.PREMIUM | ServerType.ADVANCED;
|
|
|
|
// Phase of the overall registration dialog.
|
|
|
|
phase: Phase;
|
|
|
|
flows: {
|
|
|
|
stages: string[];
|
|
|
|
}[];
|
|
|
|
// We perform liveliness checks later, but for now suppress the errors.
|
|
|
|
// We also track the server dead errors independently of the regular errors so
|
|
|
|
// that we can render it differently, and override any other error the user may
|
|
|
|
// be seeing.
|
|
|
|
serverIsAlive: boolean;
|
|
|
|
serverErrorIsFatal: boolean;
|
|
|
|
serverDeadError: string;
|
|
|
|
|
|
|
|
// Our matrix client - part of state because we can't render the UI auth
|
|
|
|
// component without it.
|
|
|
|
matrixClient?: MatrixClient;
|
|
|
|
// whether the HS requires an ID server to register with a threepid
|
|
|
|
serverRequiresIdServer?: boolean;
|
|
|
|
// The user ID we've just registered
|
|
|
|
registeredUsername?: string;
|
|
|
|
// if a different user ID to the one we just registered is logged in,
|
|
|
|
// this is the user ID that's logged in.
|
|
|
|
differentLoggedInUserId?: string;
|
|
|
|
}
|
2019-01-29 21:09:07 +03:00
|
|
|
|
|
|
|
// Enable phases for registration
|
|
|
|
const PHASES_ENABLED = true;
|
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
export default class Registration extends React.Component<IProps, IState> {
|
2020-08-29 14:14:16 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-02-22 19:16:05 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
const serverType = ServerType.getTypeFromServerConfig(this.props.serverConfig);
|
|
|
|
this.state = {
|
2015-11-30 21:11:04 +03:00
|
|
|
busy: false,
|
|
|
|
errorText: null,
|
2016-07-06 17:22:06 +03:00
|
|
|
formVals: {
|
|
|
|
email: this.props.email,
|
|
|
|
},
|
2017-02-24 14:41:23 +03:00
|
|
|
doingUIAuth: Boolean(this.props.sessionId),
|
2019-02-22 19:16:05 +03:00
|
|
|
serverType,
|
2020-11-19 17:57:57 +03:00
|
|
|
phase: Phase.Registration,
|
2018-09-04 20:26:09 +03:00
|
|
|
flows: null,
|
2019-06-13 18:24:09 +03:00
|
|
|
completedNoSignin: false,
|
2019-06-05 08:41:59 +03:00
|
|
|
serverIsAlive: true,
|
2019-06-11 04:28:32 +03:00
|
|
|
serverErrorIsFatal: false,
|
2019-06-05 08:41:59 +03:00
|
|
|
serverDeadError: "",
|
2015-11-30 21:11:04 +03:00
|
|
|
};
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
componentDidMount() {
|
2020-11-19 17:57:57 +03:00
|
|
|
this.replaceClient(this.props.serverConfig);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2020-04-01 23:35:39 +03:00
|
|
|
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
|
2020-08-29 14:57:11 +03:00
|
|
|
// eslint-disable-next-line camelcase
|
2020-04-01 23:35:39 +03:00
|
|
|
UNSAFE_componentWillReceiveProps(newProps) {
|
2019-05-03 08:04:06 +03:00
|
|
|
if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
|
|
|
|
newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
|
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
this.replaceClient(newProps.serverConfig);
|
2019-05-03 08:04:06 +03:00
|
|
|
|
|
|
|
// Handle cases where the user enters "https://matrix.org" for their server
|
|
|
|
// from the advanced option - we should default to FREE at that point.
|
|
|
|
const serverType = ServerType.getTypeFromServerConfig(newProps.serverConfig);
|
|
|
|
if (serverType !== this.state.serverType) {
|
|
|
|
// Reset the phase to default phase for the server type.
|
|
|
|
this.setState({
|
|
|
|
serverType,
|
2020-11-19 17:57:57 +03:00
|
|
|
phase: Registration.getDefaultPhaseForServerType(serverType),
|
2019-05-03 08:04:06 +03:00
|
|
|
});
|
2017-04-25 21:21:09 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private static getDefaultPhaseForServerType(type: IState["serverType"]) {
|
2019-02-22 19:16:05 +03:00
|
|
|
switch (type) {
|
|
|
|
case ServerType.FREE: {
|
|
|
|
// Move directly to the registration phase since the server
|
|
|
|
// details are fixed.
|
2020-11-19 17:57:57 +03:00
|
|
|
return Phase.Registration;
|
2019-02-22 19:16:05 +03:00
|
|
|
}
|
|
|
|
case ServerType.PREMIUM:
|
|
|
|
case ServerType.ADVANCED:
|
2020-11-19 17:57:57 +03:00
|
|
|
return Phase.ServerDetails;
|
2019-02-22 19:16:05 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-02-22 19:16:05 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private onServerTypeChange = (type: IState["serverType"]) => {
|
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: {
|
2019-05-03 08:04:06 +03:00
|
|
|
const { serverConfig } = ServerType.TYPES.FREE;
|
|
|
|
this.props.onServerConfigChange(serverConfig);
|
2019-01-29 21:09:07 +03:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
case ServerType.PREMIUM:
|
2019-05-03 08:04:06 +03:00
|
|
|
// We can accept whatever server config was the default here as this essentially
|
|
|
|
// acts as a slightly different "custom server"/ADVANCED option.
|
|
|
|
break;
|
2019-01-29 21:09:07 +03:00
|
|
|
case ServerType.ADVANCED:
|
2019-05-03 08:04:06 +03:00
|
|
|
// Use the default config from the config
|
|
|
|
this.props.onServerConfigChange(SdkConfig.get()["validated_server_config"]);
|
2019-01-29 21:09:07 +03:00
|
|
|
break;
|
|
|
|
}
|
2019-02-22 19:16:05 +03:00
|
|
|
|
|
|
|
// Reset the phase to default phase for the server type.
|
|
|
|
this.setState({
|
2020-11-19 17:57:57 +03:00
|
|
|
phase: Registration.getDefaultPhaseForServerType(type),
|
2019-02-22 19:16:05 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-01-29 21:09:07 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private async replaceClient(serverConfig: ValidatedServerConfig) {
|
2019-01-30 08:47:35 +03:00
|
|
|
this.setState({
|
|
|
|
errorText: null,
|
2019-06-17 20:47:20 +03:00
|
|
|
serverDeadError: null,
|
|
|
|
serverErrorIsFatal: false,
|
2019-06-11 14:02:14 +03:00
|
|
|
// busy while we do liveness check (we need to avoid trying to render
|
|
|
|
// the UI auth component while we don't have a matrix client)
|
|
|
|
busy: true,
|
2019-01-30 08:47:35 +03:00
|
|
|
});
|
2019-06-05 08:41:59 +03:00
|
|
|
|
|
|
|
// Do a liveliness check on the URLs
|
|
|
|
try {
|
|
|
|
await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(
|
|
|
|
serverConfig.hsUrl,
|
|
|
|
serverConfig.isUrl,
|
|
|
|
);
|
2019-06-17 18:27:35 +03:00
|
|
|
this.setState({
|
|
|
|
serverIsAlive: true,
|
|
|
|
serverErrorIsFatal: false,
|
|
|
|
});
|
2019-06-05 08:41:59 +03:00
|
|
|
} catch (e) {
|
2019-06-11 14:10:44 +03:00
|
|
|
this.setState({
|
|
|
|
busy: false,
|
|
|
|
...AutoDiscoveryUtils.authComponentStateForError(e, "register"),
|
|
|
|
});
|
2019-06-11 04:28:32 +03:00
|
|
|
if (this.state.serverErrorIsFatal) {
|
|
|
|
return; // Server is dead - do not continue.
|
|
|
|
}
|
2019-06-05 08:41:59 +03:00
|
|
|
}
|
|
|
|
|
2019-05-03 08:04:06 +03:00
|
|
|
const {hsUrl, isUrl} = serverConfig;
|
2019-08-16 13:57:32 +03:00
|
|
|
const cli = Matrix.createClient({
|
|
|
|
baseUrl: hsUrl,
|
|
|
|
idBaseUrl: isUrl,
|
|
|
|
});
|
|
|
|
|
2019-08-16 17:07:15 +03:00
|
|
|
let serverRequiresIdServer = true;
|
2019-08-16 13:57:32 +03:00
|
|
|
try {
|
2019-08-16 17:07:15 +03:00
|
|
|
serverRequiresIdServer = await cli.doesServerRequireIdServerParam();
|
2019-08-16 13:57:32 +03:00
|
|
|
} catch (e) {
|
2019-08-16 17:07:15 +03:00
|
|
|
console.log("Unable to determine is server needs id_server param", e);
|
2019-08-16 13:57:32 +03:00
|
|
|
}
|
|
|
|
|
2019-06-11 14:02:14 +03:00
|
|
|
this.setState({
|
2019-08-16 13:57:32 +03:00
|
|
|
matrixClient: cli,
|
2019-08-16 17:07:15 +03:00
|
|
|
serverRequiresIdServer,
|
2019-08-16 13:57:32 +03:00
|
|
|
busy: false,
|
2016-01-27 18:44:12 +03:00
|
|
|
});
|
2020-03-04 09:19:36 +03:00
|
|
|
const showGenericError = (e) => {
|
|
|
|
this.setState({
|
|
|
|
errorText: _t("Unable to query for supported registration methods."),
|
|
|
|
// add empty flows array to get rid of spinner
|
|
|
|
flows: [],
|
|
|
|
});
|
|
|
|
};
|
2018-09-04 20:26:09 +03:00
|
|
|
try {
|
2020-05-15 15:32:12 +03:00
|
|
|
// We do the first registration request ourselves to discover whether we need to
|
|
|
|
// do SSO instead. If we've already started the UI Auth process though, we don't
|
|
|
|
// need to.
|
|
|
|
if (!this.state.doingUIAuth) {
|
2020-11-19 17:57:57 +03:00
|
|
|
await this.makeRegisterRequest(null);
|
2020-05-27 22:16:49 +03:00
|
|
|
// This should never succeed since we specified no auth object.
|
2020-05-15 15:32:12 +03:00
|
|
|
console.log("Expecting 401 from register request but got success!");
|
|
|
|
}
|
2018-09-04 20:26:09 +03:00
|
|
|
} 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") {
|
2020-03-04 09:19:36 +03:00
|
|
|
// At this point registration is pretty much disabled, but before we do that let's
|
|
|
|
// quickly check to see if the server supports SSO instead. If it does, we'll send
|
|
|
|
// the user off to the login page to figure their account out.
|
|
|
|
try {
|
|
|
|
const loginLogic = new Login(hsUrl, isUrl, null, {
|
2020-08-03 18:02:26 +03:00
|
|
|
defaultDeviceDisplayName: "Element login check", // We shouldn't ever be used
|
2020-03-04 09:19:36 +03:00
|
|
|
});
|
|
|
|
const flows = await loginLogic.getFlows();
|
|
|
|
const hasSsoFlow = flows.find(f => f.type === 'm.login.sso' || f.type === 'm.login.cas');
|
|
|
|
if (hasSsoFlow) {
|
|
|
|
// Redirect to login page - server probably expects SSO only
|
|
|
|
dis.dispatch({action: 'start_login'});
|
|
|
|
} else {
|
|
|
|
this.setState({
|
2020-05-11 22:10:45 +03:00
|
|
|
serverErrorIsFatal: true, // fatal because user cannot continue on this server
|
2020-03-04 09:19:36 +03:00
|
|
|
errorText: _t("Registration has been disabled on this homeserver."),
|
|
|
|
// add empty flows array to get rid of spinner
|
|
|
|
flows: [],
|
|
|
|
});
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
console.error("Failed to get login flows to check for SSO support", e);
|
|
|
|
showGenericError(e);
|
|
|
|
}
|
2018-09-04 20:26:09 +03:00
|
|
|
} else {
|
2019-06-13 18:24:09 +03:00
|
|
|
console.log("Unable to query for supported registration methods.", e);
|
2020-03-04 09:19:36 +03:00
|
|
|
showGenericError(e);
|
2018-09-04 20:26:09 +03:00
|
|
|
}
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private onFormSubmit = formVals => {
|
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
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private requestEmailToken = (emailAddress, clientSecret, sendAttempt, sessionId) => {
|
2019-06-11 14:02:14 +03:00
|
|
|
return this.state.matrixClient.requestRegisterEmailToken(
|
2019-05-22 13:51:26 +03:00
|
|
|
emailAddress,
|
|
|
|
clientSecret,
|
|
|
|
sendAttempt,
|
|
|
|
this.props.makeRegistrationUrl({
|
|
|
|
client_secret: clientSecret,
|
2019-06-11 14:02:14 +03:00
|
|
|
hs_url: this.state.matrixClient.getHomeserverUrl(),
|
|
|
|
is_url: this.state.matrixClient.getIdentityServerUrl(),
|
2019-05-22 13:51:26 +03:00
|
|
|
session_id: sessionId,
|
|
|
|
}),
|
|
|
|
);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-05-22 13:51:26 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private onUIAuthFinished = async (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?
|
2019-05-03 08:04:06 +03:00
|
|
|
if (response.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
|
2018-08-16 15:31:17 +03:00
|
|
|
const errorTop = messageForResourceLimitError(
|
|
|
|
response.data.limit_type,
|
2020-11-19 17:57:57 +03:00
|
|
|
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."),
|
|
|
|
},
|
|
|
|
);
|
2018-08-16 15:31:17 +03:00
|
|
|
const errorDetail = messageForResourceLimitError(
|
|
|
|
response.data.limit_type,
|
2020-11-19 17:57:57 +03:00
|
|
|
response.data.admin_contact,
|
|
|
|
{
|
|
|
|
'': _td("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) {
|
2020-11-19 17:57:57 +03:00
|
|
|
msisdnAvailable = msisdnAvailable || flow.stages.includes('m.login.msisdn');
|
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;
|
|
|
|
}
|
|
|
|
|
2019-06-14 17:31:19 +03:00
|
|
|
MatrixClientPeg.setJustRegisteredUserId(response.user_id);
|
|
|
|
|
2019-06-13 18:24:09 +03:00
|
|
|
const newState = {
|
2017-02-24 14:41:23 +03:00
|
|
|
doingUIAuth: false,
|
2019-06-18 20:43:14 +03:00
|
|
|
registeredUsername: response.user_id,
|
2020-11-19 17:57:57 +03:00
|
|
|
differentLoggedInUserId: null,
|
|
|
|
completedNoSignin: false,
|
|
|
|
// we're still busy until we get unmounted: don't show the registration form again
|
|
|
|
busy: true,
|
2019-06-13 18:24:09 +03:00
|
|
|
};
|
2019-06-18 20:43:14 +03:00
|
|
|
|
|
|
|
// The user came in through an email validation link. To avoid overwriting
|
|
|
|
// their session, check to make sure the session isn't someone else, and
|
|
|
|
// isn't a guest user since we'll usually have set a guest user session before
|
|
|
|
// starting the registration process. This isn't perfect since it's possible
|
|
|
|
// the user had a separate guest session they didn't actually mean to replace.
|
|
|
|
const sessionOwner = Lifecycle.getStoredSessionOwner();
|
|
|
|
const sessionIsGuest = Lifecycle.getStoredSessionIsGuest();
|
|
|
|
if (sessionOwner && !sessionIsGuest && sessionOwner !== response.userId) {
|
|
|
|
console.log(
|
|
|
|
`Found a session for ${sessionOwner} but ${response.userId} has just registered.`,
|
|
|
|
);
|
|
|
|
newState.differentLoggedInUserId = sessionOwner;
|
|
|
|
}
|
|
|
|
|
2019-06-13 18:24:09 +03:00
|
|
|
if (response.access_token) {
|
2020-06-15 17:18:57 +03:00
|
|
|
await this.props.onLoggedIn({
|
2019-06-13 18:24:09 +03:00
|
|
|
userId: response.user_id,
|
|
|
|
deviceId: response.device_id,
|
|
|
|
homeserverUrl: this.state.matrixClient.getHomeserverUrl(),
|
|
|
|
identityServerUrl: this.state.matrixClient.getIdentityServerUrl(),
|
|
|
|
accessToken: response.access_token,
|
2020-01-25 18:28:06 +03:00
|
|
|
}, this.state.formVals.password);
|
2016-06-02 15:14:52 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
this.setupPushers();
|
2019-06-13 18:24:09 +03:00
|
|
|
} else {
|
|
|
|
newState.busy = false;
|
|
|
|
newState.completedNoSignin = true;
|
|
|
|
}
|
2019-01-26 01:10:54 +03:00
|
|
|
|
2019-06-13 18:24:09 +03:00
|
|
|
this.setState(newState);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private setupPushers() {
|
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
|
|
|
}
|
2020-06-15 17:18:57 +03:00
|
|
|
const matrixClient = MatrixClientPeg.get();
|
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 };
|
2019-11-18 13:03:05 +03:00
|
|
|
matrixClient.setPusher(emailPusher).then(() => {
|
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);
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private onLoginClick = ev => {
|
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
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.props.onLoginClick();
|
2020-08-29 14:14:16 +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
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private onGoToFormClicked = ev => {
|
2019-03-12 01:32:50 +03:00
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
2020-11-19 17:57:57 +03:00
|
|
|
this.replaceClient(this.props.serverConfig);
|
2019-03-12 01:32:50 +03:00
|
|
|
this.setState({
|
|
|
|
busy: false,
|
|
|
|
doingUIAuth: false,
|
2020-11-19 17:57:57 +03:00
|
|
|
phase: Phase.Registration,
|
2019-03-12 01:32:50 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-03-12 01:32:50 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private onServerDetailsNextPhaseClick = async () => {
|
2019-01-29 21:24:27 +03:00
|
|
|
this.setState({
|
2020-11-19 17:57:57 +03:00
|
|
|
phase: Phase.Registration,
|
2019-01-29 21:24:27 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-01-29 21:24:27 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private onEditServerDetailsClick = ev => {
|
2019-01-30 00:05:15 +03:00
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.setState({
|
2020-11-19 17:57:57 +03:00
|
|
|
phase: Phase.ServerDetails,
|
2019-01-30 00:05:15 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-01-30 00:05:15 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private makeRegisterRequest = auth => {
|
2019-06-13 19:44:00 +03:00
|
|
|
// We inhibit login if we're trying to register with an email address: this
|
|
|
|
// avoids a lot of complex race conditions that can occur if we try to log
|
|
|
|
// the user in one one or both of the tabs they might end up with after
|
|
|
|
// clicking the email link.
|
|
|
|
let inhibitLogin = Boolean(this.state.formVals.email);
|
2019-06-13 18:24:09 +03:00
|
|
|
|
2019-08-08 17:52:54 +03:00
|
|
|
// Only send inhibitLogin if we're sending username / pw params
|
2017-03-14 14:50:13 +03:00
|
|
|
// (Since we need to send no params at all to use the ones saved in the
|
|
|
|
// session).
|
2019-06-13 18:24:09 +03:00
|
|
|
if (!this.state.formVals.password) inhibitLogin = null;
|
2017-03-14 14:50:13 +03:00
|
|
|
|
2020-01-30 14:27:54 +03:00
|
|
|
const registerParams = {
|
|
|
|
username: this.state.formVals.username,
|
|
|
|
password: this.state.formVals.password,
|
|
|
|
initial_device_display_name: this.props.defaultDeviceDisplayName,
|
2020-11-19 17:57:57 +03:00
|
|
|
auth: undefined,
|
|
|
|
inhibit_login: undefined,
|
2020-01-30 14:27:54 +03:00
|
|
|
};
|
|
|
|
if (auth) registerParams.auth = auth;
|
2020-04-02 17:09:33 +03:00
|
|
|
if (inhibitLogin !== undefined && inhibitLogin !== null) registerParams.inhibit_login = inhibitLogin;
|
2020-01-30 14:27:54 +03:00
|
|
|
return this.state.matrixClient.registerRequest(registerParams);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 21:11:04 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private getUIAuthInputs() {
|
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
|
|
|
};
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-02-24 14:41:23 +03:00
|
|
|
|
2019-06-13 18:24:09 +03:00
|
|
|
// Links to the login page shown after registration is completed are routed through this
|
|
|
|
// which checks the user hasn't already logged in somewhere else (perhaps we should do
|
|
|
|
// this more generally?)
|
2020-11-19 17:57:57 +03:00
|
|
|
private onLoginClickWithCheck = async ev => {
|
2019-06-13 18:24:09 +03:00
|
|
|
ev.preventDefault();
|
|
|
|
|
2019-08-02 13:22:42 +03:00
|
|
|
const sessionLoaded = await Lifecycle.loadSession({ignoreGuest: true});
|
2019-06-13 18:24:09 +03:00
|
|
|
if (!sessionLoaded) {
|
|
|
|
// ok fine, there's still no session: really go to the login page
|
|
|
|
this.props.onLoginClick();
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-06-13 18:24:09 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private renderServerComponent() {
|
2019-01-29 21:09:07 +03:00
|
|
|
const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
|
|
|
|
const ServerConfig = sdk.getComponent("auth.ServerConfig");
|
|
|
|
const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
|
|
|
|
|
|
|
|
if (SdkConfig.get()['disable_custom_urls']) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2020-11-11 18:07:57 +03:00
|
|
|
// Hide the server picker once the user is doing UI Auth unless encountered a fatal server error
|
|
|
|
if (this.state.phase !== PHASE_SERVER_DETAILS && this.state.doingUIAuth && !this.state.serverErrorIsFatal) {
|
|
|
|
return null;
|
2019-01-29 21:09:07 +03:00
|
|
|
}
|
|
|
|
|
2020-11-11 20:12:27 +03:00
|
|
|
// 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 there's a fatal server error, we need to show the full server
|
|
|
|
// config as the user may need to change servers to resolve the error).
|
2020-11-19 17:57:57 +03:00
|
|
|
if (PHASES_ENABLED && this.state.phase !== Phase.ServerDetails && !this.state.serverErrorIsFatal) {
|
2020-11-11 20:12:27 +03:00
|
|
|
return <div>
|
|
|
|
<ServerTypeSelector
|
|
|
|
selected={this.state.serverType}
|
|
|
|
onChange={this.onServerTypeChange}
|
|
|
|
/>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
const serverDetailsProps: ComponentProps<typeof ServerConfig> = {};
|
2019-05-14 01:30:34 +03:00
|
|
|
if (PHASES_ENABLED) {
|
|
|
|
serverDetailsProps.onAfterSubmit = this.onServerDetailsNextPhaseClick;
|
|
|
|
serverDetailsProps.submitText = _t("Next");
|
|
|
|
serverDetailsProps.submitClass = "mx_Login_submit";
|
|
|
|
}
|
|
|
|
|
2019-01-29 21:09:07 +03:00
|
|
|
let serverDetails = null;
|
|
|
|
switch (this.state.serverType) {
|
|
|
|
case ServerType.FREE:
|
|
|
|
break;
|
|
|
|
case ServerType.PREMIUM:
|
|
|
|
serverDetails = <ModularServerConfig
|
2019-05-03 08:04:06 +03:00
|
|
|
serverConfig={this.props.serverConfig}
|
|
|
|
onServerConfigChange={this.props.onServerConfigChange}
|
2019-01-30 08:47:35 +03:00
|
|
|
delayTimeMs={250}
|
2019-05-14 01:30:34 +03:00
|
|
|
{...serverDetailsProps}
|
2019-01-29 21:09:07 +03:00
|
|
|
/>;
|
|
|
|
break;
|
|
|
|
case ServerType.ADVANCED:
|
|
|
|
serverDetails = <ServerConfig
|
2019-05-03 08:04:06 +03:00
|
|
|
serverConfig={this.props.serverConfig}
|
|
|
|
onServerConfigChange={this.props.onServerConfigChange}
|
2019-01-30 08:47:35 +03:00
|
|
|
delayTimeMs={250}
|
2019-08-23 20:43:55 +03:00
|
|
|
showIdentityServerIfRequiredByHomeserver={true}
|
2019-05-14 01:30:34 +03:00
|
|
|
{...serverDetailsProps}
|
2019-01-29 21:09:07 +03:00
|
|
|
/>;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
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}
|
|
|
|
</div>;
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-01-29 21:09:07 +03:00
|
|
|
|
2020-11-19 17:57:57 +03:00
|
|
|
private renderRegisterComponent() {
|
|
|
|
if (PHASES_ENABLED && this.state.phase !== Phase.Registration) {
|
2019-01-29 21:09:07 +03:00
|
|
|
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
|
|
|
|
2019-06-11 14:02:14 +03:00
|
|
|
if (this.state.matrixClient && this.state.doingUIAuth) {
|
2019-01-29 21:09:07 +03:00
|
|
|
return <InteractiveAuth
|
2019-06-11 14:02:14 +03:00
|
|
|
matrixClient={this.state.matrixClient}
|
2020-11-19 17:57:57 +03:00
|
|
|
makeRequest={this.makeRegisterRequest}
|
|
|
|
onAuthFinished={this.onUIAuthFinished}
|
|
|
|
inputs={this.getUIAuthInputs()}
|
|
|
|
requestEmailToken={this.requestEmailToken}
|
2019-01-29 21:09:07 +03:00
|
|
|
sessionId={this.props.sessionId}
|
|
|
|
clientSecret={this.props.clientSecret}
|
|
|
|
emailSid={this.props.idSid}
|
|
|
|
poll={true}
|
|
|
|
/>;
|
2019-06-11 14:10:44 +03:00
|
|
|
} else if (!this.state.matrixClient && !this.state.busy) {
|
|
|
|
return null;
|
2019-08-16 17:27:11 +03:00
|
|
|
} else if (this.state.busy || !this.state.flows) {
|
2019-02-27 14:21:35 +03:00
|
|
|
return <div className="mx_AuthBody_spinner">
|
|
|
|
<Spinner />
|
|
|
|
</div>;
|
2019-09-18 15:16:21 +03:00
|
|
|
} else if (this.state.flows.length) {
|
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}
|
|
|
|
onRegisterClick={this.onFormSubmit}
|
|
|
|
flows={this.state.flows}
|
2019-05-03 08:02:01 +03:00
|
|
|
serverConfig={this.props.serverConfig}
|
2019-06-11 20:01:27 +03:00
|
|
|
canSubmit={!this.state.serverErrorIsFatal}
|
2019-08-16 17:07:15 +03:00
|
|
|
serverRequiresIdServer={this.state.serverRequiresIdServer}
|
2019-01-29 21:09:07 +03:00
|
|
|
/>;
|
2017-02-24 14:41:23 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-01-29 21:09:07 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
render() {
|
2019-01-29 21:09:07 +03:00
|
|
|
const AuthHeader = sdk.getComponent('auth.AuthHeader');
|
|
|
|
const AuthBody = sdk.getComponent("auth.AuthBody");
|
2019-06-18 20:43:14 +03:00
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
2017-02-24 14:41:23 +03:00
|
|
|
|
2017-10-25 04:04:02 +03:00
|
|
|
let errorText;
|
2019-05-03 08:04:06 +03:00
|
|
|
const err = this.state.errorText;
|
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
|
|
|
}
|
|
|
|
|
2019-06-05 08:41:59 +03:00
|
|
|
let serverDeadSection;
|
|
|
|
if (!this.state.serverIsAlive) {
|
2019-06-11 04:28:32 +03:00
|
|
|
const classes = classNames({
|
|
|
|
"mx_Login_error": true,
|
|
|
|
"mx_Login_serverError": true,
|
|
|
|
"mx_Login_serverErrorNonFatal": !this.state.serverErrorIsFatal,
|
|
|
|
});
|
2019-06-05 08:41:59 +03:00
|
|
|
serverDeadSection = (
|
2019-06-11 04:28:32 +03:00
|
|
|
<div className={classes}>
|
2019-06-05 08:41:59 +03:00
|
|
|
{this.state.serverDeadError}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-02-19 16:10:10 +03:00
|
|
|
const signIn = <a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
|
|
|
|
{ _t('Sign in instead') }
|
|
|
|
</a>;
|
2017-10-26 19:57:49 +03:00
|
|
|
|
2019-03-12 19:39:38 +03:00
|
|
|
// Only show the 'go back' button if you're not looking at the form
|
|
|
|
let goBack;
|
2020-11-19 17:57:57 +03:00
|
|
|
if ((PHASES_ENABLED && this.state.phase !== Phase.Registration) || this.state.doingUIAuth) {
|
2019-03-12 19:39:38 +03:00
|
|
|
goBack = <a className="mx_AuthBody_changeFlow" onClick={this.onGoToFormClicked} href="#">
|
|
|
|
{ _t('Go back') }
|
|
|
|
</a>;
|
2019-03-12 01:32:50 +03:00
|
|
|
}
|
|
|
|
|
2019-06-13 18:24:09 +03:00
|
|
|
let body;
|
|
|
|
if (this.state.completedNoSignin) {
|
|
|
|
let regDoneText;
|
2019-06-18 20:43:14 +03:00
|
|
|
if (this.state.differentLoggedInUserId) {
|
|
|
|
regDoneText = <div>
|
|
|
|
<p>{_t(
|
|
|
|
"Your new account (%(newAccountId)s) is registered, but you're already " +
|
|
|
|
"logged into a different account (%(loggedInUserId)s).", {
|
|
|
|
newAccountId: this.state.registeredUsername,
|
|
|
|
loggedInUserId: this.state.differentLoggedInUserId,
|
|
|
|
},
|
|
|
|
)}</p>
|
2020-11-19 17:57:57 +03:00
|
|
|
<p><AccessibleButton element="span" className="mx_linkButton" onClick={this.onLoginClickWithCheck}>
|
2019-06-18 20:43:14 +03:00
|
|
|
{_t("Continue with previous account")}
|
|
|
|
</AccessibleButton></p>
|
|
|
|
</div>;
|
|
|
|
} else if (this.state.formVals.password) {
|
2019-06-13 18:24:09 +03:00
|
|
|
// We're the client that started the registration
|
2019-06-18 20:43:14 +03:00
|
|
|
regDoneText = <h3>{_t(
|
2019-06-13 18:24:09 +03:00
|
|
|
"<a>Log in</a> to your new account.", {},
|
|
|
|
{
|
2020-11-19 17:57:57 +03:00
|
|
|
a: (sub) => <a href="#/login" onClick={this.onLoginClickWithCheck}>{sub}</a>,
|
2019-06-13 18:24:09 +03:00
|
|
|
},
|
2019-06-18 20:43:14 +03:00
|
|
|
)}</h3>;
|
2019-06-13 18:24:09 +03:00
|
|
|
} else {
|
|
|
|
// We're not the original client: the user probably got to us by clicking the
|
|
|
|
// email validation link. We can't offer a 'go straight to your account' link
|
|
|
|
// as we don't have the original creds.
|
2019-06-18 20:43:14 +03:00
|
|
|
regDoneText = <h3>{_t(
|
2019-06-13 18:24:09 +03:00
|
|
|
"You can now close this window or <a>log in</a> to your new account.", {},
|
|
|
|
{
|
2020-11-19 17:57:57 +03:00
|
|
|
a: (sub) => <a href="#/login" onClick={this.onLoginClickWithCheck}>{sub}</a>,
|
2019-06-13 18:24:09 +03:00
|
|
|
},
|
2019-06-18 20:43:14 +03:00
|
|
|
)}</h3>;
|
2019-06-13 18:24:09 +03:00
|
|
|
}
|
|
|
|
body = <div>
|
|
|
|
<h2>{_t("Registration Successful")}</h2>
|
2019-06-18 20:43:14 +03:00
|
|
|
{ regDoneText }
|
2019-06-13 18:24:09 +03:00
|
|
|
</div>;
|
|
|
|
} else {
|
2020-11-11 18:07:57 +03:00
|
|
|
let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
|
|
|
|
serverName: this.props.serverConfig.hsName,
|
|
|
|
});
|
|
|
|
if (this.props.serverConfig.hsNameIsDifferent) {
|
|
|
|
const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
|
|
|
|
|
|
|
|
yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
|
|
|
|
'underlinedServerName': () => {
|
|
|
|
return <TextWithTooltip
|
|
|
|
class="mx_Login_underlinedServerName"
|
|
|
|
tooltip={this.props.serverConfig.hsUrl}
|
|
|
|
>
|
|
|
|
{this.props.serverConfig.hsName}
|
|
|
|
</TextWithTooltip>;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// If custom URLs are allowed, user is not doing UIA flows and they haven't selected the Free server type,
|
|
|
|
// wire up the server details edit link.
|
|
|
|
let editLink = null;
|
|
|
|
if (PHASES_ENABLED &&
|
|
|
|
!SdkConfig.get()['disable_custom_urls'] &&
|
|
|
|
this.state.serverType !== ServerType.FREE &&
|
|
|
|
!this.state.doingUIAuth
|
|
|
|
) {
|
|
|
|
editLink = (
|
|
|
|
<a className="mx_AuthBody_editServerDetails" href="#" onClick={this.onEditServerDetailsClick}>
|
|
|
|
{_t('Change')}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-06-13 18:24:09 +03:00
|
|
|
body = <div>
|
|
|
|
<h2>{ _t('Create your account') }</h2>
|
|
|
|
{ errorText }
|
|
|
|
{ serverDeadSection }
|
|
|
|
{ this.renderServerComponent() }
|
2020-11-11 20:12:27 +03:00
|
|
|
{ this.state.phase !== PHASE_SERVER_DETAILS && <h3>
|
2020-11-11 18:07:57 +03:00
|
|
|
{yourMatrixAccountText}
|
|
|
|
{editLink}
|
2020-11-11 20:12:27 +03:00
|
|
|
</h3> }
|
2019-06-13 18:24:09 +03:00
|
|
|
{ this.renderRegisterComponent() }
|
|
|
|
{ goBack }
|
|
|
|
{ signIn }
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
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-06-13 18:24:09 +03:00
|
|
|
{ body }
|
2019-01-23 04:28:23 +03:00
|
|
|
</AuthBody>
|
2019-01-22 03:33:17 +03:00
|
|
|
</AuthPage>
|
2015-11-30 21:11:04 +03:00
|
|
|
);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
|
|
|
}
|