From 78314c7d4d1417fd42ab48cbe41d360f80915453 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Sat, 30 Jan 2016 18:10:04 -0300
Subject: PLT-7: Refactoring frontend (chunk 6) - User settings

---
 web/react/components/register_app_modal.jsx | 157 +++++++++++++++++++++++-----
 1 file changed, 132 insertions(+), 25 deletions(-)

(limited to 'web/react/components/register_app_modal.jsx')

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);
-- 
cgit v1.2.3-1-g7c22