2018-05-25 05:17:29 +03:00
|
|
|
/*
|
2019-02-08 16:48:51 +03:00
|
|
|
Copyright 2018, 2019 New Vector Ltd
|
2019-05-21 06:07:55 +03:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2018-05-25 05:17:29 +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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
2019-03-05 19:12:02 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2018-10-23 16:42:28 +03:00
|
|
|
import dis from '../../../dispatcher';
|
|
|
|
import { _t } from '../../../languageHandler';
|
2018-12-11 14:43:17 +03:00
|
|
|
import LogoutDialog from "../dialogs/LogoutDialog";
|
|
|
|
import Modal from "../../../Modal";
|
2019-02-08 16:48:51 +03:00
|
|
|
import SdkConfig from '../../../SdkConfig';
|
2019-03-05 19:42:22 +03:00
|
|
|
import { getHostingLink } from '../../../utils/HostingLink';
|
2019-02-13 18:48:40 +03:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
2019-11-11 20:53:17 +03:00
|
|
|
import {MenuItem} from "../../structures/ContextualMenu";
|
2018-05-25 05:17:29 +03:00
|
|
|
|
2018-10-23 16:25:20 +03:00
|
|
|
export class TopLeftMenu extends React.Component {
|
2019-03-05 19:12:02 +03:00
|
|
|
static propTypes = {
|
|
|
|
displayName: PropTypes.string.isRequired,
|
|
|
|
userId: PropTypes.string.isRequired,
|
|
|
|
onFinished: PropTypes.func,
|
2019-05-21 06:07:55 +03:00
|
|
|
|
|
|
|
// Optional function to collect a reference to the container
|
|
|
|
// of this component directly.
|
|
|
|
containerRef: PropTypes.func,
|
2019-03-05 19:12:02 +03:00
|
|
|
};
|
|
|
|
|
2018-10-23 16:33:24 +03:00
|
|
|
constructor() {
|
|
|
|
super();
|
2019-02-14 19:07:44 +03:00
|
|
|
this.viewHomePage = this.viewHomePage.bind(this);
|
2018-10-23 16:33:24 +03:00
|
|
|
this.openSettings = this.openSettings.bind(this);
|
2019-02-13 18:48:40 +03:00
|
|
|
this.signIn = this.signIn.bind(this);
|
2018-10-23 16:33:24 +03:00
|
|
|
this.signOut = this.signOut.bind(this);
|
|
|
|
}
|
|
|
|
|
2019-02-08 16:48:51 +03:00
|
|
|
hasHomePage() {
|
|
|
|
const config = SdkConfig.get();
|
2019-02-08 16:55:23 +03:00
|
|
|
const pagesConfig = config.embeddedPages;
|
2019-02-08 16:53:17 +03:00
|
|
|
if (pagesConfig && pagesConfig.homeUrl) {
|
|
|
|
return true;
|
2019-02-08 16:48:51 +03: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 16:25:20 +03:00
|
|
|
render() {
|
2019-02-13 18:48:40 +03:00
|
|
|
const isGuest = MatrixClientPeg.get().isGuest();
|
|
|
|
|
2019-03-05 19:42:22 +03:00
|
|
|
const hostingSignupLink = getHostingLink('user-context-menu');
|
2019-03-05 19:12:02 +03:00
|
|
|
let hostingSignup = null;
|
|
|
|
if (hostingSignupLink) {
|
|
|
|
hostingSignup = <div className="mx_TopLeftMenu_upgradeLink">
|
|
|
|
{_t(
|
|
|
|
"<a>Upgrade</a> to your own domain", {},
|
|
|
|
{
|
2019-11-11 20:53:17 +03:00
|
|
|
a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener" tabIndex={-1}>{sub}</a>,
|
2019-03-05 19:12:02 +03:00
|
|
|
},
|
|
|
|
)}
|
2019-11-11 20:53:17 +03:00
|
|
|
<a href={hostingSignupLink} target="_blank" rel="noopener" role="presentation" aria-hidden={true} tabIndex={-1}>
|
2019-03-05 19:12:02 +03:00
|
|
|
<img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
|
|
|
|
</a>
|
2019-03-05 19:20:18 +03:00
|
|
|
</div>;
|
2019-03-05 19:12:02 +03:00
|
|
|
}
|
|
|
|
|
2019-05-18 00:32:03 +03:00
|
|
|
let homePageItem = null;
|
2019-02-08 16:48:51 +03:00
|
|
|
if (this.hasHomePage()) {
|
2019-09-27 11:00:54 +03:00
|
|
|
homePageItem = (
|
2019-11-11 20:53:17 +03:00
|
|
|
<MenuItem className="mx_TopLeftMenu_icon_home" onClick={this.viewHomePage}>
|
2019-09-27 11:00:54 +03:00
|
|
|
{_t("Home")}
|
2019-11-11 20:53:17 +03:00
|
|
|
</MenuItem>
|
2019-09-27 11:00:54 +03:00
|
|
|
);
|
2019-02-08 16:48:51 +03:00
|
|
|
}
|
|
|
|
|
2019-05-18 00:32:03 +03:00
|
|
|
let signInOutItem;
|
2019-02-13 18:48:40 +03:00
|
|
|
if (isGuest) {
|
2019-09-27 11:00:54 +03:00
|
|
|
signInOutItem = (
|
2019-11-11 20:53:17 +03:00
|
|
|
<MenuItem className="mx_TopLeftMenu_icon_signin" onClick={this.signIn}>
|
2019-09-27 11:00:54 +03:00
|
|
|
{_t("Sign in")}
|
2019-11-11 20:53:17 +03:00
|
|
|
</MenuItem>
|
2019-09-27 11:00:54 +03:00
|
|
|
);
|
2019-02-13 18:48:40 +03:00
|
|
|
} else {
|
2019-09-27 11:00:54 +03:00
|
|
|
signInOutItem = (
|
2019-11-11 20:53:17 +03:00
|
|
|
<MenuItem className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>
|
2019-09-27 11:00:54 +03:00
|
|
|
{_t("Sign out")}
|
2019-11-11 20:53:17 +03:00
|
|
|
</MenuItem>
|
2019-09-27 11:00:54 +03:00
|
|
|
);
|
2019-02-13 18:48:40 +03:00
|
|
|
}
|
|
|
|
|
2019-09-27 11:00:54 +03:00
|
|
|
const settingsItem = (
|
2019-11-11 20:53:17 +03:00
|
|
|
<MenuItem className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>
|
2019-09-27 11:00:54 +03:00
|
|
|
{_t("Settings")}
|
2019-11-11 20:53:17 +03:00
|
|
|
</MenuItem>
|
2019-09-27 11:00:54 +03:00
|
|
|
);
|
2019-05-18 00:32:03 +03:00
|
|
|
|
2019-11-11 20:53:17 +03:00
|
|
|
return <div className="mx_TopLeftMenu" ref={this.props.containerRef} role="menu">
|
|
|
|
<div className="mx_TopLeftMenu_section_noIcon" aria-readonly={true} tabIndex={-1}>
|
2019-03-05 19:12:02 +03:00
|
|
|
<div>{this.props.displayName}</div>
|
2019-05-18 00:32:03 +03:00
|
|
|
<div className="mx_TopLeftMenu_greyedText" aria-hidden={true}>{this.props.userId}</div>
|
2019-03-05 19:12:02 +03:00
|
|
|
{hostingSignup}
|
|
|
|
</div>
|
2019-11-11 20:53:17 +03:00
|
|
|
<ul className="mx_TopLeftMenu_section_withIcon" role="none">
|
2019-05-18 00:32:03 +03:00
|
|
|
{homePageItem}
|
|
|
|
{settingsItem}
|
|
|
|
{signInOutItem}
|
2018-10-23 16:25:20 +03:00
|
|
|
</ul>
|
|
|
|
</div>;
|
|
|
|
}
|
2018-05-25 05:17:29 +03:00
|
|
|
|
2019-02-08 16:48:51 +03:00
|
|
|
viewHomePage() {
|
|
|
|
dis.dispatch({action: 'view_home_page'});
|
|
|
|
this.closeMenu();
|
|
|
|
}
|
|
|
|
|
2018-10-23 16:25:20 +03:00
|
|
|
openSettings() {
|
|
|
|
dis.dispatch({action: 'view_user_settings'});
|
|
|
|
this.closeMenu();
|
|
|
|
}
|
2018-05-25 05:17:29 +03:00
|
|
|
|
2019-02-13 18:48:40 +03:00
|
|
|
signIn() {
|
|
|
|
dis.dispatch({action: 'start_login'});
|
|
|
|
this.closeMenu();
|
|
|
|
}
|
|
|
|
|
2018-10-23 16:25:20 +03:00
|
|
|
signOut() {
|
2018-12-11 14:43:17 +03:00
|
|
|
Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
|
2018-10-23 16:25:20 +03:00
|
|
|
this.closeMenu();
|
|
|
|
}
|
2018-05-25 05:17:29 +03:00
|
|
|
|
2018-10-23 16:25:20 +03:00
|
|
|
closeMenu() {
|
|
|
|
if (this.props.onFinished) this.props.onFinished();
|
2018-05-25 05:17:29 +03:00
|
|
|
}
|
|
|
|
}
|