Merge pull request #381 from mattermost/mm-1705

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

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>

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;

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;