From 12896bd23eeba79884245c1c29fdc568cf21a7fa Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Mon, 14 Mar 2016 08:50:46 -0400 Subject: Converting to Webpack. Stage 1. --- .../user_settings/user_settings_general.jsx | 817 +++++++++++++++++++++ 1 file changed, 817 insertions(+) create mode 100644 webapp/components/user_settings/user_settings_general.jsx (limited to 'webapp/components/user_settings/user_settings_general.jsx') diff --git a/webapp/components/user_settings/user_settings_general.jsx b/webapp/components/user_settings/user_settings_general.jsx new file mode 100644 index 000000000..42c7e1a77 --- /dev/null +++ b/webapp/components/user_settings/user_settings_general.jsx @@ -0,0 +1,817 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import SettingItemMin from '../setting_item_min.jsx'; +import SettingItemMax from '../setting_item_max.jsx'; +import SettingPicture from '../setting_picture.jsx'; + +import UserStore from 'stores/user_store.jsx'; +import ErrorStore from 'stores/error_store.jsx'; + +import * as Client from 'utils/client.jsx'; +import Constants from 'utils/constants.jsx'; +import * as AsyncClient from 'utils/async_client.jsx'; +import * as Utils from 'utils/utils.jsx'; + +import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedDate} from 'react-intl'; + +const holders = defineMessages({ + usernameReserved: { + id: 'user.settings.general.usernameReserved', + defaultMessage: 'This username is reserved, please choose a new one.' + }, + usernameRestrictions: { + id: 'user.settings.general.usernameRestrictions', + defaultMessage: "Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'." + }, + validEmail: { + id: 'user.settings.general.validEmail', + defaultMessage: 'Please enter a valid email address' + }, + emailMatch: { + id: 'user.settings.general.emailMatch', + defaultMessage: 'The new emails you entered do not match.' + }, + checkEmail: { + id: 'user.settings.general.checkEmail', + defaultMessage: 'Check your email at {email} to verify the address.' + }, + newAddress: { + id: 'user.settings.general.newAddress', + defaultMessage: 'New Address: {email}
Check your email to verify the above address.' + }, + checkEmailNoAddress: { + id: 'user.settings.general.checkEmailNoAddress', + defaultMessage: 'Check your email to verify your new address' + }, + loginGitlab: { + id: 'user.settings.general.loginGitlab', + defaultMessage: 'Log in done through GitLab' + }, + validImage: { + id: 'user.settings.general.validImage', + defaultMessage: 'Only JPG or PNG images may be used for profile pictures' + }, + imageTooLarge: { + id: 'user.settings.general.imageTooLarge', + defaultMessage: 'Unable to upload profile image. File is too large.' + }, + uploadImage: { + id: 'user.settings.general.uploadImage', + defaultMessage: "Click 'Edit' to upload an image." + }, + imageUpdated: { + id: 'user.settings.general.imageUpdated', + defaultMessage: 'Image last updated {date}' + }, + fullName: { + id: 'user.settings.general.fullName', + defaultMessage: 'Full Name' + }, + nickname: { + id: 'user.settings.general.nickname', + defaultMessage: 'Nickname' + }, + username: { + id: 'user.settings.general.username', + defaultMessage: 'Username' + }, + email: { + id: 'user.settings.general.email', + defaultMessage: 'Email' + }, + profilePicture: { + id: 'user.settings.general.profilePicture', + defaultMessage: 'Profile Picture' + }, + close: { + id: 'user.settings.general.close', + defaultMessage: 'Close' + } +}); + +import React from 'react'; + +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.updateConfirmEmail = this.updateConfirmEmail.bind(this); + this.updatePicture = this.updatePicture.bind(this); + this.updateSection = this.updateSection.bind(this); + + this.state = this.setupInitialState(props); + } + submitUsername(e) { + e.preventDefault(); + + const user = Object.assign({}, this.props.user); + const username = this.state.username.trim().toLowerCase(); + + const {formatMessage} = this.props.intl; + const usernameError = Utils.isValidUsername(username); + if (usernameError === 'Cannot use a reserved word as a username.') { + this.setState({clientError: formatMessage(holders.usernameReserved)}); + return; + } else if (usernameError) { + this.setState({clientError: formatMessage(holders.usernameRestrictions, {min: Constants.MIN_USERNAME_LENGTH, max: Constants.MAX_USERNAME_LENGTH})}); + return; + } + + if (user.username === username) { + this.updateSection(''); + return; + } + + user.username = username; + + this.submitUser(user, false); + } + submitNickname(e) { + e.preventDefault(); + + const user = Object.assign({}, this.props.user); + const nickname = this.state.nickname.trim(); + + if (user.nickname === nickname) { + this.updateSection(''); + return; + } + + user.nickname = nickname; + + this.submitUser(user, false); + } + submitName(e) { + e.preventDefault(); + + const user = Object.assign({}, this.props.user); + const firstName = this.state.firstName.trim(); + const lastName = this.state.lastName.trim(); + + if (user.first_name === firstName && user.last_name === lastName) { + this.updateSection(''); + return; + } + + user.first_name = firstName; + user.last_name = lastName; + + this.submitUser(user, false); + } + submitEmail(e) { + e.preventDefault(); + + const user = Object.assign({}, this.props.user); + const email = this.state.email.trim().toLowerCase(); + const confirmEmail = this.state.confirmEmail.trim().toLowerCase(); + + const {formatMessage} = this.props.intl; + if (email === '' || !Utils.isEmail(email)) { + this.setState({emailError: formatMessage(holders.validEmail), clientError: '', serverError: ''}); + return; + } + + if (email !== confirmEmail) { + this.setState({emailError: formatMessage(holders.emailMatch), clientError: '', serverError: ''}); + return; + } + + if (user.email === email) { + this.updateSection(''); + return; + } + + user.email = email; + this.submitUser(user, true); + } + submitUser(user, emailUpdated) { + Client.updateUser(user, + () => { + this.updateSection(''); + AsyncClient.getMe(); + const verificationEnabled = global.window.mm_config.SendEmailNotifications === 'true' && global.window.mm_config.RequireEmailVerification === 'true' && emailUpdated; + + if (verificationEnabled) { + ErrorStore.storeLastError({message: this.props.intl.formatMessage(holders.checkEmail, {email: user.email})}); + ErrorStore.emitChange(); + this.setState({emailChangeInProgress: true}); + } + }, + (err) => { + let serverError; + if (err.message) { + serverError = err.message; + } else { + serverError = err; + } + this.setState({serverError, emailError: '', clientError: ''}); + } + ); + } + submitPicture(e) { + e.preventDefault(); + + if (!this.state.picture) { + return; + } + + if (!this.submitActive) { + return; + } + + const {formatMessage} = this.props.intl; + const picture = this.state.picture; + + if (picture.type !== 'image/jpeg' && picture.type !== 'image/png') { + this.setState({clientError: formatMessage(holders.validImage)}); + return; + } else if (picture.size > Constants.MAX_FILE_SIZE) { + this.setState({clientError: formatMessage(holders.imageTooLarge)}); + return; + } + + var formData = new FormData(); + formData.append('image', picture, picture.name); + this.setState({loadingPicture: true}); + + Client.uploadProfileImage(formData, + () => { + this.submitActive = false; + AsyncClient.getMe(); + window.location.reload(); + }, + (err) => { + var state = this.setupInitialState(this.props); + state.serverError = err.message; + this.setState(state); + } + ); + } + 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}); + } + updateConfirmEmail(e) { + this.setState({confirmEmail: 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) { + const emailChangeInProgress = this.state.emailChangeInProgress; + this.setState(Object.assign({}, this.setupInitialState(this.props), {emailChangeInProgress, clientError: '', serverError: '', emailError: ''})); + this.submitActive = false; + this.props.updateSection(section); + } + setupInitialState(props) { + const user = props.user; + + return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname, + email: user.email, confirmEmail: '', picture: null, loadingPicture: false, emailChangeInProgress: false}; + } + render() { + const user = this.props.user; + const {formatMessage, formatHTMLMessage} = this.props.intl; + + let clientError = null; + if (this.state.clientError) { + clientError = this.state.clientError; + } + let serverError = null; + if (this.state.serverError) { + serverError = this.state.serverError; + } + let emailError = null; + if (this.state.emailError) { + emailError = this.state.emailError; + } + + let nameSection; + const inputs = []; + + if (this.props.activeSection === 'name') { + inputs.push( +
+ +
+ +
+
+ ); + + inputs.push( +
+ +
+ +
+
+ ); + + function notifClick(e) { + e.preventDefault(); + this.updateSection(''); + this.props.updateTab('notifications'); + } + + const notifLink = ( + + + + ); + + const extraInfo = ( + + + + ); + + nameSection = ( + { + this.updateSection(''); + e.preventDefault(); + }} + extraInfo={extraInfo} + /> + ); + } else { + let 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 = ( + { + this.updateSection('name'); + }} + /> + ); + } + + let nicknameSection; + if (this.props.activeSection === 'nickname') { + let nicknameLabel = ( + + ); + if (Utils.isMobile()) { + nicknameLabel = ''; + } + + inputs.push( +
+ +
+ +
+
+ ); + + const extraInfo = ( + + + + ); + + nicknameSection = ( + { + this.updateSection(''); + e.preventDefault(); + }} + extraInfo={extraInfo} + /> + ); + } else { + nicknameSection = ( + { + this.updateSection('nickname'); + }} + /> + ); + } + + let usernameSection; + if (this.props.activeSection === 'username') { + let usernameLabel = ( + + ); + if (Utils.isMobile()) { + usernameLabel = ''; + } + + inputs.push( +
+ +
+ +
+
+ ); + + const extraInfo = ( + + + + ); + + usernameSection = ( + { + this.updateSection(''); + e.preventDefault(); + }} + extraInfo={extraInfo} + /> + ); + } else { + usernameSection = ( + { + this.updateSection('username'); + }} + /> + ); + } + + let emailSection; + if (this.props.activeSection === 'email') { + const emailEnabled = global.window.mm_config.SendEmailNotifications === 'true'; + const emailVerificationEnabled = global.window.mm_config.RequireEmailVerification === 'true'; + let helpText = ( + + ); + + if (!emailEnabled) { + helpText = ( +
+ +
+ ); + } else if (!emailVerificationEnabled) { + helpText = ( + + ); + } else if (this.state.emailChangeInProgress) { + const newEmail = UserStore.getCurrentUser().email; + if (newEmail) { + helpText = ( + + ); + } + } + + let submit = null; + + if (this.props.user.auth_service === '') { + inputs.push( +
+
+ +
+ +
+
+
+ ); + + inputs.push( +
+
+ +
+ +
+
+ {helpText} +
+ ); + + submit = this.submitEmail; + } else if (this.props.user.auth_service === Constants.GITLAB_SERVICE) { + inputs.push( +
+
+ +
+ {helpText} +
+ ); + } + + emailSection = ( + { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + let describe = ''; + if (this.props.user.auth_service === '') { + if (this.state.emailChangeInProgress) { + const newEmail = UserStore.getCurrentUser().email; + if (newEmail) { + describe = formatHTMLMessage(holders.newAddress, {email: newEmail}); + } else { + describe = formatMessage(holders.checkEmailNoAddress); + } + } else { + describe = UserStore.getCurrentUser().email; + } + } else if (this.props.user.auth_service === Constants.GITLAB_SERVICE) { + describe = formatMessage(holders.loginGitlab); + } + + emailSection = ( + { + this.updateSection('email'); + }} + /> + ); + } + + let pictureSection; + if (this.props.activeSection === 'picture') { + pictureSection = ( + + ); + } else { + let minMessage = formatMessage(holders.uploadImage); + if (user.last_picture_update) { + minMessage = formatMessage(holders.imageUpdated, { + date: ( + + ) + }); + } + pictureSection = ( + { + this.updateSection('picture'); + }} + /> + ); + } + + return ( +
+
+ +

+
+ +
+ +

+
+
+

+ +

+
+ {nameSection} +
+ {usernameSection} +
+ {nicknameSection} +
+ {emailSection} +
+ {pictureSection} +
+
+
+ ); + } +} + +UserSettingsGeneralTab.propTypes = { + intl: intlShape.isRequired, + user: React.PropTypes.object.isRequired, + updateSection: React.PropTypes.func.isRequired, + updateTab: React.PropTypes.func.isRequired, + activeSection: React.PropTypes.string.isRequired, + closeModal: React.PropTypes.func.isRequired, + collapseModal: React.PropTypes.func.isRequired +}; + +export default injectIntl(UserSettingsGeneralTab); -- cgit v1.2.3-1-g7c22