diff options
56 files changed, 2136 insertions, 1029 deletions
diff --git a/api/user.go b/api/user.go index a42f81cf1..2e71ddfc6 100644 --- a/api/user.go +++ b/api/user.go @@ -7,6 +7,7 @@ import ( "bytes" "code.google.com/p/freetype-go/freetype" l4g "code.google.com/p/log4go" + b64 "encoding/base64" "fmt" "github.com/gorilla/mux" "github.com/mattermost/platform/model" @@ -961,18 +962,38 @@ func updateRoles(c *Context, w http.ResponseWriter, r *http.Request) { user.Roles = new_roles + var ruser *model.User if result := <-Srv.Store.User().Update(user, true); result.Err != nil { c.Err = result.Err return } else { c.LogAuditWithUserId(user.Id, "roles="+new_roles) - ruser := result.Data.([2]*model.User)[0] - options := utils.SanitizeOptions - options["passwordupdate"] = false - ruser.Sanitize(options) - w.Write([]byte(ruser.ToJson())) + ruser = result.Data.([2]*model.User)[0] + } + + uchan := Srv.Store.Session().UpdateRoles(user.Id, new_roles) + gchan := Srv.Store.Session().GetSessions(user.Id) + + if result := <-uchan; result.Err != nil { + // soft error since the user roles were still updated + l4g.Error(result.Err) + } + + if result := <-gchan; result.Err != nil { + // soft error since the user roles were still updated + l4g.Error(result.Err) + } else { + sessions := result.Data.([]*model.Session) + for _, s := range sessions { + sessionCache.Remove(s.Id) + } } + + options := utils.SanitizeOptions + options["passwordupdate"] = false + ruser.Sanitize(options) + w.Write([]byte(ruser.ToJson())) } func updateActive(c *Context, w http.ResponseWriter, r *http.Request) { @@ -1304,7 +1325,7 @@ func getStatuses(c *Context, w http.ResponseWriter, r *http.Request) { } } -func GetAuthorizationCode(c *Context, w http.ResponseWriter, r *http.Request, teamName, service, redirectUri string) { +func GetAuthorizationCode(c *Context, w http.ResponseWriter, r *http.Request, teamName, service, redirectUri, loginHint string) { if s, ok := utils.Cfg.SSOSettings[service]; !ok || !s.Allow { c.Err = model.NewAppError("GetAuthorizationCode", "Unsupported OAuth service provider", "service="+service) @@ -1314,21 +1335,49 @@ func GetAuthorizationCode(c *Context, w http.ResponseWriter, r *http.Request, te clientId := utils.Cfg.SSOSettings[service].Id endpoint := utils.Cfg.SSOSettings[service].AuthEndpoint - state := model.HashPassword(clientId) + scope := utils.Cfg.SSOSettings[service].Scope + + stateProps := map[string]string{"team": teamName, "hash": model.HashPassword(clientId)} + state := b64.StdEncoding.EncodeToString([]byte(model.MapToJson(stateProps))) + + authUrl := endpoint + "?response_type=code&client_id=" + clientId + "&redirect_uri=" + url.QueryEscape(redirectUri) + "&state=" + url.QueryEscape(state) + + if len(scope) > 0 { + authUrl += "&scope=" + utils.UrlEncode(scope) + } + + if len(loginHint) > 0 { + authUrl += "&login_hint=" + utils.UrlEncode(loginHint) + } - authUrl := endpoint + "?response_type=code&client_id=" + clientId + "&redirect_uri=" + url.QueryEscape(redirectUri+"?team="+teamName) + "&state=" + url.QueryEscape(state) http.Redirect(w, r, authUrl, http.StatusFound) } -func AuthorizeOAuthUser(service, code, state, redirectUri string) (io.ReadCloser, *model.AppError) { +func AuthorizeOAuthUser(service, code, state, redirectUri string) (io.ReadCloser, *model.Team, *model.AppError) { if s, ok := utils.Cfg.SSOSettings[service]; !ok || !s.Allow { - return nil, model.NewAppError("AuthorizeOAuthUser", "Unsupported OAuth service provider", "service="+service) + return nil, nil, model.NewAppError("AuthorizeOAuthUser", "Unsupported OAuth service provider", "service="+service) } - if !model.ComparePassword(state, utils.Cfg.SSOSettings[service].Id) { - return nil, model.NewAppError("AuthorizeOAuthUser", "Invalid state", "") + stateStr := "" + if b, err := b64.StdEncoding.DecodeString(state); err != nil { + return nil, nil, model.NewAppError("AuthorizeOAuthUser", "Invalid state", err.Error()) + } else { + stateStr = string(b) } + stateProps := model.MapFromJson(strings.NewReader(stateStr)) + + if !model.ComparePassword(stateProps["hash"], utils.Cfg.SSOSettings[service].Id) { + return nil, nil, model.NewAppError("AuthorizeOAuthUser", "Invalid state", "") + } + + teamName := stateProps["team"] + if len(teamName) == 0 { + return nil, nil, model.NewAppError("AuthorizeOAuthUser", "Invalid state; missing team name", "") + } + + tchan := Srv.Store.Team().GetByName(teamName) + p := url.Values{} p.Set("client_id", utils.Cfg.SSOSettings[service].Id) p.Set("client_secret", utils.Cfg.SSOSettings[service].Secret) @@ -1344,17 +1393,17 @@ func AuthorizeOAuthUser(service, code, state, redirectUri string) (io.ReadCloser var ar *model.AccessResponse if resp, err := client.Do(req); err != nil { - return nil, model.NewAppError("AuthorizeOAuthUser", "Token request failed", err.Error()) + return nil, nil, model.NewAppError("AuthorizeOAuthUser", "Token request failed", err.Error()) } else { ar = model.AccessResponseFromJson(resp.Body) } - if ar.TokenType != model.ACCESS_TOKEN_TYPE { - return nil, model.NewAppError("AuthorizeOAuthUser", "Bad token type", "token_type="+ar.TokenType) + if strings.ToLower(ar.TokenType) != model.ACCESS_TOKEN_TYPE { + return nil, nil, model.NewAppError("AuthorizeOAuthUser", "Bad token type", "token_type="+ar.TokenType) } if len(ar.AccessToken) == 0 { - return nil, model.NewAppError("AuthorizeOAuthUser", "Missing access token", "") + return nil, nil, model.NewAppError("AuthorizeOAuthUser", "Missing access token", "") } p = url.Values{} @@ -1366,9 +1415,13 @@ func AuthorizeOAuthUser(service, code, state, redirectUri string) (io.ReadCloser req.Header.Set("Authorization", "Bearer "+ar.AccessToken) if resp, err := client.Do(req); err != nil { - return nil, model.NewAppError("AuthorizeOAuthUser", "Token request to "+service+" failed", err.Error()) + return nil, nil, model.NewAppError("AuthorizeOAuthUser", "Token request to "+service+" failed", err.Error()) } else { - return resp.Body, nil + if result := <-tchan; result.Err != nil { + return nil, nil, result.Err + } else { + return resp.Body, result.Data.(*model.Team), nil + } } } diff --git a/api/user_test.go b/api/user_test.go index 8b95bdf55..776b17b3c 100644 --- a/api/user_test.go +++ b/api/user_test.go @@ -651,6 +651,12 @@ func TestUserUpdateRoles(t *testing.T) { t.Fatal("Should have errored, not admin") } + name := make(map[string]string) + name["new_name"] = "NewName" + if _, err := Client.UpdateTeamDisplayName(name); err == nil { + t.Fatal("should have errored - user not admin yet") + } + team2 := &model.Team{DisplayName: "Name", Name: "z-z-" + model.NewId() + "a", Email: "test@nowhere.com", Type: model.TEAM_OPEN} team2 = Client.Must(Client.CreateTeam(team2)).Data.(*model.Team) @@ -690,6 +696,12 @@ func TestUserUpdateRoles(t *testing.T) { t.Fatal("Roles did not update properly") } } + + Client.LoginByEmail(team.Name, user2.Email, "pwd") + + if _, err := Client.UpdateTeamDisplayName(name); err != nil { + t.Fatal(err) + } } func TestUserUpdateActive(t *testing.T) { diff --git a/config/config.json b/config/config.json index c446b517c..e7134cba5 100644 --- a/config/config.json +++ b/config/config.json @@ -29,9 +29,19 @@ "Allow": false, "Secret" : "", "Id": "", + "Scope": "", "AuthEndpoint": "", "TokenEndpoint": "", "UserApiEndpoint": "" + }, + "google": { + "Allow": false, + "Secret": "", + "Id": "", + "Scope": "email profile", + "AuthEndpoint": "https://accounts.google.com/o/oauth2/auth", + "TokenEndpoint": "https://www.googleapis.com/oauth2/v3/token", + "UserApiEndpoint": "https://www.googleapis.com/plus/v1/people/me" } }, "SqlSettings": { diff --git a/model/gitlab.go b/model/gitlab.go new file mode 100644 index 000000000..9adcac189 --- /dev/null +++ b/model/gitlab.go @@ -0,0 +1,57 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +package model + +import ( + "encoding/json" + "io" + "strconv" + "strings" +) + +const ( + USER_AUTH_SERVICE_GITLAB = "gitlab" +) + +type GitLabUser struct { + Id int64 `json:"id"` + Username string `json:"username"` + Email string `json:"email"` + Name string `json:"name"` +} + +func UserFromGitLabUser(glu *GitLabUser) *User { + user := &User{} + user.Username = glu.Username + splitName := strings.Split(glu.Name, " ") + if len(splitName) == 2 { + user.FirstName = splitName[0] + user.LastName = splitName[1] + } else if len(splitName) >= 2 { + user.FirstName = splitName[0] + user.LastName = strings.Join(splitName[1:], " ") + } else { + user.FirstName = glu.Name + } + user.Email = glu.Email + user.AuthData = strconv.FormatInt(glu.Id, 10) + user.AuthService = USER_AUTH_SERVICE_GITLAB + + return user +} + +func GitLabUserFromJson(data io.Reader) *GitLabUser { + decoder := json.NewDecoder(data) + var glu GitLabUser + err := decoder.Decode(&glu) + if err == nil { + return &glu + } else { + return nil + } +} + +func (glu *GitLabUser) GetAuthData() string { + return strconv.FormatInt(glu.Id, 10) +} diff --git a/model/google.go b/model/google.go new file mode 100644 index 000000000..2a1eb3caa --- /dev/null +++ b/model/google.go @@ -0,0 +1,60 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +package model + +import ( + "encoding/json" + "io" + "strings" +) + +const ( + USER_AUTH_SERVICE_GOOGLE = "google" +) + +type GoogleUser struct { + Id string `json:"id"` + Nickname string `json:"nickname"` + DisplayName string `json:"displayName"` + Emails []map[string]string `json:"emails"` + Names map[string]string `json:"name"` +} + +func UserFromGoogleUser(gu *GoogleUser) *User { + user := &User{} + if len(gu.Nickname) > 0 { + user.Username = gu.Nickname + } else { + user.Username = strings.ToLower(strings.Replace(gu.DisplayName, " ", "", -1)) + } + user.FirstName = gu.Names["givenName"] + user.LastName = gu.Names["familyName"] + user.Nickname = gu.Nickname + + for _, e := range gu.Emails { + if e["type"] == "account" { + user.Email = e["value"] + } + } + + user.AuthData = gu.Id + user.AuthService = USER_AUTH_SERVICE_GOOGLE + + return user +} + +func GoogleUserFromJson(data io.Reader) *GoogleUser { + decoder := json.NewDecoder(data) + var gu GoogleUser + err := decoder.Decode(&gu) + if err == nil { + return &gu + } else { + return nil + } +} + +func (gu *GoogleUser) GetAuthData() string { + return gu.Id +} diff --git a/model/post.go b/model/post.go index f6f33b1e8..0c035d4e7 100644 --- a/model/post.go +++ b/model/post.go @@ -14,21 +14,22 @@ const ( ) type Post struct { - Id string `json:"id"` - CreateAt int64 `json:"create_at"` - UpdateAt int64 `json:"update_at"` - DeleteAt int64 `json:"delete_at"` - UserId string `json:"user_id"` - ChannelId string `json:"channel_id"` - RootId string `json:"root_id"` - ParentId string `json:"parent_id"` - OriginalId string `json:"original_id"` - Message string `json:"message"` - ImgCount int64 `json:"img_count"` - Type string `json:"type"` - Props StringMap `json:"props"` - Hashtags string `json:"hashtags"` - Filenames StringArray `json:"filenames"` + Id string `json:"id"` + CreateAt int64 `json:"create_at"` + UpdateAt int64 `json:"update_at"` + DeleteAt int64 `json:"delete_at"` + UserId string `json:"user_id"` + ChannelId string `json:"channel_id"` + RootId string `json:"root_id"` + ParentId string `json:"parent_id"` + OriginalId string `json:"original_id"` + Message string `json:"message"` + ImgCount int64 `json:"img_count"` + Type string `json:"type"` + Props StringMap `json:"props"` + Hashtags string `json:"hashtags"` + Filenames StringArray `json:"filenames"` + PendingPostId string `json:"pending_post_id" db:"-"` } func (o *Post) ToJson() string { diff --git a/model/user.go b/model/user.go index ed5161538..ebefa4762 100644 --- a/model/user.go +++ b/model/user.go @@ -8,24 +8,22 @@ import ( "encoding/json" "io" "regexp" - "strconv" "strings" ) const ( - ROLE_ADMIN = "admin" - ROLE_SYSTEM_ADMIN = "system_admin" - ROLE_SYSTEM_SUPPORT = "system_support" - USER_AWAY_TIMEOUT = 5 * 60 * 1000 // 5 minutes - USER_OFFLINE_TIMEOUT = 1 * 60 * 1000 // 1 minute - USER_OFFLINE = "offline" - USER_AWAY = "away" - USER_ONLINE = "online" - USER_NOTIFY_ALL = "all" - USER_NOTIFY_MENTION = "mention" - USER_NOTIFY_NONE = "none" - BOT_USERNAME = "valet" - USER_AUTH_SERVICE_GITLAB = "gitlab" + ROLE_ADMIN = "admin" + ROLE_SYSTEM_ADMIN = "system_admin" + ROLE_SYSTEM_SUPPORT = "system_support" + USER_AWAY_TIMEOUT = 5 * 60 * 1000 // 5 minutes + USER_OFFLINE_TIMEOUT = 1 * 60 * 1000 // 1 minute + USER_OFFLINE = "offline" + USER_AWAY = "away" + USER_ONLINE = "online" + USER_NOTIFY_ALL = "all" + USER_NOTIFY_MENTION = "mention" + USER_NOTIFY_NONE = "none" + BOT_USERNAME = "valet" ) type User struct { @@ -54,13 +52,6 @@ type User struct { FailedAttempts int `json:"failed_attempts"` } -type GitLabUser struct { - Id int64 `json:"id"` - Username string `json:"username"` - Email string `json:"email"` - Name string `json:"name"` -} - // IsValid validates the user and returns an error if it isn't configured // correctly. func (u *User) IsValid() *AppError { @@ -355,38 +346,3 @@ func IsUsernameValid(username string) bool { return true } - -func UserFromGitLabUser(glu *GitLabUser) *User { - user := &User{} - user.Username = glu.Username - splitName := strings.Split(glu.Name, " ") - if len(splitName) == 2 { - user.FirstName = splitName[0] - user.LastName = splitName[1] - } else if len(splitName) >= 2 { - user.FirstName = splitName[0] - user.LastName = strings.Join(splitName[1:], " ") - } else { - user.FirstName = glu.Name - } - user.Email = glu.Email - user.AuthData = strconv.FormatInt(glu.Id, 10) - user.AuthService = USER_AUTH_SERVICE_GITLAB - - return user -} - -func GitLabUserFromJson(data io.Reader) *GitLabUser { - decoder := json.NewDecoder(data) - var glu GitLabUser - err := decoder.Decode(&glu) - if err == nil { - return &glu - } else { - return nil - } -} - -func (glu *GitLabUser) GetAuthData() string { - return strconv.FormatInt(glu.Id, 10) -} diff --git a/store/sql_session_store.go b/store/sql_session_store.go index d1a06a33c..12004ab78 100644 --- a/store/sql_session_store.go +++ b/store/sql_session_store.go @@ -175,3 +175,22 @@ func (me SqlSessionStore) UpdateLastActivityAt(sessionId string, time int64) Sto return storeChannel } + +func (me SqlSessionStore) UpdateRoles(userId, roles string) StoreChannel { + storeChannel := make(StoreChannel) + + go func() { + result := StoreResult{} + + if _, err := me.GetMaster().Exec("UPDATE Sessions SET Roles = :Roles WHERE UserId = :UserId", map[string]interface{}{"Roles": roles, "UserId": userId}); err != nil { + result.Err = model.NewAppError("SqlSessionStore.UpdateRoles", "We couldn't update the roles", "userId="+userId) + } else { + result.Data = userId + } + + storeChannel <- result + close(storeChannel) + }() + + return storeChannel +} diff --git a/store/store.go b/store/store.go index 613fe4198..617ea7f2b 100644 --- a/store/store.go +++ b/store/store.go @@ -99,6 +99,7 @@ type SessionStore interface { GetSessions(userId string) StoreChannel Remove(sessionIdOrAlt string) StoreChannel UpdateLastActivityAt(sessionId string, time int64) StoreChannel + UpdateRoles(userId string, roles string) StoreChannel } type AuditStore interface { diff --git a/utils/config.go b/utils/config.go index 8d9dd11e0..a3944f670 100644 --- a/utils/config.go +++ b/utils/config.go @@ -37,6 +37,7 @@ type SSOSetting struct { Allow bool Secret string Id string + Scope string AuthEndpoint string TokenEndpoint string UserApiEndpoint string diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index 6b80f6012..525b67b5c 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -9,6 +9,7 @@ var BrowserStore = require('../stores/browser_store.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var SocketStore = require('../stores/socket_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); +var PostStore = require('../stores/post_store.jsx'); var Constants = require('../utils/constants.jsx'); module.exports = React.createClass({ @@ -24,20 +25,24 @@ module.exports = React.createClass({ AsyncClient.getMyTeam(); /* End of async loads */ + /* Perform pending post clean-up */ + PostStore.clearPendingPosts(); + /* End pending post clean-up */ /* Start interval functions */ - setInterval(function(){AsyncClient.getStatuses();}, 30000); + setInterval( + function pollStatuses() { + AsyncClient.getStatuses(); + }, 30000); /* End interval functions */ - /* Start device tracking setup */ - var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent ); + var iOS = (/(iPad|iPhone|iPod)/g).test(navigator.userAgent); if (iOS) { - $("body").addClass("ios"); + $('body').addClass('ios'); } /* End device tracking setup */ - /* Start window active tracking setup */ window.isActive = true; @@ -57,7 +62,7 @@ module.exports = React.createClass({ }, _onSocketChange: function(msg) { if (msg && msg.user_id) { - UserStore.setStatus(msg.user_id, "online"); + UserStore.setStatus(msg.user_id, 'online'); } }, render: function() { diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 78e06c532..1de768872 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -1,17 +1,20 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. +var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var client = require('../utils/client.jsx'); -var AsyncClient =require('../utils/async_client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); var SocketStore = require('../stores/socket_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); +var UserStore = require('../stores/user_store.jsx'); var PostStore = require('../stores/post_store.jsx'); var Textbox = require('./textbox.jsx'); var MsgTyping = require('./msg_typing.jsx'); var FileUpload = require('./file_upload.jsx'); var FilePreview = require('./file_preview.jsx'); - +var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); +var ActionTypes = Constants.ActionTypes; module.exports = React.createClass({ lastTime: 0, @@ -26,6 +29,8 @@ module.exports = React.createClass({ return; } + this.setState({submitting: true, serverError: null}); + var post = {}; post.filenames = []; post.message = this.state.messageText; @@ -39,18 +44,23 @@ module.exports = React.createClass({ return; } + var user_id = UserStore.getCurrentId(); + post.channel_id = this.props.channelId; post.root_id = this.props.rootId; - post.parent_id = this.props.parentId; + post.parent_id = this.props.rootId; post.filenames = this.state.previews; + var time = utils.getTimestamp(); + post.pending_post_id = user_id + ':'+ time; + post.user_id = user_id; + post.create_at = time; - this.setState({submitting: true, serverError: null}); + PostStore.storePendingPost(post); + PostStore.storeCommentDraft(this.props.rootId, null); + this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); client.createPost(post, ChannelStore.getCurrent(), function(data) { - PostStore.storeCommentDraft(this.props.rootId, null); - this.setState({messageText: '', submitting: false, postError: null, serverError: null}); - this.clearPreviews(); AsyncClient.getPosts(true, this.props.channelId); var channel = ChannelStore.get(this.props.channelId); @@ -58,19 +68,27 @@ module.exports = React.createClass({ member.msg_count = channel.total_msg_count; member.last_viewed_at = Date.now(); ChannelStore.setChannelMember(member); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST, + post: data + }); }.bind(this), function(err) { var state = {}; - state.serverError = err.message; - state.submitting = false; if (err.message === 'Invalid RootId parameter') { if ($('#post_deleted').length > 0) { $('#post_deleted').modal('show'); } + PostStore.removePendingPost(post.pending_post_id); } else { - this.setState(state); + post.state = Constants.POST_FAILED; + PostStore.updatePendingPost(post); } + + state.submitting = false; + this.setState(state); }.bind(this) ); }, @@ -122,19 +140,20 @@ module.exports = React.createClass({ this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, handleUploadError: function(err, clientId) { - var draft = PostStore.getCommentDraft(this.props.rootId); + if (clientId !== -1) { + var draft = PostStore.getCommentDraft(this.props.rootId); - var index = draft['uploadsInProgress'].indexOf(clientId); - if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); - } + var index = draft['uploadsInProgress'].indexOf(clientId); + if (index !== -1) { + draft['uploadsInProgress'].splice(index, 1); + } - PostStore.storeCommentDraft(this.props.rootId, draft); + PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); - }, - clearPreviews: function() { - this.setState({previews: []}); + this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + } else { + this.setState({serverError: err}); + } }, removePreview: function(id) { var previews = this.state.previews; @@ -222,7 +241,9 @@ module.exports = React.createClass({ getFileCount={this.getFileCount} onUploadStart={this.handleUploadStart} onFileUpload={this.handleFileUploadComplete} - onUploadError={this.handleUploadError} /> + onUploadError={this.handleUploadError} + postType='comment' + channelId={this.props.channelId} /> </div> <MsgTyping channelId={this.props.channelId} parentId={this.props.rootId} /> <div className={postFooterClassName}> diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 9ca1d5388..3aa8cc39b 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -65,22 +65,47 @@ module.exports = React.createClass({ post.channel_id = this.state.channelId; post.filenames = this.state.previews; - client.createPost(post, ChannelStore.getCurrent(), + var time = utils.getTimestamp(); + var userId = UserStore.getCurrentId(); + post.pending_post_id = userId + ':' + time; + post.user_id = userId; + post.create_at = time; + post.root_id = this.state.rootId; + post.parent_id = this.state.parentId; + + var channel = ChannelStore.get(this.state.channelId); + + PostStore.storePendingPost(post); + PostStore.storeDraft(channel.id, null); + this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); + + client.createPost(post, channel, function(data) { - PostStore.storeDraft(data.channel_id, null); - this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); this.resizePostHolder(); AsyncClient.getPosts(true); - var channel = ChannelStore.get(this.state.channelId); - var member = ChannelStore.getMember(this.state.channelId); + var member = ChannelStore.getMember(channel.id); member.msg_count = channel.total_msg_count; member.last_viewed_at = Date.now(); ChannelStore.setChannelMember(member); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST, + post: data + }); }.bind(this), function(err) { var state = {}; - state.serverError = err.message; + + if (err.message === 'Invalid RootId parameter') { + if ($('#post_deleted').length > 0) { + $('#post_deleted').modal('show'); + } + PostStore.removePendingPost(post.pending_post_id); + } else { + post.state = Constants.POST_FAILED; + PostStore.updatePendingPost(post); + } state.submitting = false; this.setState(state); @@ -102,7 +127,7 @@ module.exports = React.createClass({ var t = Date.now(); if ((t - this.lastTime) > 5000) { - SocketStore.sendMessage({channelId: this.state.channelId, action: 'typing', props: {'parent_id': ''}, state: {}}); + SocketStore.sendMessage({channel_id: this.state.channelId, action: 'typing', props: {'parent_id': ''}, state: {}}); this.lastTime = t; } }, @@ -145,16 +170,20 @@ module.exports = React.createClass({ this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, handleUploadError: function(err, clientId) { - var draft = PostStore.getDraft(this.state.channelId); + if (clientId !== -1) { + var draft = PostStore.getDraft(this.state.channelId); - var index = draft['uploadsInProgress'].indexOf(clientId); - if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); - } + var index = draft['uploadsInProgress'].indexOf(clientId); + if (index !== -1) { + draft['uploadsInProgress'].splice(index, 1); + } - PostStore.storeDraft(this.state.channelId, draft); + PostStore.storeDraft(this.state.channelId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + } else { + this.setState({serverError: err}); + } }, removePreview: function(id) { var previews = this.state.previews; @@ -191,20 +220,33 @@ module.exports = React.createClass({ var channelId = ChannelStore.getCurrentId(); if (this.state.channelId !== channelId) { var draft = PostStore.getCurrentDraft(); - this.setState({ - channelId: channelId, messageText: draft['message'], initialText: draft['message'], submitting: false, - serverError: null, postError: null, previews: draft['previews'], uploadsInProgress: draft['uploadsInProgress'] - }); + + var previews = []; + var messageText = ''; + var uploadsInProgress = 0; + if (draft && draft.previews && draft.message) { + previews = draft.previews; + messageText = draft.message; + uploadsInProgress = draft.uploadsInProgress; + } + + this.setState({channelId: channelId, messageText: messageText, initialText: messageText, submitting: false, serverError: null, postError: null, previews: previews, uploadsInProgress: uploadsInProgress}); } }, getInitialState: function() { PostStore.clearDraftUploads(); var draft = PostStore.getCurrentDraft(); - return { - channelId: ChannelStore.getCurrentId(), messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], - previews: draft['previews'], submitting: false, initialText: draft['message'] - }; + var previews = []; + var messageText = ''; + var uploadsInProgress = 0; + if (draft && draft.previews && draft.message) { + previews = draft.previews; + messageText = draft.message; + uploadsInProgress = draft.uploadsInProgress; + } + + return {channelId: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false, initialText: messageText}; }, getFileCount: function(channelId) { if (channelId === this.state.channelId) { @@ -262,7 +304,9 @@ module.exports = React.createClass({ getFileCount={this.getFileCount} onUploadStart={this.handleUploadStart} onFileUpload={this.handleFileUploadComplete} - onUploadError={this.handleUploadError} /> + onUploadError={this.handleUploadError} + postType='post' + channelId='' /> </div> <div className={postFooterClassName}> {postError} diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index c1fab669c..7497ec330 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -12,7 +12,9 @@ module.exports = React.createClass({ onUploadError: React.PropTypes.func, getFileCount: React.PropTypes.func, onFileUpload: React.PropTypes.func, - onUploadStart: React.PropTypes.func + onUploadStart: React.PropTypes.func, + channelId: React.PropTypes.string, + postType: React.PropTypes.string }, getInitialState: function() { return {requests: {}}; @@ -21,7 +23,7 @@ module.exports = React.createClass({ var element = $(this.refs.fileInput.getDOMNode()); var files = element.prop('files'); - var channelId = ChannelStore.getCurrentId(); + var channelId = this.props.channelId || ChannelStore.getCurrentId(); this.props.onUploadError(null); @@ -61,8 +63,8 @@ module.exports = React.createClass({ this.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); var requests = this.state.requests; - for (var i = 0; i < parsedData.client_ids.length; i++) { - delete requests[parsedData.client_ids[i]]; + for (var j = 0; j < parsedData.client_ids.length; j++) { + delete requests[parsedData.client_ids[j]]; } this.setState({requests: requests}); }.bind(this), @@ -87,10 +89,94 @@ module.exports = React.createClass({ } } catch(e) {} }, + handleDrop: function(e) { + this.props.onUploadError(null); + + var files = e.originalEvent.dataTransfer.files; + var channelId = this.props.channelId || ChannelStore.getCurrentId(); + + if (typeof files !== 'string' && files.length) { + var numFiles = files.length; + + var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId), numFiles); + + if (numFiles > numToUpload) { + this.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.'); + } + + for (var i = 0; i < files.length && i < numToUpload; i++) { + if (files[i].size > Constants.MAX_FILE_SIZE) { + this.props.onUploadError('Files must be no more than ' + Constants.MAX_FILE_SIZE / 1000000 + ' MB'); + continue; + } + + // generate a unique id that can be used by other components to refer back to this file upload + var clientId = utils.generateId(); + + // Prepare data to be uploaded. + var formData = new FormData(); + formData.append('channel_id', channelId); + formData.append('files', files[i], files[i].name); + formData.append('client_ids', clientId); + + var request = client.uploadFile(formData, + function(data) { + var parsedData = $.parseJSON(data); + this.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); + + var requests = this.state.requests; + for (var j = 0; j < parsedData.client_ids.length; j++) { + delete requests[parsedData.client_ids[j]]; + } + this.setState({requests: requests}); + }.bind(this), + function(err) { + this.props.onUploadError(err, clientId); + }.bind(this) + ); + + var requests = this.state.requests; + requests[clientId] = request; + this.setState({requests: requests}); + + this.props.onUploadStart([clientId], channelId); + } + } else { + this.props.onUploadError('Invalid file upload', -1); + } + }, componentDidMount: function() { var inputDiv = this.refs.input.getDOMNode(); var self = this; + if (this.props.postType === 'post') { + $('.row.main').dragster({ + enter: function() { + $('.center-file-overlay').removeClass('hidden'); + }, + leave: function() { + $('.center-file-overlay').addClass('hidden'); + }, + drop: function(dragsterEvent, e) { + $('.center-file-overlay').addClass('hidden'); + self.handleDrop(e); + } + }); + } else if (this.props.postType === 'comment') { + $('.post-right__container').dragster({ + enter: function() { + $('.right-file-overlay').removeClass('hidden'); + }, + leave: function() { + $('.right-file-overlay').addClass('hidden'); + }, + drop: function(dragsterEvent, e) { + $('.right-file-overlay').addClass('hidden'); + self.handleDrop(e); + } + }); + } + document.addEventListener('paste', function(e) { var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0]; @@ -133,14 +219,13 @@ module.exports = React.createClass({ continue; } - var channelId = ChannelStore.getCurrentId(); + var channelId = this.props.channelId || ChannelStore.getCurrentId(); // generate a unique id that can be used by other components to refer back to this file upload var clientId = utils.generateId(); var formData = new FormData(); formData.append('channel_id', channelId); - var d = new Date(); var hour; if (d.getHours() < 10) { @@ -165,8 +250,8 @@ module.exports = React.createClass({ self.props.onFileUpload(parsedData.filenames, parsedData.client_ids, channelId); var requests = self.state.requests; - for (var i = 0; i < parsedData.client_ids.length; i++) { - delete requests[parsedData.client_ids[i]]; + for (var j = 0; j < parsedData.client_ids.length; j++) { + delete requests[parsedData.client_ids[j]]; } self.setState({requests: requests}); }, diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx new file mode 100644 index 000000000..f35556371 --- /dev/null +++ b/web/react/components/file_upload_overlay.jsx @@ -0,0 +1,26 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +module.exports = React.createClass({ + displayName: 'FileUploadOverlay', + propTypes: { + overlayType: React.PropTypes.string + }, + render: function() { + var overlayClass = 'file-overlay hidden'; + if (this.props.overlayType === 'right') { + overlayClass += ' right-file-overlay'; + } else if (this.props.overlayType === 'center') { + overlayClass += ' center-file-overlay'; + } + + return ( + <div className={overlayClass}> + <div> + <i className='fa fa-upload'></i> + <span>Drop a file to upload it.</span> + </div> + </div> + ); + } +}); diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx index ea22ad0f3..3b10926f5 100644 --- a/web/react/components/get_link_modal.jsx +++ b/web/react/components/get_link_modal.jsx @@ -9,6 +9,7 @@ ZeroClipboardMixin.ZeroClipboard.config({ }); module.exports = React.createClass({ + displayName: 'GetLinkModal', zeroclipboardElementsSelector: '[data-copy-btn]', mixins: [ZeroClipboardMixin], componentDidMount: function() { @@ -34,7 +35,7 @@ module.exports = React.createClass({ var copyLinkConfirm = null; if (this.state.copiedLink) { - copyLinkConfirm = <p className='copy-link-confirm'>Link copied to clipboard.</p>; + copyLinkConfirm = <p className='alert alert-success copy-link-confirm'><i className="fa fa-check"></i> Link copied to clipboard.</p>; } if (currentUser != null) { @@ -47,7 +48,10 @@ module.exports = React.createClass({ <h4 className='modal-title' id='myModalLabel'>{this.state.title} Link</h4> </div> <div className='modal-body'> - <p>{'The link below is used for open ' + strings.TeamPlural + ' or if you allowed your ' + strings.Team + ' members to sign up using their ' + strings.Company + ' email addresses.'} + <p> + Send {strings.Team + 'mates'} the link below for them to sign-up to this {strings.Team} site. + <br /><br /> + Be careful not to share this link publicly, since anyone with the link can join your {strings.Team}. </p> <textarea className='form-control no-resize' readOnly='true' value={this.state.value}></textarea> </div> diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index fe0a47777..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 = decodeURI(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/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 901cd228f..11ddbcbd1 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -3,67 +3,102 @@ var ChannelStore = require('../stores/channel_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); +var Client = require('../utils/client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ + displayName: 'MoreDirectChannels', componentDidMount: function() { var self = this; - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { + $(this.refs.modal.getDOMNode()).on('show.bs.modal', function showModal(e) { var button = e.relatedTarget; - self.setState({ channels: $(button).data('channels') }); + self.setState({channels: $(button).data('channels')}); }); }, getInitialState: function() { - return { channels: [] }; + return {channels: [], loadingDMChannel: -1}; }, render: function() { var self = this; - var directMessageItems = this.state.channels.map(function(channel) { - var badge = ""; - var titleClass = "" + var directMessageItems = this.state.channels.map(function mapActivityToChannel(channel, index) { + var badge = ''; + var titleClass = ''; + var active = ''; + var handleClick = null; if (!channel.fake) { - var active = channel.id === ChannelStore.getCurrentId() ? "active" : ""; + if (channel.id === ChannelStore.getCurrentId()) { + active = 'active'; + } if (channel.unread) { - badge = <span className="badge pull-right small">{channel.unread}</span>; - badgesActive = true; - titleClass = "unread-title" + badge = <span className='badge pull-right small'>{channel.unread}</span>; + titleClass = 'unread-title'; } - return ( - <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel, channel.teammate_username); $(self.refs.modal.getDOMNode()).modal('hide')}}>{badge}{channel.display_name}</a></li> - ); + + handleClick = function clickHandler(e) { + e.preventDefault(); + utils.switchChannel(channel, channel.teammate_username); + $(self.refs.modal.getDOMNode()).modal('hide'); + }; } else { - return ( - <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href={TeamStore.getCurrentTeamUrl() + "/channels/"+channel.name}>{badge}{channel.display_name}</a></li> - ); + // It's a direct message channel that doesn't exist yet so let's create it now + var otherUserId = utils.getUserIdFromChannelName(channel); + + if (self.state.loadingDMChannel === index) { + badge = <img className='channel-loading-gif pull-right' src='/static/images/load.gif'/>; + } + + if (self.state.loadingDMChannel === -1) { + handleClick = function clickHandler(e) { + e.preventDefault(); + self.setState({loadingDMChannel: index}); + + Client.createDirectChannel(channel, otherUserId, + function success(data) { + $(self.refs.modal.getDOMNode()).modal('hide'); + self.setState({loadingDMChannel: -1}); + AsyncClient.getChannel(data.id); + utils.switchChannel(data); + }, + function error() { + self.setState({loadingDMChannel: -1}); + window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; + } + ); + }; + } } + + return ( + <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}>{badge}{channel.display_name}</a></li> + ); }); return ( - <div className="modal fade" id="more_direct_channels" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal"> - <span aria-hidden="true">×</span> - <span className="sr-only">Close</span> + <div className='modal fade' id='more_direct_channels' ref='modal' tabIndex='-1' role='dialog' aria-hidden='true'> + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <button type='button' className='close' data-dismiss='modal'> + <span aria-hidden='true'>×</span> + <span className='sr-only'>Close</span> </button> - <h4 className="modal-title">More Private Messages</h4> + <h4 className='modal-title'>More Private Messages</h4> </div> - <div className="modal-body"> - <ul className="nav nav-pills nav-stacked"> + <div className='modal-body'> + <ul className='nav nav-pills nav-stacked'> {directMessageItems} </ul> </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> + <div className='modal-footer'> + <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button> </div> </div> </div> </div> - ); } }); diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 6d23c0d9b..3e0a66e92 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -1,111 +1,62 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. - -var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var UserStore = require('../stores/user_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); - -var UserProfile = require('./user_profile.jsx'); var MessageWrapper = require('./message_wrapper.jsx'); +var NotifyCounts = require('./notify_counts.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -function getCountsStateFromStores() { - var count = 0; - var channels = ChannelStore.getAll(); - var members = ChannelStore.getAllMembers(); - - channels.forEach(function(channel) { - var channelMember = members[channel.id]; - if (channel.type === 'D') { - count += channel.total_msg_count - channelMember.msg_count; - } else { - if (channelMember.mention_count > 0) { - count += channelMember.mention_count; - } else if (channelMember.notify_level !== "quiet" && channel.total_msg_count - channelMember.msg_count > 0) { - count += 1; - } - } - }); - - return { count: count }; -} - -var NotifyCounts = React.createClass({ - componentDidMount: function() { - ChannelStore.addChangeListener(this._onChange); - }, - componentWillUnmount: function() { - ChannelStore.removeChangeListener(this._onChange); - }, - _onChange: function() { - var newState = getCountsStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { - this.setState(newState); - } - }, - getInitialState: function() { - return getCountsStateFromStores(); - }, - render: function() { - if (this.state.count) { - return <span className="badge badge-notify">{ this.state.count }</span>; - } else { - return null; - } - } -}); - function getStateFromStores() { - return { - channel: ChannelStore.getCurrent(), - member: ChannelStore.getCurrentMember(), - users: ChannelStore.getCurrentExtraInfo().members - }; + return { + channel: ChannelStore.getCurrent(), + member: ChannelStore.getCurrentMember(), + users: ChannelStore.getCurrentExtraInfo().members + }; } module.exports = React.createClass({ displayName: 'Navbar', - + propTypes: { + teamDisplayName: React.PropTypes.string + }, componentDidMount: function() { - ChannelStore.addChangeListener(this._onChange); - ChannelStore.addExtraInfoChangeListener(this._onChange); + ChannelStore.addChangeListener(this.onListenerChange); + ChannelStore.addExtraInfoChangeListener(this.onListenerChange); $('.inner__wrap').click(this.hideSidebars); - $('body').on('click.infopopover', function(e) { - if ($(e.target).attr('data-toggle') !== 'popover' - && $(e.target).parents('.popover.in').length === 0) { + $('body').on('click.infopopover', function handlePopoverClick(e) { + if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) { $('.info-popover').popover('hide'); } }); - }, componentWillUnmount: function() { - ChannelStore.removeChangeListener(this._onChange); + ChannelStore.removeChangeListener(this.onListenerChange); }, handleSubmit: function(e) { e.preventDefault(); }, - handleLeave: function(e) { + handleLeave: function() { client.leaveChannel(this.state.channel.id, - function(data, text, req) { + function success() { AsyncClient.getChannels(true); window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square'; - }.bind(this), - function(err) { - AsyncClient.dispatchError(err, "handleLeave"); + }, + function error(err) { + AsyncClient.dispatchError(err, 'handleLeave'); } ); }, hideSidebars: function(e) { var windowWidth = $(window).outerWidth(); - if(windowWidth <= 768) { + if (windowWidth <= 768) { AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_SEARCH, results: null @@ -116,7 +67,7 @@ module.exports = React.createClass({ results: null }); - if (e.target.className != 'navbar-toggle' && e.target.className != 'icon-bar') { + if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') { $('.inner__wrap').removeClass('move--right move--left move--left-small'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); @@ -132,27 +83,24 @@ module.exports = React.createClass({ $('.inner__wrap').toggleClass('move--left-small'); $('.sidebar--menu').toggleClass('move--left'); }, - _onChange: function() { + onListenerChange: function() { this.setState(getStateFromStores()); - $("#navbar .navbar-brand .description").popover({placement : 'bottom', trigger: 'click', html: true}); + $('#navbar .navbar-brand .description').popover({placement: 'bottom', trigger: 'click', html: true}); }, getInitialState: function() { return getStateFromStores(); }, render: function() { - var currentId = UserStore.getCurrentId(); - var popoverContent = ""; + var popoverContent = ''; var channelTitle = this.props.teamDisplayName; var isAdmin = false; var isDirect = false; - var description = "" var channel = this.state.channel; if (channel) { - description = utils.textToJsx(channel.description, {"singleline": true, "noMentionHighlight": true}); - popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>); - isAdmin = this.state.member.roles.indexOf("admin") > -1; + popoverContent = React.renderToString(<MessageWrapper message={channel.description} options={{singleline: true, noMentionHighlight: true}}/>); + isAdmin = this.state.member.roles.indexOf('admin') > -1; if (channel.type === 'O') { channelTitle = channel.display_name; @@ -162,92 +110,112 @@ module.exports = React.createClass({ isDirect = true; if (this.state.users.length > 1) { if (this.state.users[0].id === currentId) { - channelTitle = <UserProfile userId={this.state.users[1].id} />; + channelTitle = UserStore.getProfile(this.state.users[1].id).username; } else { - channelTitle = <UserProfile userId={this.state.users[0].id} />; + channelTitle = UserStore.getProfile(this.state.users[0].id).username; } } } - if (channel.description.length == 0) { + if (channel.description.length === 0) { popoverContent = React.renderToString(<div>No channel description yet. <br /><a href='#' data-toggle='modal' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id} data-target='#edit_channel'>Click here</a> to add one.</div>); } } - var navbar_collapse_button = currentId != null ? null : - <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> - <span className="sr-only">Toggle sidebar</span> - <span className="icon-bar"></span> - <span className="icon-bar"></span> - <span className="icon-bar"></span> - </button>; - var sidebar_collapse_button = currentId == null ? null : - <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#sidebar-nav" onClick={this.toggleLeftSidebar}> - <span className="sr-only">Toggle sidebar</span> - <span className="icon-bar"></span> - <span className="icon-bar"></span> - <span className="icon-bar"></span> - <NotifyCounts /> - </button>; - var right_sidebar_collapse_button= currentId == null ? null : - <button type="button" className="navbar-toggle menu-toggle pull-right" data-toggle="collapse" data-target="#sidebar-nav" onClick={this.toggleRightSidebar}> - <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON }} /> - </button>; + var navbarCollapseButton = null; + if (currentId == null) { + navbarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#navbar-collapse-1'> + <span className='sr-only'>Toggle sidebar</span> + <span className='icon-bar'></span> + <span className='icon-bar'></span> + <span className='icon-bar'></span> + </button>); + } + + var sidebarCollapseButton = null; + if (currentId != null) { + sidebarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleLeftSidebar}> + <span className='sr-only'>Toggle sidebar</span> + <span className='icon-bar'></span> + <span className='icon-bar'></span> + <span className='icon-bar'></span> + <NotifyCounts /> + </button>); + } + + var rightSidebarCollapseButton = null; + if (currentId != null) { + rightSidebarCollapseButton = (<button type='button' className='navbar-toggle menu-toggle pull-right' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleRightSidebar}> + <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> + </button>); + } + + var channelMenuDropdown = null; + if (channel) { + var addMembersOption = null; + if (!isDirect && !ChannelStore.isDefault(channel)) { + addMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li>; + } + + var manageMembersOption = null; + if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) { + manageMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_members' href='#'>Manage Members</a></li>; + } + + var setChannelDescriptionOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li>; + + var notificationPreferenceOption = null; + if (!isDirect) { + notificationPreferenceOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#channel_notifications' data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li>; + } + + var renameChannelOption = null; + if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) { + renameChannelOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#rename_channel' data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li>; + } + var deleteChannelOption = null; + if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) { + deleteChannelOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#delete_channel' data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li>; + } + + var leaveChannelOption = null; + if (!isDirect && !ChannelStore.isDefault(channel)) { + leaveChannelOption = <li role='presentation'><a role='menuitem' href='#' onClick={this.handleLeave}>Leave Channel</a></li>; + } + + channelMenuDropdown = (<div className='navbar-brand'> + <div className='dropdown'> + <div data-toggle='popover' data-content={popoverContent} className='description info-popover'></div> + <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true'> + <span className='heading'>{channelTitle} </span> + <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span> + </a> + <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'> + {addMembersOption} + {manageMembersOption} + {setChannelDescriptionOption} + {notificationPreferenceOption} + {renameChannelOption} + {deleteChannelOption} + {leaveChannelOption} + </ul> + </div> + </div>); + } else { + channelMenuDropdown = (<div className='navbar-brand'> + <a href='/' className='heading'>{channelTitle}</a> + </div>); + } return ( - <nav className="navbar navbar-default navbar-fixed-top" role="navigation"> - <div className="container-fluid theme"> - <div className="navbar-header"> - { navbar_collapse_button } - { sidebar_collapse_button } - { right_sidebar_collapse_button } - { !isDirect && channel ? - <div className="navbar-brand"> - <div className="dropdown"> - <div data-toggle="popover" data-content={popoverContent} className="description info-popover"></div> - <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true"> - <span className="heading">{channelTitle} </span> - <span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span> - </a> - <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> - { !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li> - : null - } - { isAdmin && !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li> - : null - } - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li> - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#channel_notifications" data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li> - { isAdmin && !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#rename_channel" data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li> - : null - } - { isAdmin && !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#delete_channel" data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li> - : null - } - { !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" href="#" onClick={this.handleLeave}>Leave Channel</a></li> - : null - } - </ul> - </div> - </div> - : null - } - { isDirect && channel ? - <div className="navbar-brand"> - <a href="#" className="heading">{ channelTitle }</a> - </div> - : null } - { !channel ? - <div className="navbar-brand"> - <a href="/" className="heading">{ channelTitle }</a> - </div> - : "" } + <nav className='navbar navbar-default navbar-fixed-top' role='navigation'> + <div className='container-fluid theme'> + <div className='navbar-header'> + {navbarCollapseButton} + {sidebarCollapseButton} + {rightSidebarCollapseButton} + {channelMenuDropdown} </div> </div> </nav> diff --git a/web/react/components/notify_counts.jsx b/web/react/components/notify_counts.jsx new file mode 100644 index 000000000..ebc49882b --- /dev/null +++ b/web/react/components/notify_counts.jsx @@ -0,0 +1,49 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var utils = require('../utils/utils.jsx'); +var ChannelStore = require('../stores/channel_store.jsx'); + +function getCountsStateFromStores() { + var count = 0; + var channels = ChannelStore.getAll(); + var members = ChannelStore.getAllMembers(); + + channels.forEach(function setChannelInfo(channel) { + var channelMember = members[channel.id]; + if (channel.type === 'D') { + count += channel.total_msg_count - channelMember.msg_count; + } else if (channelMember.mention_count > 0) { + count += channelMember.mention_count; + } else if (channelMember.notify_level !== 'quiet' && channel.total_msg_count - channelMember.msg_count > 0) { + count += 1; + } + }); + + return {count: count}; +} + +module.exports = React.createClass({ + displayName: 'NotifyCounts', + componentDidMount: function() { + ChannelStore.addChangeListener(this.onListenerChange); + }, + componentWillUnmount: function() { + ChannelStore.removeChangeListener(this.onListenerChange); + }, + onListenerChange: function() { + var newState = getCountsStateFromStores(); + if (!utils.areStatesEqual(newState, this.state)) { + this.setState(newState); + } + }, + getInitialState: function() { + return getCountsStateFromStores(); + }, + render: function() { + if (this.state.count) { + return <span className='badge badge-notify'>{this.state.count}</span>; + } + return null; + } +}); diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx index e72a2d001..b798dc7ca 100644 --- a/web/react/components/post.jsx +++ b/web/react/components/post.jsx @@ -7,16 +7,14 @@ var PostInfo = require('./post_info.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); var UserStore = require('../stores/user_store.jsx'); +var PostStore = require('../stores/post_store.jsx'); +var ChannelStore = require('../stores/channel_store.jsx'); +var client = require('../utils/client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); var ActionTypes = Constants.ActionTypes; module.exports = React.createClass({ displayName: "Post", - componentDidMount: function() { - $('.modal').on('show.bs.modal', function () { - $('.modal-body').css('overflow-y', 'auto'); - $('.modal-body').css('max-height', $(window).height() * 0.7); - }); - }, handleCommentClick: function(e) { e.preventDefault(); @@ -38,6 +36,36 @@ module.exports = React.createClass({ this.refs.info.forceUpdate(); this.refs.header.forceUpdate(); }, + retryPost: function(e) { + e.preventDefault(); + + var post = this.props.post; + client.createPost(post, post.channel_id, + function(data) { + AsyncClient.getPosts(true); + + var channel = ChannelStore.get(post.channel_id); + var member = ChannelStore.getMember(post.channel_id); + member.msg_count = channel.total_msg_count; + member.last_viewed_at = (new Date).getTime(); + ChannelStore.setChannelMember(member); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST, + post: data + }); + }.bind(this), + function(err) { + post.state = Constants.POST_FAILED; + PostStore.updatePendingPost(post); + this.forceUpdate(); + }.bind(this) + ); + + post.state = Constants.POST_LOADING; + PostStore.updatePendingPost(post); + this.forceUpdate(); + }, getInitialState: function() { return { }; }, @@ -46,9 +74,9 @@ module.exports = React.createClass({ var parentPost = this.props.parentPost; var posts = this.props.posts; - var type = "Post" - if (post.root_id.length > 0) { - type = "Comment" + var type = 'Post'; + if (post.root_id && post.root_id.length > 0) { + type = 'Comment'; } var commentCount = 0; @@ -85,7 +113,7 @@ module.exports = React.createClass({ : null } <div className="post__content"> <PostHeader ref="header" post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} isLastComment={this.props.isLastComment} /> - <PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} /> + <PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} retryPost={this.retryPost} /> <PostInfo ref="info" post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} allowReply="true" /> </div> </div> diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index 860c96d84..e5ab5b624 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -4,15 +4,16 @@ var FileAttachmentList = require('./file_attachment_list.jsx'); var UserStore = require('../stores/user_store.jsx'); var utils = require('../utils/utils.jsx'); +var Constants = require('../utils/constants.jsx'); module.exports = React.createClass({ componentWillReceiveProps: function(nextProps) { var linkData = utils.extractLinks(nextProps.post.message); - this.setState({ links: linkData["links"], message: linkData["text"] }); + this.setState({links: linkData.links, message: linkData.text}); }, getInitialState: function() { var linkData = utils.extractLinks(this.props.post.message); - return { links: linkData["links"], message: linkData["text"] }; + return {links: linkData.links, message: linkData.text}; }, render: function() { var post = this.props.post; @@ -20,43 +21,52 @@ module.exports = React.createClass({ var parentPost = this.props.parentPost; var inner = utils.textToJsx(this.state.message); - var comment = ""; - var reply = ""; - var postClass = ""; + var comment = ''; + var reply = ''; + var postClass = ''; if (parentPost) { var profile = UserStore.getProfile(parentPost.user_id); - var apostrophe = ""; - var name = "..."; + var apostrophe = ''; + var name = '...'; if (profile != null) { if (profile.username.slice(-1) === 's') { - apostrophe = "'"; + apostrophe = '\''; } else { - apostrophe = "'s"; + apostrophe = '\'s'; } - name = <a className="theme" onClick={function(){ utils.searchForTerm(profile.username); }}>{profile.username}</a>; + name = <a className='theme' onClick={function searchName() { utils.searchForTerm(profile.username); }}>{profile.username}</a>; } - var message = "" - if(parentPost.message) { - message = utils.replaceHtmlEntities(parentPost.message) + var message = ''; + if (parentPost.message) { + message = utils.replaceHtmlEntities(parentPost.message); } else if (parentPost.filenames.length) { message = parentPost.filenames[0].split('/').pop(); if (parentPost.filenames.length === 2) { - message += " plus 1 other file"; + message += ' plus 1 other file'; } else if (parentPost.filenames.length > 2) { - message += " plus " + (parentPost.filenames.length - 1) + " other files"; + message += ' plus ' + (parentPost.filenames.length - 1) + ' other files'; } } comment = ( - <p className="post-link"> - <span>Commented on {name}{apostrophe} message: <a className="theme" onClick={this.props.handleCommentClick}>{message}</a></span> + <p className='post-link'> + <span>Commented on {name}{apostrophe} message: <a className='theme' onClick={this.props.handleCommentClick}>{message}</a></span> </p> ); - postClass += " post-comment"; + postClass += ' post-comment'; + } + + var loading; + if (post.state === Constants.POST_FAILED) { + postClass += ' post-fail'; + loading = <a className='theme post-retry pull-right' href='#' onClick={this.props.retryPost}>Retry</a>; + } else if (post.state === Constants.POST_LOADING) { + postClass += ' post-waiting'; + loading = <img className='post-loading-gif pull-right' src='/static/images/load.gif'/>; } var embed; @@ -64,18 +74,21 @@ module.exports = React.createClass({ embed = utils.getEmbed(this.state.links[0]); } + var fileAttachmentHolder = ''; + if (filenames && filenames.length > 0) { + fileAttachmentHolder = (<FileAttachmentList + filenames={filenames} + modalId={'view_image_modal_' + post.id} + channelId={post.channel_id} + userId={post.user_id} />); + } + return ( - <div className="post-body"> - { comment } - <p key={post.id+"_message"} className={postClass}><span>{inner}</span></p> - { filenames && filenames.length > 0 ? - <FileAttachmentList - filenames={filenames} - modalId={"view_image_modal_" + post.id} - channelId={post.channel_id} - userId={post.user_id} /> - : "" } - { embed } + <div className='post-body'> + {comment} + <p key={post.id + '_message'} className={postClass}>{loading}<span>{inner}</span></p> + {fileAttachmentHolder} + {embed} </div> ); } diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 8eaaf4e8c..f6ab0ed8a 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -12,41 +12,68 @@ module.exports = React.createClass({ }, render: function() { var post = this.props.post; - var isOwner = UserStore.getCurrentId() == post.user_id; - var isAdmin = UserStore.getCurrentUser().roles.indexOf("admin") > -1 + var isOwner = UserStore.getCurrentId() === post.user_id; + var isAdmin = UserStore.getCurrentUser().roles.indexOf('admin') > -1; - var type = "Post" - if (post.root_id.length > 0) { - type = "Comment" + var type = 'Post'; + if (post.root_id && post.root_id.length > 0) { + type = 'Comment'; } - var comments = ""; - var lastCommentClass = this.props.isLastComment ? " comment-icon__container__show" : " comment-icon__container__hide"; - if (this.props.commentCount >= 1) { - comments = <a href="#" className={"comment-icon__container theme" + lastCommentClass} onClick={this.props.handleCommentClick}><span className="comment-icon" dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON }} />{this.props.commentCount}</a>; + var comments = ''; + var lastCommentClass = ' comment-icon__container__hide'; + if (this.props.isLastComment) { + lastCommentClass = ' comment-icon__container__show'; + } + + if (this.props.commentCount >= 1 && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) { + comments = <a href='#' className={'comment-icon__container theme' + lastCommentClass} onClick={this.props.handleCommentClick}><span className='comment-icon' dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}} />{this.props.commentCount}</a>; + } + + var showDropdown = isOwner || (this.props.allowReply === 'true' && type !== 'Comment'); + if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) { + showDropdown = false; + } + + var dropdownContents = []; + var dropdown; + if (showDropdown) { + var dataComments = 0; + if (type === 'Post') { + dataComments = this.props.commentCount; + } + + if (isOwner) { + dropdownContents.push(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Edit</a></li>); + } + + if (isOwner || isAdmin) { + dropdownContents.push(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Delete</a></li>); + } + + if (this.props.allowReply === 'true') { + dropdownContents.push(<li role='presentation'><a className='reply-link theme' href='#' onClick={this.props.handleCommentClick}>Reply</a></li>); + } + + dropdown = ( + <div> + <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' /> + <ul className='dropdown-menu' role='menu'> + {dropdownContents} + </ul> + </div> + ); } return ( - <ul className="post-header post-info"> - <li className="post-header-col"><time className="post-profile-time">{ utils.displayDateTime(post.create_at) }</time></li> - <li className="post-header-col post-header__reply"> - <div className="dropdown"> - { isOwner || (this.props.allowReply === "true" && type != "Comment") ? - <div> - <a href="#" className="dropdown-toggle theme" type="button" data-toggle="dropdown" aria-expanded="false" /> - <ul className="dropdown-menu" role="menu"> - { isOwner ? <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#edit_post" data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id} data-comments={type === "Post" ? this.props.commentCount : 0}>Edit</a></li> - : "" } - { isOwner || isAdmin ? <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#delete_post" data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={type === "Post" ? this.props.commentCount : 0}>Delete</a></li> - : "" } - { this.props.allowReply === "true" ? <li role="presentation"><a className="reply-link theme" href="#" onClick={this.props.handleCommentClick}>Reply</a></li> - : "" } - </ul> - </div> - : "" } - </div> - { comments } - </li> + <ul className='post-header post-info'> + <li className='post-header-col'><time className='post-profile-time'>{utils.displayDateTime(post.create_at)}</time></li> + <li className='post-header-col post-header__reply'> + <div className='dropdown'> + {dropdown} + </div> + {comments} + </li> </ul> ); } diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 83f806b79..bebd6847f 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -4,7 +4,7 @@ var PostStore = require('../stores/post_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); var UserStore = require('../stores/user_store.jsx'); -var UserProfile = require( './user_profile.jsx' ); +var UserProfile = require('./user_profile.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var Post = require('./post.jsx'); var LoadingScreen = require('./loading_screen.jsx'); @@ -18,16 +18,28 @@ var ActionTypes = Constants.ActionTypes; function getStateFromStores() { var channel = ChannelStore.getCurrent(); - if (channel == null) channel = {}; + if (channel == null) { + channel = {}; + } + + var postList = PostStore.getCurrentPosts(); + var pendingPostList = PostStore.getPendingPosts(channel.id); + + if (pendingPostList) { + postList.order = pendingPostList.order.concat(postList.order); + for (var pid in pendingPostList.posts) { + postList.posts[pid] = pendingPostList.posts[pid]; + } + } return { - post_list: PostStore.getCurrentPosts(), + postList: postList, channel: channel }; } module.exports = React.createClass({ - displayName: "PostList", + displayName: 'PostList', scrollPosition: 0, preventScrollTrigger: false, gotMorePosts: false, @@ -37,65 +49,75 @@ module.exports = React.createClass({ componentDidMount: function() { var user = UserStore.getCurrentUser(); if (user.props && user.props.theme) { - utils.changeCss('div.theme', 'background-color:'+user.props.theme+';'); - utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';'); - utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';'); - utils.changeCss('.mention', 'background: ' + user.props.theme+';'); - utils.changeCss('.mention-link', 'color: ' + user.props.theme+';'); - utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}'); + utils.changeCss('div.theme', 'background-color:' + user.props.theme + ';'); + utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme + ';'); + utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme + ';'); + utils.changeCss('.mention', 'background: ' + user.props.theme + ';'); + utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';'); + utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}'); + utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';'); } - if (user.props.theme != '#000000' && user.props.theme != '#585858') { - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';'); - utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;'); - } else if (user.props.theme == '#000000') { - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) +';'); + + if (user.props.theme !== '#000000' && user.props.theme !== '#585858') { + utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) + ';'); + utils.changeCss('a.theme', 'color:' + user.props.theme + '; fill:' + user.props.theme + '!important;'); + } else if (user.props.theme === '#000000') { + utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) + ';'); $('.team__header').addClass('theme--black'); - } else if (user.props.theme == '#585858') { - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) +';'); + } else if (user.props.theme === '#585858') { + utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) + ';'); $('.team__header').addClass('theme--gray'); } - PostStore.addChangeListener(this._onChange); - ChannelStore.addChangeListener(this._onChange); - UserStore.addStatusesChangeListener(this._onTimeChange); - SocketStore.addChangeListener(this._onSocketChange); + PostStore.addChangeListener(this.onChange); + ChannelStore.addChangeListener(this.onChange); + UserStore.addStatusesChangeListener(this.onTimeChange); + SocketStore.addChangeListener(this.onSocketChange); - $(".post-list-holder-by-time").perfectScrollbar(); + $('.post-list-holder-by-time').perfectScrollbar(); this.resize(); - var post_holder = $(".post-list-holder-by-time")[0]; - this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); - this.oldScrollHeight = post_holder.scrollHeight; + var postHolder = $('.post-list-holder-by-time')[0]; + this.scrollPosition = $(postHolder).scrollTop() + $(postHolder).innerHeight(); + this.oldScrollHeight = postHolder.scrollHeight; this.oldZoom = (window.outerWidth - 8) / window.innerWidth; + $('.modal').on('show.bs.modal', function onShow() { + $('.modal-body').css('overflow-y', 'auto'); + $('.modal-body').css('max-height', $(window).height() * 0.7); + }); + + // Timeout exists for the DOM to fully render before making changes var self = this; - $(window).resize(function(){ - $(post_holder).perfectScrollbar('update'); + $(window).resize(function resize() { + $(postHolder).perfectScrollbar('update'); // this only kind of works, detecting zoom in browsers is a nightmare var newZoom = (window.outerWidth - 8) / window.innerWidth; - if (self.scrollPosition >= post_holder.scrollHeight || (self.oldScrollHeight != post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom != newZoom) self.resize(); + if (self.scrollPosition >= postHolder.scrollHeight || (self.oldScrollHeight !== postHolder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom !== newZoom) { + self.resize(); + } self.oldZoom = newZoom; if ($('#create_post').length > 0) { var height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50; - $(".post-list-holder-by-time").css("height", height + "px"); + $('.post-list-holder-by-time').css('height', height + 'px'); } }); - $(post_holder).scroll(function(e){ + $(postHolder).scroll(function scroll() { if (!self.preventScrollTrigger) { - self.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); + self.scrollPosition = $(postHolder).scrollTop() + $(postHolder).innerHeight(); } self.preventScrollTrigger = false; }); - $('body').on('click.userpopover', function(e){ - if ($(e.target).attr('data-toggle') !== 'popover' - && $(e.target).parents('.popover.in').length === 0) { + $('body').on('click.userpopover', function popOver(e) { + if ($(e.target).attr('data-toggle') !== 'popover' && + $(e.target).parents('.popover.in').length === 0) { $('.user-popover').popover('hide'); } }); @@ -103,66 +125,62 @@ module.exports = React.createClass({ $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); - $('body').on('mouseenter mouseleave', '.post', function(ev){ - if(ev.type === 'mouseenter'){ + $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) { + if (ev.type === 'mouseenter') { $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before'); - } - else { + } else { $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after'); $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before'); } }); - $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function(ev){ - if(ev.type === 'mouseenter'){ + $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function mouseOver(ev) { + if (ev.type === 'mouseenter') { $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--comment'); - } - else { + } else { $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--comment'); $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment'); } }); - }, componentDidUpdate: function() { this.resize(); - var post_holder = $(".post-list-holder-by-time")[0]; - this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); - this.oldScrollHeight = post_holder.scrollHeight; + var postHolder = $('.post-list-holder-by-time')[0]; + this.scrollPosition = $(postHolder).scrollTop() + $(postHolder).innerHeight(); + this.oldScrollHeight = postHolder.scrollHeight; $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); }, componentWillUnmount: function() { - PostStore.removeChangeListener(this._onChange); - ChannelStore.removeChangeListener(this._onChange); - UserStore.removeStatusesChangeListener(this._onTimeChange); - SocketStore.removeChangeListener(this._onSocketChange); + PostStore.removeChangeListener(this.onChange); + ChannelStore.removeChangeListener(this.onChange); + UserStore.removeStatusesChangeListener(this.onTimeChange); + SocketStore.removeChangeListener(this.onSocketChange); $('body').off('click.userpopover'); + $('.modal').off('show.bs.modal'); }, resize: function() { - var post_holder = $(".post-list-holder-by-time")[0]; + var postHolder = $('.post-list-holder-by-time')[0]; this.preventScrollTrigger = true; if (this.gotMorePosts) { this.gotMorePosts = false; - $(post_holder).scrollTop($(post_holder).scrollTop() + (post_holder.scrollHeight-this.oldScrollHeight) ); + $(postHolder).scrollTop($(postHolder).scrollTop() + (postHolder.scrollHeight - this.oldScrollHeight)); + } else if ($('#new_message')[0] && !this.scrolledToNew) { + $(postHolder).scrollTop($(postHolder).scrollTop() + $('#new_message').offset().top - 63); + this.scrolledToNew = true; } else { - if ($("#new_message")[0] && !this.scrolledToNew) { - $(post_holder).scrollTop($(post_holder).scrollTop() + $("#new_message").offset().top - 63); - this.scrolledToNew = true; - } else { - $(post_holder).scrollTop(post_holder.scrollHeight); - } + $(postHolder).scrollTop(postHolder.scrollHeight); } - $(post_holder).perfectScrollbar('update'); + $(postHolder).perfectScrollbar('update'); }, - _onChange: function() { + onChange: function() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { - if (this.state.post_list && this.state.post_list.order) { - if (this.state.channel.id === newState.channel.id && this.state.post_list.order.length != newState.post_list.order.length && newState.post_list.order.length > Constants.POST_CHUNK_SIZE) { + if (this.state.postList && this.state.postList.order) { + if (this.state.channel.id === newState.channel.id && this.state.postList.order.length !== newState.postList.order.length && newState.postList.order.length > Constants.POST_CHUNK_SIZE) { this.gotMorePosts = true; } } @@ -172,112 +190,121 @@ module.exports = React.createClass({ this.setState(newState); } }, - _onSocketChange: function(msg) { - if (msg.action == "posted") { - var post = JSON.parse(msg.props.post); - - var post_list = PostStore.getPosts(msg.channel_id); - if (!post_list) return; - - post_list.posts[post.id] = post; - if (post_list.order.indexOf(post.id) === -1) { - post_list.order.unshift(post.id); - } - + onSocketChange: function(msg) { + var postList; + var post; + if (msg.action === 'posted') { + post = JSON.parse(msg.props.post); + PostStore.storePost(post); + } else if (msg.action === 'post_edited') { if (this.state.channel.id === msg.channel_id) { - this.setState({ post_list: post_list }); - }; - - PostStore.storePosts(post.channel_id, post_list); - } else if (msg.action == "post_edited") { - if (this.state.channel.id == msg.channel_id) { - var post_list = this.state.post_list; - if (!(msg.props.post_id in post_list.posts)) return; + postList = this.state.postList; + if (!(msg.props.post_id in postList.posts)) { + return; + } - var post = post_list.posts[msg.props.post_id]; + post = postList.posts[msg.props.post_id]; post.message = msg.props.message; - post_list.posts[post.id] = post; - this.setState({ post_list: post_list }); + postList.posts[post.id] = post; + this.setState({postList: postList}); - PostStore.storePosts(msg.channel_id, post_list); + PostStore.storePosts(msg.channel_id, postList); } else { AsyncClient.getPosts(true, msg.channel_id); } - } else if (msg.action == "post_deleted") { + } else if (msg.action === 'post_deleted') { var activeRoot = $(document.activeElement).closest('.comment-create-body')[0]; - var activeRootPostId = activeRoot && activeRoot.id.length > 0 ? activeRoot.id : ""; + var activeRootPostId = ''; + if (activeRoot && activeRoot.id.length > 0) { + activeRootPostId = activeRoot.id; + } - if (this.state.channel.id == msg.channel_id) { - var post_list = this.state.post_list; - if (!(msg.props.post_id in this.state.post_list.posts)) return; + if (this.state.channel.id === msg.channel_id) { + postList = this.state.postList; + if (!(msg.props.post_id in this.state.postList.posts)) { + return; + } - delete post_list.posts[msg.props.post_id]; - var index = post_list.order.indexOf(msg.props.post_id); - if (index > -1) post_list.order.splice(index, 1); + delete postList.posts[msg.props.post_id]; + var index = postList.order.indexOf(msg.props.post_id); + if (index > -1) { + postList.order.splice(index, 1); + } - this.setState({ post_list: post_list }); + this.setState({postList: postList}); - PostStore.storePosts(msg.channel_id, post_list); + PostStore.storePosts(msg.channel_id, postList); } else { AsyncClient.getPosts(true, msg.channel_id); } - if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() != msg.user_id) { + if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() !== msg.user_id) { $('#post_deleted').modal('show'); } - } else if (msg.action == "new_user") { + } else if (msg.action === 'new_user') { AsyncClient.getProfiles(); } }, - _onTimeChange: function() { - if (!this.state.post_list) return; - for (var id in this.state.post_list.posts) { - if (!this.refs[id]) continue; + onTimeChange: function() { + if (!this.state.postList) { + return; + } + + for (var id in this.state.postList.posts) { + if (!this.refs[id]) { + continue; + } this.refs[id].forceUpdateInfo(); } }, getMorePosts: function(e) { e.preventDefault(); - if (!this.state.post_list) return; + if (!this.state.postList) { + return; + } - var posts = this.state.post_list.posts; - var order = this.state.post_list.order; - var channel_id = this.state.channel.id; + var posts = this.state.postList.posts; + var order = this.state.postList.order; + var channelId = this.state.channel.id; - $(this.refs.loadmore.getDOMNode()).text("Retrieving more messages..."); + $(this.refs.loadmore.getDOMNode()).text('Retrieving more messages...'); var self = this; - var currentPos = $(".post-list").scrollTop; + var currentPos = $('.post-list').scrollTop; Client.getPosts( - channel_id, + channelId, order.length, Constants.POST_CHUNK_SIZE, - function(data) { - $(self.refs.loadmore.getDOMNode()).text("Load more messages"); + function success(data) { + $(self.refs.loadmore.getDOMNode()).text('Load more messages'); - if (!data) return; + if (!data) { + return; + } - if (data.order.length === 0) return; + if (data.order.length === 0) { + return; + } - var post_list = {} - post_list.posts = $.extend(posts, data.posts); - post_list.order = order.concat(data.order); + var postList = {}; + postList.posts = $.extend(posts, data.posts); + postList.order = order.concat(data.order); AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_POSTS, - id: channel_id, - post_list: post_list + id: channelId, + postList: postList }); Client.getProfiles(); - $(".post-list").scrollTop(currentPos); + $('.post-list').scrollTop(currentPos); }, - function(err) { - $(self.refs.loadmore.getDOMNode()).text("Load more messages"); - AsyncClient.dispatchError(err, "getPosts"); + function fail(err) { + $(self.refs.loadmore.getDOMNode()).text('Load more messages'); + AsyncClient.dispatchError(err, 'getPosts'); } ); }, @@ -288,81 +315,86 @@ module.exports = React.createClass({ var order = []; var posts; - var last_viewed = Number.MAX_VALUE; + var lastViewed = Number.MAX_VALUE; - if (ChannelStore.getCurrentMember() != null) - last_viewed = ChannelStore.getCurrentMember().last_viewed_at; + if (ChannelStore.getCurrentMember() != null) { + lastViewed = ChannelStore.getCurrentMember().lastViewed_at; + } - if (this.state.post_list != null) { - posts = this.state.post_list.posts; - order = this.state.post_list.order; + if (this.state.postList != null) { + posts = this.state.postList.posts; + order = this.state.postList.order; } - var rendered_last_viewed = false; + var renderedLastViewed = false; - var user_id = ""; + var userId = ''; if (UserStore.getCurrentId()) { - user_id = UserStore.getCurrentId(); + userId = UserStore.getCurrentId(); } else { return <div/>; } var channel = this.state.channel; - var more_messages = <p className="beginning-messages-text">Beginning of Channel</p>; + var moreMessages = <p className='beginning-messages-text'>Beginning of Channel</p>; - var userStyle = { color: UserStore.getCurrentUser().props.theme } + var userStyle = {color: UserStore.getCurrentUser().props.theme}; if (channel != null) { if (order.length > 0 && order.length % Constants.POST_CHUNK_SIZE === 0) { - more_messages = <a ref="loadmore" className="more-messages-text theme" href="#" onClick={this.getMorePosts}>Load more messages</a>; + moreMessages = <a ref='loadmore' className='more-messages-text theme' href='#' onClick={this.getMorePosts}>Load more messages</a>; } else if (channel.type === 'D') { - var teammate = utils.getDirectTeammate(channel.id) + var teammate = utils.getDirectTeammate(channel.id); if (teammate) { - var teammate_name = teammate.nickname.length > 0 ? teammate.nickname : teammate.username; - more_messages = ( - <div className="channel-intro"> - <div className="post-profile-img__container channel-intro-img"> - <img className="post-profile-img" src={"/api/v1/users/" + teammate.id + "/image?time=" + teammate.update_at} height="50" width="50" /> + var teammateName = teammate.username; + if (teammate.nickname.length > 0) { + teammateName = teammate.nickname; + } + + moreMessages = ( + <div className='channel-intro'> + <div className='post-profile-img__container channel-intro-img'> + <img className='post-profile-img' src={'/api/v1/users/' + teammate.id + '/image?time=' + teammate.update_at} height='50' width='50' /> </div> - <div className="channel-intro-profile"> + <div className='channel-intro-profile'> <strong><UserProfile userId={teammate.id} /></strong> </div> - <p className="channel-intro-text"> - {"This is the start of your private message history with " + teammate_name + "." }<br/> - {"Private messages and files shared here are not shown to people outside this area."} + <p className='channel-intro-text'> + {'This is the start of your private message history with ' + teammateName + '.'}<br/> + {'Private messages and files shared here are not shown to people outside this area.'} </p> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> + <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> </div> ); } else { - more_messages = ( - <div className="channel-intro"> - <p className="channel-intro-text">{"This is the start of your private message history with this " + strings.Team + "mate. Private messages and files shared here are not shown to people outside this area."}</p> + moreMessages = ( + <div className='channel-intro'> + <p className='channel-intro-text'>{'This is the start of your private message history with this ' + strings.Team + 'mate. Private messages and files shared here are not shown to people outside this area.'}</p> </div> ); } } else if (channel.type === 'P' || channel.type === 'O') { - var ui_name = channel.display_name + var uiName = channel.display_name; var members = ChannelStore.getCurrentExtraInfo().members; - var creator_name = ""; + var creatorName = ''; for (var i = 0; i < members.length; i++) { if (members[i].roles.indexOf('admin') > -1) { - creator_name = members[i].username; + creatorName = members[i].username; break; } } if (ChannelStore.isDefault(channel)) { - more_messages = ( - <div className="channel-intro"> - <h4 className="channel-intro__title">Beginning of {ui_name}</h4> - <p className="channel-intro__content"> - Welcome to {ui_name}! + moreMessages = ( + <div className='channel-intro'> + <h4 className='channel-intro__title'>Beginning of {uiName}</h4> + <p className='channel-intro__content'> + Welcome to {uiName}! <br/><br/> - {"This is the first channel " + strings.Team + "mates see when they"} + {'This is the first channel ' + strings.Team + 'mates see when they'} <br/> sign up - use it for posting updates everyone needs to know. <br/><br/> @@ -374,29 +406,44 @@ module.exports = React.createClass({ </div> ); } else if (channel.name === Constants.OFFTOPIC_CHANNEL) { - more_messages = ( - <div className="channel-intro"> - <h4 className="channel-intro__title">Beginning of {ui_name}</h4> - <p className="channel-intro__content"> - {"This is the start of " + ui_name + ", a channel for non-work-related conversations."} + moreMessages = ( + <div className='channel-intro'> + <h4 className='channel-intro__title'>Beginning of {uiName}</h4> + <p className='channel-intro__content'> + {'This is the start of ' + uiName + ', a channel for non-work-related conversations.'} <br/> </p> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> + <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={uiName} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> </div> ); } else { - var ui_type = channel.type === 'P' ? "private group" : "channel"; - more_messages = ( - <div className="channel-intro"> - <h4 className="channel-intro__title">Beginning of {ui_name}</h4> - <p className="channel-intro__content"> - { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "." - : "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." } - { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." } + var uiType; + var memberMessage; + if (channel.type === 'P') { + uiType = 'private group'; + memberMessage = ' Only invited members can see this private group.'; + } else { + uiType = 'channel'; + memberMessage = ' Any member can join and read this channel.'; + } + + var createMessage; + if (creatorName !== '') { + createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created by ' + creatorName + ' on ' + utils.displayDate(channel.create_at) + '.'; + } else { + createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.'; + } + + moreMessages = ( + <div className='channel-intro'> + <h4 className='channel-intro__title'>Beginning of {uiName}</h4> + <p className='channel-intro__content'> + {createMessage} + {memberMessage} <br/> </p> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a> + <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> + <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#channel_invite'><i className='fa fa-user-plus'></i>Invite others to this {uiType}</a> </div> ); } @@ -409,17 +456,25 @@ module.exports = React.createClass({ var previousPostDay = new Date(0); var currentPostDay; - for (var i = order.length-1; i >= 0; i--) { + for (var i = order.length - 1; i >= 0; i--) { var post = posts[order[i]]; - var parentPost = post.parent_id ? posts[post.parent_id] : null; + var parentPost = null; + if (post.parent_id) { + parentPost = posts[post.parent_id]; + } var sameUser = ''; var sameRoot = false; var hideProfilePic = false; - var prevPost = (i < order.length - 1) ? posts[order[i + 1]] : null; + var prevPost; + if (i < order.length - 1) { + prevPost = posts[order[i + 1]]; + } if (prevPost) { - sameUser = (prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000*60*5) ? "same--user" : ""; + if ((prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000 * 60 * 5)) { + sameUser = 'same--user'; + } sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id); // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post @@ -428,7 +483,7 @@ module.exports = React.createClass({ // check if it's the last comment in a consecutive string of comments on the same post // it is the last comment if it is last post in the channel or the next post has a different root post - var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i-1]].root_id != post.root_id); + var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id); var postCtl = ( <Post ref={post.id} sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id} @@ -437,21 +492,21 @@ module.exports = React.createClass({ ); currentPostDay = utils.getDateForUnixTicks(post.create_at); - if (currentPostDay.toDateString() != previousPostDay.toDateString()) { + if (currentPostDay.toDateString() !== previousPostDay.toDateString()) { postCtls.push( - <div key={currentPostDay.toDateString()} className="date-separator"> - <hr className="separator__hr" /> - <div className="separator__text">{currentPostDay.toDateString()}</div> + <div key={currentPostDay.toDateString()} className='date-separator'> + <hr className='separator__hr' /> + <div className='separator__text'>{currentPostDay.toDateString()}</div> </div> ); } - if (post.create_at > last_viewed && !rendered_last_viewed) { - rendered_last_viewed = true; + if (post.user_id !== userId && post.create_at > lastViewed && !renderedLastViewed) { + renderedLastViewed = true; postCtls.push( - <div key="unviewed" className="new-separator"> - <hr id="new_message" className="separator__hr" /> - <div className="separator__text">New Messages</div> + <div key='unviewed' className='new-separator'> + <hr id='new_message' className='separator__hr' /> + <div className='separator__text'>New Messages</div> </div> ); } @@ -459,15 +514,15 @@ module.exports = React.createClass({ previousPostDay = currentPostDay; } } else { - postCtls.push(<LoadingScreen position="absolute" />); + postCtls.push(<LoadingScreen position='absolute' />); } return ( - <div ref="postlist" className="post-list-holder-by-time"> - <div className="post-list__table"> - <div className="post-list__content"> - { more_messages } - { postCtls } + <div ref='postlist' className='post-list-holder-by-time'> + <div className='post-list__table'> + <div className='post-list__content'> + {moreMessages} + {postCtls} </div> </div> </div> diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index ad8b54012..c8c51b0c3 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -3,14 +3,17 @@ var PostStore = require('../stores/post_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); -var UserProfile = require( './user_profile.jsx' ); +var UserProfile = require('./user_profile.jsx'); var UserStore = require('../stores/user_store.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var utils = require('../utils/utils.jsx'); -var SearchBox =require('./search_bar.jsx'); -var CreateComment = require( './create_comment.jsx' ); +var SearchBox = require('./search_bar.jsx'); +var CreateComment = require('./create_comment.jsx'); var Constants = require('../utils/constants.jsx'); var FileAttachmentList = require('./file_attachment_list.jsx'); +var FileUploadOverlay = require('./file_upload_overlay.jsx'); +var client = require('../utils/client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); var ActionTypes = Constants.ActionTypes; RhsHeaderPost = React.createClass({ @@ -43,12 +46,15 @@ RhsHeaderPost = React.createClass({ }); }, render: function() { - var back = this.props.fromSearch ? <a href="#" onClick={this.handleBack} className="sidebar--right__back"><i className="fa fa-chevron-left"></i></a> : ""; + var back; + if (this.props.fromSearch) { + back = <a href='#' onClick={this.handleBack} className='sidebar--right__back'><i className='fa fa-chevron-left'></i></a>; + } return ( - <div className="sidebar--right__header"> - <span className="sidebar--right__title">{back}Message Details</span> - <button type="button" className="sidebar--right__close" aria-label="Close" onClick={this.handleClose}></button> + <div className='sidebar--right__header'> + <span className='sidebar--right__title'>{back}Message Details</span> + <button type='button' className='sidebar--right__close' aria-label='Close' onClick={this.handleClose}></button> </div> ); } @@ -58,57 +64,72 @@ RootPost = React.createClass({ render: function() { var post = this.props.post; var message = utils.textToJsx(post.message); - var isOwner = UserStore.getCurrentId() == post.user_id; + var isOwner = UserStore.getCurrentId() === post.user_id; var timestamp = UserStore.getProfile(post.user_id).update_at; var channel = ChannelStore.get(post.channel_id); - var type = "Post"; + var type = 'Post'; if (post.root_id.length > 0) { - type = "Comment"; + type = 'Comment'; } - var currentUserCss = ""; + var currentUserCss = ''; if (UserStore.getCurrentId() === post.user_id) { - currentUserCss = "current--user"; + currentUserCss = 'current--user'; } + var channelName; if (channel) { - channelName = (channel.type === 'D') ? "Private Message" : channel.display_name; + if (channel.type === 'D') { + channelName = 'Private Message'; + } else { + channelName = channel.display_name; + } + } + + var ownerOptions; + if (isOwner) { + ownerOptions = ( + <div> + <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' /> + <ul className='dropdown-menu' role='menu'> + <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> + <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={this.props.commentCount}>Delete</a></li> + </ul> + </div> + ); + } + + var fileAttachment; + if (post.filenames && post.filenames.length > 0) { + fileAttachment = ( + <FileAttachmentList + filenames={post.filenames} + modalId={'rhs_view_image_modal_' + post.id} + channelId={post.channel_id} + userId={post.user_id} /> + ); } return ( - <div className={"post post--root " + currentUserCss}> - <div className="post-right-channel__name">{ channelName }</div> - <div className="post-profile-img__container"> - <img className="post-profile-img" src={"/api/v1/users/" + post.user_id + "/image?time=" + timestamp} height="36" width="36" /> + <div className={'post post--root ' + currentUserCss}> + <div className='post-right-channel__name'>{ channelName }</div> + <div className='post-profile-img__container'> + <img className='post-profile-img' src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp} height='36' width='36' /> </div> - <div className="post__content"> - <ul className="post-header"> - <li className="post-header-col"><strong><UserProfile userId={post.user_id} /></strong></li> - <li className="post-header-col"><time className="post-right-root-time">{ utils.displayDate(post.create_at)+' '+utils.displayTime(post.create_at) }</time></li> - <li className="post-header-col post-header__reply"> - <div className="dropdown"> - { isOwner ? - <div> - <a href="#" className="dropdown-toggle theme" type="button" data-toggle="dropdown" aria-expanded="false" /> - <ul className="dropdown-menu" role="menu"> - <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#edit_post" data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> - <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#delete_post" data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={this.props.commentCount}>Delete</a></li> - </ul> - </div> - : "" } + <div className='post__content'> + <ul className='post-header'> + <li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li> + <li className='post-header-col'><time className='post-right-root-time'>{utils.displayCommentDateTime(post.create_at)}</time></li> + <li className='post-header-col post-header__reply'> + <div className='dropdown'> + {ownerOptions} </div> </li> </ul> - <div className="post-body"> + <div className='post-body'> <p>{message}</p> - { post.filenames && post.filenames.length > 0 ? - <FileAttachmentList - filenames={post.filenames} - modalId={"rhs_view_image_modal_" + post.id} - channelId={post.channel_id} - userId={post.user_id} /> - : "" } + {fileAttachment} </div> </div> <hr /> @@ -118,56 +139,104 @@ RootPost = React.createClass({ }); CommentPost = React.createClass({ - render: function() { + retryComment: function(e) { + e.preventDefault(); + var post = this.props.post; + client.createPost(post, post.channel_id, + function success(data) { + AsyncClient.getPosts(true); + + var channel = ChannelStore.get(post.channel_id); + var member = ChannelStore.getMember(post.channel_id); + member.msg_count = channel.total_msg_count; + member.last_viewed_at = (new Date()).getTime(); + ChannelStore.setChannelMember(member); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST, + post: data + }); + }.bind(this), + function fail() { + post.state = Constants.POST_FAILED; + PostStore.updatePendingPost(post); + this.forceUpdate(); + }.bind(this) + ); - var commentClass = "post"; + post.state = Constants.POST_LOADING; + PostStore.updatePendingPost(post); + this.forceUpdate(); + }, + render: function() { + var post = this.props.post; - var currentUserCss = ""; + var currentUserCss = ''; if (UserStore.getCurrentId() === post.user_id) { - currentUserCss = "current--user"; + currentUserCss = 'current--user'; } - var isOwner = UserStore.getCurrentId() == post.user_id; + var isOwner = UserStore.getCurrentId() === post.user_id; - var type = "Post" + var type = 'Post'; if (post.root_id.length > 0) { - type = "Comment" + type = 'Comment'; } var message = utils.textToJsx(post.message); var timestamp = UserStore.getCurrentUser().update_at; + var loading; + var postClass = ''; + if (post.state === Constants.POST_FAILED) { + postClass += ' post-fail'; + loading = <a className='theme post-retry pull-right' href='#' onClick={this.retryComment}>Retry</a>; + } else if (post.state === Constants.POST_LOADING) { + postClass += ' post-waiting'; + loading = <img className='post-loading-gif pull-right' src='/static/images/load.gif'/>; + } + + var ownerOptions; + if (isOwner && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) { + ownerOptions = ( + <div className='dropdown' onClick={function(e){$('.post-list-holder-by-time').scrollTop($('.post-list-holder-by-time').scrollTop() + 50);}}> + <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' /> + <ul className='dropdown-menu' role='menu'> + <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> + <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={0}>Delete</a></li> + </ul> + </div> + ); + } + + var fileAttachment; + if (post.filenames && post.filenames.length > 0) { + fileAttachment = ( + <FileAttachmentList + filenames={post.filenames} + modalId={'rhs_comment_view_image_modal_' + post.id} + channelId={post.channel_id} + userId={post.user_id} /> + ); + } + return ( - <div className={commentClass + " " + currentUserCss}> - <div className="post-profile-img__container"> - <img className="post-profile-img" src={"/api/v1/users/" + post.user_id + "/image?time=" + timestamp} height="36" width="36" /> + <div className={'post ' + currentUserCss}> + <div className='post-profile-img__container'> + <img className='post-profile-img' src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp} height='36' width='36' /> </div> - <div className="post__content"> - <ul className="post-header"> - <li className="post-header-col"><strong><UserProfile userId={post.user_id} /></strong></li> - <li className="post-header-col"><time className="post-right-comment-time">{ utils.displayDateTime(post.create_at) }</time></li> - <li className="post-header-col post-header__reply"> - { isOwner ? - <div className="dropdown" onClick={function(e){$('.post-list-holder-by-time').scrollTop($(".post-list-holder-by-time").scrollTop() + 50);}}> - <a href="#" className="dropdown-toggle theme" type="button" data-toggle="dropdown" aria-expanded="false" /> - <ul className="dropdown-menu" role="menu"> - <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#edit_post" data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> - <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#delete_post" data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={0}>Delete</a></li> - </ul> - </div> - : "" } + <div className='post__content'> + <ul className='post-header'> + <li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li> + <li className='post-header-col'><time className='post-right-comment-time'>{utils.displayCommentDateTime(post.create_at)}</time></li> + <li className='post-header-col post-header__reply'> + {ownerOptions} </li> </ul> - <div className="post-body"> - <p>{message}</p> - { post.filenames && post.filenames.length > 0 ? - <FileAttachmentList - filenames={post.filenames} - modalId={"rhs_comment_view_image_modal_" + post.id} - channelId={post.channel_id} - userId={post.user_id} /> - : "" } + <div className='post-body'> + <p className={postClass}>{loading}{message}</p> + {fileAttachment} </div> </div> </div> @@ -176,31 +245,45 @@ CommentPost = React.createClass({ }); function getStateFromStores() { - return { post_list: PostStore.getSelectedPost() }; + var postList = PostStore.getSelectedPost(); + if (!postList || postList.order.length < 1) { + return {postList: {}}; + } + + var channelId = postList.posts[postList.order[0]].channel_id; + var pendingPostList = PostStore.getPendingPosts(channelId); + + if (pendingPostList) { + for (var pid in pendingPostList.posts) { + postList.posts[pid] = pendingPostList.posts[pid]; + } + } + + return {postList: postList}; } module.exports = React.createClass({ componentDidMount: function() { - PostStore.addSelectedPostChangeListener(this._onChange); - PostStore.addChangeListener(this._onChangeAll); - UserStore.addStatusesChangeListener(this._onTimeChange); + PostStore.addSelectedPostChangeListener(this.onChange); + PostStore.addChangeListener(this.onChangeAll); + UserStore.addStatusesChangeListener(this.onTimeChange); this.resize(); var self = this; - $(window).resize(function(){ + $(window).resize(function() { self.resize(); }); }, componentDidUpdate: function() { - $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight); - $(".post-right__scroll").perfectScrollbar('update'); + $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); + $('.post-right__scroll').perfectScrollbar('update'); this.resize(); }, componentWillUnmount: function() { - PostStore.removeSelectedPostChangeListener(this._onChange); - PostStore.removeChangeListener(this._onChangeAll); - UserStore.removeStatusesChangeListener(this._onTimeChange); + PostStore.removeSelectedPostChangeListener(this.onChange); + PostStore.removeChangeListener(this.onChangeAll); + UserStore.removeStatusesChangeListener(this.onTimeChange); }, - _onChange: function() { + onChange: function() { if (this.isMounted()) { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { @@ -208,24 +291,22 @@ module.exports = React.createClass({ } } }, - _onChangeAll: function() { + onChangeAll: function() { if (this.isMounted()) { - // if something was changed in the channel like adding a // comment or post then lets refresh the sidebar list var currentSelected = PostStore.getSelectedPost(); - if (!currentSelected || currentSelected.order.length == 0) { + if (!currentSelected || currentSelected.order.length === 0) { return; } var currentPosts = PostStore.getPosts(currentSelected.posts[currentSelected.order[0]].channel_id); - if (!currentPosts || currentPosts.order.length == 0) { + if (!currentPosts || currentPosts.order.length === 0) { return; } - - if (currentPosts.posts[currentPosts.order[0]].channel_id == currentSelected.posts[currentSelected.order[0]].channel_id) { + if (currentPosts.posts[currentPosts.order[0]].channel_id === currentSelected.posts[currentSelected.order[0]].channel_id) { currentSelected.posts = {}; for (var postId in currentPosts.posts) { currentSelected.posts[postId] = currentPosts.posts[postId]; @@ -237,9 +318,11 @@ module.exports = React.createClass({ this.setState(getStateFromStores()); } }, - _onTimeChange: function() { - for (var id in this.state.post_list.posts) { - if (!this.refs[id]) continue; + onTimeChange: function() { + for (var id in this.state.postList.posts) { + if (!this.refs[id]) { + continue; + } this.refs[id].forceUpdate(); } }, @@ -248,66 +331,70 @@ module.exports = React.createClass({ }, resize: function() { var height = $(window).height() - $('#error_bar').outerHeight() - 100; - $(".post-right__scroll").css("height", height + "px"); - $(".post-right__scroll").scrollTop(100000); - $(".post-right__scroll").perfectScrollbar(); - $(".post-right__scroll").perfectScrollbar('update'); + $('.post-right__scroll').css('height', height + 'px'); + $('.post-right__scroll').scrollTop(100000); + $('.post-right__scroll').perfectScrollbar(); + $('.post-right__scroll').perfectScrollbar('update'); }, render: function() { + var postList = this.state.postList; - var post_list = this.state.post_list; - - if (post_list == null) { + if (postList == null) { return ( <div></div> ); } - var selected_post = post_list.posts[post_list.order[0]]; - var root_post = null; + var selectedPost = postList.posts[postList.order[0]]; + var rootPost = null; - if (selected_post.root_id == "") { - root_post = selected_post; - } - else { - root_post = post_list.posts[selected_post.root_id]; + if (selectedPost.root_id === '') { + rootPost = selectedPost; + } else { + rootPost = postList.posts[selectedPost.root_id]; } - var posts_array = []; + var postsArray = []; - for (var postId in post_list.posts) { - var cpost = post_list.posts[postId]; - if (cpost.root_id == root_post.id) { - posts_array.push(cpost); + for (var postId in postList.posts) { + var cpost = postList.posts[postId]; + if (cpost.root_id === rootPost.id) { + postsArray.push(cpost); } } - posts_array.sort(function(a,b) { - if (a.create_at < b.create_at) + postsArray.sort(function postSort(a, b) { + if (a.create_at < b.create_at) { return -1; - if (a.create_at > b.create_at) + } + if (a.create_at > b.create_at) { return 1; + } return 0; }); - var results = this.state.results; var currentId = UserStore.getCurrentId(); - var searchForm = currentId == null ? null : <SearchBox />; + var searchForm; + if (currentId != null) { + searchForm = <SearchBox />; + } return ( - <div className="post-right__container"> - <div className="search-bar__container sidebar--right__search-header">{searchForm}</div> - <div className="sidebar-right__body"> + <div className='post-right__container'> + <FileUploadOverlay + overlayType='right' /> + <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div> + <div className='sidebar-right__body'> <RhsHeaderPost fromSearch={this.props.fromSearch} isMentionSearch={this.props.isMentionSearch} /> - <div className="post-right__scroll"> - <RootPost post={root_post} commentCount={posts_array.length}/> - <div className="post-right-comments-container"> - { posts_array.map(function(cpost) { - return <CommentPost ref={cpost.id} key={cpost.id} post={cpost} selected={ (cpost.id == selected_post.id) } /> + <div className='post-right__scroll'> + <RootPost post={rootPost} commentCount={postsArray.length}/> + <div className='post-right-comments-container'> + {postsArray.map(function mapPosts(comPost) { + return <CommentPost ref={comPost.id} key={comPost.id} post={comPost} selected={(comPost.id === selectedPost.id)} />; })} </div> - <div className="post-create__container"> - <CreateComment channelId={root_post.channel_id} rootId={root_post.id} /> + <div className='post-create__container'> + <CreateComment channelId={rootPost.channel_id} rootId={rootPost.id} /> </div> </div> </div> diff --git a/web/react/components/setting_item_min.jsx b/web/react/components/setting_item_min.jsx index 2209c74d1..3c87e416e 100644 --- a/web/react/components/setting_item_min.jsx +++ b/web/react/components/setting_item_min.jsx @@ -2,12 +2,23 @@ // See License.txt for license information. module.exports = React.createClass({ + displayName: 'SettingsItemMin', + propTypes: { + title: React.PropTypes.string, + disableOpen: React.PropTypes.bool, + updateSection: React.PropTypes.func, + describe: React.PropTypes.string + }, render: function() { + var editButton = ''; + if (!this.props.disableOpen) { + editButton = <li className='col-sm-2 section-edit'><a className='section-edit theme' href='#' onClick={this.props.updateSection}>Edit</a></li>; + } return ( - <ul className="section-min"> - <li className="col-sm-10 section-title">{this.props.title}</li> - <li className="col-sm-2 section-edit"><a className="section-edit theme" href="#" onClick={this.props.updateSection}>Edit</a></li> - <li className="col-sm-7 section-describe">{this.props.describe}</li> + <ul className='section-min'> + <li className='col-sm-10 section-title'>{this.props.title}</li> + {editButton} + <li className='col-sm-7 section-describe'>{this.props.describe}</li> </ul> ); } diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 80e3632c7..d79505e9e 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -1,8 +1,8 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); +var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var SocketStore = require('../stores/socket_store.jsx'); var UserStore = require('../stores/user_store.jsx'); @@ -11,9 +11,7 @@ var BrowserStore = require('../stores/browser_store.jsx'); var utils = require('../utils/utils.jsx'); var SidebarHeader = require('./sidebar_header.jsx'); var SearchBox = require('./search_bar.jsx'); - var Constants = require('../utils/constants.jsx'); -var ActionTypes = Constants.ActionTypes; function getStateFromStores() { var members = ChannelStore.getAllMembers(); @@ -70,13 +68,14 @@ function getStateFromStores() { tempChannel.status = UserStore.getStatus(teammate.id); tempChannel.last_post_at = 0; tempChannel.total_msg_count = 0; + tempChannel.type = 'D'; readDirectChannels.push(tempChannel); } } // If we don't have MAX_DMS unread channels, sort the read list by last_post_at if (showDirectChannels.length < Constants.MAX_DMS) { - readDirectChannels.sort(function(a, b) { + readDirectChannels.sort(function sortByLastPost(a, b) { // sort by last_post_at first if (a.last_post_at > b.last_post_at) { return -1; @@ -124,10 +123,15 @@ function getStateFromStores() { module.exports = React.createClass({ displayName: 'Sidebar', + propTypes: { + teamType: React.PropTypes.string, + teamDisplayName: React.PropTypes.string + }, componentDidMount: function() { ChannelStore.addChangeListener(this.onChange); UserStore.addChangeListener(this.onChange); UserStore.addStatusesChangeListener(this.onChange); + TeamStore.addChangeListener(this.onChange); SocketStore.addChangeListener(this.onSocketChange); $('.nav-pills__container').perfectScrollbar(); @@ -146,6 +150,7 @@ module.exports = React.createClass({ ChannelStore.removeChangeListener(this.onChange); UserStore.removeChangeListener(this.onChange); UserStore.removeStatusesChangeListener(this.onChange); + TeamStore.removeChangeListener(this.onChange); SocketStore.removeChangeListener(this.onSocketChange); }, onChange: function() { @@ -242,17 +247,17 @@ module.exports = React.createClass({ var channel = ChannelStore.getCurrent(); if (channel) { if (channel.type === 'D') { - var teammate_username = utils.getDirectTeammate(channel.id).username; - document.title = teammate_username + ' ' + document.title.substring(document.title.lastIndexOf('-')); + var teammateUsername = utils.getDirectTeammate(channel.id).username; + document.title = teammateUsername + ' ' + document.title.substring(document.title.lastIndexOf('-')); } else { document.title = channel.display_name + ' ' + document.title.substring(document.title.lastIndexOf('-')); } } }, - onScroll: function(e) { + onScroll: function() { this.updateUnreadIndicators(); }, - onResize: function(e) { + onResize: function() { this.updateUnreadIndicators(); }, updateUnreadIndicators: function() { @@ -280,7 +285,10 @@ module.exports = React.createClass({ } }, getInitialState: function() { - return getStateFromStores(); + var newState = getStateFromStores(); + newState.loadingDMChannel = -1; + + return newState; }, render: function() { var members = this.state.members; @@ -292,8 +300,9 @@ module.exports = React.createClass({ this.firstUnreadChannel = null; this.lastUnreadChannel = null; - function createChannelElement(channel) { + function createChannelElement(channel, index) { var channelMember = members[channel.id]; + var msgCount; var linkClass = ''; if (channel.id === activeId) { @@ -302,7 +311,7 @@ module.exports = React.createClass({ var unread = false; if (channelMember) { - var msgCount = channel.total_msg_count - channelMember.msg_count; + msgCount = channel.total_msg_count - channelMember.msg_count; unread = (msgCount > 0 && channelMember.notify_level !== 'quiet') || channelMember.mention_count > 0; } @@ -320,7 +329,7 @@ module.exports = React.createClass({ if (channelMember) { if (channel.type === 'D') { // direct message channels show badges for any number of unread posts - var msgCount = channel.total_msg_count - channelMember.msg_count; + msgCount = channel.total_msg_count - channelMember.msg_count; if (msgCount > 0) { badge = <span className='badge pull-right small'>{msgCount}</span>; badgesActive = true; @@ -330,6 +339,8 @@ module.exports = React.createClass({ badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>; badgesActive = true; } + } else if (self.state.loadingDMChannel === index && channel.type === 'D') { + badge = <img className='channel-loading-gif pull-right' src='/static/images/load.gif'/>; } // set up status icon for direct message channels @@ -347,38 +358,59 @@ module.exports = React.createClass({ } // set up click handler to switch channels (or create a new channel for non-existant ones) - var clickHandler = null; - var href; + var handleClick = null; + var href = '#'; + var teamURL = TeamStore.getCurrentTeamUrl(); + if (!channel.fake) { - clickHandler = function(e) { + handleClick = function clickHandler(e) { e.preventDefault(); utils.switchChannel(channel); }; - href = '#'; - } else { - href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; + } else if (channel.fake && teamURL) { + // It's a direct message channel that doesn't exist yet so let's create it now + var otherUserId = utils.getUserIdFromChannelName(channel); + + if (self.state.loadingDMChannel === -1) { + handleClick = function clickHandler(e) { + e.preventDefault(); + self.setState({loadingDMChannel: index}); + + Client.createDirectChannel(channel, otherUserId, + function success(data) { + self.setState({loadingDMChannel: -1}); + AsyncClient.getChannel(data.id); + utils.switchChannel(data); + }, + function error() { + self.setState({loadingDMChannel: -1}); + window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; + } + ); + }; + } } return ( <li key={channel.name} ref={channel.name} className={linkClass}> - <a className={'sidebar-channel ' + titleClass} href={href} onClick={clickHandler}> + <a className={'sidebar-channel ' + titleClass} href={href} onClick={handleClick}> {status} - {badge} {channel.display_name} + {badge} </a> </li> ); - }; + } // create elements for all 3 types of channels var channelItems = this.state.channels.filter( - function(channel) { + function filterPublicChannels(channel) { return channel.type === 'O'; } ).map(createChannelElement); var privateChannelItems = this.state.channels.filter( - function(channel) { + function filterPrivateChannels(channel) { return channel.type === 'P'; } ).map(createChannelElement); @@ -407,7 +439,7 @@ module.exports = React.createClass({ directMessageMore = ( <li> <a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}> - {'More ('+this.state.hideDirectChannels.length+')'} + {'More (' + this.state.hideDirectChannels.length + ')'} </a> </li> ); 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/components/user_settings.jsx b/web/react/components/user_settings.jsx index a5fa01dc9..8f29bbe57 100644 --- a/web/react/components/user_settings.jsx +++ b/web/react/components/user_settings.jsx @@ -13,6 +13,7 @@ var assign = require('object-assign'); function getNotificationsStateFromStores() { var user = UserStore.getCurrentUser(); + var soundNeeded = !utils.isBrowserFirefox(); var sound = (!user.notify_props || user.notify_props.desktop_sound == undefined) ? "true" : user.notify_props.desktop_sound; var desktop = (!user.notify_props || user.notify_props.desktop == undefined) ? "all" : user.notify_props.desktop; var email = (!user.notify_props || user.notify_props.email == undefined) ? "true" : user.notify_props.email; @@ -58,7 +59,7 @@ function getNotificationsStateFromStores() { } } - return { notify_level: desktop, enable_email: email, enable_sound: sound, username_key: username_key, mention_key: mention_key, custom_keys: custom_keys, custom_keys_checked: custom_keys.length > 0, first_name_key: first_name_key, all_key: all_key, channel_key: channel_key }; + return { notify_level: desktop, enable_email: email, soundNeeded: soundNeeded, enable_sound: sound, username_key: username_key, mention_key: mention_key, custom_keys: custom_keys, custom_keys_checked: custom_keys.length > 0, first_name_key: first_name_key, all_key: all_key, channel_key: channel_key }; } @@ -235,7 +236,7 @@ var NotificationsTab = React.createClass({ } var soundSection; - if (this.props.activeSection === 'sound') { + if (this.props.activeSection === 'sound' && this.state.soundNeeded) { var soundActive = ["",""]; if (this.state.enable_sound === "false") { soundActive[1] = "active"; @@ -265,7 +266,9 @@ var NotificationsTab = React.createClass({ ); } else { var describe = ""; - if (this.state.enable_sound === "false") { + if (!this.state.soundNeeded) { + describe = "Please configure notification sounds in your browser settings" + } else if (this.state.enable_sound === "false") { describe = "Off"; } else { describe = "On"; @@ -276,6 +279,7 @@ var NotificationsTab = React.createClass({ title="Desktop notification sounds" describe={describe} updateSection={function(){self.props.updateSection("sound");}} + disableOpen = {!this.state.soundNeeded} /> ); } diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 929499715..0eeb5fb65 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -34,6 +34,7 @@ var ChannelInfoModal = require('../components/channel_info_modal.jsx'); var AccessHistoryModal = require('../components/access_history_modal.jsx'); var ActivityLogModal = require('../components/activity_log_modal.jsx'); var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx') +var FileUploadOverlay = require('../components/file_upload_overlay.jsx'); var AsyncClient = require('../utils/async_client.jsx'); @@ -54,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( @@ -224,4 +226,10 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann document.getElementById('removed_from_channel_modal') ); + React.render( + <FileUploadOverlay + overlayType='center' />, + document.getElementById('file_upload_overlay') + ); + }; diff --git a/web/react/stores/browser_store.jsx b/web/react/stores/browser_store.jsx index 4eed754cc..436b8d76d 100644 --- a/web/react/stores/browser_store.jsx +++ b/web/react/stores/browser_store.jsx @@ -3,7 +3,9 @@ var UserStore; function getPrefix() { - if (!UserStore) UserStore = require('./user_store.jsx'); + if (!UserStore) { + UserStore = require('./user_store.jsx'); + } return UserStore.getCurrentId() + '_'; } @@ -11,15 +13,15 @@ function getPrefix() { var BROWSER_STORE_VERSION = '.4'; module.exports = { - _initialized: false, + initialized: false, - _initialize: function() { - var currentVersion = localStorage.getItem("local_storage_version"); + initialize: function() { + var currentVersion = localStorage.getItem('local_storage_version'); if (currentVersion !== BROWSER_STORE_VERSION) { this.clear(); - localStorage.setItem("local_storage_version", BROWSER_STORE_VERSION); + localStorage.setItem('local_storage_version', BROWSER_STORE_VERSION); } - this._initialized = true; + this.initialized = true; }, getItem: function(name, defaultValue) { @@ -31,19 +33,25 @@ module.exports = { }, removeItem: function(name) { - if (!this._initialized) this._initialize(); + if (!this.initialized) { + this.initialize(); + } localStorage.removeItem(getPrefix() + name); }, setGlobalItem: function(name, value) { - if (!this._initialized) this._initialize(); + if (!this.initialized) { + this.initialize(); + } localStorage.setItem(name, JSON.stringify(value)); }, getGlobalItem: function(name, defaultValue) { - if (!this._initialized) this._initialize(); + if (!this.initialized) { + this.initialize(); + } var result = null; try { @@ -58,7 +66,9 @@ module.exports = { }, removeGlobalItem: function(name) { - if (!this._initialized) this._initialize(); + if (!this.initialized) { + this.initialize(); + } localStorage.removeItem(name); }, @@ -70,10 +80,12 @@ module.exports = { /** * Preforms the given action on each item that has the given prefix - * Signiture for action is action(key, value) + * Signature for action is action(key, value) */ - actionOnItemsWithPrefix: function (prefix, action) { - if (!this._initialized) this._initialize(); + actionOnItemsWithPrefix: function(prefix, action) { + if (!this.initialized) { + this.initialize(); + } var globalPrefix = getPrefix(); var globalPrefixiLen = globalPrefix.length; @@ -87,14 +99,14 @@ module.exports = { isLocalStorageSupported: function() { try { - sessionStorage.setItem("testSession", '1'); - sessionStorage.removeItem("testSession"); + sessionStorage.setItem('testSession', '1'); + sessionStorage.removeItem('testSession'); - localStorage.setItem("testLocal", '1'); - if (localStorage.getItem("testLocal") != '1') { + localStorage.setItem('testLocal', '1'); + if (localStorage.getItem('testLocal') !== '1') { return false; } - localStorage.removeItem("testLocal", '1'); + localStorage.removeItem('testLocal', '1'); return true; } catch (e) { diff --git a/web/react/stores/post_store.jsx b/web/react/stores/post_store.jsx index 9ebdf734c..3e4fde30a 100644 --- a/web/react/stores/post_store.jsx +++ b/web/react/stores/post_store.jsx @@ -19,7 +19,6 @@ var MENTION_DATA_CHANGE_EVENT = 'mention_data_change'; var ADD_MENTION_EVENT = 'add_mention'; var PostStore = assign({}, EventEmitter.prototype, { - emitChange: function emitChange() { this.emit(CHANGE_EVENT); }, @@ -110,6 +109,108 @@ var PostStore = assign({}, EventEmitter.prototype, { getPosts: function getPosts(channelId) { return BrowserStore.getItem('posts_' + channelId); }, + storePost: function(post) { + this.pStorePost(post); + this.emitChange(); + }, + pStorePost: function(post) { + var postList = PostStore.getPosts(post.channel_id); + if (!postList) { + return; + } + + if (post.pending_post_id !== '') { + this.removePendingPost(post.channel_id, post.pending_post_id); + } + + post.pending_post_id = ''; + + postList.posts[post.id] = post; + if (postList.order.indexOf(post.id) === -1) { + postList.order.unshift(post.id); + } + + this.pStorePosts(post.channel_id, postList); + }, + storePendingPost: function(post) { + post.state = Constants.POST_LOADING; + + var postList = this.getPendingPosts(post.channel_id); + if (!postList) { + postList = {posts: {}, order: []}; + } + + postList.posts[post.pending_post_id] = post; + postList.order.unshift(post.pending_post_id); + this._storePendingPosts(post.channel_id, postList); + this.emitChange(); + }, + _storePendingPosts: function(channelId, postList) { + var posts = postList.posts; + + // sort failed posts to the bottom + postList.order.sort(function postSort(a, b) { + if (posts[a].state === Constants.POST_LOADING && posts[b].state === Constants.POST_FAILED) { + return 1; + } + if (posts[a].state === Constants.POST_FAILED && posts[b].state === Constants.POST_LOADING) { + return -1; + } + + if (posts[a].create_at > posts[b].create_at) { + return -1; + } + if (posts[a].create_at < posts[b].create_at) { + return 1; + } + + return 0; + }); + + BrowserStore.setItem('pending_posts_' + channelId, postList); + }, + getPendingPosts: function(channelId) { + return BrowserStore.getItem('pending_posts_' + channelId); + }, + removePendingPost: function(channelId, pendingPostId) { + this._removePendingPost(channelId, pendingPostId); + this.emitChange(); + }, + _removePendingPost: function(channelId, pendingPostId) { + var postList = this.getPendingPosts(channelId); + if (!postList) { + return; + } + + if (pendingPostId in postList.posts) { + delete postList.posts[pendingPostId]; + } + var index = postList.order.indexOf(pendingPostId); + if (index >= 0) { + postList.order.splice(index, 1); + } + + this._storePendingPosts(channelId, postList); + }, + clearPendingPosts: function() { + BrowserStore.actionOnItemsWithPrefix('pending_posts_', function clearPending(key) { + BrowserStore.removeItem(key); + }); + }, + updatePendingPost: function(post) { + var postList = this.getPendingPosts(post.channel_id); + if (!postList) { + postList = {posts: {}, order: []}; + } + + if (postList.order.indexOf(post.pending_post_id) === -1) { + return; + } + + postList.posts[post.pending_post_id] = post; + this._storePendingPosts(post.channel_id, postList); + this.emitChange(); + }, storeSearchResults: function storeSearchResults(results, isMentionSearch) { BrowserStore.setItem('search_results', results); BrowserStore.setItem('is_mention_search', Boolean(isMentionSearch)); @@ -181,6 +282,10 @@ PostStore.dispatchToken = AppDispatcher.register(function registry(payload) { PostStore.pStorePosts(action.id, action.post_list); PostStore.emitChange(); break; + case ActionTypes.RECIEVED_POST: + PostStore.pStorePost(action.post); + PostStore.emitChange(); + break; case ActionTypes.RECIEVED_SEARCH: PostStore.storeSearchResults(action.results, action.is_mention_search); PostStore.emitSearchChange(); diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx index 8ebb854c9..c3c331828 100644 --- a/web/react/stores/socket_store.jsx +++ b/web/react/stores/socket_store.jsx @@ -15,72 +15,80 @@ var CHANGE_EVENT = 'change'; var conn; var SocketStore = assign({}, EventEmitter.prototype, { - initialize: function(self) { - if (!UserStore.getCurrentId()) return; - - if (!self) self = this; - self.setMaxListeners(0); - - if (window["WebSocket"] && !conn) { - var protocol = window.location.protocol == "https:" ? "wss://" : "ws://"; - var port = window.location.protocol == "https:" ? ":8443" : ""; - var conn_url = protocol + location.host + port + "/api/v1/websocket"; - console.log("connecting to " + conn_url); - conn = new WebSocket(conn_url); - - conn.onclose = function(evt) { - console.log("websocket closed"); - console.log(evt); - conn = null; - setTimeout(function(){self.initialize(self)}, 3000); - }; - - conn.onerror = function(evt) { - console.log("websocket error"); - console.log(evt); - }; - - conn.onmessage = function(evt) { - AppDispatcher.handleServerAction({ - type: ActionTypes.RECIEVED_MSG, - msg: JSON.parse(evt.data) - }); - }; - } - }, - emitChange: function(msg) { - this.emit(CHANGE_EVENT, msg); - }, - addChangeListener: function(callback) { - this.on(CHANGE_EVENT, callback); - }, - removeChangeListener: function(callback) { - this.removeListener(CHANGE_EVENT, callback); - }, - sendMessage: function (msg) { - if (conn && conn.readyState === WebSocket.OPEN) { - conn.send(JSON.stringify(msg)); - } else if (!conn || conn.readyState === WebSocket.Closed) { - conn = null; - this.initialize(); + initialize: function() { + if (!UserStore.getCurrentId()) { + return; + } + + var self = this; + self.setMaxListeners(0); + + if (window.WebSocket && !conn) { + var protocol = 'ws://'; + var port = ''; + if (window.location.protocol === 'https:') { + protocol = 'wss://'; + port = ':8443'; + } + var connUrl = protocol + location.host + port + '/api/v1/websocket'; + console.log('connecting to ' + connUrl); + conn = new WebSocket(connUrl); + + conn.onclose = function closeConn(evt) { + console.log('websocket closed'); + console.log(evt); + conn = null; + setTimeout( + function reconnect() { + self.initialize(); + }, + 3000 + ); + }; + + conn.onerror = function connError(evt) { + console.log('websocket error'); + console.log(evt); + }; + + conn.onmessage = function connMessage(evt) { + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_MSG, + msg: JSON.parse(evt.data) + }); + }; + } + }, + emitChange: function(msg) { + this.emit(CHANGE_EVENT, msg); + }, + addChangeListener: function(callback) { + this.on(CHANGE_EVENT, callback); + }, + removeChangeListener: function(callback) { + this.removeListener(CHANGE_EVENT, callback); + }, + sendMessage: function(msg) { + if (conn && conn.readyState === WebSocket.OPEN) { + conn.send(JSON.stringify(msg)); + } else if (!conn || conn.readyState === WebSocket.Closed) { + conn = null; + this.initialize(); + } } - } }); SocketStore.dispatchToken = AppDispatcher.register(function(payload) { - var action = payload.action; + var action = payload.action; - switch(action.type) { - case ActionTypes.RECIEVED_MSG: - SocketStore.emitChange(action.msg); - break; - default: - } + switch (action.type) { + case ActionTypes.RECIEVED_MSG: + SocketStore.emitChange(action.msg); + break; + + default: + } }); SocketStore.initialize(); module.exports = SocketStore; - - - - diff --git a/web/react/stores/team_store.jsx b/web/react/stores/team_store.jsx index e6380d19e..3f2248c44 100644 --- a/web/react/stores/team_store.jsx +++ b/web/react/stores/team_store.jsx @@ -13,89 +13,94 @@ var CHANGE_EVENT = 'change'; var utils; function getWindowLocationOrigin() { - if (!utils) utils = require('../utils/utils.jsx'); + if (!utils) { + utils = require('../utils/utils.jsx'); + } return utils.getWindowLocationOrigin(); } var TeamStore = assign({}, EventEmitter.prototype, { - emitChange: function() { - this.emit(CHANGE_EVENT); - }, - addChangeListener: function(callback) { - this.on(CHANGE_EVENT, callback); - }, - removeChangeListener: function(callback) { - this.removeListener(CHANGE_EVENT, callback); - }, - get: function(id) { - var c = this._getTeams(); - return c[id]; - }, - getByName: function(name) { - var current = null; - var t = this._getTeams(); + emitChange: function() { + this.emit(CHANGE_EVENT); + }, + addChangeListener: function(callback) { + this.on(CHANGE_EVENT, callback); + }, + removeChangeListener: function(callback) { + this.removeListener(CHANGE_EVENT, callback); + }, + get: function(id) { + var c = this.pGetTeams(); + return c[id]; + }, + getByName: function(name) { + var t = this.pGetTeams(); - for (id in t) { - if (t[id].name == name) { - return t[id]; + for (var id in t) { + if (t[id].name === name) { + return t[id]; + } } - } - return null; - }, - getAll: function() { - return this._getTeams(); - }, - setCurrentId: function(id) { - if (id == null) - BrowserStore.removeItem("current_team_id"); - else - BrowserStore.setItem("current_team_id", id); - }, - getCurrentId: function() { - return BrowserStore.getItem("current_team_id"); - }, - getCurrent: function() { - var currentId = TeamStore.getCurrentId(); + return null; + }, + getAll: function() { + return this.pGetTeams(); + }, + setCurrentId: function(id) { + if (id === null) { + BrowserStore.removeItem('current_team_id'); + } else { + BrowserStore.setItem('current_team_id', id); + } + }, + getCurrentId: function() { + return BrowserStore.getItem('current_team_id'); + }, + getCurrent: function() { + var currentId = TeamStore.getCurrentId(); - if (currentId != null) - return this.get(currentId); - else - return null; - }, - getCurrentTeamUrl: function() { - return getWindowLocationOrigin() + "/" + this.getCurrent().name; - }, - storeTeam: function(team) { - var teams = this._getTeams(); - teams[team.id] = team; - this._storeTeams(teams); - }, - _storeTeams: function(teams) { - BrowserStore.setItem("user_teams", teams); - }, - _getTeams: function() { - return BrowserStore.getItem("user_teams", {}); - } + if (currentId !== null) { + return this.get(currentId); + } + return null; + }, + getCurrentTeamUrl: function() { + if (this.getCurrent()) { + return getWindowLocationOrigin() + '/' + this.getCurrent().name; + } + return null; + }, + storeTeam: function(team) { + var teams = this.pGetTeams(); + teams[team.id] = team; + this.pStoreTeams(teams); + }, + pStoreTeams: function(teams) { + BrowserStore.setItem('user_teams', teams); + }, + pGetTeams: function() { + return BrowserStore.getItem('user_teams', {}); + } }); -TeamStore.dispatchToken = AppDispatcher.register(function(payload) { - var action = payload.action; +TeamStore.dispatchToken = AppDispatcher.register(function registry(payload) { + var action = payload.action; - switch(action.type) { + switch (action.type) { - case ActionTypes.CLICK_TEAM: - TeamStore.setCurrentId(action.id); - TeamStore.emitChange(); - break; + case ActionTypes.CLICK_TEAM: + TeamStore.setCurrentId(action.id); + TeamStore.emitChange(); + break; - case ActionTypes.RECIEVED_TEAM: - TeamStore.storeTeam(action.team); - TeamStore.emitChange(); - break; + case ActionTypes.RECIEVED_TEAM: + TeamStore.storeTeam(action.team); + TeamStore.emitChange(); + break; - default: - } + default: + } }); module.exports = TeamStore; 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..349fe9021 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -346,24 +346,33 @@ module.exports.search = function(terms) { module.exports.getPosts = function(force, id, maxPosts) { if (PostStore.getCurrentPosts() == null || force) { - var channelId = id ? id : ChannelStore.getCurrentId(); + var channelId = id; + if (channelId == null) { + channelId = ChannelStore.getCurrentId(); + } - if (isCallInProgress('getPosts_'+channelId)) return; + if (isCallInProgress('getPosts_' + channelId)) { + return; + } - var post_list = PostStore.getCurrentPosts(); + var postList = PostStore.getCurrentPosts(); - if (!maxPosts) { maxPosts = Constants.POST_CHUNK_SIZE * Constants.MAX_POST_CHUNKS }; + var max = maxPosts; + if (max == null) { + max = Constants.POST_CHUNK_SIZE * Constants.MAX_POST_CHUNKS; + } // if we already have more than POST_CHUNK_SIZE posts, // let's get the amount we have but rounded up to next multiple of POST_CHUNK_SIZE, // with a max at maxPosts - var numPosts = Math.min(maxPosts, Constants.POST_CHUNK_SIZE); - if (post_list && post_list.order.length > 0) { - numPosts = Math.min(maxPosts, Constants.POST_CHUNK_SIZE * Math.ceil(post_list.order.length / Constants.POST_CHUNK_SIZE)); + var numPosts = Math.min(max, Constants.POST_CHUNK_SIZE); + if (postList && postList.order.length > 0) { + numPosts = Math.min(max, Constants.POST_CHUNK_SIZE * Math.ceil(postList.order.length / Constants.POST_CHUNK_SIZE)); } if (channelId != null) { - callTracker['getPosts_'+channelId] = utils.getTimestamp(); + callTracker['getPosts_' + channelId] = utils.getTimestamp(); + client.getPosts( channelId, 0, @@ -383,7 +392,7 @@ module.exports.getPosts = function(force, id, maxPosts) { dispatchError(err, 'getPosts'); }, function() { - callTracker['getPosts_'+channelId] = 0; + callTracker['getPosts_' + channelId] = 0; } ); } @@ -396,7 +405,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..da0b74081 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) { @@ -429,6 +438,23 @@ module.exports.createChannel = function(channel, success, error) { module.exports.track('api', 'api_channels_create', channel.type, 'name', channel.name); }; +module.exports.createDirectChannel = function(channel, userId, success, error) { + $.ajax({ + url: '/api/v1/channels/create_direct', + dataType: 'json', + contentType: 'application/json', + type: 'POST', + data: JSON.stringify({user_id: userId}), + success: success, + error: function(xhr, status, err) { + var e = handleError('createDirectChannel', xhr, status, err); + error(e); + } + }); + + module.exports.track('api', 'api_channels_create_direct', channel.type, 'name', channel.name); +}; + module.exports.updateChannel = function(channel, success, error) { $.ajax({ url: "/api/v1/channels/update", diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 508de9185..41b02c8d6 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -15,6 +15,7 @@ module.exports = { RECIEVED_CHANNEL_EXTRA_INFO: null, RECIEVED_POSTS: null, + RECIEVED_POST: null, RECIEVED_SEARCH: null, RECIEVED_POST_SELECTED: null, RECIEVED_MENTION_DATA: null, @@ -58,8 +59,12 @@ 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, + POST_LOADING: "loading", + POST_FAILED: "failed", RESERVED_TEAM_NAMES: [ "www", "web", diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 7591c138f..618cc1557 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -124,8 +124,10 @@ module.exports.notifyMe = function(title, body, channel) { } module.exports.ding = function() { - var audio = new Audio('/static/images/ding.mp3'); - audio.play(); + if (!module.exports.isBrowserFirefox()) { + var audio = new Audio('/static/images/ding.mp3'); + audio.play(); + } } module.exports.getUrlParameter = function(sParam) { @@ -190,6 +192,10 @@ module.exports.displayDateTime = function(ticks) { } +module.exports.displayCommentDateTime = function(ticks) { + return module.exports.displayDate(ticks) + ' ' + module.exports.displayTime(ticks); +} + // returns Unix timestamp in milliseconds module.exports.getTimestamp = function() { return Date.now(); @@ -855,6 +861,20 @@ module.exports.changeColor =function(col, amt) { return (usePound?"#":"") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6); }; +module.exports.changeOpacity = function(oldColor, opacity) { + + var col = oldColor; + if (col[0] === '#') { + col = col.slice(1); + } + + var r = parseInt(col.substring(0, 2), 16); + var g = parseInt(col.substring(2, 4), 16); + var b = parseInt(col.substring(4, 6), 16); + + return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')'; +}; + module.exports.getFullName = function(user) { if (user.first_name && user.last_name) { return user.first_name + " " + user.last_name; @@ -945,3 +965,20 @@ module.exports.generateId = function() { return id; }; + +module.exports.isBrowserFirefox = function() { + return navigator && navigator.userAgent && navigator.userAgent.toLowerCase().indexOf('firefox') > -1; +}; + +// Used to get the id of the other user from a DM channel +module.exports.getUserIdFromChannelName = function(channel) { + var ids = channel.name.split('__'); + var otherUserId = ''; + if (ids[0] === UserStore.getCurrentId()) { + otherUserId = ids[1]; + } else { + otherUserId = ids[0]; + } + + return otherUserId; +}; diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 78006ff18..5b68b488f 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -24,6 +24,7 @@ body { height: 100%; > .row.main { height: 100%; + position: relative; } } > .container-fluid { diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index ca06d7def..70f440989 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -10,7 +10,7 @@ display: inline-block; width: 120px; height: 100px; - margin: 7px 10px 0 0; + margin: 7px 0 0 5px; vertical-align: top; position: relative; border: 1px solid #DDD; @@ -18,6 +18,9 @@ &:hover .remove-preview:after { @include opacity(1); } + &:first-child { + margin-left: 0; + } .spinner { position:absolute; top:50%; @@ -58,6 +61,8 @@ cursor: pointer; z-index: 5; opacity: inherit; + text-shadow: 0 0px 3px #444; + text-shadow: 0 0px 3px rgba(0, 0, 0, 0.7); } } } @@ -193,11 +198,12 @@ border-right: 1px solid #ddd; vertical-align: center; - // helper to center the image icon in the preview window - .file-details__preview-helper { - height: 100%; - display: inline-block; - vertical-align: middle; - } - } + // helper to center the image icon in the preview window + .file-details__preview-helper { + height: 100%; + display: inline-block; + vertical-align: middle; } + } +} + diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss index c84befd6a..a723a4c1f 100644 --- a/web/sass-files/sass/partials/_get-link.scss +++ b/web/sass-files/sass/partials/_get-link.scss @@ -1,6 +1,6 @@ .copy-link-confirm { - position: fixed; - color: rgb(153, 230, 153); - top: 84%; - left: 130px; + display: inline-block; + float: left; + padding: 4px 10px; + margin: 3px 0 0 10px; }
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index a8c4dec26..aa893c535 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -55,7 +55,7 @@ font-size: 20px; text-align: center; color: #555; - @include border-radius(3px); + @include border-radius(32px); } .mention-fullname { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 98b17120d..e665be6b9 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -106,6 +106,32 @@ body.ios { } } +.file-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + text-align: center; + color: #FFF; + display: table; + font-size: 1.7em; + font-weight: 600; + z-index: 6; + + > div { + display: table-cell; + vertical-align: middle; + } + + .fa { + display: block; + font-size: 2em; + margin: 0 0 0.3em; + } +} + #post-list { .post-list-holder-by-time { background: #fff; @@ -214,9 +240,6 @@ body.ios { .dropdown, .comment-icon__container { @include opacity(1); } - .dropdown-toggle:after { - content: '[...]'; - } } background: #f5f5f5; } @@ -292,6 +315,21 @@ body.ios { font-size: 0.97em; white-space: pre-wrap; } + + .post-loading-gif { + height:10px; + width:10px; + margin-top:6px; + } + + .post-fail { + color: #D58A8A; + } + + .post-waiting { + color: #999; + } + .comment-icon__container { margin-left: 7px; fill: $primary-color; @@ -383,6 +421,9 @@ body.ios { display: inline-block; @include opacity(0); } + .dropdown-toggle:after { + content: '[...]'; + } } } .post-profile-time { diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 4cf3e32a1..da5bcbad2 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -11,8 +11,8 @@ .post { &.post--root { - padding: 0 1em 0; - margin: 1em 0; + padding: 1em 1em 0; + margin: 0 0 1em; hr { border-color: #DDD; margin: 1em 0 0 0; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index f28df1f89..733d81c2b 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -189,6 +189,9 @@ } @media screen and (max-width: 960px) { + .center-file-overlay { + font-size: 1.5em; + } .post { .post-header .post-header-col.post-header__reply { .comment-icon__container__hide { @@ -240,6 +243,9 @@ } } @media screen and (max-width: 768px) { + .center-file-overlay { + font-size: 1.3em; + } .date-separator, .new-separator { &.hovered--after { &:before { diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 5d866715e..6d9f2ad8b 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -6,6 +6,7 @@ border-right: $border-gray; padding: 0 0 2em 0; background: #fafafa; + z-index: 5; &.sidebar--padded { padding-top: 44px; } @@ -26,7 +27,9 @@ .status { position:relative; top:1px; - margin-right: 3px; + margin-right: 6px; + width: 12px; + display: inline-block; .online--icon { fill: #7DBE00; } @@ -79,6 +82,9 @@ line-height: 1.5; border-radius: 0; color: #999; + &.nav-more { + text-decoration: underline; + } &.unread-title { color: #333; font-weight: 600; @@ -116,3 +122,9 @@ } } } + +.channel-loading-gif { + height:15px; + width:15px; + margin-top:2px; +} diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss index 3a6f73316..ddf2aab88 100644 --- a/web/sass-files/sass/partials/_signup.scss +++ b/web/sass-files/sass/partials/_signup.scss @@ -186,6 +186,23 @@ display: inline-block; } } + &.google { + background: #dd4b39; + &:hover { + background: darken(#dd4b39, 10%); + } + span { + vertical-align: middle; + } + .icon { + background: url("../images/googleLogo.png"); + width: 18px; + height: 18px; + margin-right: 8px; + @include background-size(100% 100%); + display: inline-block; + } + } } &.btn-default { color: #444; diff --git a/web/static/images/googleLogo.png b/web/static/images/googleLogo.png Binary files differnew file mode 100644 index 000000000..932d755db --- /dev/null +++ b/web/static/images/googleLogo.png diff --git a/web/static/js/jquery-dragster/LICENSE b/web/static/js/jquery-dragster/LICENSE new file mode 100644 index 000000000..b8b51dc0b --- /dev/null +++ b/web/static/js/jquery-dragster/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Jan Martin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/web/static/js/jquery-dragster/README.md b/web/static/js/jquery-dragster/README.md new file mode 100644 index 000000000..1c28adaf0 --- /dev/null +++ b/web/static/js/jquery-dragster/README.md @@ -0,0 +1,17 @@ +Include [jquery.dragster.js](https://rawgithub.com/catmanjan/jquery-dragster/master/jquery.dragster.js) in page. + +Works in IE. + +```javascript +$('.element').dragster({ + enter: function (dragsterEvent, event) { + $(this).addClass('hover'); + }, + leave: function (dragsterEvent, event) { + $(this).removeClass('hover'); + }, + drop: function (dragsterEvent, event) { + $(this).removeClass('hover'); + } +}); +```
\ No newline at end of file diff --git a/web/static/js/jquery-dragster/jquery.dragster.js b/web/static/js/jquery-dragster/jquery.dragster.js new file mode 100644 index 000000000..db73fe3f0 --- /dev/null +++ b/web/static/js/jquery-dragster/jquery.dragster.js @@ -0,0 +1,85 @@ +// 1.0.3 +/* +The MIT License (MIT) + +Copyright (c) 2015 Jan Martin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ +(function ($) { + + $.fn.dragster = function (options) { + var settings = $.extend({ + enter: $.noop, + leave: $.noop, + over: $.noop, + drop: $.noop + }, options); + + return this.each(function () { + var first = false, + second = false, + $this = $(this); + + $this.on({ + dragenter: function (event) { + if (first) { + second = true; + return; + } else { + first = true; + $this.trigger('dragster:enter', event); + } + event.preventDefault(); + }, + dragleave: function (event) { + if (second) { + second = false; + } else if (first) { + first = false; + } + if (!first && !second) { + $this.trigger('dragster:leave', event); + } + event.preventDefault(); + }, + dragover: function (event) { + $this.trigger('dragster:over', event); + event.preventDefault(); + }, + drop: function (event) { + if (second) { + second = false; + } else if (first) { + first = false; + } + if (!first && !second) { + $this.trigger('dragster:drop', event); + } + event.preventDefault(); + }, + 'dragster:enter': settings.enter, + 'dragster:leave': settings.leave, + 'dragster:over': settings.over, + 'dragster:drop': settings.drop + }); + }); + }; + +}(jQuery)); diff --git a/web/templates/channel.html b/web/templates/channel.html index da6fed97d..9bfd1fa35 100644 --- a/web/templates/channel.html +++ b/web/templates/channel.html @@ -14,6 +14,7 @@ <div id="navbar"></div> </div> <div class="row main"> + <div id="file_upload_overlay"></div> <div id="app-content" class="app__content"> <div id="channel-header"></div> <div id="post-list"></div> diff --git a/web/templates/head.html b/web/templates/head.html index 7a7d4fe8e..dd5e9f46e 100644 --- a/web/templates/head.html +++ b/web/templates/head.html @@ -32,6 +32,8 @@ <script src="/static/js/perfect-scrollbar-0.6.3.jquery.js"></script> + <script src="/static/js/jquery-dragster/jquery.dragster.js"></script> + <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script> <script type="text/javascript" src="https://cloudfront.loggly.com/js/loggly.tracker.js" async></script> diff --git a/web/web.go b/web/web.go index 8b329c149..d6f8d553b 100644 --- a/web/web.go +++ b/web/web.go @@ -53,13 +53,13 @@ func InitWeb() { mainrouter.Handle("/{team:[A-Za-z0-9-]+(__)?[A-Za-z0-9-]+}/", api.AppHandler(login)).Methods("GET") mainrouter.Handle("/{team:[A-Za-z0-9-]+(__)?[A-Za-z0-9-]+}/login", api.AppHandler(login)).Methods("GET") - // Bug in gorilla.mux pervents us from using regex here. + // Bug in gorilla.mux prevents us from using regex here. mainrouter.Handle("/{team}/login/{service}", api.AppHandler(loginWithOAuth)).Methods("GET") mainrouter.Handle("/login/{service:[A-Za-z]+}/complete", api.AppHandlerIndependent(loginCompleteOAuth)).Methods("GET") mainrouter.Handle("/{team:[A-Za-z0-9-]+(__)?[A-Za-z0-9-]+}/logout", api.AppHandler(logout)).Methods("GET") mainrouter.Handle("/{team:[A-Za-z0-9-]+(__)?[A-Za-z0-9-]+}/reset_password", api.AppHandler(resetPassword)).Methods("GET") - // Bug in gorilla.mux pervents us from using regex here. + // Bug in gorilla.mux prevents us from using regex here. mainrouter.Handle("/{team}/channels/{channelname}", api.UserRequired(getChannel)).Methods("GET") // Anything added here must have an _ in it so it does not conflict with team names @@ -67,7 +67,7 @@ func InitWeb() { mainrouter.Handle("/signup_user_complete/", api.AppHandlerIndependent(signupUserComplete)).Methods("GET") mainrouter.Handle("/signup_team_confirm/", api.AppHandlerIndependent(signupTeamConfirm)).Methods("GET") - // Bug in gorilla.mux pervents us from using regex here. + // Bug in gorilla.mux prevents us from using regex here. mainrouter.Handle("/{team}/signup/{service}", api.AppHandler(signupWithOAuth)).Methods("GET") mainrouter.Handle("/signup/{service:[A-Za-z]+}/complete", api.AppHandlerIndependent(signupCompleteOAuth)).Methods("GET") @@ -496,7 +496,7 @@ func signupWithOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) { redirectUri := c.GetSiteURL() + "/signup/" + service + "/complete" - api.GetAuthorizationCode(c, w, r, teamName, service, redirectUri) + api.GetAuthorizationCode(c, w, r, teamName, service, redirectUri, "") } func signupCompleteOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) { @@ -505,26 +505,10 @@ func signupCompleteOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) code := r.URL.Query().Get("code") state := r.URL.Query().Get("state") - teamName := r.FormValue("team") - uri := c.GetSiteURL() + "/signup/" + service + "/complete?team=" + teamName + uri := c.GetSiteURL() + "/signup/" + service + "/complete" - if len(teamName) == 0 { - c.Err = model.NewAppError("signupCompleteOAuth", "Invalid team name", "team_name="+teamName) - c.Err.StatusCode = http.StatusBadRequest - return - } - - // Make sure team exists - var team *model.Team - if result := <-api.Srv.Store.Team().GetByName(teamName); result.Err != nil { - c.Err = result.Err - return - } else { - team = result.Data.(*model.Team) - } - - if body, err := api.AuthorizeOAuthUser(service, code, state, uri); err != nil { + if body, team, err := api.AuthorizeOAuthUser(service, code, state, uri); err != nil { c.Err = err return } else { @@ -532,6 +516,9 @@ func signupCompleteOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) if service == model.USER_AUTH_SERVICE_GITLAB { glu := model.GitLabUserFromJson(body) user = model.UserFromGitLabUser(glu) + } else if service == model.USER_AUTH_SERVICE_GOOGLE { + gu := model.GoogleUserFromJson(body) + user = model.UserFromGoogleUser(gu) } if user == nil { @@ -563,6 +550,7 @@ func loginWithOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) { params := mux.Vars(r) service := params["service"] teamName := params["team"] + loginHint := r.URL.Query().Get("login_hint") if len(teamName) == 0 { c.Err = model.NewAppError("loginWithOAuth", "Invalid team name", "team_name="+teamName) @@ -578,7 +566,7 @@ func loginWithOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) { redirectUri := c.GetSiteURL() + "/login/" + service + "/complete" - api.GetAuthorizationCode(c, w, r, teamName, service, redirectUri) + api.GetAuthorizationCode(c, w, r, teamName, service, redirectUri, loginHint) } func loginCompleteOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) { @@ -587,26 +575,10 @@ func loginCompleteOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) code := r.URL.Query().Get("code") state := r.URL.Query().Get("state") - teamName := r.FormValue("team") - uri := c.GetSiteURL() + "/login/" + service + "/complete?team=" + teamName - - if len(teamName) == 0 { - c.Err = model.NewAppError("loginCompleteOAuth", "Invalid team name", "team_name="+teamName) - c.Err.StatusCode = http.StatusBadRequest - return - } - - // Make sure team exists - var team *model.Team - if result := <-api.Srv.Store.Team().GetByName(teamName); result.Err != nil { - c.Err = result.Err - return - } else { - team = result.Data.(*model.Team) - } + uri := c.GetSiteURL() + "/login/" + service + "/complete" - if body, err := api.AuthorizeOAuthUser(service, code, state, uri); err != nil { + if body, team, err := api.AuthorizeOAuthUser(service, code, state, uri); err != nil { c.Err = err return } else { @@ -614,6 +586,9 @@ func loginCompleteOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) if service == model.USER_AUTH_SERVICE_GITLAB { glu := model.GitLabUserFromJson(body) authData = glu.GetAuthData() + } else if service == model.USER_AUTH_SERVICE_GOOGLE { + gu := model.GoogleUserFromJson(body) + authData = gu.GetAuthData() } if len(authData) == 0 { |
