mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-15 21:01:35 +03:00
319 lines
11 KiB
TypeScript
319 lines
11 KiB
TypeScript
/*
|
||
Copyright 2019-2021 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';
|
||
import { _t } from '../../../languageHandler';
|
||
import dis from '../../../dispatcher/dispatcher';
|
||
import * as Lifecycle from '../../../Lifecycle';
|
||
import Modal from '../../../Modal';
|
||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||
import { ISSOFlow, LoginFlow, sendLoginRequest } from "../../../Login";
|
||
import AuthPage from "../../views/auth/AuthPage";
|
||
import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY } from "../../../BasePlatform";
|
||
import SSOButtons from "../../views/elements/SSOButtons";
|
||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||
import ConfirmWipeDeviceDialog from '../../views/dialogs/ConfirmWipeDeviceDialog';
|
||
import Field from '../../views/elements/Field';
|
||
import AccessibleButton from '../../views/elements/AccessibleButton';
|
||
import Spinner from "../../views/elements/Spinner";
|
||
import AuthHeader from "../../views/auth/AuthHeader";
|
||
import AuthBody from "../../views/auth/AuthBody";
|
||
|
||
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,
|
||
};
|
||
|
||
interface IProps {
|
||
// Query parameters from MatrixChat
|
||
realQueryParams: {
|
||
loginToken?: string;
|
||
};
|
||
fragmentAfterLogin?: string;
|
||
|
||
// Called when the SSO login completes
|
||
onTokenLoginCompleted: () => void;
|
||
}
|
||
|
||
interface IState {
|
||
loginView: number;
|
||
keyBackupNeeded: boolean;
|
||
busy: boolean;
|
||
password: string;
|
||
errorText: string;
|
||
flows: LoginFlow[];
|
||
}
|
||
|
||
@replaceableComponent("structures.auth.SoftLogout")
|
||
export default class SoftLogout extends React.Component<IProps, IState> {
|
||
constructor(props) {
|
||
super(props);
|
||
|
||
this.state = {
|
||
loginView: LOGIN_VIEW.LOADING,
|
||
keyBackupNeeded: true, // assume we do while we figure it out (see componentDidMount)
|
||
busy: false,
|
||
password: "",
|
||
errorText: "",
|
||
flows: [],
|
||
};
|
||
}
|
||
|
||
componentDidMount(): void {
|
||
// We've ended up here when we don't need to - navigate to login
|
||
if (!Lifecycle.isSoftLogout()) {
|
||
dis.dispatch({ action: "start_login" });
|
||
return;
|
||
}
|
||
|
||
this.initLogin();
|
||
|
||
const cli = MatrixClientPeg.get();
|
||
if (cli.isCryptoEnabled()) {
|
||
cli.countSessionsNeedingBackup().then(remaining => {
|
||
this.setState({ keyBackupNeeded: remaining > 0 });
|
||
});
|
||
}
|
||
}
|
||
|
||
onClearAll = () => {
|
||
Modal.createTrackedDialog('Clear Data', 'Soft Logout', ConfirmWipeDeviceDialog, {
|
||
onFinished: (wipeData) => {
|
||
if (!wipeData) return;
|
||
|
||
console.log("Clearing data from soft-logged-out session");
|
||
Lifecycle.logout();
|
||
},
|
||
});
|
||
};
|
||
|
||
private async initLogin() {
|
||
const queryParams = this.props.realQueryParams;
|
||
const hasAllParams = queryParams && queryParams['loginToken'];
|
||
if (hasAllParams) {
|
||
this.setState({ loginView: LOGIN_VIEW.LOADING });
|
||
this.trySsoLogin();
|
||
return;
|
||
}
|
||
|
||
// 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.
|
||
const client = MatrixClientPeg.get();
|
||
const flows = (await client.loginFlows()).flows;
|
||
const loginViews = flows.map(f => FLOWS_TO_VIEWS[f.type]);
|
||
|
||
const chosenView = loginViews.filter(f => !!f)[0] || LOGIN_VIEW.UNSUPPORTED;
|
||
this.setState({ flows, loginView: chosenView });
|
||
}
|
||
|
||
onPasswordChange = (ev) => {
|
||
this.setState({ password: ev.target.value });
|
||
};
|
||
|
||
onForgotPassword = () => {
|
||
dis.dispatch({ action: 'start_password_recovery' });
|
||
};
|
||
|
||
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") });
|
||
});
|
||
};
|
||
|
||
async trySsoLogin() {
|
||
this.setState({ busy: true });
|
||
|
||
const hsUrl = localStorage.getItem(SSO_HOMESERVER_URL_KEY);
|
||
const isUrl = localStorage.getItem(SSO_ID_SERVER_URL_KEY) || 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 });
|
||
});
|
||
}
|
||
|
||
private renderSignInSection() {
|
||
if (this.state.loginView === LOGIN_VIEW.LOADING) {
|
||
return <Spinner />;
|
||
}
|
||
|
||
let introText = null; // null is translated to something area specific in this function
|
||
if (this.state.keyBackupNeeded) {
|
||
introText = _t(
|
||
"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.");
|
||
}
|
||
|
||
if (this.state.loginView === LOGIN_VIEW.PASSWORD) {
|
||
let error = null;
|
||
if (this.state.errorText) {
|
||
error = <span className='mx_Login_error'>{this.state.errorText}</span>;
|
||
}
|
||
|
||
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)
|
||
|
||
return (
|
||
<form onSubmit={this.onPasswordLogin}>
|
||
<p>{introText}</p>
|
||
{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) {
|
||
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)
|
||
|
||
const loginType = this.state.loginView === LOGIN_VIEW.CAS ? "cas" : "sso";
|
||
const flow = this.state.flows.find(flow => flow.type === "m.login." + loginType) as ISSOFlow;
|
||
|
||
return (
|
||
<div>
|
||
<p>{introText}</p>
|
||
<SSOButtons
|
||
matrixClient={MatrixClientPeg.get()}
|
||
flow={flow}
|
||
loginType={loginType}
|
||
fragmentAfterLogin={this.props.fragmentAfterLogin}
|
||
primary={!this.state.flows.find(flow => flow.type === "m.login.password")}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Default: assume unsupported/error
|
||
return (
|
||
<p>
|
||
{_t(
|
||
"You cannot sign in to your account. Please contact your " +
|
||
"homeserver admin for more information.",
|
||
)}
|
||
</p>
|
||
);
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<AuthPage>
|
||
<AuthHeader />
|
||
<AuthBody>
|
||
<h2>
|
||
{_t("You're signed out")}
|
||
</h2>
|
||
|
||
<h3>{_t("Sign in")}</h3>
|
||
<div>
|
||
{this.renderSignInSection()}
|
||
</div>
|
||
|
||
<h3>{_t("Clear personal data")}</h3>
|
||
<p>
|
||
{_t(
|
||
"Warning: Your personal data (including encryption keys) is still stored " +
|
||
"in this session. Clear it if you're finished using this session, or want to sign " +
|
||
"in to another account.",
|
||
)}
|
||
</p>
|
||
<div>
|
||
<AccessibleButton onClick={this.onClearAll} kind="danger">
|
||
{_t("Clear all data")}
|
||
</AccessibleButton>
|
||
</div>
|
||
</AuthBody>
|
||
</AuthPage>
|
||
);
|
||
}
|
||
}
|