mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

PLT-7: Refactoring frontend (chunk 3)

Просмотр исходного кода 
- Tutorial components
- Claim components
- Suggestion components
Этот коммит содержится в:
Elias Nahum
2016-01-28 11:21:12 -03:00
родитель c8ca70870f
Коммит a72ba14024
9 изменённых файлов: 297 добавлений и 44 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

11
web/react/components/claim/claim_account.jsx
Просмотреть файл

@@ -4,6 +4,8 @@
import EmailToSSO from './email_to_sso.jsx';
import SSOToEmail from './sso_to_email.jsx';
import {FormattedMessage} from 'mm-intl';
export default class ClaimAccount extends React.Component {
constructor(props) {
super(props);
@@ -13,7 +15,14 @@ export default class ClaimAccount extends React.Component {
render() {
let content;
if (this.props.email === '') {
content = <p>{'No email specified.'}</p>;
content = (
<p>
<FormattedMessage
id='claim.account.noEmail'
defaultMessage='No email specified'
/>
</p>
);
} else if (this.props.currentType === '' && this.props.newType !== '') {
content = (
<EmailToSSO

61
web/react/components/claim/email_to_sso.jsx
Просмотреть файл

@@ -4,7 +4,20 @@
import * as Utils from '../../utils/utils.jsx';
import * as Client from '../../utils/client.jsx';
export default class EmailToSSO extends React.Component {
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const holders = defineMessages({
pwdError: {
id: 'claim.email_to_sso.pwdError',
defaultMessage: 'Please enter your password.'
},
pwd: {
id: 'claim.email_to_sso.pwd',
defaultMessage: 'Password'
}
});
class EmailToSSO extends React.Component {
constructor(props) {
super(props);
@@ -18,7 +31,7 @@ export default class EmailToSSO extends React.Component {
var password = ReactDOM.findDOMNode(this.refs.password).value.trim();
if (!password) {
state.error = 'Please enter your password.';
state.error = this.props.intl.formatMessage(holders.pwdError);
this.setState(state);
return;
}
@@ -59,17 +72,42 @@ export default class EmailToSSO extends React.Component {
return (
<div className='col-sm-12'>
<div className='signup-team__container'>
<h3>{'Switch Email/Password Account to ' + uiType}</h3>
<h3>
<FormattedMessage
id='claim.email_to_sso.title'
defaultMessage='Switch Email/Password Account to {uiType}'
values={{
uiType: uiType
}}
/>
</h3>
<form onSubmit={this.submit}>
<p>{'Upon claiming your account, you will only be able to login with ' + Utils.toTitleCase(this.props.type) + ' SSO.'}</p>
<p>{'Enter the password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p>
<p>
<FormattedMessage
id='claim.email_to_sso.ssoType'
defaultMessage='Upon claiming your account, you will only be able to login with {type} SSO'
values={{
type: Utils.toTitleCase(this.props.type)
}}
/>
</p>
<p>
<FormattedMessage
id='claim.email_to_sso.enterPwd'
defaultMessage='Enter the password for your {team} {site} account'
values={{
team: this.props.teamDisplayName,
site: global.window.mm_config.SiteName
}}
/>
</p>
<div className={formClass}>
<input
type='password'
className='form-control'
name='password'
ref='password'
placeholder='Password'
placeholder={this.props.intl.formatMessage(holders.pwd)}
spellCheck='false'
/>
</div>
@@ -78,7 +116,13 @@ export default class EmailToSSO extends React.Component {
type='submit'
className='btn btn-primary'
>
{'Switch account to ' + uiType}
<FormattedMessage
id='claim.email_to_sso.switchTo'
defaultMessage='Switch account to {uiType}'
values={{
uiType: uiType
}}
/>
</button>
</form>
</div>
@@ -90,8 +134,11 @@ export default class EmailToSSO extends React.Component {
EmailToSSO.defaultProps = {
};
EmailToSSO.propTypes = {
intl: intlShape.isRequired,
type: React.PropTypes.string.isRequired,
email: React.PropTypes.string.isRequired,
teamName: React.PropTypes.string.isRequired,
teamDisplayName: React.PropTypes.string.isRequired
};
export default injectIntl(EmailToSSO);

72
web/react/components/claim/sso_to_email.jsx
Просмотреть файл

@@ -4,7 +4,28 @@
import * as Utils from '../../utils/utils.jsx';
import * as Client from '../../utils/client.jsx';
export default class SSOToEmail extends React.Component {
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const holders = defineMessages({
enterPwd: {
id: 'claim.sso_to_email.enterPwd',
defaultMessage: 'Please enter a password.'
},
pwdNotMatch: {
id: 'claim.sso_to_email.pwdNotMatch',
defaultMessage: 'Password do not match.'
},
newPwd: {
id: 'claim.sso_to_email.newPwd',
defaultMessage: 'New Password'
},
confirm: {
id: 'claim.sso_to_email.confirm',
defaultMessage: 'Confirm Password'
}
});
class SSOToEmail extends React.Component {
constructor(props) {
super(props);
@@ -13,19 +34,20 @@ export default class SSOToEmail extends React.Component {
this.state = {};
}
submit(e) {
const {formatMessage} = this.props.intl;
e.preventDefault();
const state = {};
const password = ReactDOM.findDOMNode(this.refs.password).value.trim();
if (!password) {
state.error = 'Please enter a password.';
state.error = formatMessage(holders.enterPwd);
this.setState(state);
return;
}
const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value.trim();
if (!confirmPassword || password !== confirmPassword) {
state.error = 'Passwords do not match.';
state.error = formatMessage(holders.pwdNotMatch);
this.setState(state);
return;
}
@@ -50,6 +72,7 @@ export default class SSOToEmail extends React.Component {
);
}
render() {
const {formatMessage} = this.props.intl;
var error = null;
if (this.state.error) {
error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
@@ -65,17 +88,39 @@ export default class SSOToEmail extends React.Component {
return (
<div className='col-sm-12'>
<div className='signup-team__container'>
<h3>{'Switch ' + uiType + ' Account to Email'}</h3>
<h3>
<FormattedMessage
id='claim.sso_to_email.title'
defaultMessage='Switch {type} Account to Email'
values={{
type: uiType
}}
/>
</h3>
<form onSubmit={this.submit}>
<p>{'Upon changing your account type, you will only be able to login with your email and password.'}</p>
<p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p>
<p>
<FormattedMessage
id='claim.sso_to_email.description'
defaultMessage='Upon changing your account type, you will only be able to login with your email and password.'
/>
</p>
<p>
<FormattedMessage
id='claim.sso_to_email_newPwd'
defaultMessage='Enter a new password for your {team} {site} account'
values={{
team: this.props.teamDisplayName,
site: global.window.mm_config.SiteName
}}
/>
</p>
<div className={formClass}>
<input
type='password'
className='form-control'
name='password'
ref='password'
placeholder='New Password'
placeholder={formatMessage(holders.newPwd)}
spellCheck='false'
/>
</div>
@@ -85,7 +130,7 @@ export default class SSOToEmail extends React.Component {
className='form-control'
name='passwordconfirm'
ref='passwordconfirm'
placeholder='Confirm Password'
placeholder={formatMessage(holders.confirm)}
spellCheck='false'
/>
</div>
@@ -94,7 +139,13 @@ export default class SSOToEmail extends React.Component {
type='submit'
className='btn btn-primary'
>
{'Switch ' + uiType + ' account to email and password'}
<FormattedMessage
id='claim.sso_to_email.switchTo'
defaultMessage='Switch {type} to email and password'
values={{
type: uiType
}}
/>
</button>
</form>
</div>
@@ -106,8 +157,11 @@ export default class SSOToEmail extends React.Component {
SSOToEmail.defaultProps = {
};
SSOToEmail.propTypes = {
intl: intlShape.isRequired,
currentType: React.PropTypes.string.isRequired,
email: React.PropTypes.string.isRequired,
teamName: React.PropTypes.string.isRequired,
teamDisplayName: React.PropTypes.string.isRequired
};
export default injectIntl(SSOToEmail);

16
web/react/components/suggestion/at_mention_provider.jsx
Просмотреть файл

@@ -5,6 +5,8 @@ import SuggestionStore from '../../stores/suggestion_store.jsx';
import UserStore from '../../stores/user_store.jsx';
import * as Utils from '../../utils/utils.jsx';
import {FormattedMessage} from 'mm-intl';
const MaxUserSuggestions = 40;
class AtMentionSuggestion extends React.Component {
@@ -16,11 +18,21 @@ class AtMentionSuggestion extends React.Component {
let icon;
if (item.username === 'all') {
username = 'all';
description = 'Notifies everyone in the team';
description = (
<FormattedMessage
id='suggestion.mention.all'
defaultMessage='Notifies everyone in the team'
/>
);
icon = <i className='mention-img fa fa-users fa-2x' />;
} else if (item.username === 'channel') {
username = 'channel';
description = 'Notifies everyone in the channel';
description = (
<FormattedMessage
id='suggestion.mention.channel'
defaultMessage='Notifies everyone in the channel'
/>
);
icon = <i className='mention-img fa fa-users fa-2x' />;
} else {
username = item.username;

17
web/react/components/suggestion/search_suggestion_list.jsx
Просмотреть файл

@@ -3,7 +3,8 @@
import Constants from '../../utils/constants.jsx';
import SuggestionList from './suggestion_list.jsx';
import * as Utils from '../../utils/utils.jsx';
import {FormattedMessage} from 'mm-intl';
export default class SearchSuggestionList extends SuggestionList {
componentDidUpdate(prevProps, prevState) {
@@ -19,9 +20,19 @@ export default class SearchSuggestionList extends SuggestionList {
renderChannelDivider(type) {
let text;
if (type === Constants.OPEN_CHANNEL) {
text = 'Public ' + Utils.getChannelTerm(type) + 's';
text = (
<FormattedMessage
id='suggestion.search.public'
defaultMessage='Public Channels'
/>
);
} else {
text = 'Private ' + Utils.getChannelTerm(type) + 's';
text = (
<FormattedMessage
id='suggestion.search.private'
defaultMessage='Public Groups'
/>
);
}
return (

65
web/react/components/tutorial/tutorial_intro_screens.jsx
Просмотреть файл

@@ -9,6 +9,9 @@ import * as Utils from '../../utils/utils.jsx';
import * as AsyncClient from '../../utils/async_client.jsx';
import Constants from '../../utils/constants.jsx';
import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
const Preferences = Constants.Preferences;
const NUM_SCREENS = 3;
@@ -61,10 +64,13 @@ export default class TutorialIntroScreens extends React.Component {
return (
<div>
<h3>{'Welcome to:'}</h3>
<h1>{'Mattermost'}</h1>
<p>{'Your team communication all in one place, instantly searchable and available anywhere.'}</p>
<p>{'Keep your team connected to help them achieve what matters most.'}</p>
<FormattedHTMLMessage
id='tutorial_intro.screenOne'
defaultMessage='<h3>Welcome to:</h3>
<h1>Mattermost</h1>
<p>Your team communication all in one place, instantly searchable and available anywhere</p>
<p>Keep your team connected to help them achieve what matters most.</p>'
/>
{circles}
</div>
);
@@ -74,9 +80,12 @@ export default class TutorialIntroScreens extends React.Component {
return (
<div>
<h3>{'How Mattermost works:'}</h3>
<p>{'Communication happens in public discussion channels, private groups and direct messages.'}</p>
<p>{'Everything is archived and searchable from any web-enabled desktop, laptop or phone.'}</p>
<FormattedHTMLMessage
id='tutorial_intro.screenTwo'
defaultMessage='<h3>How Mattermost works:</h3>
<p>Communication happens in public discussion channels, private groups and direct messages.</p>
<p>Everything is archived and searchable from any web-enabled desktop, laptop or phone.</p>'
/>
{circles}
</div>
);
@@ -92,7 +101,10 @@ export default class TutorialIntroScreens extends React.Component {
data-toggle='modal'
data-target='#invite_member'
>
{'Invite teammates'}
<FormattedMessage
id='tutorial_intro.invite'
defaultMessage='Invite teammates'
/>
</a>
);
} else {
@@ -105,7 +117,10 @@ export default class TutorialIntroScreens extends React.Component {
data-title='Team Invite'
data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id}
>
{'Invite teammates'}
<FormattedMessage
id='tutorial_intro.teamInvite'
defaultMessage='Team Invite'
/>
</a>
);
}
@@ -116,7 +131,10 @@ export default class TutorialIntroScreens extends React.Component {
if (global.window.mm_config.SupportEmail) {
supportInfo = (
<p>
{'Need anything, just email us at '}
<FormattedMessage
id='tutorial_intro.support'
defaultMessage='Need anything, just email us at '
/>
<a
href={'mailto:' + global.window.mm_config.SupportEmail}
target='_blank'
@@ -130,13 +148,24 @@ export default class TutorialIntroScreens extends React.Component {
return (
<div>
<h3>{'You’re all set'}</h3>
<h3>
<FormattedMessage
id='tutorial_intro.allSet'
defaultMessage='You’re all set'
/>
</h3>
<p>
{inviteModalLink}
{' when you’re ready.'}
<FormattedMessage
id='tutorial_intro.whenReady'
defaultMessage=' when you’re ready.'
/>
</p>
{supportInfo}
{'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'}
<FormattedMessage
id='tutorial_intro.end'
defaultMessage='Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'
/>
{circles}
</div>
);
@@ -186,14 +215,20 @@ export default class TutorialIntroScreens extends React.Component {
tabIndex='1'
onClick={this.handleNext}
>
{'Next'}
<FormattedMessage
id='tutorial_intro.next'
defaultMessage='Next'
/>
</button>
<a
className='tutorial-skip'
href='#'
onClick={this.skipTutorial}
>
{'Skip tutorial'}
<FormattedMessage
id='tutorial_intro.skip'
defaultMessage='Skip tutorial'
/>
</a>
</div>
</div>

25
web/react/components/tutorial/tutorial_tip.jsx
Просмотреть файл

@@ -6,6 +6,9 @@ import PreferenceStore from '../../stores/preference_store.jsx';
import * as AsyncClient from '../../utils/async_client.jsx';
import Constants from '../../utils/constants.jsx';
import {FormattedMessage} from 'mm-intl';
const Preferences = Constants.Preferences;
const Overlay = ReactBootstrap.Overlay;
@@ -46,7 +49,17 @@ export default class TutorialTip extends React.Component {
AsyncClient.savePreferences([preference]);
}
render() {
const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? 'Okay' : 'Next';
const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? (
<FormattedMessage
id='tutorial_tip.ok'
defaultMessage='Okay'
/>
) : (
<FormattedMessage
id='tutorial_tip.next'
defaultMessage='Next'
/>
);
const dots = [];
if (this.props.screens.length > 1) {
@@ -111,12 +124,18 @@ export default class TutorialTip extends React.Component {
{buttonText}
</button>
<div className='tip-opt'>
{'Seen this before? '}
<FormattedMessage
id='tutorial_tip.seen'
defaultMessage='Seen this before? '
/>
<a
href='#'
onClick={this.skipTutorial}
>
{'Opt out of these tips.'}
<FormattedMessage
id='tutorial_tip.out'
defaultMessage='Opt out of these tips.'
/>
</a>
</div>
</div>

35
web/static/i18n/en.json
Просмотреть файл

@@ -396,6 +396,39 @@
"admin.user_item.makeActive": "Make Active",
"admin.user_item.makeInactive": "Make Inactive",
"admin.user_item.resetPwd": "Reset Password",
"claim.account.noEmail": "No email specified",
"claim.email_to_sso.pwdError": "Please enter your password.",
"claim.email_to_sso.pwd": "Password",
"claim.email_to_sso.title": "Switch Email/Password Account to {uiType}",
"claim.email_to_sso.ssoType": "Upon claiming your account, you will only be able to login with {type} SSO",
"claim.email_to_sso.enterPwd": "Enter the password for your {team} {site} account",
"claim.email_to_sso.switchTo": "Switch account to {uiType}",
"claim.sso_to_email.enterPwd": "Please enter a password.",
"claim.sso_to_email.pwdNotMatch": "Password do not match.",
"claim.sso_to_email.newPwd": "New Password",
"claim.sso_to_email.confirm": "Confirm Password",
"claim.sso_to_email.title": "Switch {type} Account to Email",
"claim.sso_to_email.description": "Upon changing your account type, you will only be able to login with your email and password.",
"claim.sso_to_email_newPwd": "Enter a new password for your {team} {site} account",
"claim.sso_to_email.switchTo": "Switch {type} to email and password",
"error_bar.preview_mode": "Preview Mode: Email notifications have not been configured",
"loading_screen.loading": "Loading"
"loading_screen.loading": "Loading",
"suggestion.mention.all": "Notifies everyone in the team",
"suggestion.mention.channel": "Notifies everyone in the channel",
"suggestion.search.public": "Public Channels",
"suggestion.search.private": "Private Groups",
"tutorial_intro.screenOne": "<h3>Welcome to:</h3>\n <h1>Mattermost</h1>\n <p>Your team communication all in one place, instantly searchable and available anywhere</p>\n <p>Keep your team connected to help them achieve what matters most.</p>",
"tutorial_intro.screenTwo": "<h3>How Mattermost works:</h3>\n <p>Communication happens in public discussion channels, private groups and direct messages.</p>\n <p>Everything is archived and searchable from any web-enabled desktop, laptop or phone.</p>",
"tutorial_intro.invite": "Invite teammates",
"tutorial_intro.teamInvite": "Team Invite",
"tutorial_intro.support": "Need anything, just email us at ",
"tutorial_intro.allSet": "You’re all set",
"tutorial_intro.whenReady": " when you’re ready.",
"tutorial_intro.end": "Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.",
"tutorial_intro.next": "Next",
"tutorial_intro.skip": "Skip tutorial",
"tutorial_tip.ok": "Okay",
"tutorial_tip.next": "Next",
"tutorial_tip.seen": "Seen this before? ",
"tutorial_tip.out": "Opt out of these tips."
}

39
web/static/i18n/es.json
Просмотреть файл

@@ -250,7 +250,7 @@
"admin.reset_password.close": "Cerrar",
"admin.reset_password.newPassword": "Nueva contraseña",
"admin.reset_password.select": "Seleccionar",
"admin.reset_password.submit": "Por favor, introducir como mínimo {chars} caracteres.",
"admin.reset_password.submit": "Por favor, introducir como mínimo 5 caracteres.",
"admin.reset_password.title": "Reiniciar Contraseña",
"admin.select_team.close": "Cerrar",
"admin.select_team.select": "Seleccionar",
@@ -384,7 +384,7 @@
"admin.team.userCreationTitle": "Habilitar Creación de Usuarios: ",
"admin.team_analytics.activeUsers": "Active Users With Posts",
"admin.team_analytics.totalPosts": "Total de Mensajes",
"admin.userList.title": "Usuarios para {team}",
"admin.userList.title": "Usuarios para ",
"admin.userList.title2": "Usuarios para {team} ({count})",
"admin.user_item.inactive": "Inactivo",
"admin.user_item.makeActive": "Activar",
@@ -396,6 +396,39 @@
"admin.user_item.resetPwd": "Reiniciar Contraseña",
"admin.user_item.sysAdmin": "Admin de Sistema",
"admin.user_item.teamAdmin": "Admin de Equipo",
"claim.account.noEmail": "No se especifico un correo electrónico.",
"claim.email_to_sso.enterPwd": "Ingresa la contraseña para tu cuenta para {team} {site}",
"claim.email_to_sso.pwd": "Contraseña",
"claim.email_to_sso.pwdError": "Por favor introduce tu contraseña.",
"claim.email_to_sso.ssoType": "Al reclamar tu cuenta, sólo podrás iniciar sesión con {type} SSO",
"claim.email_to_sso.switchTo": "Cambiar cuenta a ",
"claim.email_to_sso.title": "Cambiar Cuenta de Correo/Contraseña a ",
"claim.sso_to_email.confirm": "Confirmar Contraseña",
"claim.sso_to_email.description": "Al cambiar el tipo de cuenta, sólo podrás iniciar sesión con tu correo electrónico y contraseña.",
"claim.sso_to_email.enterPwd": "Por favor ingresa una contraseña.",
"claim.sso_to_email.newPwd": "Nueva Contraseña",
"claim.sso_to_email.pwdNotMatch": "Las contraseñas no coinciden.",
"claim.sso_to_email.switchTo": "Cambiar {type} a correo electrónico y contraseña",
"claim.sso_to_email.title": "Cambiar la cuenta de {type} a Correo Electrónico",
"claim.sso_to_email_newPwd": "Ingresa una nueva contraseña para tu cuenta de {team} {site}",
"error_bar.preview_mode": "Modo de prueba: Las notificaciones por correo electrónico no han sido configuradas",
"loading_screen.loading": "Cargando"
"loading_screen.loading": "Cargando",
"suggestion.mention.all": "Notifica a todas las personas en el equipo",
"suggestion.mention.channel": "Notifica a todas las personas en el canal",
"suggestion.search.private": "Grupos Privados",
"suggestion.search.public": "Canales Públicos",
"tutorial_intro.allSet": "Ya estás listo para comenzar",
"tutorial_intro.end": "Pincha “Siguiente” para entrar al Canal General. Este es el primer canal que ven tus compañeros cuando ingresan. Utilizalo para mandar mensajes que todos deben leer.",
"tutorial_intro.invite": "Invitar compañeros",
"tutorial_intro.next": "Seguir",
"tutorial_intro.screenOne": "<h3>Bienvenido a:</h3> <h1>Mattermost</h1> <p>Las comunicaciones de tu equipo en un solo lugar, con búsquedas instantáneas y disponible desde donde sea.</p> <p>Mantén a tu equipo conectado para ayudarlos a conseguir lo que realmente importa.</p>",
"tutorial_intro.screenTwo": "<h3>Cómo funciona Mattermost:</h3> <p>Las comunicaciones ocurren en los canales de discusión los cuales son públicos, o en grupos privados e incluso con mensajes privados.</p> <p>Todo lo que ocurre es archivado y se puede buscar en cualquier momento desde cualquier dispositivo con acceso a Mattermost.</p>",
"tutorial_intro.skip": "Saltar el tutorial",
"tutorial_intro.support": "Necesitas algo, escribemos a ",
"tutorial_intro.teamInvite": "Invitar a tu Equipo",
"tutorial_intro.whenReady": " cuando estés listo(a).",
"tutorial_tip.next": "Siguiente",
"tutorial_tip.ok": "Aceptar",
"tutorial_tip.out": "No optar por estos consejos.",
"tutorial_tip.seen": "¿Haz visto esto antes? "
}