diff --git a/res/css/_components.scss b/res/css/_components.scss index c82dedc069d..57a34023c03 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -36,6 +36,7 @@ @import "./views/auth/_LanguageSelector.scss"; @import "./views/auth/_ServerConfig.scss"; @import "./views/auth/_ServerTypeSelector.scss"; +@import "./views/auth/_Welcome.scss"; @import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/context_menus/_MessageContextMenu.scss"; diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss index 5f1e035e993..3aa80f6f595 100644 --- a/res/css/structures/_HomePage.scss +++ b/res/css/structures/_HomePage.scss @@ -1,6 +1,7 @@ /* Copyright 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd +Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -22,10 +23,3 @@ limitations under the License. margin-left: auto; margin-right: auto; } - -.mx_HomePage iframe { - display: block; - width: 100%; - height: 100%; - border: 0px; -} diff --git a/res/css/views/auth/_Welcome.scss b/res/css/views/auth/_Welcome.scss new file mode 100644 index 00000000000..90432891848 --- /dev/null +++ b/res/css/views/auth/_Welcome.scss @@ -0,0 +1,26 @@ +/* +Copyright 2019 New Vector Ltd + +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. +*/ + +.mx_Welcome { + display: flex; + flex-direction: column; + align-items: center; +} + +.mx_Welcome .mx_AuthBody_language { + width: 120px; + margin-bottom: 10px; +} diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss index 18463da824c..f305f0fae38 100644 --- a/res/css/views/context_menus/_TopLeftMenu.scss +++ b/res/css/views/context_menus/_TopLeftMenu.scss @@ -27,6 +27,10 @@ limitations under the License. margin: 5px 0; padding: 0; + li.mx_TopLeftMenu_icon_home::after { + mask-image: url('$(res)/img/feather-icons/home.svg'); + } + li.mx_TopLeftMenu_icon_settings::after { mask-image: url('$(res)/img/feather-icons/settings.svg'); } diff --git a/res/img/feather-icons/home.svg b/res/img/feather-icons/home.svg new file mode 100644 index 00000000000..7bb31b23dc2 --- /dev/null +++ b/res/img/feather-icons/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Registration.js b/src/Registration.js index f3a2076ed6b..42e172ca0b1 100644 --- a/src/Registration.js +++ b/src/Registration.js @@ -35,8 +35,10 @@ export const SAFE_LOCALPART_REGEX = /^[a-z0-9=_\-./]+$/; * on what the HS supports * * @param {object} options - * @param {bool} options.go_home_on_cancel If true, goes to - * the hame page if the user cancels the action + * @param {bool} options.go_home_on_cancel + * If true, goes to the home page if the user cancels the action + * @param {bool} options.go_welcome_on_cancel + * If true, goes to the welcome page if the user cancels the action */ export async function startAnyRegistrationFlow(options) { if (options === undefined) options = {}; @@ -73,6 +75,8 @@ export async function startAnyRegistrationFlow(options) { dis.dispatch({action: 'start_registration'}); } else if (options.go_home_on_cancel) { dis.dispatch({action: 'view_home_page'}); + } else if (options.go_welcome_on_cancel) { + dis.dispatch({action: 'view_welcome_page'}); } }, }); diff --git a/src/components/structures/HomePage.js b/src/components/structures/EmbeddedPage.js similarity index 59% rename from src/components/structures/HomePage.js rename to src/components/structures/EmbeddedPage.js index 18f1a2ba314..d10b7f84142 100644 --- a/src/components/structures/HomePage.js +++ b/src/components/structures/EmbeddedPage.js @@ -1,6 +1,7 @@ /* Copyright 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd +Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -26,22 +27,27 @@ import sdk from '../../index'; import { MatrixClient } from 'matrix-js-sdk'; import classnames from 'classnames'; -class HomePage extends React.Component { - static displayName = 'HomePage'; - +export default class EmbeddedPage extends React.PureComponent { static propTypes = { - // URL to use as the iFrame src. Defaults to /home.html. - homePageUrl: PropTypes.string, + // URL to request embedded page content from + url: PropTypes.string, + // Class name prefix to apply for a given instance + className: PropTypes.string, + // Whether to wrap the page in a scrollbar + scrollbar: PropTypes.bool, }; static contextTypes = { matrixClient: PropTypes.instanceOf(MatrixClient), }; - state = { - iframeSrc: '', + constructor(props) { + super(props); + + this.state = { page: '', - }; + }; + } translate(s) { // default implementation - skins may wish to extend this @@ -51,22 +57,24 @@ class HomePage extends React.Component { componentWillMount() { this._unmounted = false; - // we use request() to inline the homepage into the react component + if (!this.props.url) { + return; + } + + // we use request() to inline the page into the react component // so that it can inherit CSS and theming easily rather than mess around // with iframes and trying to synchronise document.stylesheets. - const src = this.props.homePageUrl || 'home.html'; - request( - { method: "GET", url: src }, + { method: "GET", url: this.props.url }, (err, response, body) => { if (this._unmounted) { return; } if (err || response.status < 200 || response.status >= 300) { - console.warn(`Error loading home page: ${err}`); - this.setState({ page: _t("Couldn't load home page") }); + console.warn(`Error loading page: ${err}`); + this.setState({ page: _t("Couldn't load page") }); return; } @@ -81,28 +89,28 @@ class HomePage extends React.Component { } render() { - const isGuest = this.context.matrixClient.isGuest(); + const client = this.context.matrixClient; + const isGuest = client ? client.isGuest() : true; + const className = this.props.className; const classes = classnames({ - mx_HomePage: true, - mx_HomePage_guest: isGuest, + [className]: true, + [`${className}_guest`]: isGuest, }); - if (this.state.iframeSrc) { - return ( -
-