2019-07-04 01:46:37 +03:00
|
|
|
|
/*
|
|
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
2019-07-08 21:43:16 +03:00
|
|
|
|
import PropTypes from 'prop-types';
|
2019-07-04 01:46:37 +03:00
|
|
|
|
import {_t} from '../../../languageHandler';
|
2019-12-20 04:19:56 +03:00
|
|
|
|
import * as sdk from '../../../index';
|
2019-07-04 01:46:37 +03:00
|
|
|
|
import dis from '../../../dispatcher';
|
|
|
|
|
import * as Lifecycle from '../../../Lifecycle';
|
|
|
|
|
import Modal from '../../../Modal';
|
2019-12-21 00:13:46 +03:00
|
|
|
|
import {MatrixClientPeg} from "../../../MatrixClientPeg";
|
2019-07-05 02:00:09 +03:00
|
|
|
|
import {sendLoginRequest} from "../../../Login";
|
2019-12-13 05:31:52 +03:00
|
|
|
|
import AuthPage from "../../views/auth/AuthPage";
|
2020-03-02 17:59:54 +03:00
|
|
|
|
import SSOButton from "../../views/elements/SSOButton";
|
2019-07-05 01:45:40 +03:00
|
|
|
|
|
|
|
|
|
const LOGIN_VIEW = {
|
|
|
|
|
LOADING: 1,
|
|
|
|
|
PASSWORD: 2,
|
|
|
|
|
CAS: 3, // SSO, but old
|
|
|
|
|
SSO: 4,
|
|
|
|
|
UNSUPPORTED: 5,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const FLOWS_TO_VIEWS = {
|
|
|
|
|
"m.login.password": LOGIN_VIEW.PASSWORD,
|
|
|
|
|
"m.login.cas": LOGIN_VIEW.CAS,
|
|
|
|
|
"m.login.sso": LOGIN_VIEW.SSO,
|
|
|
|
|
};
|
2019-07-04 01:46:37 +03:00
|
|
|
|
|
|
|
|
|
export default class SoftLogout extends React.Component {
|
|
|
|
|
static propTypes = {
|
2019-07-08 21:43:16 +03:00
|
|
|
|
// Query parameters from MatrixChat
|
|
|
|
|
realQueryParams: PropTypes.object, // {homeserver, identityServer, loginToken}
|
|
|
|
|
|
|
|
|
|
// Called when the SSO login completes
|
|
|
|
|
onTokenLoginCompleted: PropTypes.func,
|
2019-07-04 01:46:37 +03:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
|
super();
|
|
|
|
|
|
|
|
|
|
this.state = {
|
2019-07-05 01:45:40 +03:00
|
|
|
|
loginView: LOGIN_VIEW.LOADING,
|
2020-03-31 23:05:56 +03:00
|
|
|
|
keyBackupNeeded: true, // assume we do while we figure it out (see componentDidMount)
|
2019-07-05 01:45:40 +03:00
|
|
|
|
|
|
|
|
|
busy: false,
|
|
|
|
|
password: "",
|
|
|
|
|
errorText: "",
|
2019-07-04 01:46:37 +03:00
|
|
|
|
};
|
2019-07-08 20:51:22 +03:00
|
|
|
|
}
|
2019-07-05 01:45:40 +03:00
|
|
|
|
|
2019-07-08 20:51:22 +03:00
|
|
|
|
componentDidMount(): void {
|
2019-07-08 21:43:16 +03:00
|
|
|
|
// We've ended up here when we don't need to - navigate to login
|
|
|
|
|
if (!Lifecycle.isSoftLogout()) {
|
2020-01-16 00:13:56 +03:00
|
|
|
|
dis.dispatch({action: "start_login"});
|
2019-07-08 21:43:16 +03:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-05 01:45:40 +03:00
|
|
|
|
this._initLogin();
|
2019-07-04 01:46:37 +03:00
|
|
|
|
|
2019-07-05 22:52:14 +03:00
|
|
|
|
MatrixClientPeg.get().flagAllGroupSessionsForBackup().then(remaining => {
|
|
|
|
|
this.setState({keyBackupNeeded: remaining > 0});
|
|
|
|
|
});
|
2019-07-04 01:46:37 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onClearAll = () => {
|
|
|
|
|
const ConfirmWipeDeviceDialog = sdk.getComponent('dialogs.ConfirmWipeDeviceDialog');
|
|
|
|
|
Modal.createTrackedDialog('Clear Data', 'Soft Logout', ConfirmWipeDeviceDialog, {
|
|
|
|
|
onFinished: (wipeData) => {
|
|
|
|
|
if (!wipeData) return;
|
|
|
|
|
|
2020-01-29 18:48:25 +03:00
|
|
|
|
console.log("Clearing data from soft-logged-out session");
|
2019-07-04 01:46:37 +03:00
|
|
|
|
Lifecycle.logout();
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2019-07-05 01:45:40 +03:00
|
|
|
|
async _initLogin() {
|
2019-07-10 17:01:32 +03:00
|
|
|
|
const queryParams = this.props.realQueryParams;
|
|
|
|
|
const hasAllParams = queryParams && queryParams['homeserver'] && queryParams['loginToken'];
|
|
|
|
|
if (hasAllParams) {
|
2019-07-08 21:43:16 +03:00
|
|
|
|
this.setState({loginView: LOGIN_VIEW.LOADING});
|
|
|
|
|
this.trySsoLogin();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-05 02:00:09 +03:00
|
|
|
|
// Note: we don't use the existing Login class because it is heavily flow-based. We don't
|
|
|
|
|
// care about login flows here, unless it is the single flow we support.
|
2019-07-05 01:45:40 +03:00
|
|
|
|
const client = MatrixClientPeg.get();
|
|
|
|
|
const loginViews = (await client.loginFlows()).flows.map(f => FLOWS_TO_VIEWS[f.type]);
|
|
|
|
|
|
|
|
|
|
const chosenView = loginViews.filter(f => !!f)[0] || LOGIN_VIEW.UNSUPPORTED;
|
|
|
|
|
this.setState({loginView: chosenView});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onPasswordChange = (ev) => {
|
|
|
|
|
this.setState({password: ev.target.value});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onForgotPassword = () => {
|
|
|
|
|
dis.dispatch({action: 'start_password_recovery'});
|
2019-07-04 01:46:37 +03:00
|
|
|
|
};
|
|
|
|
|
|
2019-07-05 01:45:40 +03:00
|
|
|
|
onPasswordLogin = async (ev) => {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
|
|
this.setState({busy: true});
|
|
|
|
|
|
|
|
|
|
const hsUrl = MatrixClientPeg.get().getHomeserverUrl();
|
|
|
|
|
const isUrl = MatrixClientPeg.get().getIdentityServerUrl();
|
|
|
|
|
const loginType = "m.login.password";
|
|
|
|
|
const loginParams = {
|
|
|
|
|
identifier: {
|
|
|
|
|
type: "m.id.user",
|
|
|
|
|
user: MatrixClientPeg.get().getUserId(),
|
|
|
|
|
},
|
|
|
|
|
password: this.state.password,
|
|
|
|
|
device_id: MatrixClientPeg.get().getDeviceId(),
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let credentials = null;
|
|
|
|
|
try {
|
|
|
|
|
credentials = await sendLoginRequest(hsUrl, isUrl, loginType, loginParams);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
let errorText = _t("Failed to re-authenticate due to a homeserver problem");
|
|
|
|
|
if (e.errcode === "M_FORBIDDEN" && (e.httpStatus === 401 || e.httpStatus === 403)) {
|
|
|
|
|
errorText = _t("Incorrect password");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
busy: false,
|
|
|
|
|
errorText: errorText,
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Lifecycle.hydrateSession(credentials).catch((e) => {
|
|
|
|
|
console.error(e);
|
|
|
|
|
this.setState({busy: false, errorText: _t("Failed to re-authenticate")});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2019-07-08 21:43:16 +03:00
|
|
|
|
async trySsoLogin() {
|
|
|
|
|
this.setState({busy: true});
|
|
|
|
|
|
|
|
|
|
const hsUrl = this.props.realQueryParams['homeserver'];
|
|
|
|
|
const isUrl = this.props.realQueryParams['identityServer'] || MatrixClientPeg.get().getIdentityServerUrl();
|
|
|
|
|
const loginType = "m.login.token";
|
|
|
|
|
const loginParams = {
|
|
|
|
|
token: this.props.realQueryParams['loginToken'],
|
|
|
|
|
device_id: MatrixClientPeg.get().getDeviceId(),
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let credentials = null;
|
|
|
|
|
try {
|
|
|
|
|
credentials = await sendLoginRequest(hsUrl, isUrl, loginType, loginParams);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
this.setState({busy: false, loginView: LOGIN_VIEW.UNSUPPORTED});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Lifecycle.hydrateSession(credentials).then(() => {
|
|
|
|
|
if (this.props.onTokenLoginCompleted) this.props.onTokenLoginCompleted();
|
|
|
|
|
}).catch((e) => {
|
|
|
|
|
console.error(e);
|
|
|
|
|
this.setState({busy: false, loginView: LOGIN_VIEW.UNSUPPORTED});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-05 01:45:40 +03:00
|
|
|
|
_renderSignInSection() {
|
|
|
|
|
if (this.state.loginView === LOGIN_VIEW.LOADING) {
|
|
|
|
|
const Spinner = sdk.getComponent("elements.Spinner");
|
|
|
|
|
return <Spinner />;
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-10 08:55:20 +03:00
|
|
|
|
let introText = null; // null is translated to something area specific in this function
|
|
|
|
|
if (this.state.keyBackupNeeded) {
|
|
|
|
|
introText = _t(
|
2020-01-29 19:10:46 +03:00
|
|
|
|
"Regain access to your account and recover encryption keys stored in this session. " +
|
|
|
|
|
"Without them, you won’t be able to read all of your secure messages in any session.");
|
2019-07-10 08:55:20 +03:00
|
|
|
|
}
|
|
|
|
|
|
2019-07-05 01:45:40 +03:00
|
|
|
|
if (this.state.loginView === LOGIN_VIEW.PASSWORD) {
|
|
|
|
|
const Field = sdk.getComponent("elements.Field");
|
|
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
|
|
|
|
|
|
|
|
|
let error = null;
|
|
|
|
|
if (this.state.errorText) {
|
2019-07-05 02:00:09 +03:00
|
|
|
|
error = <span className='mx_Login_error'>{this.state.errorText}</span>;
|
2019-07-05 01:45:40 +03:00
|
|
|
|
}
|
|
|
|
|
|
2019-07-10 08:55:20 +03:00
|
|
|
|
if (!introText) {
|
|
|
|
|
introText = _t("Enter your password to sign in and regain access to your account.");
|
|
|
|
|
} // else we already have a message and should use it (key backup warning)
|
2019-07-05 22:52:14 +03:00
|
|
|
|
|
2019-07-05 01:45:40 +03:00
|
|
|
|
return (
|
|
|
|
|
<form onSubmit={this.onPasswordLogin}>
|
2019-07-05 22:52:14 +03:00
|
|
|
|
<p>{introText}</p>
|
2019-07-05 01:45:40 +03:00
|
|
|
|
{error}
|
|
|
|
|
<Field
|
|
|
|
|
type="password"
|
|
|
|
|
label={_t("Password")}
|
|
|
|
|
onChange={this.onPasswordChange}
|
|
|
|
|
value={this.state.password}
|
|
|
|
|
disabled={this.state.busy}
|
|
|
|
|
/>
|
|
|
|
|
<AccessibleButton
|
|
|
|
|
onClick={this.onPasswordLogin}
|
|
|
|
|
kind="primary"
|
|
|
|
|
type="submit"
|
|
|
|
|
disabled={this.state.busy}
|
|
|
|
|
>
|
|
|
|
|
{_t("Sign In")}
|
|
|
|
|
</AccessibleButton>
|
|
|
|
|
<AccessibleButton onClick={this.onForgotPassword} kind="link">
|
|
|
|
|
{_t("Forgotten your password?")}
|
|
|
|
|
</AccessibleButton>
|
|
|
|
|
</form>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.state.loginView === LOGIN_VIEW.SSO || this.state.loginView === LOGIN_VIEW.CAS) {
|
2019-07-10 08:55:20 +03:00
|
|
|
|
if (!introText) {
|
|
|
|
|
introText = _t("Sign in and regain access to your account.");
|
|
|
|
|
} // else we already have a message and should use it (key backup warning)
|
|
|
|
|
|
2019-07-08 21:43:16 +03:00
|
|
|
|
return (
|
2019-07-10 08:55:20 +03:00
|
|
|
|
<div>
|
|
|
|
|
<p>{introText}</p>
|
2020-03-02 17:59:54 +03:00
|
|
|
|
<SSOButton
|
|
|
|
|
matrixClient={MatrixClientPeg.get()}
|
|
|
|
|
loginType={this.state.loginView === LOGIN_VIEW.CAS ? "cas" : "sso"} />
|
2019-07-10 08:55:20 +03:00
|
|
|
|
</div>
|
2019-07-08 21:43:16 +03:00
|
|
|
|
);
|
2019-07-05 01:45:40 +03:00
|
|
|
|
}
|
|
|
|
|
|
2019-07-10 08:55:20 +03:00
|
|
|
|
// Default: assume unsupported/error
|
2019-07-05 01:45:40 +03:00
|
|
|
|
return (
|
|
|
|
|
<p>
|
|
|
|
|
{_t(
|
2019-07-10 08:55:20 +03:00
|
|
|
|
"You cannot sign in to your account. Please contact your " +
|
2019-07-05 01:45:40 +03:00
|
|
|
|
"homeserver admin for more information.",
|
|
|
|
|
)}
|
|
|
|
|
</p>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-04 01:46:37 +03:00
|
|
|
|
render() {
|
|
|
|
|
const AuthHeader = sdk.getComponent("auth.AuthHeader");
|
|
|
|
|
const AuthBody = sdk.getComponent("auth.AuthBody");
|
|
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<AuthPage>
|
|
|
|
|
<AuthHeader />
|
|
|
|
|
<AuthBody>
|
|
|
|
|
<h2>
|
|
|
|
|
{_t("You're signed out")}
|
|
|
|
|
</h2>
|
|
|
|
|
|
2019-07-05 00:22:25 +03:00
|
|
|
|
<h3>{_t("Sign in")}</h3>
|
2019-07-04 01:46:37 +03:00
|
|
|
|
<div>
|
2019-07-05 00:22:25 +03:00
|
|
|
|
{this._renderSignInSection()}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h3>{_t("Clear personal data")}</h3>
|
|
|
|
|
<p>
|
2019-07-04 01:46:37 +03:00
|
|
|
|
{_t(
|
2019-07-05 00:22:25 +03:00
|
|
|
|
"Warning: Your personal data (including encryption keys) is still stored " +
|
2020-01-29 19:10:46 +03:00
|
|
|
|
"in this session. Clear it if you're finished using this session, or want to sign " +
|
2019-07-05 00:22:25 +03:00
|
|
|
|
"in to another account.",
|
2019-07-04 01:46:37 +03:00
|
|
|
|
)}
|
2019-07-05 00:22:25 +03:00
|
|
|
|
</p>
|
2019-07-04 01:46:37 +03:00
|
|
|
|
<div>
|
2019-07-05 00:22:25 +03:00
|
|
|
|
<AccessibleButton onClick={this.onClearAll} kind="danger">
|
2019-07-04 01:46:37 +03:00
|
|
|
|
{_t("Clear all data")}
|
|
|
|
|
</AccessibleButton>
|
|
|
|
|
</div>
|
|
|
|
|
</AuthBody>
|
|
|
|
|
</AuthPage>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|