2018-05-25 10:17:29 +08:00
|
|
|
/*
|
2019-02-08 21:48:51 +08:00
|
|
|
Copyright 2018, 2019 New Vector Ltd
|
2018-05-25 10:17:29 +08: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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
2019-03-06 00:12:02 +08:00
|
|
|
import PropTypes from 'prop-types';
|
2018-10-23 21:42:28 +08:00
|
|
|
import dis from '../../../dispatcher';
|
|
|
|
import { _t } from '../../../languageHandler';
|
2018-12-11 19:43:17 +08:00
|
|
|
import LogoutDialog from "../dialogs/LogoutDialog";
|
|
|
|
import Modal from "../../../Modal";
|
2019-02-08 21:48:51 +08:00
|
|
|
import SdkConfig from '../../../SdkConfig';
|
2019-02-13 23:48:40 +08:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
2018-05-25 10:17:29 +08:00
|
|
|
|
2018-10-23 21:25:20 +08:00
|
|
|
export class TopLeftMenu extends React.Component {
|
2019-03-06 00:12:02 +08:00
|
|
|
static propTypes = {
|
|
|
|
displayName: PropTypes.string.isRequired,
|
|
|
|
userId: PropTypes.string.isRequired,
|
|
|
|
onFinished: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
2018-10-23 21:33:24 +08:00
|
|
|
constructor() {
|
|
|
|
super();
|
2019-02-15 00:07:44 +08:00
|
|
|
this.viewHomePage = this.viewHomePage.bind(this);
|
2018-10-23 21:33:24 +08:00
|
|
|
this.openSettings = this.openSettings.bind(this);
|
2019-02-13 23:48:40 +08:00
|
|
|
this.signIn = this.signIn.bind(this);
|
2018-10-23 21:33:24 +08:00
|
|
|
this.signOut = this.signOut.bind(this);
|
|
|
|
}
|
|
|
|
|
2019-02-08 21:48:51 +08:00
|
|
|
hasHomePage() {
|
|
|
|
const config = SdkConfig.get();
|
2019-02-08 21:55:23 +08:00
|
|
|
const pagesConfig = config.embeddedPages;
|
2019-02-08 21:53:17 +08:00
|
|
|
if (pagesConfig && pagesConfig.homeUrl) {
|
|
|
|
return true;
|
2019-02-08 21:48:51 +08:00
|
|
|
}
|
|
|
|
// This is a deprecated config option for the home page
|
|
|
|
// (despite the name, given we also now have a welcome
|
|
|
|
// page, which is not the same).
|
|
|
|
return !!config.welcomePageUrl;
|
|
|
|
}
|
|
|
|
|
2018-10-23 21:25:20 +08:00
|
|
|
render() {
|
2019-02-13 23:48:40 +08:00
|
|
|
const isGuest = MatrixClientPeg.get().isGuest();
|
|
|
|
|
2019-03-06 00:12:02 +08:00
|
|
|
const hostingSignupLink = SdkConfig.get().hosting_signup_link;
|
|
|
|
let hostingSignup = null;
|
|
|
|
if (hostingSignupLink) {
|
|
|
|
hostingSignup = <div className="mx_TopLeftMenu_upgradeLink">
|
|
|
|
{_t(
|
|
|
|
"<a>Upgrade</a> to your own domain", {},
|
|
|
|
{
|
|
|
|
a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener">{sub}</a>,
|
|
|
|
},
|
|
|
|
)}
|
|
|
|
<a href={hostingSignupLink} target="_blank" rel="noopener">
|
|
|
|
<img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
|
|
|
|
</a>
|
2019-03-06 00:20:18 +08:00
|
|
|
</div>;
|
2019-03-06 00:12:02 +08:00
|
|
|
}
|
|
|
|
|
2019-02-08 21:48:51 +08:00
|
|
|
let homePageSection = null;
|
|
|
|
if (this.hasHomePage()) {
|
2019-03-06 00:12:02 +08:00
|
|
|
homePageSection = <ul className="mx_TopLeftMenu_section_withIcon">
|
2019-02-08 21:48:51 +08:00
|
|
|
<li className="mx_TopLeftMenu_icon_home" onClick={this.viewHomePage}>{_t("Home")}</li>
|
|
|
|
</ul>;
|
|
|
|
}
|
|
|
|
|
2019-02-13 23:48:40 +08:00
|
|
|
let signInOutSection;
|
|
|
|
if (isGuest) {
|
2019-03-06 00:12:02 +08:00
|
|
|
signInOutSection = <ul className="mx_TopLeftMenu_section_withIcon">
|
2019-02-13 23:48:40 +08:00
|
|
|
<li className="mx_TopLeftMenu_icon_signin" onClick={this.signIn}>{_t("Sign in")}</li>
|
|
|
|
</ul>;
|
|
|
|
} else {
|
2019-03-06 00:12:02 +08:00
|
|
|
signInOutSection = <ul className="mx_TopLeftMenu_section_withIcon">
|
2019-02-13 23:48:40 +08:00
|
|
|
<li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
|
|
|
|
</ul>;
|
|
|
|
}
|
|
|
|
|
2018-10-23 21:25:20 +08:00
|
|
|
return <div className="mx_TopLeftMenu">
|
2019-03-06 00:12:02 +08:00
|
|
|
<div className="mx_TopLeftMenu_section_noIcon">
|
|
|
|
<div>{this.props.displayName}</div>
|
|
|
|
<div className="mx_TopLeftMenu_greyedText">{this.props.userId}</div>
|
|
|
|
{hostingSignup}
|
|
|
|
</div>
|
2019-02-08 21:48:51 +08:00
|
|
|
{homePageSection}
|
2019-03-06 00:12:02 +08:00
|
|
|
<ul className="mx_TopLeftMenu_section_withIcon">
|
2019-01-29 23:56:07 +08:00
|
|
|
<li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
|
2018-10-23 21:25:20 +08:00
|
|
|
</ul>
|
2019-02-13 23:48:40 +08:00
|
|
|
{signInOutSection}
|
2018-10-23 21:25:20 +08:00
|
|
|
</div>;
|
|
|
|
}
|
2018-05-25 10:17:29 +08:00
|
|
|
|
2019-02-08 21:48:51 +08:00
|
|
|
viewHomePage() {
|
|
|
|
dis.dispatch({action: 'view_home_page'});
|
|
|
|
this.closeMenu();
|
|
|
|
}
|
|
|
|
|
2018-10-23 21:25:20 +08:00
|
|
|
openSettings() {
|
|
|
|
dis.dispatch({action: 'view_user_settings'});
|
|
|
|
this.closeMenu();
|
|
|
|
}
|
2018-05-25 10:17:29 +08:00
|
|
|
|
2019-02-13 23:48:40 +08:00
|
|
|
signIn() {
|
|
|
|
dis.dispatch({action: 'start_login'});
|
|
|
|
this.closeMenu();
|
|
|
|
}
|
|
|
|
|
2018-10-23 21:25:20 +08:00
|
|
|
signOut() {
|
2018-12-11 19:43:17 +08:00
|
|
|
Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
|
2018-10-23 21:25:20 +08:00
|
|
|
this.closeMenu();
|
|
|
|
}
|
2018-05-25 10:17:29 +08:00
|
|
|
|
2018-10-23 21:25:20 +08:00
|
|
|
closeMenu() {
|
|
|
|
if (this.props.onFinished) this.props.onFinished();
|
2018-05-25 10:17:29 +08:00
|
|
|
}
|
|
|
|
}
|