Merge pull request #381 from mattermost/mm-1705

 MM-1705 add google as an oauth single-sign-on service

8 files changed, 116 insertions, 60 deletions

diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx
index eba4f06f4..f9eacf094 100644
--- 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>
diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index b21553d8a..0393e0413 100644
--- 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;
diff --git a/web/react/components/signup_user_oauth.jsx b/web/react/components/signup_user_oauth.jsx
index 6322aedee..8b2800bde 100644
--- 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;
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx
index 6e4baa582..0eeb5fb65 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -55,14 +55,15 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann
         id: team_id
     });
 
+    // ChannelLoader must be rendered first
     React.render(
-        <ErrorBar/>,
-        document.getElementById('error_bar')
+        <ChannelLoader/>,
+        document.getElementById('channel_loader')
     );
 
     React.render(
-        <ChannelLoader/>,
-        document.getElementById('channel_loader')
+        <ErrorBar/>,
+        document.getElementById('error_bar')
     );
 
     React.render(
diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx
index f8616c6ab..248495dac 100644
--- 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() {
diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx
index 0b87bbd7b..8b6d821d6 100644
--- 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;
 
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index 5aab80d01..ce044457a 100644
--- 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) {
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 508de9185..1fe0faccf 100644
--- 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: [