diff options
Diffstat (limited to 'web/react/components/register_app_modal.jsx')
-rw-r--r-- | web/react/components/register_app_modal.jsx | 157 |
1 files changed, 132 insertions, 25 deletions
diff --git a/web/react/components/register_app_modal.jsx b/web/react/components/register_app_modal.jsx index f49b33f73..e6d13863b 100644 --- a/web/react/components/register_app_modal.jsx +++ b/web/react/components/register_app_modal.jsx @@ -7,9 +7,22 @@ import ModalStore from '../stores/modal_store.jsx'; const Modal = ReactBootstrap.Modal; import Constants from '../utils/constants.jsx'; +import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; + const ActionTypes = Constants.ActionTypes; -export default class RegisterAppModal extends React.Component { +const holders = defineMessages({ + required: { + id: 'register_app.required', + defaultMessage: 'Required' + }, + optional: { + id: 'register_app.optional', + defaultMessage: 'Optional' + } +}); + +class RegisterAppModal extends React.Component { constructor() { super(); @@ -60,7 +73,7 @@ export default class RegisterAppModal extends React.Component { var name = this.refs.name.value; if (!name || name.length === 0) { - state.nameError = 'Application name must be filled in.'; + state.nameError = true; this.setState(state); return; } @@ -69,7 +82,7 @@ export default class RegisterAppModal extends React.Component { var homepage = this.refs.homepage.value; if (!homepage || homepage.length === 0) { - state.homepageError = 'Homepage must be filled in.'; + state.homepageError = true; this.setState(state); return; } @@ -81,7 +94,7 @@ export default class RegisterAppModal extends React.Component { var rawCallbacks = this.refs.callback.value.trim(); if (!rawCallbacks || rawCallbacks.length === 0) { - state.callbackError = 'At least one callback URL must be filled in.'; + state.callbackError = true; this.setState(state); return; } @@ -112,17 +125,45 @@ export default class RegisterAppModal extends React.Component { this.setState({saved: this.refs.save.checked}); } render() { + const {formatMessage} = this.props.intl; var nameError; if (this.state.nameError) { - nameError = <div className='form-group has-error'><label className='control-label'>{this.state.nameError}</label></div>; + nameError = ( + <div className='form-group has-error'> + <label className='control-label'> + <FormattedMessage + id='register_app.nameError' + defaultMessage='Application name must be filled in.' + /> + </label> + </div> + ); } var homepageError; if (this.state.homepageError) { - homepageError = <div className='form-group has-error'><label className='control-label'>{this.state.homepageError}</label></div>; + homepageError = ( + <div className='form-group has-error'> + <label className='control-label'> + <FormattedMessage + id='register_app.homepageError' + defaultMessage='Homepage must be filled in.' + /> + </label> + </div> + ); } var callbackError; if (this.state.callbackError) { - callbackError = <div className='form-group has-error'><label className='control-label'>{this.state.callbackError}</label></div>; + callbackError = ( + <div className='form-group has-error'> + <label className='control-label'> + <FormattedMessage + id='register_app.callbackError' + defaultMessage='At least one callback URL must be filled in.' + /> + </label> + </div> + ); } var serverError; if (this.state.serverError) { @@ -135,50 +176,75 @@ export default class RegisterAppModal extends React.Component { body = ( <div className='settings-modal'> <div className='form-horizontal user-settings'> - <h4 className='padding-bottom x3'>{'Register a New Application'}</h4> + <h4 className='padding-bottom x3'> + <FormattedMessage + id='register_app.title' + defaultMessage='Register a New Application' + /> + </h4> <div className='row'> - <label className='col-sm-4 control-label'>{'Application Name'}</label> + <label className='col-sm-4 control-label'> + <FormattedMessage + id='register_app.name' + defaultMessage='Application Name' + /> + </label> <div className='col-sm-7'> <input ref='name' className='form-control' type='text' - placeholder='Required' + placeholder={formatMessage(holders.required)} /> {nameError} </div> </div> <div className='row padding-top x2'> - <label className='col-sm-4 control-label'>{'Homepage URL'}</label> + <label className='col-sm-4 control-label'> + <FormattedMessage + id='register_app.homepage' + defaultMessage='Homepage URL' + /> + </label> <div className='col-sm-7'> <input ref='homepage' className='form-control' type='text' - placeholder='Required' + placeholder={formatMessage(holders.required)} /> {homepageError} </div> </div> <div className='row padding-top x2'> - <label className='col-sm-4 control-label'>{'Description'}</label> + <label className='col-sm-4 control-label'> + <FormattedMessage + id='register_app.description' + defaultMessage='Description' + /> + </label> <div className='col-sm-7'> <input ref='desc' className='form-control' type='text' - placeholder='Optional' + placeholder={formatMessage(holders.optional)} /> </div> </div> <div className='row padding-top padding-bottom x2'> - <label className='col-sm-4 control-label'>{'Callback URL'}</label> + <label className='col-sm-4 control-label'> + <FormattedMessage + id='register_app.callback' + defaultMessage='Callback URL' + /> + </label> <div className='col-sm-7'> <textarea ref='callback' className='form-control' type='text' - placeholder='Required' + placeholder={formatMessage(holders.required)} rows='5' /> {callbackError} @@ -196,7 +262,10 @@ export default class RegisterAppModal extends React.Component { className='btn btn-default' onClick={() => this.updateShow(false)} > - {'Cancel'} + <FormattedMessage + id='register_app.cancel' + defaultMessage='Cancel' + /> </button> <button onClick={this.handleSubmit} @@ -204,7 +273,10 @@ export default class RegisterAppModal extends React.Component { className='btn btn-primary' tabIndex='3' > - {'Register'} + <FormattedMessage + id='register_app.register' + defaultMessage='Register' + /> </button> </div> ); @@ -216,10 +288,20 @@ export default class RegisterAppModal extends React.Component { body = ( <div className='form-horizontal user-settings'> - <h4 className='padding-bottom x3'>{'Your Application Credentials'}</h4> + <h4 className='padding-bottom x3'> + <FormattedMessage + id='register_app.credentialsTitle' + defaultMessage='Your Application Credentials' + /> + </h4> <br/> <div className='row'> - <label className='col-sm-4 control-label'>{'Client ID'}</label> + <label className='col-sm-4 control-label'> + <FormattedMessage + id='register_app.clientId' + defaultMessage='Client ID' + /> + </label> <div className='col-sm-7'> <input className='form-control' @@ -231,7 +313,11 @@ export default class RegisterAppModal extends React.Component { </div> <br/> <div className='row padding-top x2'> - <label className='col-sm-4 control-label'>{'Client Secret'}</label> + <label className='col-sm-4 control-label'> + <FormattedMessage + id='register_app.clientSecret' + defaultMessage='Client Secret' + /></label> <div className='col-sm-7'> <input className='form-control' @@ -243,7 +329,12 @@ export default class RegisterAppModal extends React.Component { </div> <br/> <br/> - <strong>{'Save these somewhere SAFE and SECURE. Treat your Client ID as your app\'s username and your Client Secret as the app\'s password.'}</strong> + <strong> + <FormattedMessage + id='register_app.credentialsDescription' + defaultMessage="Save these somewhere SAFE and SECURE. Treat your Client ID as your app's username and your Client Secret as the app's password." + /> + </strong> <br/> <br/> <div className='checkbox'> @@ -254,7 +345,10 @@ export default class RegisterAppModal extends React.Component { checked={this.state.saved} onChange={this.save} /> - {'I have saved both my Client Id and Client Secret somewhere safe'} + <FormattedMessage + id='register_app.credentialsSave' + defaultMessage='I have saved both my Client Id and Client Secret somewhere safe' + /> </label> </div> </div> @@ -269,7 +363,10 @@ export default class RegisterAppModal extends React.Component { this.updateShow(false); }} > - {'Close'} + <FormattedMessage + id='register_app.close' + defaultMessage='Close' + /> </a> ); } @@ -281,7 +378,12 @@ export default class RegisterAppModal extends React.Component { onHide={() => this.updateShow(false)} > <Modal.Header closeButton={true}> - <Modal.Title>{'Developer Applications'}</Modal.Title> + <Modal.Title> + <FormattedMessage + id='register_app.dev' + defaultMessage='Developer Applications' + /> + </Modal.Title> </Modal.Header> <form role='form' @@ -300,3 +402,8 @@ export default class RegisterAppModal extends React.Component { } } +RegisterAppModal.propTypes = { + intl: intlShape.isRequired +}; + +export default injectIntl(RegisterAppModal); |