Merge pull request #381 from mattermost/mm-1705

MM-1705 add google as an oauth single-sign-on service
2015-08-18 08:47:35 -04:00
--- a/web/react/components/login.jsx
+++ b/web/react/components/login.jsx
@@ -4,64 +4,62 @@
 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 var UserStore = require('../stores/user_store.jsx');
-var TeamStore = require('../stores/team_store.jsx');
 var BrowserStore = require('../stores/browser_store.jsx');
 var Constants = require('../utils/constants.jsx');

 module.exports = React.createClass({
    handleSubmit: function(e) {
        e.preventDefault();
-        var state = { }
+        var state = {};

-        var name = this.props.teamName
+        var name = this.props.teamName;
        if (!name) {
-            state.server_error = "Bad team name"
+            state.serverError = 'Bad team name';
            this.setState(state);
            return;
        }

        var email = this.refs.email.getDOMNode().value.trim();
        if (!email) {
-            state.server_error = "An email is required"
+            state.serverError = 'An email is required';
            this.setState(state);
            return;
        }

        var password = this.refs.password.getDOMNode().value.trim();
        if (!password) {
-            state.server_error = "A password is required"
+            state.serverError = 'A password is required';
            this.setState(state);
            return;
        }

        if (!BrowserStore.isLocalStorageSupported()) {
-            state.server_error = "This service requires local storage to be enabled. Please enable it or exit private browsing.";
+            state.serverError = 'This service requires local storage to be enabled. Please enable it or exit private browsing.';
            this.setState(state);
            return;
        }

-        state.server_error = "";
+        state.serverError = '';
        this.setState(state);

        client.loginByEmail(name, email, password,
-            function(data) {
+            function loggedIn(data) {
                UserStore.setCurrentUser(data);
                UserStore.setLastEmail(email);

-                var redirect = utils.getUrlParameter("redirect");
+                var redirect = utils.getUrlParameter('redirect');
                if (redirect) {
                    window.location.pathname = decodeURIComponent(redirect);
                } else {
                    window.location.pathname = '/' + name + '/channels/town-square';
                }
-
-            }.bind(this),
-            function(err) {
-                if (err.message == "Login failed because email address has not been verified") {
+            },
+            function loginFailed(err) {
+                if (err.message === 'Login failed because email address has not been verified') {
                    window.location.href = '/verify_email?name=' + encodeURIComponent(name) + '&email=' + encodeURIComponent(email);
                    return;
                }
-                state.server_error = err.message;
+                state.serverError = err.message;
                this.valid = false;
                this.setState(state);
            }.bind(this)
@@ -71,10 +69,13 @@ module.exports = React.createClass({
        return { };
    },
    render: function() {
-        var server_error = this.state.server_error ? <label className="control-label">{this.state.server_error}</label> : null;
-        var priorEmail = UserStore.getLastEmail() !== "undefined" ? UserStore.getLastEmail() : ""
+        var serverError;
+        if (this.state.serverError) {
+            serverError = <label className='control-label'>{this.state.serverError}</label>;
+        }
+        var priorEmail = UserStore.getLastEmail();

-        var emailParam = utils.getUrlParameter("email");
+        var emailParam = utils.getUrlParameter('email');
        if (emailParam) {
            priorEmail = decodeURIComponent(emailParam);
        }
@@ -84,50 +85,62 @@ module.exports = React.createClass({

        var focusEmail = false;
        var focusPassword = false;
-        if (priorEmail != "") {
+        if (priorEmail !== '') {
            focusPassword = true;
        } else {
            focusEmail = true;
        }

-        var auth_services = JSON.parse(this.props.authServices);
+        var authServices = JSON.parse(this.props.authServices);

-        var login_message;
-        if (auth_services.indexOf("gitlab") >= 0) {
-            login_message = (
-                <div className="form-group form-group--small">
-                    <span><a href={"/"+teamName+"/login/gitlab"}>{"Log in with GitLab"}</a></span>
+        var loginMessage = [];
+        if (authServices.indexOf(Constants.GITLAB_SERVICE) >= 0) {
+            loginMessage.push(
+                <div className='form-group form-group--small'>
+                    <span><a href={'/' + teamName + '/login/gitlab'}>{'Log in with GitLab'}</a></span>
+                </div>
+            );
+        }
+        if (authServices.indexOf(Constants.GOOGLE_SERVICE) >= 0) {
+            loginMessage.push(
+                <div className='form-group form-group--small'>
+                    <span><a href={'/' + teamName + '/login/google'}>{'Log in with Google'}</a></span>
                </div>
            );
        }

+        var errorClass = '';
+        if (serverError) {
+            errorClass = ' has-error';
+        }
+
        return (
-            <div className="signup-team__container">
-                <h5 className="margin--less">Sign in to:</h5>
-                <h2 className="signup-team__name">{ teamDisplayName }</h2>
-                <h2 className="signup-team__subdomain">on { config.SiteName }</h2>
+            <div className='signup-team__container'>
+                <h5 className='margin--less'>Sign in to:</h5>
+                <h2 className='signup-team__name'>{teamDisplayName}</h2>
+                <h2 className='signup-team__subdomain'>on {config.SiteName}</h2>
                <form onSubmit={this.handleSubmit}>
-                    <div className={server_error ? 'form-group has-error' : 'form-group'}>
-                        { server_error }
+                    <div className={'form-group' + errorClass}>
+                        {serverError}
                    </div>
-                    <div className={server_error ? 'form-group has-error' : 'form-group'}>
-                        <input autoFocus={focusEmail} type="email" className="form-control" name="email" defaultValue={priorEmail}  ref="email" placeholder="Email" />
+                    <div className={'form-group' + errorClass}>
+                        <input autoFocus={focusEmail} type='email' className='form-control' name='email' defaultValue={priorEmail} ref='email' placeholder='Email' />
                    </div>
-                    <div className={server_error ? 'form-group has-error' : 'form-group'}>
-                        <input autoFocus={focusPassword} type="password" className="form-control" name="password" ref="password" placeholder="Password" />
+                    <div className={'form-group' + errorClass}>
+                        <input autoFocus={focusPassword} type='password' className='form-control' name='password' ref='password' placeholder='Password' />
                    </div>
-                    <div className="form-group">
-                        <button type="submit" className="btn btn-primary">Sign in</button>
+                    <div className='form-group'>
+                        <button type='submit' className='btn btn-primary'>Sign in</button>
                    </div>
-                    { login_message }
-                    <div className="form-group margin--extra form-group--small">
-                        <span><a href="/find_team">{"Find other " + strings.TeamPlural}</a></span>
+                    {loginMessage}
+                    <div className='form-group margin--extra form-group--small'>
+                        <span><a href='/find_team'>{'Find other ' + strings.TeamPlural}</a></span>
                    </div>
-                    <div className="form-group">
-                        <a href={"/" + teamName + "/reset_password"}>I forgot my password</a>
+                    <div className='form-group'>
+                        <a href={'/' + teamName + '/reset_password'}>I forgot my password</a>
                    </div>
-                    <div className="margin--extra">
-                        <span>{"Want to create your own " + strings.Team + "?"} <a href="/" className="signup-team-login">Sign up now</a></span>
+                    <div className='margin--extra'>
+                        <span>{'Want to create your own ' + strings.Team + '?'} <a href='/' className='signup-team-login'>Sign up now</a></span>
                    </div>
                </form>
            </div>
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -5,6 +5,7 @@ var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var BrowserStore = require('../stores/browser_store.jsx');
+var Constants = require('../utils/constants.jsx');

 module.exports = React.createClass({
    handleSubmit: function(e) {
@@ -151,19 +152,34 @@ module.exports = React.createClass({
        // add options to log in using another service
        var authServices = JSON.parse(this.props.authServices);

-        var signupMessage = null;
-        if (authServices.indexOf('gitlab') >= 0) {
-            signupMessage = (
-                <div>
+        var signupMessage = [];
+        if (authServices.indexOf(Constants.GITLAB_SERVICE) >= 0) {
+            signupMessage.push(
                    <a className='btn btn-custom-login gitlab' href={'/' + this.props.teamName + '/signup/gitlab' + window.location.search}>
                        <span className='icon' />
                        <span>with GitLab</span>
                    </a>
+           );
+        }
+
+        if (authServices.indexOf(Constants.GOOGLE_SERVICE) >= 0) {
+            signupMessage.push(
+                    <a className='btn btn-custom-login google' href={'/' + this.props.teamName + '/signup/google' + window.location.search}>
+                        <span className='icon' />
+                        <span>with Google</span>
+                    </a>
+           );
+        }
+
+        if (signupMessage.length > 0) {
+            signupMessage = (
+                <div>
+                    {signupMessage}
                    <div className='or__container'>
                        <span>or</span>
                    </div>
-               </div>
-           );
+                </div>
+            );
        }

        var termsDisclaimer = null;
--- a/web/react/components/signup_user_oauth.jsx
+++ b/web/react/components/signup_user_oauth.jsx
@@ -33,7 +33,10 @@ module.exports = React.createClass({
        client.createUser(user, "", "",
            function(data) {
                client.track('signup', 'signup_user_oauth_02');
-                window.location.href = '/' + this.props.teamName + '/login/'+user.auth_service;
+                UserStore.setCurrentUser(data);
+                UserStore.setLastEmail(data.email);
+
+                window.location.href = '/' + this.props.teamName + '/login/' + user.auth_service + '?login_hint=' + user.email;
            }.bind(this),
            function(err) {
                this.state.server_error = err.message;
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -55,16 +55,17 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann
        id: team_id
    });

-    React.render(
-        <ErrorBar/>,
-        document.getElementById('error_bar')
-    );
-
+    // ChannelLoader must be rendered first
    React.render(
        <ChannelLoader/>,
        document.getElementById('channel_loader')
    );

+    React.render(
+        <ErrorBar/>,
+        document.getElementById('error_bar')
+    );
+
    React.render(
        <Navbar teamDisplayName={team_name} />,
        document.getElementById('navbar')
--- a/web/react/stores/user_store.jsx
+++ b/web/react/stores/user_store.jsx
@@ -4,6 +4,7 @@
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var EventEmitter = require('events').EventEmitter;
 var assign = require('object-assign');
+var client = require('../utils/client.jsx');

 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
@@ -72,7 +73,7 @@ var UserStore = assign({}, EventEmitter.prototype, {
            BrowserStore.setGlobalItem('current_user_id', id);
        }
    },
-    getCurrentId: function() {
+    getCurrentId: function(skipFetch) {
        var currentId = this.gCurrentId;

        if (currentId == null) {
@@ -80,6 +81,17 @@ var UserStore = assign({}, EventEmitter.prototype, {
            this.gCurrentId = currentId;
        }

+        // this is a special case to force fetch the
+        // current user if it's missing
+        // it's synchronous to block rendering
+        if (currentId == null && !skipFetch) {
+            var me = client.getMeSynchronous();
+            if (me != null) {
+                this.setCurrentUser(me);
+                currentId = me.id;
+            }
+        }
+
        return currentId;
    },
    getCurrentUser: function() {
--- a/web/react/utils/async_client.jsx
+++ b/web/react/utils/async_client.jsx
@@ -396,7 +396,7 @@ function getMe() {
    }

    callTracker.getMe = utils.getTimestamp();
-    client.getMe(
+    client.getMeSynchronous(
        function(data, textStatus, xhr) {
            callTracker.getMe = 0;

--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -279,24 +279,33 @@ module.exports.getAudits = function(userId, success, error) {
    });
 };

-module.exports.getMe = function(success, error) {
+module.exports.getMeSynchronous = function(success, error) {
+    var currentUser = null;

    $.ajax({
+        async: false,
        url: "/api/v1/users/me",
        dataType: 'json',
        contentType: 'application/json',
        type: 'GET',
-        success: success,
+        success: function gotUser(data, textStatus, xhr) {
+            currentUser = data;
+            if (success) {
+                success(data, textStatus, xhr);
+            }
+        },
        error: function(xhr, status, err) {
            var ieChecker = window.navigator.userAgent; // This and the condition below is used to check specifically for browsers IE10 & 11 to suppress a 200 'OK' error from appearing on login
            if (xhr.status != 200 || !(ieChecker.indexOf("Trident/7.0") > 0 || ieChecker.indexOf("Trident/6.0") > 0)) {
                if (error) {
-                    e = handleError("getMe", xhr, status, err);
+                    e = handleError('getMeSynchronous', xhr, status, err);
                    error(e);
                };
            };
        }
    });
+
+    return currentUser;
 };

 module.exports.inviteMembers = function(data, success, error) {
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -58,6 +58,8 @@ module.exports = {
  THUMBNAIL_HEIGHT: 100,
  DEFAULT_CHANNEL: 'town-square',
  OFFTOPIC_CHANNEL: 'off-topic',
+  GITLAB_SERVICE: 'gitlab',
+  GOOGLE_SERVICE: 'google',
  POST_CHUNK_SIZE: 60,
  MAX_POST_CHUNKS: 3,
  RESERVED_TEAM_NAMES: [