From 98186e5018bbc604796d4f9762c93f4f75e2913f Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Mon, 21 Sep 2015 14:22:23 -0400 Subject: Implement incoming webhooks. --- .../user_settings/user_settings_general.jsx | 562 +++++++++++++++++++++ 1 file changed, 562 insertions(+) create mode 100644 web/react/components/user_settings/user_settings_general.jsx (limited to 'web/react/components/user_settings/user_settings_general.jsx') diff --git a/web/react/components/user_settings/user_settings_general.jsx b/web/react/components/user_settings/user_settings_general.jsx new file mode 100644 index 000000000..5d9d9bfde --- /dev/null +++ b/web/react/components/user_settings/user_settings_general.jsx @@ -0,0 +1,562 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var UserStore = require('../../stores/user_store.jsx'); +var SettingItemMin = require('../setting_item_min.jsx'); +var SettingItemMax = require('../setting_item_max.jsx'); +var SettingPicture = require('../setting_picture.jsx'); +var client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); +var utils = require('../../utils/utils.jsx'); +var assign = require('object-assign'); + +export default class UserSettingsGeneralTab extends React.Component { + constructor(props) { + super(props); + this.submitActive = false; + + this.submitUsername = this.submitUsername.bind(this); + this.submitNickname = this.submitNickname.bind(this); + this.submitName = this.submitName.bind(this); + this.submitEmail = this.submitEmail.bind(this); + this.submitUser = this.submitUser.bind(this); + this.submitPicture = this.submitPicture.bind(this); + + this.updateUsername = this.updateUsername.bind(this); + this.updateFirstName = this.updateFirstName.bind(this); + this.updateLastName = this.updateLastName.bind(this); + this.updateNickname = this.updateNickname.bind(this); + this.updateEmail = this.updateEmail.bind(this); + this.updatePicture = this.updatePicture.bind(this); + this.updateSection = this.updateSection.bind(this); + + this.handleClose = this.handleClose.bind(this); + this.setupInitialState = this.setupInitialState.bind(this); + + this.state = this.setupInitialState(props); + } + submitUsername(e) { + e.preventDefault(); + + var user = this.props.user; + var username = this.state.username.trim().toLowerCase(); + + var usernameError = utils.isValidUsername(username); + if (usernameError === 'Cannot use a reserved word as a username.') { + this.setState({clientError: 'This username is reserved, please choose a new one.'}); + return; + } else if (usernameError) { + this.setState({clientError: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'."}); + return; + } + + if (user.username === username) { + this.setState({clientError: 'You must submit a new username'}); + return; + } + + user.username = username; + + this.submitUser(user); + } + submitNickname(e) { + e.preventDefault(); + + var user = UserStore.getCurrentUser(); + var nickname = this.state.nickname.trim(); + + if (user.nickname === nickname) { + this.setState({clientError: 'You must submit a new nickname'}); + return; + } + + user.nickname = nickname; + + this.submitUser(user); + } + submitName(e) { + e.preventDefault(); + + var user = UserStore.getCurrentUser(); + var firstName = this.state.firstName.trim(); + var lastName = this.state.lastName.trim(); + + if (user.first_name === firstName && user.last_name === lastName) { + this.setState({clientError: 'You must submit a new first or last name'}); + return; + } + + user.first_name = firstName; + user.last_name = lastName; + + this.submitUser(user); + } + submitEmail(e) { + e.preventDefault(); + + var user = UserStore.getCurrentUser(); + var email = this.state.email.trim().toLowerCase(); + + if (user.email === email) { + return; + } + + if (email === '' || !utils.isEmail(email)) { + this.setState({emailError: 'Please enter a valid email address'}); + return; + } + + user.email = email; + + this.submitUser(user); + } + submitUser(user) { + client.updateUser(user, + function updateSuccess() { + this.updateSection(''); + AsyncClient.getMe(); + }.bind(this), + function updateFailure(err) { + var state = this.setupInitialState(this.props); + if (err.message) { + state.serverError = err.message; + } else { + state.serverError = err; + } + this.setState(state); + }.bind(this) + ); + } + submitPicture(e) { + e.preventDefault(); + + if (!this.state.picture) { + return; + } + + if (!this.submitActive) { + return; + } + + var picture = this.state.picture; + + if (picture.type !== 'image/jpeg' && picture.type !== 'image/png') { + this.setState({clientError: 'Only JPG or PNG images may be used for profile pictures'}); + return; + } + + var formData = new FormData(); + formData.append('image', picture, picture.name); + this.setState({loadingPicture: true}); + + client.uploadProfileImage(formData, + function imageUploadSuccess() { + this.submitActive = false; + AsyncClient.getMe(); + window.location.reload(); + }.bind(this), + function imageUploadFailure(err) { + var state = this.setupInitialState(this.props); + state.serverError = err; + this.setState(state); + }.bind(this) + ); + } + updateUsername(e) { + this.setState({username: e.target.value}); + } + updateFirstName(e) { + this.setState({firstName: e.target.value}); + } + updateLastName(e) { + this.setState({lastName: e.target.value}); + } + updateNickname(e) { + this.setState({nickname: e.target.value}); + } + updateEmail(e) { + this.setState({email: e.target.value}); + } + updatePicture(e) { + if (e.target.files && e.target.files[0]) { + this.setState({picture: e.target.files[0]}); + + this.submitActive = true; + this.setState({clientError: null}); + } else { + this.setState({picture: null}); + } + } + updateSection(section) { + this.setState(assign({}, this.setupInitialState(this.props), {clientError: '', serverError: '', emailError: ''})); + this.submitActive = false; + this.props.updateSection(section); + } + handleClose() { + $(React.findDOMNode(this)).find('.form-control').each(function clearForms() { + this.value = ''; + }); + + this.setState(assign({}, this.setupInitialState(this.props), {clientError: null, serverError: null, emailError: null})); + this.props.updateSection(''); + } + componentDidMount() { + $('#user_settings').on('hidden.bs.modal', this.handleClose); + } + componentWillUnmount() { + $('#user_settings').off('hidden.bs.modal', this.handleClose); + } + setupInitialState(props) { + var user = props.user; + var emailEnabled = !global.window.config.ByPassEmail; + return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname, + email: user.email, picture: null, loadingPicture: false, emailEnabled: emailEnabled}; + } + render() { + var user = this.props.user; + + var clientError = null; + if (this.state.clientError) { + clientError = this.state.clientError; + } + var serverError = null; + if (this.state.serverError) { + serverError = this.state.serverError; + } + var emailError = null; + if (this.state.emailError) { + emailError = this.state.emailError; + } + + var nameSection; + var inputs = []; + + if (this.props.activeSection === 'name') { + inputs.push( +
+ +
+ +
+
+ ); + + inputs.push( +
+ +
+ +
+
+ ); + + function notifClick(e) { + e.preventDefault(); + this.updateSection(''); + this.props.updateTab('notifications'); + } + + const notifLink = ( + + {'Notifications'} + + ); + + const extraInfo = ( + + {'By default, you will receive mention notifications when someone types your first name. '} + {'Go to '} {notifLink} {'settings to change this default.'} + + ); + + nameSection = ( + + ); + } else { + var fullName = ''; + + if (user.first_name && user.last_name) { + fullName = user.first_name + ' ' + user.last_name; + } else if (user.first_name) { + fullName = user.first_name; + } else if (user.last_name) { + fullName = user.last_name; + } + + nameSection = ( + + ); + } + + var nicknameSection; + if (this.props.activeSection === 'nickname') { + let nicknameLabel = 'Nickname'; + if (utils.isMobile()) { + nicknameLabel = ''; + } + + inputs.push( +
+ +
+ +
+
+ ); + + const extraInfo = ( + + {'Use Nickname for a name you might be called that is different from your first name and user name.'} + {'This is most often used when two or more people have similar sounding names and usernames.'} + + ); + + nicknameSection = ( + + ); + } else { + nicknameSection = ( + + ); + } + + var usernameSection; + if (this.props.activeSection === 'username') { + let usernameLabel = 'Username'; + if (utils.isMobile()) { + usernameLabel = ''; + } + + inputs.push( +
+ +
+ +
+
+ ); + + const extraInfo = ({'Pick something easy for teammates to recognize and recall.'}); + + usernameSection = ( + + ); + } else { + usernameSection = ( + + ); + } + var emailSection; + if (this.props.activeSection === 'email') { + let helpText =
Email is used for notifications, and requires verification if changed.
; + + if (!this.state.emailEnabled) { + helpText =
{'Email has been disabled by your system administrator. No notification emails will be sent until it is enabled.'}
; + } + + inputs.push( +
+
+ +
+ +
+
+ {helpText} +
+ ); + + emailSection = ( + + ); + } else { + emailSection = ( + + ); + } + + var pictureSection; + if (this.props.activeSection === 'picture') { + pictureSection = ( + + ); + } else { + var minMessage = 'Click \'Edit\' to upload an image.'; + if (user.last_picture_update) { + minMessage = 'Image last updated ' + utils.displayDate(user.last_picture_update); + } + pictureSection = ( + + ); + } + return ( +
+
+ +

+ + {'General Settings'} +

+
+
+

{'General Settings'}

+
+ {nameSection} +
+ {usernameSection} +
+ {nicknameSection} +
+ {emailSection} +
+ {pictureSection} +
+
+
+ ); + } +} + +UserSettingsGeneralTab.propTypes = { + user: React.PropTypes.object, + updateSection: React.PropTypes.func, + updateTab: React.PropTypes.func, + activeSection: React.PropTypes.string +}; -- cgit v1.2.3-1-g7c22