Merge branch 'develop' into t3chguy/random_fix_1

src/components/structures/HomePage.js

@@ -18,21 +18,82 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+import request from 'browser-request';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import sanitizeHtml from 'sanitize-html';
 
 module.exports = React.createClass({
     displayName: 'HomePage',
 
     propTypes: {
-        teamServerUrl: React.PropTypes.string.isRequired,
-        teamToken: React.PropTypes.string.isRequired,
-        collapsedRhs: React.PropTypes.bool,
+        // URL base of the team server. Optional.
+        teamServerUrl: React.PropTypes.string,
+        // Team token. Optional. If set, used to get the static homepage of the team
+        //      associated. If unset, homePageUrl will be used.
+        teamToken: React.PropTypes.string,
+        // URL to use as the iFrame src. Defaults to /home.html.
+        homePageUrl: React.PropTypes.string,
+    },
+
+    getInitialState: function() {
+        return {
+            iframeSrc: '',
+            page: '',
+        };
+    },
+
+    translate: function(s) {
+        s = sanitizeHtml(_t(s));
+        // ugly fix for https://github.com/vector-im/riot-web/issues/4243
+        s = s.replace(/Riot\.im/, '<a href="https://riot.im target="_blank">Riot.im</a>');
+        s = s.replace(/\[matrix\]/, '<a href="https://matrix.org" target="_blank"><img width="79" height="34" alt="[matrix]" style="padding-left: 1px;vertical-align: middle" src="home/images/matrix.svg"/></a>');
+        return s;
+    },
+
+    componentWillMount: function() {
+        if (this.props.teamToken && this.props.teamServerUrl) {
+            this.setState({
+                iframeSrc: `${this.props.teamServerUrl}/static/${this.props.teamToken}/home.html`
+            });
+        }
+        else {
+            // we use request() to inline the homepage 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.
+
+            let src = this.props.homePageUrl || 'home.html';
+
+            request(
+                { method: "GET", url: src },
+                (err, response, body) => {
+                    if (err || response.status < 200 || response.status >= 300) {
+                        console.log(err);
+                        this.setState({ page: "Couldn't load home page" });
+                    }
+
+                    body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1)=>this.translate(g1));
+                    this.setState({ page: body });
+                }
+            );
+        }
     },
 
     render: function() {
-        return (
-        <div className="mx_HomePage">
-            <iframe src={`${this.props.teamServerUrl}/static/${this.props.teamToken}/home.html`}/>
-        </div>
-        );
+        if (this.state.iframeSrc) {
+            return (
+                <div className="mx_HomePage">
+                    <iframe src={ this.state.iframeSrc } />
+                </div>
+            );
+        }
+        else {
+            return (
+                <GeminiScrollbar autoshow={true} className="mx_HomePage">
+                    <div className="mx_HomePage_body" dangerouslySetInnerHTML={{ __html: this.state.page }}>
+                    </div>
+                </GeminiScrollbar>
+            );
+        }
     }
 });