summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--api/user.go89
-rw-r--r--api/user_test.go12
-rw-r--r--config/config.json10
-rw-r--r--model/gitlab.go57
-rw-r--r--model/google.go60
-rw-r--r--model/post.go31
-rw-r--r--model/user.go68
-rw-r--r--store/sql_session_store.go19
-rw-r--r--store/store.go1
-rw-r--r--utils/config.go1
-rw-r--r--web/react/components/channel_loader.jsx17
-rw-r--r--web/react/components/create_comment.jsx63
-rw-r--r--web/react/components/create_post.jsx90
-rw-r--r--web/react/components/file_upload.jsx101
-rw-r--r--web/react/components/file_upload_overlay.jsx26
-rw-r--r--web/react/components/get_link_modal.jsx2
-rw-r--r--web/react/components/login.jsx103
-rw-r--r--web/react/components/post.jsx48
-rw-r--r--web/react/components/post_body.jsx71
-rw-r--r--web/react/components/post_info.jsx85
-rw-r--r--web/react/components/post_list.jsx443
-rw-r--r--web/react/components/post_right.jsx341
-rw-r--r--web/react/components/setting_item_min.jsx19
-rw-r--r--web/react/components/sidebar.jsx13
-rw-r--r--web/react/components/signup_user_complete.jsx28
-rw-r--r--web/react/components/signup_user_oauth.jsx5
-rw-r--r--web/react/components/user_settings.jsx10
-rw-r--r--web/react/pages/channel.jsx16
-rw-r--r--web/react/stores/browser_store.jsx48
-rw-r--r--web/react/stores/post_store.jsx107
-rw-r--r--web/react/stores/socket_store.jsx128
-rw-r--r--web/react/stores/team_store.jsx143
-rw-r--r--web/react/stores/user_store.jsx14
-rw-r--r--web/react/utils/async_client.jsx29
-rw-r--r--web/react/utils/client.jsx15
-rw-r--r--web/react/utils/constants.jsx5
-rw-r--r--web/react/utils/utils.jsx24
-rw-r--r--web/sass-files/sass/partials/_base.scss1
-rw-r--r--web/sass-files/sass/partials/_files.scss22
-rw-r--r--web/sass-files/sass/partials/_get-link.scss8
-rw-r--r--web/sass-files/sass/partials/_mentions.scss2
-rw-r--r--web/sass-files/sass/partials/_post.scss47
-rw-r--r--web/sass-files/sass/partials/_post_right.scss4
-rw-r--r--web/sass-files/sass/partials/_responsive.scss6
-rw-r--r--web/sass-files/sass/partials/_sidebar--left.scss8
-rw-r--r--web/sass-files/sass/partials/_signup.scss17
-rw-r--r--web/static/images/googleLogo.pngbin0 -> 3519 bytes
-rw-r--r--web/static/js/jquery-dragster/LICENSE21
-rw-r--r--web/static/js/jquery-dragster/README.md17
-rw-r--r--web/static/js/jquery-dragster/jquery.dragster.js85
-rw-r--r--web/templates/channel.html1
-rw-r--r--web/templates/head.html2
-rw-r--r--web/web.go57
53 files changed, 1814 insertions, 826 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 924b78c57..3b10926f5 100644
--- a/web/react/components/get_link_modal.jsx
+++ b/web/react/components/get_link_modal.jsx
@@ -35,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) {
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/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..c210853ac 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,127 @@ 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({postList: postList});
}
+ PostStore.storePosts(post.channel_id, postList);
+ } 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 +321,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 +412,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 +462,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 +489,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 +498,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 +520,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..175e1080d 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.displayDate(post.create_at) + ' ' + utils.displayTime(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.displayDateTime(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..6735bd6e5 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -128,6 +128,7 @@ module.exports = React.createClass({
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 +147,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() {
@@ -348,23 +350,24 @@ 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 href = '#';
+ var teamURL = TeamStore.getCurrentTeamUrl();
if (!channel.fake) {
clickHandler = function(e) {
e.preventDefault();
utils.switchChannel(channel);
};
- href = '#';
- } else {
- href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
+ }
+ if (channel.fake && teamURL){
+ href = teamURL + '/channels/' + channel.name;
}
return (
<li key={channel.name} ref={channel.name} className={linkClass}>
<a className={'sidebar-channel ' + titleClass} href={href} onClick={clickHandler}>
{status}
- {badge}
{channel.display_name}
+ {badge}
</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..ce044457a 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -279,24 +279,33 @@ module.exports.getAudits = function(userId, success, error) {
});
};
-module.exports.getMe = function(success, error) {
+module.exports.getMeSynchronous = function(success, error) {
+ var currentUser = null;
$.ajax({
+ async: false,
url: "/api/v1/users/me",
dataType: 'json',
contentType: 'application/json',
type: 'GET',
- success: success,
+ success: function gotUser(data, textStatus, xhr) {
+ currentUser = data;
+ if (success) {
+ success(data, textStatus, xhr);
+ }
+ },
error: function(xhr, status, err) {
var ieChecker = window.navigator.userAgent; // This and the condition below is used to check specifically for browsers IE10 & 11 to suppress a 200 'OK' error from appearing on login
if (xhr.status != 200 || !(ieChecker.indexOf("Trident/7.0") > 0 || ieChecker.indexOf("Trident/6.0") > 0)) {
if (error) {
- e = handleError("getMe", xhr, status, err);
+ e = handleError('getMeSynchronous', xhr, status, err);
error(e);
};
};
}
});
+
+ return currentUser;
};
module.exports.inviteMembers = function(data, success, error) {
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 508de9185..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..32793809d 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) {
@@ -855,6 +857,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 +961,7 @@ module.exports.generateId = function() {
return id;
};
+
+module.exports.isBrowserFirefox = function() {
+ return navigator && navigator.userAgent && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+}
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..bf2a1de50 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;
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
new file mode 100644
index 000000000..932d755db
--- /dev/null
+++ b/web/static/images/googleLogo.png
Binary files differ
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 {