From b704e9489b21b3bec17f5c8b573a1724781ee6f7 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Fri, 14 Aug 2015 08:43:49 -0400 Subject: added google sign-in functionality to the client, with minor model modifications --- web/react/components/login.jsx | 13 ++++++++++--- web/react/components/signup_user_complete.jsx | 28 +++++++++++++++++++++------ web/react/components/signup_user_oauth.jsx | 5 ++++- web/react/pages/channel.jsx | 9 +++++---- web/react/stores/user_store.jsx | 14 +++++++++++++- web/react/utils/async_client.jsx | 14 +++++++------- web/react/utils/client.jsx | 15 +++++++++++--- web/react/utils/constants.jsx | 2 ++ 8 files changed, 75 insertions(+), 25 deletions(-) (limited to 'web/react') diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index fe0a47777..5f396ac49 100644 --- a/web/react/components/login.jsx +++ b/web/react/components/login.jsx @@ -92,14 +92,21 @@ module.exports = React.createClass({ var auth_services = JSON.parse(this.props.authServices); - var login_message; - if (auth_services.indexOf("gitlab") >= 0) { - login_message = ( + var login_message = []; + if (auth_services.indexOf(Constants.GITLAB_SERVICE) >= 0) { + login_message.push(
{"Log in with GitLab"}
); } + if (auth_services.indexOf(Constants.GOOGLE_SERVICE) >= 0) { + login_message.push( +
+ {"Log in with Google"} +
+ ); + } return (
diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index b21553d8a..fd389e21f 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 = ( -
+ var signupMessage = []; + if (authServices.indexOf(Constants.GITLAB_SERVICE) >= 0) { + signupMessage.push( with GitLab + ); + } + + if (authServices.indexOf(Constants.GOOGLE_SERVICE) >= 0) { + signupMessage.push( + + + with Google + + ); + } + + if (signupMessage.length > 0) { + signupMessage = ( +
+ {signupMessage}
or
-
- ); +
+ ); } 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 929499715..52d537f27 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -54,14 +54,15 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann id: team_id }); + // ChannelLoader must be rendered first React.render( - , - document.getElementById('error_bar') + , + document.getElementById('channel_loader') ); React.render( - , - document.getElementById('channel_loader') + , + 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..09710ddf0 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -390,15 +390,15 @@ module.exports.getPosts = function(force, id, maxPosts) { } } -function getMe() { - if (isCallInProgress('getMe')) { +function getMeSynchronous() { + if (isCallInProgress('getMeSynchronous')) { return; } - callTracker.getMe = utils.getTimestamp(); - client.getMe( + callTracker.getMeSynchronous = utils.getTimestamp(); + client.getMeSynchronous( function(data, textStatus, xhr) { - callTracker.getMe = 0; + callTracker.getMeSynchronous = 0; if (xhr.status === 304 || !data) return; @@ -409,11 +409,11 @@ function getMe() { }, function(err) { callTracker.getMe = 0; - dispatchError(err, 'getMe'); + dispatchError(err, 'getMeSynchronous'); } ); } -module.exports.getMe = getMe; +module.exports.getMeSynchronous = getMeSynchronous; module.exports.getStatuses = function() { if (isCallInProgress('getStatuses')) return; 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: [ -- cgit v1.2.3-1-g7c22 From 8feec04929f17eb99e2f121530b8596966161528 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Fri, 14 Aug 2015 11:57:13 -0400 Subject: incorporate asaad's UI updates for google sign-up --- web/react/components/signup_user_complete.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/react') diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index fd389e21f..0393e0413 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -164,7 +164,7 @@ module.exports = React.createClass({ if (authServices.indexOf(Constants.GOOGLE_SERVICE) >= 0) { signupMessage.push( - + with Google -- cgit v1.2.3-1-g7c22 From 3faa09c641cc6cb7f2a5e88d080b6a90339972d9 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Fri, 14 Aug 2015 12:35:43 -0400 Subject: reformat login.jsx to meet style guide --- web/react/components/login.jsx | 102 ++++++++++++++++++++++------------------- 1 file changed, 54 insertions(+), 48 deletions(-) (limited to 'web/react') diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index 5f396ac49..c395bb500 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 = decodeURI(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 ? : null; - var priorEmail = UserStore.getLastEmail() !== "undefined" ? UserStore.getLastEmail() : "" + var serverError; + if (this.state.serverError) { + serverError = ; + } + var priorEmail = UserStore.getLastEmail(); - var emailParam = utils.getUrlParameter("email"); + var emailParam = utils.getUrlParameter('email'); if (emailParam) { priorEmail = decodeURIComponent(emailParam); } @@ -84,57 +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(Constants.GITLAB_SERVICE) >= 0) { - login_message.push( -
- {"Log in with GitLab"} + var loginMessage = []; + if (authServices.indexOf(Constants.GITLAB_SERVICE) >= 0) { + loginMessage.push( + ); } - if (auth_services.indexOf(Constants.GOOGLE_SERVICE) >= 0) { - login_message.push( -
- {"Log in with Google"} + if (authServices.indexOf(Constants.GOOGLE_SERVICE) >= 0) { + loginMessage.push( + ); } + var errorClass = ''; + if (serverError) { + errorClass = ' has-error'; + } + return ( -
-
Sign in to:
-

{ teamDisplayName }

-

on { config.SiteName }

+
+
Sign in to:
+

{teamDisplayName}

+

on {config.SiteName}

-
- { server_error } +
+ {serverError}
-
- +
+
-
- +
+
-
- +
+
- { login_message } -
- {"Find other " + strings.TeamPlural} + {loginMessage} + -
- I forgot my password + -
- {"Want to create your own " + strings.Team + "?"} Sign up now +
+ {'Want to create your own ' + strings.Team + '?'} Sign up now
-- cgit v1.2.3-1-g7c22 From a7f09be9783f3354ab38d4fb4fb82085241d018f Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Fri, 14 Aug 2015 12:39:38 -0400 Subject: merge async_client getMe changes --- web/react/utils/async_client.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'web/react') diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index 09710ddf0..8b6d821d6 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -390,15 +390,15 @@ module.exports.getPosts = function(force, id, maxPosts) { } } -function getMeSynchronous() { - if (isCallInProgress('getMeSynchronous')) { +function getMe() { + if (isCallInProgress('getMe')) { return; } - callTracker.getMeSynchronous = utils.getTimestamp(); + callTracker.getMe = utils.getTimestamp(); client.getMeSynchronous( function(data, textStatus, xhr) { - callTracker.getMeSynchronous = 0; + callTracker.getMe = 0; if (xhr.status === 304 || !data) return; @@ -409,11 +409,11 @@ function getMeSynchronous() { }, function(err) { callTracker.getMe = 0; - dispatchError(err, 'getMeSynchronous'); + dispatchError(err, 'getMe'); } ); } -module.exports.getMeSynchronous = getMeSynchronous; +module.exports.getMe = getMe; module.exports.getStatuses = function() { if (isCallInProgress('getStatuses')) return; -- cgit v1.2.3-1-g7c22