Merge pull request #1969 from mattermost/PLT-7-client-infa2

PLT-7 client side infra for loc

web/react/pages/authorize.jsx

@@ -2,20 +2,69 @@
 // See License.txt for license information.
 
 import Authorize from '../components/authorize.jsx';
+import * as Client from '../utils/client.jsx';
 
-function setupAuthorizePage(props) {
-    ReactDOM.render(
-        <Authorize
-            teamName={props.TeamName}
-            appName={props.AppName}
-            responseType={props.ResponseType}
-            clientId={props.ClientId}
-            redirectUri={props.RedirectUri}
-            scope={props.Scope}
-            state={props.State}
-        />,
-        document.getElementById('authorize')
-    );
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <Authorize
+                    teamName={this.props.map.TeamName}
+                    appName={this.props.map.AppName}
+                    responseType={this.props.map.ResponseType}
+                    clientId={this.props.map.ClientId}
+                    redirectUri={this.props.map.RedirectUri}
+                    scope={this.props.map.Scope}
+                    state={this.props.map.State}
+                />
+            </IntlProvider>
+        );
+    }
 }
 
-global.window.setup_authorize_page = setupAuthorizePage;
+global.window.setup_authorize_page = function setup(props) {
+    ReactDOM.render(
+        <Root map={props} />,
+        document.getElementById('authorize')
+    );
+};

web/react/pages/claim_account.jsx

@@ -2,18 +2,67 @@
 // See License.txt for license information.
 
 import ClaimAccount from '../components/claim/claim_account.jsx';
+import * as Client from '../utils/client.jsx';
 
-function setupClaimAccountPage(props) {
-    ReactDOM.render(
-        <ClaimAccount
-            email={props.Email}
-            currentType={props.CurrentType}
-            newType={props.NewType}
-            teamName={props.TeamName}
-            teamDisplayName={props.TeamDisplayName}
-        />,
-        document.getElementById('claim')
-    );
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <ClaimAccount
+                    email={this.props.map.Email}
+                    currentType={this.props.map.CurrentType}
+                    newType={this.props.map.NewType}
+                    teamName={this.props.map.TeamName}
+                    teamDisplayName={this.props.map.TeamDisplayName}
+                />
+            </IntlProvider>
+        );
+    }
 }
 
-global.window.setup_claim_account_page = setupClaimAccountPage;
+global.window.setup_claim_account_page = function setup(props) {
+    ReactDOM.render(
+        <Root map={props} />,
+        document.getElementById('claim')
+    );
+};

web/react/pages/docs.jsx

@@ -2,15 +2,63 @@
 // See License.txt for license information.
 
 import Docs from '../components/docs.jsx';
+import * as Client from '../utils/client.jsx';
 
-function setupDocumentationPage(props) {
-    ReactDOM.render(
-        <Docs
-            site={props.Site}
-        />,
-        document.getElementById('docs')
-    );
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <Docs site={this.props.map.Site} />
+            </IntlProvider>
+        );
+    }
 }
 
 global.window.mm_user = global.window.mm_user || {};
-global.window.setup_documentation_page = setupDocumentationPage;
+
+global.window.setup_documentation_page = function setup(props) {
+    ReactDOM.render(
+        <Root map={props} />,
+        document.getElementById('docs')
+    );
+};

web/react/pages/password_reset.jsx

@@ -2,18 +2,67 @@
 // See License.txt for license information.
 
 import PasswordReset from '../components/password_reset.jsx';
+import * as Client from '../utils/client.jsx';
 
-function setupPasswordResetPage(props) {
-    ReactDOM.render(
-        <PasswordReset
-            isReset={props.IsReset}
-            teamDisplayName={props.TeamDisplayName}
-            teamName={props.TeamName}
-            hash={props.Hash}
-            data={props.Data}
-        />,
-        document.getElementById('reset')
-    );
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <PasswordReset
+                    isReset={this.props.map.IsReset}
+                    teamDisplayName={this.props.map.TeamDisplayName}
+                    teamName={this.props.map.TeamName}
+                    hash={this.props.map.Hash}
+                    data={this.props.map.Data}
+                />
+            </IntlProvider>
+        );
+    }
 }
 
-global.window.setup_password_reset_page = setupPasswordResetPage;
+global.window.setup_password_reset_page = function setup(props) {
+    ReactDOM.render(
+        <Root map={props} />,
+        document.getElementById('reset')
+    );
+};

web/react/pages/signup_team.jsx

@@ -2,8 +2,60 @@
 // See License.txt for license information.
 
 import SignupTeam from '../components/signup_team.jsx';
+import * as Client from '../utils/client.jsx';
 
-function setupSignupTeamPage(props) {
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired,
+            teams: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <SignupTeam teams={this.props.teams} />
+            </IntlProvider>
+        );
+    }
+}
+
+global.window.setup_signup_team_page = function setup(props) {
     var teams = [];
 
     for (var prop in props) {
@@ -15,9 +67,10 @@ function setupSignupTeamPage(props) {
     }
 
     ReactDOM.render(
-        <SignupTeam teams={teams} />,
+        <Root
+            map={props}
+            teams={teams}
+        />,
         document.getElementById('signup-team')
     );
-}
-
-global.window.setup_signup_team_page = setupSignupTeamPage;
+};

web/react/pages/signup_team_complete.jsx

@@ -2,16 +2,65 @@
 // See License.txt for license information.
 
 import SignupTeamComplete from '../components/signup_team_complete.jsx';
+import * as Client from '../utils/client.jsx';
 
-function setupSignupTeamCompletePage(props) {
-    ReactDOM.render(
-        <SignupTeamComplete
-            email={props.Email}
-            hash={props.Hash}
-            data={props.Data}
-        />,
-        document.getElementById('signup-team-complete')
-    );
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <SignupTeamComplete
+                    email={this.props.map.Email}
+                    hash={this.props.map.Hash}
+                    data={this.props.map.Data}
+                />
+            </IntlProvider>
+        );
+    }
 }
 
-global.window.setup_signup_team_complete_page = setupSignupTeamCompletePage;
+global.window.setup_signup_team_complete_page = function setup(props) {
+    ReactDOM.render(
+        <Root map={props} />,
+        document.getElementById('signup-team-complete')
+    );
+};

web/react/pages/signup_user_complete.jsx

@@ -2,19 +2,68 @@
 // See License.txt for license information.
 
 import SignupUserComplete from '../components/signup_user_complete.jsx';
+import * as Client from '../utils/client.jsx';
 
-function setupSignupUserCompletePage(props) {
-    ReactDOM.render(
-        <SignupUserComplete
-            teamId={props.TeamId}
-            teamName={props.TeamName}
-            teamDisplayName={props.TeamDisplayName}
-            email={props.Email}
-            hash={props.Hash}
-            data={props.Data}
-        />,
-        document.getElementById('signup-user-complete')
-    );
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <SignupUserComplete
+                    teamId={this.props.map.TeamId}
+                    teamName={this.props.map.TeamName}
+                    teamDisplayName={this.props.map.TeamDisplayName}
+                    email={this.props.map.Email}
+                    hash={this.props.map.Hash}
+                    data={this.props.map.Data}
+                />
+            </IntlProvider>
+        );
+    }
 }
 
-global.window.setup_signup_user_complete_page = setupSignupUserCompletePage;
+global.window.setup_signup_user_complete_page = function setup(props) {
+    ReactDOM.render(
+        <Root map={props} />,
+        document.getElementById('signup-user-complete')
+    );
+};

web/react/pages/verify.jsx

@@ -2,15 +2,66 @@
 // See License.txt for license information.
 
 import EmailVerify from '../components/email_verify.jsx';
+import * as Client from '../utils/client.jsx';
 
-global.window.setupVerifyPage = function setupVerifyPage(props) {
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <EmailVerify
+                    isVerified={this.props.map.IsVerified}
+                    teamURL={this.props.map.TeamURL}
+                    userEmail={this.props.map.UserEmail}
+                    resendSuccess={this.props.map.ResendSuccess}
+                />
+            </IntlProvider>
+        );
+    }
+}
+
+global.window.setupVerifyPage = function setup(props) {
     ReactDOM.render(
-        <EmailVerify
-            isVerified={props.IsVerified}
-            teamURL={props.TeamURL}
-            userEmail={props.UserEmail}
-            resendSuccess={props.ResendSuccess}
-        />,
+        <Root map={props} />,
         document.getElementById('verify')
     );
 };