summaryrefslogtreecommitdiffstats
path: root/web/react
diff options
context:
space:
mode:
Diffstat (limited to 'web/react')
-rw-r--r--web/react/components/channel_header.jsx2
-rw-r--r--web/react/components/channel_loader.jsx1
-rw-r--r--web/react/components/create_comment.jsx2
-rw-r--r--web/react/components/create_post.jsx2
-rw-r--r--web/react/components/invite_member_modal.jsx14
-rw-r--r--web/react/components/login.jsx14
-rw-r--r--web/react/components/navbar.jsx2
-rw-r--r--web/react/components/post_list.jsx30
-rw-r--r--web/react/components/settings_sidebar.jsx13
-rw-r--r--web/react/components/sidebar_header.jsx3
-rw-r--r--web/react/components/sidebar_right_menu.jsx2
-rw-r--r--web/react/components/signup_team_complete.jsx13
-rw-r--r--web/react/components/signup_user_complete.jsx10
-rw-r--r--web/react/components/team_settings.jsx161
-rw-r--r--web/react/components/team_settings_modal.jsx (renamed from web/react/components/settings_modal.jsx)14
-rw-r--r--web/react/components/user_settings.jsx5
-rw-r--r--web/react/components/user_settings_modal.jsx68
-rw-r--r--web/react/components/view_image.jsx2
-rw-r--r--web/react/pages/channel.jsx15
-rw-r--r--web/react/stores/team_store.jsx100
-rw-r--r--web/react/utils/async_client.jsx24
-rw-r--r--web/react/utils/client.jsx31
-rw-r--r--web/react/utils/constants.jsx3
-rw-r--r--web/react/utils/utils.jsx21
24 files changed, 496 insertions, 56 deletions
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
index 006c168ba..ade58a10a 100644
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -201,7 +201,7 @@ module.exports = React.createClass({
</a>
<ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown">
<li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_info" data-channelid={this.state.channel.id} href="#">View Info</a></li>
- <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Invite Members</a></li>
+ <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li>
{ isAdmin ?
<li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li>
: ""
diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx
index 5252f275c..537a41d03 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -18,6 +18,7 @@ module.exports = React.createClass({
AsyncClient.getChannelExtraInfo(true);
AsyncClient.findTeams();
AsyncClient.getStatuses();
+ AsyncClient.getMyTeam();
/* End of async loads */
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 9bcbad079..cb7aa371c 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -145,7 +145,7 @@ module.exports = React.createClass({
onUserInput={this.handleUserInput}
onKeyPress={this.commentMsgKeyPress}
messageText={this.state.messageText}
- createMessage="Create a comment..."
+ createMessage="Add a comment..."
initialText=""
id="reply_textbox"
ref="textbox" />
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index a534e495d..5a0b6f85f 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -248,7 +248,7 @@ module.exports = React.createClass({
onUserInput={this.handleUserInput}
onKeyPress={this.postMsgKeyPress}
messageText={this.state.messageText}
- createMessage="Create a post..."
+ createMessage="Write a message..."
channelId={this.state.channel_id}
id="post_textbox"
ref="textbox" />
diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx
index 5980664de..d1672126d 100644
--- a/web/react/components/invite_member_modal.jsx
+++ b/web/react/components/invite_member_modal.jsx
@@ -57,7 +57,7 @@ module.exports = React.createClass({
if (config.AllowInviteNames) {
invite.first_name = this.refs["first_name"+index].getDOMNode().value.trim();
- if (!invite.first_name ) {
+ if (!invite.first_name && config.RequireInviteNames) {
first_name_errors[index] = "This is a required field";
valid = false;
} else {
@@ -65,7 +65,7 @@ module.exports = React.createClass({
}
invite.last_name = this.refs["last_name"+index].getDOMNode().value.trim();
- if (!invite.last_name ) {
+ if (!invite.last_name && config.RequireInviteNames) {
last_name_errors[index] = "This is a required field";
valid = false;
} else {
@@ -125,10 +125,12 @@ module.exports = React.createClass({
});
},
removeInviteFields: function(index) {
+ var count = this.state.id_count;
var invite_ids = this.state.invite_ids;
var i = invite_ids.indexOf(index);
- if (index > -1) invite_ids.splice(i, 1);
- this.setState({ invite_ids: invite_ids });
+ if (i > -1) invite_ids.splice(i, 1);
+ if (!invite_ids.length) invite_ids.push(++count);
+ this.setState({ invite_ids: invite_ids, id_count: count });
},
getInitialState: function() {
return {
@@ -154,11 +156,9 @@ module.exports = React.createClass({
invite_sections[index] = (
<div key={"key" + index}>
- { i ?
<div>
- <button type="button" className="btn remove__member" onClick={function(){self.removeInviteFields(index);}}>×</button>
+ <button type="button" className="btn remove__member" onClick={this.removeInviteFields.bind(this, index)}>×</button>
</div>
- : ""}
<div className={ email_error ? "form-group invite has-error" : "form-group invite" }>
<input onKeyUp={this.displayNameKeyUp} type="text" ref={"email"+index} className="form-control" placeholder="email@domain.com" maxLength="64" />
{ email_error }
diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx
index 65f1da1f8..85df5f797 100644
--- a/web/react/components/login.jsx
+++ b/web/react/components/login.jsx
@@ -21,6 +21,12 @@ var FindTeamDomain = React.createClass({
return;
}
+ if (!utils.isLocalStorageSupported()) {
+ state.server_error = "This service requires local storage to be enabled. Please enable it or exit private browsing.";
+ this.setState(state);
+ return;
+ }
+
state.server_error = "";
this.setState(state);
@@ -94,7 +100,7 @@ module.exports = React.createClass({
return;
}
- var email = this.refs.email.getDOMNode().value.trim();
+ var email = this.refs.email.getDOMNode().value.trim();
if (!email) {
state.server_error = "An email is required"
this.setState(state);
@@ -108,6 +114,12 @@ module.exports = React.createClass({
return;
}
+ if (!utils.isLocalStorageSupported()) {
+ state.server_error = "This service requires local storage to be enabled. Please enable it or exit private browsing.";
+ this.setState(state);
+ return;
+ }
+
state.server_error = "";
this.setState(state);
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 3821c2772..35f7d9044 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -301,7 +301,7 @@ module.exports = React.createClass({
<span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span>
</a>
<ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown">
- <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Invite Members</a></li>
+ <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li>
{ isAdmin ?
<li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li>
: ""
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 65247b705..37e3faef2 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -125,12 +125,12 @@ module.exports = React.createClass({
$('body').on('mouseenter mouseleave', '.post', function(ev){
if(ev.type === 'mouseenter'){
- $(this).parent('div').prev('.date-seperator').addClass('hovered--after');
- $(this).parent('div').next('.date-seperator').addClass('hovered--before');
+ $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
+ $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before');
}
else {
- $(this).parent('div').prev('.date-seperator').removeClass('hovered--after');
- $(this).parent('div').next('.date-seperator').removeClass('hovered--before');
+ $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after');
+ $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before');
}
});
@@ -389,7 +389,7 @@ module.exports = React.createClass({
<div className="channel-intro">
<h4 className="channel-intro-title">Welcome</h4>
<p>
- { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "."
+ { 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." }
<br/>
@@ -434,9 +434,9 @@ module.exports = React.createClass({
currentPostDay = utils.getDateForUnixTicks(post.create_at);
if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) {
postCtls.push(
- <div className="date-seperator">
- <hr className="date-seperator__hr" />
- <div className="date-seperator__text">{currentPostDay.toDateString()}</div>
+ <div className="date-separator">
+ <hr className="separator__hr" />
+ <div className="separator__text">{currentPostDay.toDateString()}</div>
</div>
);
}
@@ -444,17 +444,13 @@ module.exports = React.createClass({
if (post.create_at > last_viewed && !rendered_last_viewed) {
rendered_last_viewed = true;
postCtls.push(
- <div>
- <div className="new-seperator">
- <hr id="new_message" className="new-seperator__hr" />
- <div className="new-seperator__text">New Messages</div>
- </div>
- {postCtl}
- </div>
+ <div className="new-separator">
+ <hr id="new_message" className="separator__hr" />
+ <div className="separator__text">New Messages</div>
+ </div>
);
- } else {
- postCtls.push(postCtl);
}
+ postCtls.push(postCtl);
previousPostDay = utils.getDateForUnixTicks(post.create_at);
}
diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx
index a1546890f..ae8510cf2 100644
--- a/web/react/components/settings_sidebar.jsx
+++ b/web/react/components/settings_sidebar.jsx
@@ -1,6 +1,8 @@
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
+var utils = require('../utils/utils.jsx');
+
module.exports = React.createClass({
updateTab: function(tab) {
this.props.updateTab(tab);
@@ -11,16 +13,11 @@ module.exports = React.createClass({
return (
<div className="">
<ul className="nav nav-pills nav-stacked">
- <li className={this.props.activeTab == 'general' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("general");}}><i className="glyphicon glyphicon-cog"></i>General</a></li>
- <li className={this.props.activeTab == 'security' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("security");}}><i className="glyphicon glyphicon-lock"></i>Security</a></li>
- <li className={this.props.activeTab == 'notifications' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("notifications");}}><i className="glyphicon glyphicon-exclamation-sign"></i>Notifications</a></li>
- <li className={this.props.activeTab == 'appearance' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("appearance");}}><i className="glyphicon glyphicon-wrench"></i>Appearance</a></li>
+ {this.props.tabs.map(function(tab) {
+ return <li className={self.props.activeTab == tab.name ? 'active' : ''}><a href="#" onClick={function(){self.updateTab(tab.name);}}><i className={tab.icon}></i>{tab.ui_name}</a></li>
+ })}
</ul>
</div>
);
- /* Temporarily removing sessions and activity logs
- <li className={this.props.activeTab == 'sessions' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("sessions");}}><i className="glyphicon glyphicon-globe"></i>Sessions</a></li>
- <li className={this.props.activeTab == 'activity_log' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("activity_log");}}><i className="glyphicon glyphicon-time"></i>Activity Log</a></li>
- */
}
});
diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx
index 5a872b7a0..0b59d2036 100644
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -94,7 +94,8 @@ var NavbarDropdown = React.createClass({
<i className="dropdown__icon"></i>
</a>
<ul className="dropdown-menu" role="menu">
- <li><a href="#" data-toggle="modal" data-target="#settings_modal">Account Settings</a></li>
+ <li><a href="#" data-toggle="modal" data-target="#user_settings1">Account Settings</a></li>
+ { isAdmin ? <li><a href="#" data-toggle="modal" data-target="#team_settings">Team Settings</a></li> : "" }
{ invite_link }
{ team_link }
{ manage_link }
diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx
index d0c139d1a..c523ce554 100644
--- a/web/react/components/sidebar_right_menu.jsx
+++ b/web/react/components/sidebar_right_menu.jsx
@@ -59,7 +59,7 @@ module.exports = React.createClass({
<div className="nav-pills__container">
<ul className="nav nav-pills nav-stacked">
- <li><a href="#" data-toggle="modal" data-target="#settings_modal"><i className="glyphicon glyphicon-cog"></i>Account Settings</a></li>
+ <li><a href="#" data-toggle="modal" data-target="#user_settings1"><i className="glyphicon glyphicon-cog"></i>Account Settings</a></li>
{ invite_link }
{ team_link }
{ manage_link }
diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx
index 65f4c9e0a..30fe92af5 100644
--- a/web/react/components/signup_team_complete.jsx
+++ b/web/react/components/signup_team_complete.jsx
@@ -9,6 +9,10 @@ var constants = require('../utils/constants.jsx')
WelcomePage = React.createClass({
submitNext: function (e) {
+ if (!utils.isLocalStorageSupported()) {
+ this.setState({ storage_error: "This service requires local storage to be enabled. Please enable it or exit private browsing."} );
+ return;
+ }
e.preventDefault();
this.props.state.wizard = "team_name";
this.props.updateParent(this.props.state);
@@ -26,6 +30,12 @@ WelcomePage = React.createClass({
if (!email || !utils.isEmail(email)) {
state.email_error = "Please enter a valid email address";
this.setState(state);
+ return;
+ }
+ else if (!utils.isLocalStorageSupported()) {
+ state.email_error = "This service requires local storage to be enabled. Please enable it or exit private browsing.";
+ this.setState(state);
+ return;
}
else {
state.email_error = "";
@@ -50,6 +60,7 @@ WelcomePage = React.createClass({
client.track('signup', 'signup_team_01_welcome');
+ var storage_error = this.state.storage_error ? <label className="control-label">{ this.state.storage_error }</label> : null;
var email_error = this.state.email_error ? <label className="control-label">{ this.state.email_error }</label> : null;
var server_error = this.state.server_error ? <div className={ "form-group has-error" }><label className="control-label">{ this.state.server_error }</label></div> : null;
@@ -66,6 +77,7 @@ WelcomePage = React.createClass({
</p>
<div className="form-group">
<button className="btn-primary btn form-group" onClick={this.submitNext}><i className="glyphicon glyphicon-ok"></i>Yes, this address is correct</button>
+ { storage_error }
</div>
<hr />
<p>If this is not correct, you can switch to a different email. We'll send you a new invite right away.</p>
@@ -496,6 +508,7 @@ PasswordPage = React.createClass({
return;
}
+ this.setState({name_error: ""});
$('#finish-button').button('loading');
var teamSignup = JSON.parse(JSON.stringify(this.props.state));
teamSignup.user.password = password;
diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index 146419cf5..b9f32f0bc 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -13,16 +13,16 @@ module.exports = React.createClass({
this.state.user.username = this.refs.name.getDOMNode().value.trim();
if (!this.state.user.username) {
- this.setState({name_error: "This field is required", email_error: "", password_error: ""});
+ this.setState({name_error: "This field is required", email_error: "", password_error: "", server_error: ""});
return;
}
var username_error = utils.isValidUsername(this.state.user.username)
if (username_error === "Cannot use a reserved word as a username.") {
- this.setState({name_error: "This username is reserved, please choose a new one." });
+ this.setState({name_error: "This username is reserved, please choose a new one.", email_error: "", password_error: "", server_error: ""});
return;
} else if (username_error) {
- this.setState({name_error: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'." });
+ this.setState({name_error: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'.", email_error: "", password_error: "", server_error: ""});
return;
}
@@ -34,10 +34,12 @@ module.exports = React.createClass({
this.state.user.password = this.refs.password.getDOMNode().value.trim();
if (!this.state.user.password || this.state.user.password .length < 5) {
- this.setState({name_error: "", email_error: "", password_error: "Please enter at least 5 characters"});
+ this.setState({name_error: "", email_error: "", password_error: "Please enter at least 5 characters", server_error: ""});
return;
}
+ this.setState({name_error: "", email_error: "", password_error: "", server_error: ""});
+
this.state.user.allow_marketing = this.refs.email_service.getDOMNode().checked;
client.createUser(this.state.user, this.state.data, this.state.hash,
diff --git a/web/react/components/team_settings.jsx b/web/react/components/team_settings.jsx
new file mode 100644
index 000000000..0cec30f3e
--- /dev/null
+++ b/web/react/components/team_settings.jsx
@@ -0,0 +1,161 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var UserStore = require('../stores/user_store.jsx');
+var TeamStore = require('../stores/team_store.jsx');
+var SettingItemMin = require('./setting_item_min.jsx');
+var SettingItemMax = require('./setting_item_max.jsx');
+var SettingPicture = require('./setting_picture.jsx');
+var utils = require('../utils/utils.jsx');
+
+var client = require('../utils/client.jsx');
+var AsyncClient = require('../utils/async_client.jsx');
+var Constants = require('../utils/constants.jsx');
+
+var FeatureTab = React.createClass({
+ submitValetFeature: function() {
+ data = {};
+ data['allow_valet'] = this.state.allow_valet;
+
+ client.updateValetFeature(data,
+ function(data) {
+ this.props.updateSection("");
+ AsyncClient.getMyTeam();
+ }.bind(this),
+ function(err) {
+ state = this.getInitialState();
+ state.server_error = err;
+ this.setState(state);
+ }.bind(this)
+ );
+ },
+ handleValetRadio: function(val) {
+ this.setState({ allow_valet: val });
+ this.refs.wrapper.getDOMNode().focus();
+ },
+ componentWillReceiveProps: function(newProps) {
+ var team = newProps.team;
+
+ var allow_valet = "false";
+ if (team && team.allow_valet) {
+ allow_valet = "true";
+ }
+
+ this.setState({ allow_valet: allow_valet });
+ },
+ getInitialState: function() {
+ var team = this.props.team;
+
+ var allow_valet = "false";
+ if (team && team.allow_valet) {
+ allow_valet = "true";
+ }
+
+ return { allow_valet: allow_valet };
+ },
+ render: function() {
+ var team = this.props.team;
+
+ var client_error = this.state.client_error ? this.state.client_error : null;
+ var server_error = this.state.server_error ? this.state.server_error : null;
+
+ var valetSection;
+ var self = this;
+
+ if (this.props.activeSection === 'valet') {
+ var valetActive = ["",""];
+ if (this.state.allow_valet === "false") {
+ valetActive[1] = "active";
+ } else {
+ valetActive[0] = "active";
+ }
+
+ var inputs = [];
+
+ inputs.push(
+ <div className="col-sm-12">
+ <div className="btn-group" data-toggle="buttons-radio">
+ <button className={"btn btn-default "+valetActive[0]} onClick={function(){self.handleValetRadio("true")}}>On</button>
+ <button className={"btn btn-default "+valetActive[1]} onClick={function(){self.handleValetRadio("false")}}>Off</button>
+ </div>
+ <div><br/>Warning: Turning on the Valet feature and using it with any third party software increases the risk of a security breach.</div>
+ </div>
+ );
+
+ valetSection = (
+ <SettingItemMax
+ title="Valet"
+ inputs={inputs}
+ submit={this.submitValetFeature}
+ server_error={server_error}
+ client_error={client_error}
+ updateSection={function(e){self.props.updateSection("");e.preventDefault();}}
+ />
+ );
+ } else {
+ var describe = "";
+ if (this.state.allow_valet === "false") {
+ describe = "Off";
+ } else {
+ describe = "On";
+ }
+
+ valetSection = (
+ <SettingItemMin
+ title="Valet"
+ describe={describe}
+ updateSection={function(){self.props.updateSection("valet");}}
+ />
+ );
+ }
+
+ return (
+ <div>
+ <div className="modal-header">
+ <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+ <h4 className="modal-title" ref="title"><i className="modal-back"></i>General Settings</h4>
+ </div>
+ <div ref="wrapper" className="user-settings">
+ <h3 className="tab-header">Feature Settings</h3>
+ <div className="divider-dark first"/>
+ {valetSection}
+ <div className="divider-dark"/>
+ </div>
+ </div>
+ );
+ }
+});
+
+module.exports = React.createClass({
+ componentDidMount: function() {
+ TeamStore.addChangeListener(this._onChange);
+ },
+ componentWillUnmount: function() {
+ TeamStore.removeChangeListener(this._onChange);
+ },
+ _onChange: function () {
+ var team = TeamStore.getCurrent();
+ if (!utils.areStatesEqual(this.state.team, team)) {
+ this.setState({ team: team });
+ }
+ },
+ getInitialState: function() {
+ return { team: TeamStore.getCurrent() };
+ },
+ render: function() {
+ if (this.props.activeTab === 'general') {
+ return (
+ <div>
+ </div>
+ );
+ } else if (this.props.activeTab === 'feature') {
+ return (
+ <div>
+ <FeatureTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
+ </div>
+ );
+ } else {
+ return <div/>;
+ }
+ }
+});
diff --git a/web/react/components/settings_modal.jsx b/web/react/components/team_settings_modal.jsx
index 57a869f93..08a952d2e 100644
--- a/web/react/components/settings_modal.jsx
+++ b/web/react/components/team_settings_modal.jsx
@@ -2,7 +2,7 @@
// See License.txt for license information.
var SettingsSidebar = require('./settings_sidebar.jsx');
-var UserSettings = require('./user_settings.jsx');
+var TeamSettings = require('./team_settings.jsx');
module.exports = React.createClass({
componentDidMount: function() {
@@ -22,27 +22,31 @@ module.exports = React.createClass({
this.setState({ active_section: section });
},
getInitialState: function() {
- return { active_tab: "general", active_section: "" };
+ return { active_tab: "feature", active_section: "" };
},
render: function() {
+ var tabs = [];
+ tabs.push({name: "feature", ui_name: "Features", icon: "glyphicon glyphicon-wrench"});
+
return (
- <div className="modal fade" ref="modal" id="settings_modal" role="dialog" aria-hidden="true">
+ <div className="modal fade" ref="modal" id="team_settings" role="dialog" aria-hidden="true">
<div className="modal-dialog settings-modal">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
- <h4 className="modal-title" ref="title">Account Settings</h4>
+ <h4 className="modal-title" ref="title">Team Settings</h4>
</div>
<div className="modal-body">
<div className="settings-table">
<div className="settings-links">
<SettingsSidebar
+ tabs={tabs}
activeTab={this.state.active_tab}
updateTab={this.updateTab}
/>
</div>
<div className="settings-content">
- <UserSettings
+ <TeamSettings
activeTab={this.state.active_tab}
activeSection={this.state.active_section}
updateSection={this.updateSection}
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index 110634b50..7d542a8b7 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -658,9 +658,10 @@ var SecurityTab = React.createClass({
);
} else {
var d = new Date(this.props.user.last_password_update);
- var hour = d.getHours() < 10 ? "0" + d.getHours() : String(d.getHours());
+ var hour = d.getHours() % 12 ? String(d.getHours() % 12) : "12";
var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes());
- var dateStr = "Last updated " + Constants.MONTHS[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " at " + hour + ":" + min;
+ var timeOfDay = d.getHours() >= 12 ? " pm" : " am";
+ var dateStr = "Last updated " + Constants.MONTHS[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " at " + hour + ":" + min + timeOfDay;
passwordSection = (
<SettingItemMin
diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx
new file mode 100644
index 000000000..ff001611d
--- /dev/null
+++ b/web/react/components/user_settings_modal.jsx
@@ -0,0 +1,68 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var SettingsSidebar = require('./settings_sidebar.jsx');
+var UserSettings = require('./user_settings.jsx');
+
+module.exports = React.createClass({
+ componentDidMount: function() {
+ $('body').on('click', '.modal-back', function(){
+ $(this).closest('.modal-dialog').removeClass('display--content');
+ });
+ $('body').on('click', '.modal-header .close', function(){
+ setTimeout(function() {
+ $('.modal-dialog.display--content').removeClass('display--content');
+ }, 500);
+ });
+ },
+ updateTab: function(tab) {
+ this.setState({ active_tab: tab });
+ },
+ updateSection: function(section) {
+ this.setState({ active_section: section });
+ },
+ getInitialState: function() {
+ return { active_tab: "general", active_section: "" };
+ },
+ render: function() {
+ var tabs = [];
+ tabs.push({name: "general", ui_name: "General", icon: "glyphicon glyphicon-cog"});
+ tabs.push({name: "security", ui_name: "Security", icon: "glyphicon glyphicon-lock"});
+ tabs.push({name: "notifications", ui_name: "Notifications", icon: "glyphicon glyphicon-exclamation-sign"});
+ tabs.push({name: "appearance", ui_name: "Appearance", icon: "glyphicon glyphicon-wrench"});
+ //tabs.push({name: "sessions", ui_name: "Sessions", icon: "glyphicon glyphicon-globe"});
+ //tabs.push({name: "activity_log", ui_name: "Activity Log", icon: "glyphicon glyphicon-time"});
+
+ return (
+ <div className="modal fade" ref="modal" id="user_settings1" role="dialog" aria-hidden="true">
+ <div className="modal-dialog settings-modal">
+ <div className="modal-content">
+ <div className="modal-header">
+ <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+ <h4 className="modal-title" ref="title">Account Settings</h4>
+ </div>
+ <div className="modal-body">
+ <div className="settings-table">
+ <div className="settings-links">
+ <SettingsSidebar
+ tabs={tabs}
+ activeTab={this.state.active_tab}
+ updateTab={this.updateTab}
+ />
+ </div>
+ <div className="settings-content">
+ <UserSettings
+ activeTab={this.state.active_tab}
+ activeSection={this.state.active_section}
+ updateSection={this.updateSection}
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+});
+
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index 4cb30e1d3..c573e9dbb 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -124,7 +124,7 @@ module.exports = React.createClass({
<div key={name+"_loading"}>
<img ref="placeholder" className="loader-image" src="/static/images/load.gif" />
{ percentage > 0 ?
- <span className="loader-percent" >{"Downloading " + percentage + "%"}</span>
+ <span className="loader-percent" >{"Previewing " + percentage + "%"}</span>
: ""}
</div>
);
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx
index df67d4360..3aa985863 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -22,7 +22,8 @@ var MoreChannelsModal = require('../components/more_channels.jsx');
var NewChannelModal = require('../components/new_channel.jsx');
var PostDeletedModal = require('../components/post_deleted_modal.jsx');
var ChannelNotificationsModal = require('../components/channel_notifications.jsx');
-var UserSettingsModal = require('../components/settings_modal.jsx');
+var UserSettingsModal = require('../components/user_settings_modal.jsx');
+var TeamSettingsModal = require('../components/team_settings_modal.jsx');
var ChannelMembersModal = require('../components/channel_members.jsx');
var ChannelInviteModal = require('../components/channel_invite_modal.jsx');
var TeamMembersModal = require('../components/team_members.jsx');
@@ -36,7 +37,7 @@ var ChannelInfoModal = require('../components/channel_info_modal.jsx');
var Constants = require('../utils/constants.jsx');
var ActionTypes = Constants.ActionTypes;
-global.window.setup_channel_page = function(team_name, team_type, channel_name, channel_id) {
+global.window.setup_channel_page = function(team_name, team_type, team_id, channel_name, channel_id) {
AppDispatcher.handleViewAction({
type: ActionTypes.CLICK_CHANNEL,
@@ -44,6 +45,11 @@ global.window.setup_channel_page = function(team_name, team_type, channel_name,
id: channel_id
});
+ AppDispatcher.handleViewAction({
+ type: ActionTypes.CLICK_TEAM,
+ id: team_id
+ });
+
React.render(
<ErrorBar/>,
document.getElementById('error_bar')
@@ -80,6 +86,11 @@ global.window.setup_channel_page = function(team_name, team_type, channel_name,
);
React.render(
+ <TeamSettingsModal />,
+ document.getElementById('team_settings_modal')
+ );
+
+ React.render(
<TeamMembersModal teamName={team_name} />,
document.getElementById('team_members_modal')
);
diff --git a/web/react/stores/team_store.jsx b/web/react/stores/team_store.jsx
new file mode 100644
index 000000000..e95daeeba
--- /dev/null
+++ b/web/react/stores/team_store.jsx
@@ -0,0 +1,100 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
+var EventEmitter = require('events').EventEmitter;
+var assign = require('object-assign');
+
+var Constants = require('../utils/constants.jsx');
+var ActionTypes = Constants.ActionTypes;
+
+
+var CHANGE_EVENT = 'change';
+
+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();
+
+ for (id in t) {
+ if (t[id].name == name) {
+ return t[id];
+ }
+ }
+
+ return null;
+ },
+ getAll: function() {
+ return this._getTeams();
+ },
+ setCurrentId: function(id) {
+ if (id == null)
+ sessionStorage.removeItem("current_team_id");
+ else
+ sessionStorage.setItem("current_team_id", id);
+ },
+ getCurrentId: function() {
+ return sessionStorage.getItem("current_team_id");
+ },
+ getCurrent: function() {
+ var currentId = TeamStore.getCurrentId();
+
+ if (currentId != null)
+ return this.get(currentId);
+ else
+ return null;
+ },
+ storeTeam: function(team) {
+ var teams = this._getTeams();
+ teams[team.id] = team;
+ this._storeTeams(teams);
+ },
+ _storeTeams: function(teams) {
+ sessionStorage.setItem("user_teams", JSON.stringify(teams));
+ },
+ _getTeams: function() {
+ var teams = {};
+
+ try {
+ teams = JSON.parse(sessionStorage.user_teams);
+ }
+ catch (err) {
+ }
+
+ return teams;
+ }
+});
+
+TeamStore.dispatchToken = AppDispatcher.register(function(payload) {
+ var action = payload.action;
+
+ switch(action.type) {
+
+ case ActionTypes.CLICK_TEAM:
+ TeamStore.setCurrentId(action.id);
+ TeamStore.emitChange();
+ break;
+
+ case ActionTypes.RECIEVED_TEAM:
+ TeamStore.storeTeam(action.team);
+ TeamStore.emitChange();
+ break;
+
+ default:
+ }
+});
+
+module.exports = TeamStore;
diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx
index bb7ca458f..9383057c3 100644
--- a/web/react/utils/async_client.jsx
+++ b/web/react/utils/async_client.jsx
@@ -15,6 +15,8 @@ var ActionTypes = Constants.ActionTypes;
var callTracker = {};
var dispatchError = function(err, method) {
+ if (err.message === "There appears to be a problem with your internet connection") return;
+
AppDispatcher.handleServerAction({
type: ActionTypes.RECIEVED_ERROR,
err: err,
@@ -355,3 +357,25 @@ module.exports.getStatuses = function() {
}
);
}
+
+module.exports.getMyTeam = function() {
+ if (isCallInProgress("getMyTeam")) return;
+
+ callTracker["getMyTeam"] = utils.getTimestamp();
+ client.getMyTeam(
+ function(data, textStatus, xhr) {
+ callTracker["getMyTeam"] = 0;
+
+ if (xhr.status === 304 || !data) return;
+
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.RECIEVED_TEAM,
+ team: data
+ });
+ },
+ function(err) {
+ callTracker["getMyTeam"] = 0;
+ dispatchError(err, "getMyTeam");
+ }
+ );
+}
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index 786e6dcea..15b6ace91 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -811,3 +811,34 @@ module.exports.getStatuses = function(success, error) {
}
});
};
+
+module.exports.getMyTeam = function(success, error) {
+ $.ajax({
+ url: "/api/v1/teams/me",
+ dataType: 'json',
+ type: 'GET',
+ success: success,
+ ifModified: true,
+ error: function(xhr, status, err) {
+ e = handleError("getMyTeam", xhr, status, err);
+ error(e);
+ }
+ });
+};
+
+module.exports.updateValetFeature = function(data, success, error) {
+ $.ajax({
+ url: "/api/v1/teams/update_valet_feature",
+ dataType: 'json',
+ contentType: 'application/json',
+ type: 'POST',
+ data: JSON.stringify(data),
+ success: success,
+ error: function(xhr, status, err) {
+ e = handleError("updateValetFeature", xhr, status, err);
+ error(e);
+ }
+ });
+
+ module.exports.track('api', 'api_teams_update_valet_feature');
+};
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index deb07409b..4a0d243e2 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -27,6 +27,9 @@ module.exports = {
RECIEVED_STATUSES: null,
RECIEVED_MSG: null,
+
+ CLICK_TEAM: null,
+ RECIEVED_TEAM: null,
}),
PayloadSources: keyMirror({
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index fb4f3a34e..75c583c8f 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -96,6 +96,21 @@ module.exports.getCookie = function(name) {
if (parts.length == 2) return parts.pop().split(";").shift();
}
+module.exports.isLocalStorageSupported = function() {
+ try {
+ sessionStorage.setItem("testSession", '1');
+ sessionStorage.removeItem("testSession");
+
+ localStorage.setItem("testLocal", '1');
+ localStorage.removeItem("testLocal", '1');
+
+ return true;
+ }
+ catch (e) {
+ return false;
+ }
+}
+
module.exports.notifyMe = function(title, body, channel) {
if ("Notification" in window && Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
@@ -418,7 +433,7 @@ module.exports.textToJsx = function(text, options) {
highlightSearchClass = " search-highlight";
}
- inner.push(<span key={name+i+z+"_span"}>{prefix}<a className={mClass + highlightSearchClass + " mention-link"} key={name+i+z+"_link"} href="#" onClick={function() {module.exports.searchForTerm(name);}}>@{name}</a>{suffix} </span>);
+ inner.push(<span key={name+i+z+"_span"}>{prefix}<a className={mClass + highlightSearchClass + " mention-link"} key={name+i+z+"_link"} href="#" onClick={function(value) { return function() { module.exports.searchForTerm(value); } }(name)}>@{name}</a>{suffix} </span>);
} else if (urlMatcher.test(word)) {
var match = urlMatcher.match(word)[0];
var link = match.url;
@@ -431,7 +446,7 @@ module.exports.textToJsx = function(text, options) {
} else if (trimWord.match(hashRegex)) {
var suffix = word.match(puncEndRegex);
var prefix = word.match(puncStartRegex);
- var mClass = trimWord in implicitKeywords ? mentionClass : "";
+ var mClass = trimWord in implicitKeywords || trimWord.toLowerCase() in implicitKeywords ? mentionClass : "";
if (searchTerm === trimWord.substring(1).toLowerCase() || searchTerm === trimWord.toLowerCase()) {
highlightSearchClass = " search-highlight";
@@ -439,7 +454,7 @@ module.exports.textToJsx = function(text, options) {
inner.push(<span key={word+i+z+"_span"}>{prefix}<a key={word+i+z+"_hash"} className={"theme " + mClass + highlightSearchClass} href="#" onClick={function(value) { return function() { module.exports.searchForTerm(value); } }(trimWord)}>{trimWord}</a>{suffix} </span>);
- } else if (trimWord in implicitKeywords) {
+ } else if (trimWord in implicitKeywords || trimWord.toLowerCase() in implicitKeywords) {
var suffix = word.match(puncEndRegex);
var prefix = word.match(puncStartRegex);