PLT-7: Refactoring frontend (chunk 1)

- System console sidebar
- Sytem console email settings
- Error Bar
- Loading Screen
- Select Team Modal
- Add npm mm-intl package
Этот коммит содержится в:
Elias Nahum
2016-01-26 22:19:51 -03:00
родитель efc4d239e1
Коммит 85d4ed21c7
10 изменённых файлов: 651 добавлений и 105 удалений

Просмотреть файл

@@ -7,6 +7,8 @@ import TeamStore from '../../stores/team_store.jsx';
import Constants from '../../utils/constants.jsx';
import {FormattedMessage} from 'mm-intl';
function getStateFromStores() {
return {currentTeam: TeamStore.getCurrent()};
}
@@ -66,7 +68,13 @@ export default class AdminNavbarDropdown extends React.Component {
<a
href={Utils.getWindowLocationOrigin() + '/' + this.state.currentTeam.name}
>
{'Switch to ' + this.state.currentTeam.display_name}
<FormattedMessage
id='admin.nav.switch'
defaultMessage='Switch to {display_name}'
values={{
display_name: this.state.currentTeam.display_name
}}
/>
</a>
</li>
<li>
@@ -74,7 +82,10 @@ export default class AdminNavbarDropdown extends React.Component {
href='#'
onClick={this.handleLogoutClick}
>
{'Logout'}
<FormattedMessage
id='admin.nav.logout'
defaultMessage='Logout'
/>
</a>
</li>
<li className='divider'></li>
@@ -83,7 +94,10 @@ export default class AdminNavbarDropdown extends React.Component {
target='_blank'
href='/static/help/help.html'
>
{'Help'}
<FormattedMessage
id='admin.nav.help'
defaultMessage='Help'
/>
</a>
</li>
<li>
@@ -91,7 +105,10 @@ export default class AdminNavbarDropdown extends React.Component {
target='_blank'
href='/static/help/report_problem.html'
>
{'Report a Problem'}
<FormattedMessage
id='admin.nav.report'
defaultMessage='Report a Problem'
/>
</a>
</li>
</ul>

Просмотреть файл

@@ -5,6 +5,8 @@ import AdminSidebarHeader from './admin_sidebar_header.jsx';
import SelectTeamModal from './select_team_modal.jsx';
import * as Utils from '../../utils/utils.jsx';
import {FormattedMessage} from 'mm-intl';
const Tooltip = ReactBootstrap.Tooltip;
const OverlayTrigger = ReactBootstrap.OverlayTrigger;
@@ -82,12 +84,27 @@ export default class AdminSidebar extends React.Component {
render() {
var count = '*';
var teams = 'Loading';
var teams = (
<FormattedMessage
id='admin.sidebar.loading'
defaultMessage='Loading'
/>
);
const removeTooltip = (
<Tooltip id='remove-team-tooltip'>{'Remove team from sidebar menu'}</Tooltip>
<Tooltip id='remove-team-tooltip'>
<FormattedMessage
id='admin.sidebar.rmTeamSidebar'
defaultMessage='Remove team from sidebar menu'
/>
</Tooltip>
);
const addTeamTooltip = (
<Tooltip id='add-team-tooltip'>{'Add team from sidebar menu'}</Tooltip>
<Tooltip id='add-team-tooltip'>
<FormattedMessage
id='admin.sidebar.addTeamSidebar'
defaultMessage='Add team from sidebar menu'
/>
</Tooltip>
);
if (this.props.teams != null) {
@@ -134,7 +151,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('team_users', team.id)}
onClick={this.handleClick.bind(this, 'team_users', team.id)}
>
{'- Users'}
<FormattedMessage
id='admin.sidebar.users'
defaultMessage='- Users'
/>
</a>
</li>
<li>
@@ -143,7 +163,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('team_analytics', team.id)}
onClick={this.handleClick.bind(this, 'team_analytics', team.id)}
>
{'- Statistics'}
<FormattedMessage
id='admin.sidebar.statistics'
defaultMessage='- Statistics'
/>
</a>
</li>
</ul>
@@ -166,7 +189,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('ldap_settings')}
onClick={this.handleClick.bind(this, 'ldap_settings', null)}
>
{'LDAP Settings'}
<FormattedMessage
id='admin.sidebar.ldap'
defaultMessage='LDAP Settings'
/>
</a>
</li>
);
@@ -179,7 +205,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('license')}
onClick={this.handleClick.bind(this, 'license', null)}
>
{'Edition and License'}
<FormattedMessage
id='admin.sidebar.license'
defaultMessage='Edition and License'
/>
</a>
</li>
);
@@ -196,7 +225,12 @@ export default class AdminSidebar extends React.Component {
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'SITE REPORTS'}</span>
<span>
<FormattedMessage
id='admin.sidebar.reports'
defaultMessage='SITE REPORTS'
/>
</span>
</h4>
</li>
</ul>
@@ -207,7 +241,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('system_analytics')}
onClick={this.handleClick.bind(this, 'system_analytics', null)}
>
{'View Statistics'}
<FormattedMessage
id='admin.sidebar.view_statistics'
defaultMessage='View Statistics'
/>
</a>
</li>
</ul>
@@ -215,7 +252,12 @@ export default class AdminSidebar extends React.Component {
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'SETTINGS'}</span>
<span>
<FormattedMessage
id='admin.sidebar.settings'
defaultMessage='SETTINGS'
/>
</span>
</h4>
</li>
</ul>
@@ -226,7 +268,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('service_settings')}
onClick={this.handleClick.bind(this, 'service_settings', null)}
>
{'Service Settings'}
<FormattedMessage
id='admin.sidebar.service'
defaultMessage='Service Settings'
/>
</a>
</li>
<li>
@@ -235,7 +280,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('team_settings')}
onClick={this.handleClick.bind(this, 'team_settings', null)}
>
{'Team Settings'}
<FormattedMessage
id='admin.sidebar.team'
defaultMessage='Team Settings'
/>
</a>
</li>
<li>
@@ -244,7 +292,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('sql_settings')}
onClick={this.handleClick.bind(this, 'sql_settings', null)}
>
{'SQL Settings'}
<FormattedMessage
id='admin.sidebar.sql'
defaultMessage='SQL Settings'
/>
</a>
</li>
<li>
@@ -253,7 +304,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('email_settings')}
onClick={this.handleClick.bind(this, 'email_settings', null)}
>
{'Email Settings'}
<FormattedMessage
id='admin.sidebar.email'
defaultMessage='Email Settings'
/>
</a>
</li>
<li>
@@ -262,7 +316,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('image_settings')}
onClick={this.handleClick.bind(this, 'image_settings', null)}
>
{'File Settings'}
<FormattedMessage
id='admin.sidebar.file'
defaultMessage='File Settings'
/>
</a>
</li>
<li>
@@ -271,7 +328,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('log_settings')}
onClick={this.handleClick.bind(this, 'log_settings', null)}
>
{'Log Settings'}
<FormattedMessage
id='admin.sidebar.log'
defaultMessage='Log Settings'
/>
</a>
</li>
<li>
@@ -280,7 +340,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('rate_settings')}
onClick={this.handleClick.bind(this, 'rate_settings', null)}
>
{'Rate Limit Settings'}
<FormattedMessage
id='admin.sidebar.rate_limit'
defaultMessage='Rate Limit Settings'
/>
</a>
</li>
<li>
@@ -289,7 +352,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('privacy_settings')}
onClick={this.handleClick.bind(this, 'privacy_settings', null)}
>
{'Privacy Settings'}
<FormattedMessage
id='admin.sidebar.privacy'
defaultMessage='Privacy Settings'
/>
</a>
</li>
<li>
@@ -298,7 +364,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('gitlab_settings')}
onClick={this.handleClick.bind(this, 'gitlab_settings', null)}
>
{'GitLab Settings'}
<FormattedMessage
id='admin.sidebar.gitlab'
defaultMessage='GitLab Settings'
/>
</a>
</li>
{ldapSettings}
@@ -308,7 +377,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('legal_and_support_settings')}
onClick={this.handleClick.bind(this, 'legal_and_support_settings', null)}
>
{'Legal and Support Settings'}
<FormattedMessage
id='admin.sidebar.support'
defaultMessage='Legal and Support Settings'
/>
</a>
</li>
</ul>
@@ -316,7 +388,15 @@ export default class AdminSidebar extends React.Component {
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'TEAMS (' + count + ')'}</span>
<span>
<FormattedMessage
id='admin.sidebar.teams'
defaultMessage='TEAMS ({count})'
values={{
count: count
}}
/>
</span>
<span className='menu-icon--right'>
<OverlayTrigger
delayShow={1000}
@@ -345,7 +425,12 @@ export default class AdminSidebar extends React.Component {
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'OTHER'}</span>
<span>
<FormattedMessage
id='admin.sidebar.other'
defaultMessage='OTHER'
/>
</span>
</h4>
</li>
</ul>
@@ -357,7 +442,10 @@ export default class AdminSidebar extends React.Component {
className={this.isSelected('logs')}
onClick={this.handleClick.bind(this, 'logs', null)}
>
{'Logs'}
<FormattedMessage
id='admin.sidebar.logs'
defaultMessage='Logs'
/>
</a>
</li>
</ul>

Просмотреть файл

@@ -5,6 +5,8 @@ import AdminNavbarDropdown from './admin_navbar_dropdown.jsx';
import UserStore from '../../stores/user_store.jsx';
import * as Utils from '../../utils/utils.jsx';
import {FormattedMessage} from 'mm-intl';
export default class SidebarHeader extends React.Component {
constructor(props) {
super(props);
@@ -51,7 +53,12 @@ export default class SidebarHeader extends React.Component {
{profilePicture}
<div className='header__info'>
<div className='user__name'>{'@' + me.username}</div>
<div className='team__name'>{'System Console'}</div>
<div className='team__name'>
<FormattedMessage
id='admin.sidebarHeader.systemConsole'
defaultMessage='System Console'
/>
</div>
</div>
</a>
<AdminNavbarDropdown ref='dropdown' />

Просмотреть файл

@@ -5,7 +5,68 @@ import * as Client from '../../utils/client.jsx';
import * as AsyncClient from '../../utils/async_client.jsx';
import crypto from 'crypto';
export default class EmailSettings extends React.Component {
import {injectIntl, intlShape, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
var holders = defineMessages({
notificationDisplayExample: {
id: 'admin.email.notificationDisplayExample',
defaultMessage: 'Ex: "Mattermost Notification", "System", "No-Reply"'
},
notificationEmailExample: {
id: 'admin.email.notificationEmailExample',
defaultMessage: 'Ex: "mattermost@yourcompany.com", "admin@yourcompany.com"'
},
smtpUsernameExample: {
id: 'admin.email.smtpUsernameExample',
defaultMessage: 'Ex: "admin@yourcompany.com", "AKIADTOVBGERKLCBV"'
},
smtpPasswordExample: {
id: 'admin.email.smtpPasswordExample',
defaultMessage: 'Ex: "yourpassword", "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
},
smtpServerExample: {
id: 'admin.email.smtpServerExample',
defaultMessage: 'Ex: "smtp.yourcompany.com", "email-smtp.us-east-1.amazonaws.com"'
},
smtpPortExample: {
id: 'admin.email.smtpPortExample',
defaultMessage: 'Ex: "25", "465"'
},
connectionSecurityNone: {
id: 'admin.email.connectionSecurityNone',
defaultMessage: 'None'
},
connectionSecurityTls: {
id: 'admin.email.connectionSecurityTls',
defaultMessage: 'TLS (Recommended)'
},
connectionSecurityStart: {
id: 'admin.email.connectionSecurityStart',
defaultMessage: 'STARTTLS'
},
inviteSaltExample: {
id: 'admin.email.inviteSaltExample',
defaultMessage: 'Ex "bjlSR4QqkXFBr7TP4oDzlfZmcNuH9Yo"'
},
passwordSaltExample: {
id: 'admin.email.passwordSaltExample',
defaultMessage: 'Ex "bjlSR4QqkXFBr7TP4oDzlfZmcNuH9Yo"'
},
pushServerEx: {
id: 'admin.email.pushServerEx',
defaultMessage: 'E.g.: "https://push-test.mattermost.com"'
},
testing: {
id: 'admin.email.testing',
defaultMessage: 'Testing...'
},
saving: {
id: 'admin.email.saving',
defaultMessage: 'Saving Config...'
}
});
class EmailSettings extends React.Component {
constructor(props) {
super(props);
@@ -156,6 +217,7 @@ export default class EmailSettings extends React.Component {
}
render() {
const {formatMessage} = this.props.intl;
var serverError = '';
if (this.state.serverError) {
serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
@@ -170,7 +232,11 @@ export default class EmailSettings extends React.Component {
if (this.state.emailSuccess) {
emailSuccess = (
<div className='alert alert-success'>
<i className='fa fa-check'></i>{'No errors were reported while sending an email. Please check your inbox to make sure.'}
<i className='fa fa-check'></i>
<FormattedMessage
id='admin.email.emailSuccess'
defaultMessage='No errors were reported while sending an email. Please check your inbox to make sure.'
/>
</div>
);
}
@@ -179,14 +245,26 @@ export default class EmailSettings extends React.Component {
if (this.state.emailFail) {
emailSuccess = (
<div className='alert alert-warning'>
<i className='fa fa-warning'></i>{'Connection unsuccessful: ' + this.state.emailFail}
<i className='fa fa-warning'></i>
<FormattedMessage
id='admin.email.emailFail'
defaultMessage='Connection unsuccessful: {error}'
values={{
error: this.state.emailFail
}}
/>
</div>
);
}
return (
<div className='wrapper--fixed'>
<h3>{'Email Settings'}</h3>
<h3>
<FormattedMessage
id='admin.email.emailSettings'
defaultMessage='Email Settings'
/>
</h3>
<form
className='form-horizontal'
role='form'
@@ -197,7 +275,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='allowSignUpWithEmail'
>
{'Allow Sign Up With Email: '}
<FormattedMessage
id='admin.email.allowSignupTitle'
defaultMessage='Allow Sign Up With Email: '
/>
</label>
<div className='col-sm-8'>
<label className='radio-inline'>
@@ -209,7 +290,10 @@ export default class EmailSettings extends React.Component {
defaultChecked={this.props.config.EmailSettings.EnableSignUpWithEmail}
onChange={this.handleChange.bind(this, 'allowSignUpWithEmail_true')}
/>
{'true'}
<FormattedMessage
id='admin.email.true'
defaultMessage='true'
/>
</label>
<label className='radio-inline'>
<input
@@ -219,9 +303,17 @@ export default class EmailSettings extends React.Component {
defaultChecked={!this.props.config.EmailSettings.EnableSignUpWithEmail}
onChange={this.handleChange.bind(this, 'allowSignUpWithEmail_false')}
/>
{'false'}
<FormattedMessage
id='admin.email.false'
defaultMessage='false'
/>
</label>
<p className='help-text'>{'When true, Mattermost allows team creation and account signup using email and password. This value should be false only when you want to limit signup to a single-sign-on service like OAuth or LDAP.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.allowSignupDescription'
defaultMessage='When true, Mattermost allows team creation and account signup using email and password. This value should be false only when you want to limit signup to a single-sign-on service like OAuth or LDAP.'
/>
</p>
</div>
</div>
@@ -230,7 +322,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='sendEmailNotifications'
>
{'Send Email Notifications: '}
<FormattedMessage
id='admin.email.notificationsTitle'
defaultMessage='Send Email Notifications: '
/>
</label>
<div className='col-sm-8'>
<label className='radio-inline'>
@@ -242,7 +337,10 @@ export default class EmailSettings extends React.Component {
defaultChecked={this.props.config.EmailSettings.SendEmailNotifications}
onChange={this.handleChange.bind(this, 'sendEmailNotifications_true')}
/>
{'true'}
<FormattedMessage
id='admin.email.true'
defaultMessage='true'
/>
</label>
<label className='radio-inline'>
<input
@@ -252,9 +350,17 @@ export default class EmailSettings extends React.Component {
defaultChecked={!this.props.config.EmailSettings.SendEmailNotifications}
onChange={this.handleChange.bind(this, 'sendEmailNotifications_false')}
/>
{'false'}
<FormattedMessage
id='admin.email.false'
defaultMessage='false'
/>
</label>
<p className='help-text'>{'Typically set to true in production. When true, Mattermost attempts to send email notifications. Developers may set this field to false to skip email setup for faster development.\nSetting this to true removes the Preview Mode banner (requires logging out and logging back in after setting is changed).'}</p>
<p className='help-text'>
<FormattedHTMLMessage
id='admin.email.notificationsDescription'
defaultMessage='Typically set to true in production. When true, Mattermost attempts to send email notifications. Developers may set this field to false to skip email setup for faster development.<br />Setting this to true removes the Preview Mode banner (requires logging out and logging back in after setting is changed).'
/>
</p>
</div>
</div>
@@ -263,7 +369,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='requireEmailVerification'
>
{'Require Email Verification: '}
<FormattedMessage
id='admin.email.requireVerificationTitle'
defaultMessage='Require Email Verification: '
/>
</label>
<div className='col-sm-8'>
<label className='radio-inline'>
@@ -276,7 +385,10 @@ export default class EmailSettings extends React.Component {
onChange={this.handleChange.bind(this, 'requireEmailVerification_true')}
disabled={!this.state.sendEmailNotifications}
/>
{'true'}
<FormattedMessage
id='admin.email.true'
defaultMessage='true'
/>
</label>
<label className='radio-inline'>
<input
@@ -287,9 +399,17 @@ export default class EmailSettings extends React.Component {
onChange={this.handleChange.bind(this, 'requireEmailVerification_false')}
disabled={!this.state.sendEmailNotifications}
/>
{'false'}
<FormattedMessage
id='admin.email.false'
defaultMessage='false'
/>
</label>
<p className='help-text'>{'Typically set to true in production. When true, Mattermost requires email verification after account creation prior to allowing login. Developers may set this field to false so skip sending verification emails for faster development.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.requireVerificationDescription'
defaultMessage='Typically set to true in production. When true, Mattermost requires email verification after account creation prior to allowing login. Developers may set this field to false so skip sending verification emails for faster development.'
/>
</p>
</div>
</div>
@@ -298,7 +418,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='feedbackName'
>
{'Notification Display Name:'}
<FormattedMessage
id='admin.email.notificationDisplayTitle'
defaultMessage='Notification Display Name:'
/>
</label>
<div className='col-sm-8'>
<input
@@ -306,12 +429,17 @@ export default class EmailSettings extends React.Component {
className='form-control'
id='feedbackName'
ref='feedbackName'
placeholder='E.g.: "Mattermost Notification", "System", "No-Reply"'
placeholder={formatMessage(holders.notificationDisplayExample)}
defaultValue={this.props.config.EmailSettings.FeedbackName}
onChange={this.handleChange}
disabled={!this.state.sendEmailNotifications}
/>
<p className='help-text'>{'Display name on email account used when sending notification emails from Mattermost.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.notificationDisplayDescription'
defaultMessage='Display name on email account used when sending notification emails from Mattermost.'
/>
</p>
</div>
</div>
@@ -320,7 +448,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='feedbackEmail'
>
{'Notification Email Address:'}
<FormattedMessage
id='admin.email.notificationEmailTitle'
defaultMessage='Notification Email Address:'
/>
</label>
<div className='col-sm-8'>
<input
@@ -328,12 +459,17 @@ export default class EmailSettings extends React.Component {
className='form-control'
id='feedbackEmail'
ref='feedbackEmail'
placeholder='E.g.: "mattermost@yourcompany.com", "admin@yourcompany.com"'
placeholder={formatMessage(holders.notificationEmailExample)}
defaultValue={this.props.config.EmailSettings.FeedbackEmail}
onChange={this.handleChange}
disabled={!this.state.sendEmailNotifications}
/>
<p className='help-text'>{'Email address displayed on email account used when sending notification emails from Mattermost.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.notificationEmailDescription'
defaultMessage='Email address displayed on email account used when sending notification emails from Mattermost.'
/>
</p>
</div>
</div>
@@ -342,7 +478,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='SMTPUsername'
>
{'SMTP Username:'}
<FormattedMessage
id='admin.email.smtpUsernameTitle'
defaultMessage='SMTP Username:'
/>
</label>
<div className='col-sm-8'>
<input
@@ -350,12 +489,17 @@ export default class EmailSettings extends React.Component {
className='form-control'
id='SMTPUsername'
ref='SMTPUsername'
placeholder='E.g.: "admin@yourcompany.com", "AKIADTOVBGERKLCBV"'
placeholder={formatMessage(holders.smtpUsernameExample)}
defaultValue={this.props.config.EmailSettings.SMTPUsername}
onChange={this.handleChange}
disabled={!this.state.sendEmailNotifications}
/>
<p className='help-text'>{' Obtain this credential from administrator setting up your email server.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.smtpUsernameDescription'
defaultMessage=' Obtain this credential from administrator setting up your email server.'
/>
</p>
</div>
</div>
@@ -364,7 +508,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='SMTPPassword'
>
{'SMTP Password:'}
<FormattedMessage
id='admin.email.smtpPasswordTitle'
defaultMessage='SMTP Password:'
/>
</label>
<div className='col-sm-8'>
<input
@@ -372,12 +519,17 @@ export default class EmailSettings extends React.Component {
className='form-control'
id='SMTPPassword'
ref='SMTPPassword'
placeholder='E.g.: "yourpassword", "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
placeholder={formatMessage(holders.smtpPasswordExample)}
defaultValue={this.props.config.EmailSettings.SMTPPassword}
onChange={this.handleChange}
disabled={!this.state.sendEmailNotifications}
/>
<p className='help-text'>{' Obtain this credential from administrator setting up your email server.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.smtpPasswordDescription'
defaultMessage=' Obtain this credential from administrator setting up your email server.'
/>
</p>
</div>
</div>
@@ -386,7 +538,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='SMTPServer'
>
{'SMTP Server:'}
<FormattedMessage
id='admin.email.smtpServerTitle'
defaultMessage='SMTP Server:'
/>
</label>
<div className='col-sm-8'>
<input
@@ -394,12 +549,17 @@ export default class EmailSettings extends React.Component {
className='form-control'
id='SMTPServer'
ref='SMTPServer'
placeholder='E.g.: "smtp.yourcompany.com", "email-smtp.us-east-1.amazonaws.com"'
placeholder={formatMessage(holders.smtpServerExample)}
defaultValue={this.props.config.EmailSettings.SMTPServer}
onChange={this.handleChange}
disabled={!this.state.sendEmailNotifications}
/>
<p className='help-text'>{'Location of SMTP email server.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.smtpServerDescription'
defaultMessage='Location of SMTP email server.'
/>
</p>
</div>
</div>
@@ -408,7 +568,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='SMTPPort'
>
{'SMTP Port:'}
<FormattedMessage
id='admin.email.smtpPortTitle'
defaultMessage='SMTP Port:'
/>
</label>
<div className='col-sm-8'>
<input
@@ -416,12 +579,17 @@ export default class EmailSettings extends React.Component {
className='form-control'
id='SMTPPort'
ref='SMTPPort'
placeholder='E.g.: "25", "465"'
placeholder={formatMessage(holders.smtpPortExample)}
defaultValue={this.props.config.EmailSettings.SMTPPort}
onChange={this.handleChange}
disabled={!this.state.sendEmailNotifications}
/>
<p className='help-text'>{'Port of SMTP email server.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.smtpPortDescription'
defaultMessage='Port of SMTP email server.'
/>
</p>
</div>
</div>
@@ -430,7 +598,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='ConnectionSecurity'
>
{'Connection Security:'}
<FormattedMessage
id='admin.email.connectionSecurityTitle'
defaultMessage='Connection Security:'
/>
</label>
<div className='col-sm-8'>
<select
@@ -441,9 +612,9 @@ export default class EmailSettings extends React.Component {
onChange={this.handleChange}
disabled={!this.state.sendEmailNotifications}
>
<option value=''>{'None'}</option>
<option value='TLS'>{'TLS (Recommended)'}</option>
<option value='STARTTLS'>{'STARTTLS'}</option>
<option value=''>{formatMessage(holders.connectionSecurityNone)}</option>
<option value='TLS'>{formatMessage(holders.connectionSecurityTls)}</option>
<option value='STARTTLS'>{formatMessage(holders.connectionSecurityStart)}</option>
</select>
<div className='help-text'>
<table
@@ -451,9 +622,29 @@ export default class EmailSettings extends React.Component {
cellPadding='5'
>
<tbody>
<tr><td className='help-text'>{'None'}</td><td className='help-text'>{'Mattermost will send email over an unsecure connection.'}</td></tr>
<tr><td className='help-text'>{'TLS'}</td><td className='help-text'>{'Encrypts the communication between Mattermost and your email server.'}</td></tr>
<tr><td className='help-text'>{'STARTTLS'}</td><td className='help-text'>{'Takes an existing insecure connection and attempts to upgrade it to a secure connection using TLS.'}</td></tr>
<tr><td className='help-text'>
<FormattedMessage
id='admin.email.connectionSecurityNone'
defaultMessage='None'
/>
</td><td className='help-text'>
<FormattedMessage
id='admin.email.connectionSecurityNoneDescription'
defaultMessage='Mattermost will send email over an unsecure connection.'
/>
</td></tr>
<tr><td className='help-text'>{'TLS'}</td><td className='help-text'>
<FormattedMessage
id='admin.email.connectionSecurityTlsDescription'
defaultMessage='Encrypts the communication between Mattermost and your email server.'
/>
</td></tr>
<tr><td className='help-text'>{'STARTTLS'}</td><td className='help-text'>
<FormattedMessage
id='admin.email.connectionSecurityStartDescription'
defaultMessage='Takes an existing insecure connection and attempts to upgrade it to a secure connection using TLS.'
/>
</td></tr>
</tbody>
</table>
</div>
@@ -463,9 +654,12 @@ export default class EmailSettings extends React.Component {
onClick={this.handleTestConnection}
disabled={!this.state.sendEmailNotifications}
id='connection-button'
data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Testing...'}
data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + formatMessage(holders.testing)}
>
{'Test Connection'}
<FormattedMessage
id='admin.email.connectionSecurityTest'
defaultMessage='Test Connection'
/>
</button>
{emailSuccess}
{emailFail}
@@ -478,7 +672,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='InviteSalt'
>
{'Invite Salt:'}
<FormattedMessage
id='admin.email.inviteSaltTitle'
defaultMessage='Invite Salt:'
/>
</label>
<div className='col-sm-8'>
<input
@@ -486,19 +683,27 @@ export default class EmailSettings extends React.Component {
className='form-control'
id='InviteSalt'
ref='InviteSalt'
placeholder='E.g.: "bjlSR4QqkXFBr7TP4oDzlfZmcNuH9Yo"'
placeholder={formatMessage(holders.inviteSaltExample)}
defaultValue={this.props.config.EmailSettings.InviteSalt}
onChange={this.handleChange}
disabled={!this.state.sendEmailNotifications}
/>
<p className='help-text'>{'32-character salt added to signing of email invites. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.inviteSaltDescription'
defaultMessage='32-character salt added to signing of email invites. Randomly generated on install. Click "Re-Generate" to create new salt.'
/>
</p>
<div className='help-text'>
<button
className='btn btn-default'
onClick={this.handleGenerateInvite}
disabled={!this.state.sendEmailNotifications}
>
{'Re-Generate'}
<FormattedMessage
id='admin.email.regenerate'
defaultMessage='Re-Generate'
/>
</button>
</div>
</div>
@@ -509,7 +714,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='PasswordResetSalt'
>
{'Password Reset Salt:'}
<FormattedMessage
id='admin.email.passwordSaltTitle'
defaultMessage='Password Reset Salt:'
/>
</label>
<div className='col-sm-8'>
<input
@@ -517,19 +725,27 @@ export default class EmailSettings extends React.Component {
className='form-control'
id='PasswordResetSalt'
ref='PasswordResetSalt'
placeholder='E.g.: "bjlSR4QqkXFBr7TP4oDzlfZmcNuH9Yo"'
placeholder={formatMessage(holders.passwordSaltExample)}
defaultValue={this.props.config.EmailSettings.PasswordResetSalt}
onChange={this.handleChange}
disabled={!this.state.sendEmailNotifications}
/>
<p className='help-text'>{'32-character salt added to signing of password reset emails. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.passwordSaltDescription'
defaultMessage='32-character salt added to signing of password reset emails. Randomly generated on install. Click "Re-Generate" to create new salt.'
/>
</p>
<div className='help-text'>
<button
className='btn btn-default'
onClick={this.handleGenerateReset}
disabled={!this.state.sendEmailNotifications}
>
{'Re-Generate'}
<FormattedMessage
id='admin.email.regenerate'
defaultMessage='Re-Generate'
/>
</button>
</div>
</div>
@@ -540,7 +756,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='sendPushNotifications'
>
{'Send Push Notifications: '}
<FormattedMessage
id='admin.email.pushTitle'
defaultMessage='Send Push Notifications: '
/>
</label>
<div className='col-sm-8'>
<label className='radio-inline'>
@@ -552,7 +771,10 @@ export default class EmailSettings extends React.Component {
defaultChecked={this.props.config.EmailSettings.SendPushNotifications}
onChange={this.handleChange.bind(this, 'sendPushNotifications_true')}
/>
{'true'}
<FormattedMessage
id='admin.email.true'
defaultMessage='true'
/>
</label>
<label className='radio-inline'>
<input
@@ -562,9 +784,17 @@ export default class EmailSettings extends React.Component {
defaultChecked={!this.props.config.EmailSettings.SendPushNotifications}
onChange={this.handleChange.bind(this, 'sendPushNotifications_false')}
/>
{'false'}
<FormattedMessage
id='admin.email.false'
defaultMessage='false'
/>
</label>
<p className='help-text'>{'Typically set to true in production. When true, Mattermost attempts to send iOS and Android push notifications through the push notification server.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.pushDesc'
defaultMessage='Typically set to true in production. When true, Mattermost attempts to send iOS and Android push notifications through the push notification server.'
/>
</p>
</div>
</div>
@@ -573,7 +803,10 @@ export default class EmailSettings extends React.Component {
className='control-label col-sm-4'
htmlFor='PushNotificationServer'
>
{'Push Notification Server:'}
<FormattedMessage
id='admin.email.pushServerTitle'
defaultMessage='Push Notification Server:'
/>
</label>
<div className='col-sm-8'>
<input
@@ -581,12 +814,17 @@ export default class EmailSettings extends React.Component {
className='form-control'
id='PushNotificationServer'
ref='PushNotificationServer'
placeholder='E.g.: "https://push-test.mattermost.com"'
placeholder={formatMessage(holders.pushServerEx)}
defaultValue={this.props.config.EmailSettings.PushNotificationServer}
onChange={this.handleChange}
disabled={!this.state.sendPushNotifications}
/>
<p className='help-text'>{'Location of Mattermost push notification service you can set up behind your firewall using https://github.com/mattermost/push-proxy. For testing you can use https://push-test.mattermost.com, which connects to the sample Mattermost iOS app in the public Apple AppStore. Please do not use test service for production deployments.'}</p>
<p className='help-text'>
<FormattedMessage
id='admin.email.pushServerDesc'
defaultMessage='Location of Mattermost push notification service you can set up behind your firewall using https://github.com/mattermost/push-proxy. For testing you can use https://push-test.mattermost.com, which connects to the sample Mattermost iOS app in the public Apple AppStore. Please do not use test service for production deployments.'
/>
</p>
</div>
</div>
@@ -599,9 +837,12 @@ export default class EmailSettings extends React.Component {
className={saveClass}
onClick={this.handleSubmit}
id='save-button'
data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'}
data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + formatMessage(holders.saving)}
>
{'Save'}
<FormattedMessage
id='admin.email.save'
defaultMessage='Save'
/>
</button>
</div>
</div>
@@ -613,5 +854,8 @@ export default class EmailSettings extends React.Component {
}
EmailSettings.propTypes = {
intl: intlShape.isRequired,
config: React.PropTypes.object
};
export default injectIntl(EmailSettings);

Просмотреть файл

@@ -1,6 +1,8 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {FormattedMessage} from 'mm-intl';
var Modal = ReactBootstrap.Modal;
export default class SelectTeamModal extends React.Component {
@@ -45,7 +47,12 @@ export default class SelectTeamModal extends React.Component {
onHide={this.doCancel}
>
<Modal.Header closeButton={true}>
<Modal.Title>{'Select Team'}</Modal.Title>
<Modal.Title>
<FormattedMessage
id='admin.select_team.selectTeam'
defaultMessage='Select Team'
/>
</Modal.Title>
</Modal.Header>
<form
role='form'
@@ -70,7 +77,10 @@ export default class SelectTeamModal extends React.Component {
className='btn btn-default'
onClick={this.doCancel}
>
{'Close'}
<FormattedMessage
id='admin.select_team.close'
defaultMessage='Close'
/>
</button>
<button
onClick={this.doSubmit}
@@ -78,7 +88,10 @@ export default class SelectTeamModal extends React.Component {
className='btn btn-primary'
tabIndex='2'
>
{'Select'}
<FormattedMessage
id='admin.select_team.select'
defaultMessage='Select'
/>
</button>
</Modal.Footer>
</form>
@@ -96,4 +109,4 @@ SelectTeamModal.propTypes = {
show: React.PropTypes.bool.isRequired,
onModalSubmit: React.PropTypes.func,
onModalDismissed: React.PropTypes.func
};
};

Просмотреть файл

@@ -3,6 +3,16 @@
import ErrorStore from '../stores/error_store.jsx';
// import mm-intl is required for the tool to be able to extract the messages
import {defineMessages} from 'mm-intl';
var messages = defineMessages({
preview: {
id: 'error_bar.preview_mode',
defaultMessage: 'Preview Mode: Email notifications have not been configured'
}
});
export default class ErrorBar extends React.Component {
constructor() {
super();
@@ -49,12 +59,7 @@ export default class ErrorBar extends React.Component {
componentWillMount() {
if (global.window.mm_config.SendEmailNotifications === 'false') {
ErrorStore.storeLastError({message: this.props.intl.formatMessage(
{
id: 'error_bar.preview_mode',
defaultMessage: 'Preview Mode: Email notifications have not been configured'
}
)});
ErrorStore.storeLastError({message: this.props.intl.formatMessage(messages.preview)});
this.onErrorChange();
}
}

Просмотреть файл

@@ -1,6 +1,8 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {FormattedMessage} from 'mm-intl';
export default class LoadingScreen extends React.Component {
constructor(props) {
super(props);
@@ -13,7 +15,12 @@ export default class LoadingScreen extends React.Component {
style={{position: this.props.position}}
>
<div className='loading__content'>
<h3>Loading</h3>
<h3>
<FormattedMessage
id='loading_screen.loading'
defaultMessage='Loading'
/>
</h3>
<div className='round round-1'></div>
<div className='round round-2'></div>
<div className='round round-3'></div>