Merge pull request #2023 from ZBoxApp/PLT-7-templates

PLT-7: Refactoring frontend (chunk 6)

3 files changed, 155 insertions, 43 deletions

diff --git a/web/react/components/authorize.jsx b/web/react/components/authorize.jsx
index 90cbe3289..4a4985268 100644
--- a/web/react/components/authorize.jsx
+++ b/web/react/components/authorize.jsx
@@ -3,7 +3,7 @@
 
 import * as Client from '../utils/client.jsx';
 
-import {FormattedMessage} from 'mm-intl';
+import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
 
 export default class Authorize extends React.Component {
     constructor(props) {
@@ -35,58 +35,67 @@ export default class Authorize extends React.Component {
     }
     render() {
         return (
-            <div className='authorize-box'>
-                <div className='authorize-inner'>
-                    <h3>
-                        <FormattedMessage
-                            id='authorize.title'
-                            defaultMessage='An application would like to connect to your {teamName} account'
-                            values={{
-                                teamName: this.props.teamName
-                            }}
-                        />
-                    </h3>
-                    <label>
-                        <FormattedMessage
+            <div className='container-fluid'>
+                <div className='oauth-prompt'>
+                    <div className='prompt__heading'>
+                        <div className='prompt__app-icon'>
+                            <img
+                                src='/static/images/icon50x50.png'
+                                width='50'
+                                height='50'
+                                alt=''
+                            />
+                        </div>
+                        <div className='text'>
+                            <FormattedMessage
+                                id='authorize.title'
+                                defaultMessage='An application would like to connect to your {teamName} account'
+                                values={{
+                                    teamName: this.props.teamName
+                                }}
+                            />
+                        </div>
+                    </div>
+                    <p>
+                        <FormattedHTMLMessage
                             id='authorize.app'
-                            defaultMessage='The app {appName} would like the ability to access and modify your basic information.'
+                            defaultMessage='The app <strong>{appName}</strong> would like the ability to access and modify your basic information.'
                             values={{
                                 appName: this.props.appName
                             }}
                         />
-                    </label>
-                    <br/>
-                    <br/>
-                    <label>
-                        <FormattedMessage
+                    </p>
+                    <h2 className='prompt__allow'>
+                        <FormattedHTMLMessage
                             id='authorize.access'
-                            defaultMessage='Allow {appName} access?'
+                            defaultMessage='Allow <strong>{appName}</strong> access?'
                             values={{
                                 appName: this.props.appName
                             }}
                         />
-                    </label>
-                    <br/>
-                    <button
-                        type='submit'
-                        className='btn authorize-btn'
-                        onClick={this.handleDeny}
-                    >
-                        <FormattedMessage
-                            id='authorize.deny'
-                            defaultMessage='Deny'
-                        />
-                    </button>
-                    <button
-                        type='submit'
-                        className='btn btn-primary authorize-btn'
-                        onClick={this.handleAllow}
-                    >
-                        <FormattedMessage
-                            id='authorize.allow'
-                            defaultMessage='Allow'
-                        />
-                    </button>
+                    </h2>
+                    <div className='prompt__buttons'>
+                        <button
+                            type='submit'
+                            className='btn authorize-btn'
+                            onClick={this.handleDeny}
+                        >
+                            <FormattedMessage
+                                id='authorize.deny'
+                                defaultMessage='Deny'
+                            />
+                        </button>
+                        <button
+                            type='submit'
+                            className='btn btn-primary authorize-btn'
+                            onClick={this.handleAllow}
+                        >
+                            <FormattedMessage
+                                id='authorize.allow'
+                                defaultMessage='Allow'
+                            />
+                        </button>
+                    </div>
                 </div>
             </div>
         );
diff --git a/web/react/components/signup_team_confirm.jsx b/web/react/components/signup_team_confirm.jsx
new file mode 100644
index 000000000..de83285db
--- /dev/null
+++ b/web/react/components/signup_team_confirm.jsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
+
+export default class SignupTeamConfirm extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className='signup-team__container'>
+                <h3>
+                    <FormattedMessage
+                        id='signup_team_confirm.title'
+                        defaultMessage='Sign up Complete'
+                    />
+                </h3>
+                <p>
+                    <FormattedHTMLMessage
+                        id='signup_team_confirm.checkEmail'
+                        defaultMessage='Please check your email: <strong>{email}</strong><br />Your email contains a link to set up your team'
+                        values={{
+                            email: this.props.email
+                        }}
+                    />
+                </p>
+            </div>
+        );
+    }
+}
+
+SignupTeamConfirm.defaultProps = {
+    email: ''
+};
+SignupTeamConfirm.propTypes = {
+    email: React.PropTypes.string
+};
diff --git a/web/react/pages/signup_team_confirm.jsx b/web/react/pages/signup_team_confirm.jsx
new file mode 100644
index 000000000..9a536c92e
--- /dev/null
+++ b/web/react/pages/signup_team_confirm.jsx
@@ -0,0 +1,64 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import SignupTeamConfirm from '../components/signup_team_confirm.jsx';
+import * as Client from '../utils/client.jsx';
+
+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}
+            >
+                <SignupTeamConfirm
+                    email={this.props.map.Email}
+                />
+            </IntlProvider>
+        );
+    }
+}
+
+global.window.setup_signup_team_confirm_page = function setup(props) {
+    ReactDOM.render(
+        <Root map={props} />,
+        document.getElementById('signup-team-confirm')
+    );
+};
\ No newline at end of file