From c8ca70870f1e202eb5784839520199fdf0beaeec Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Wed, 27 Jan 2016 15:49:26 -0300
Subject: PLT-7: Refactoring frontend (chunk 2) - System Console complete

---
 .../components/admin_console/gitlab_settings.jsx   | 150 +++++++++++++++++----
 1 file changed, 121 insertions(+), 29 deletions(-)

(limited to 'web/react/components/admin_console/gitlab_settings.jsx')

diff --git a/web/react/components/admin_console/gitlab_settings.jsx b/web/react/components/admin_console/gitlab_settings.jsx
index 8c689a2d8..744fa3b19 100644
--- a/web/react/components/admin_console/gitlab_settings.jsx
+++ b/web/react/components/admin_console/gitlab_settings.jsx
@@ -4,7 +4,36 @@
 import * as Client from '../../utils/client.jsx';
 import * as AsyncClient from '../../utils/async_client.jsx';
 
-export default class GitLabSettings extends React.Component {
+import {injectIntl, intlShape, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    clientIdExample: {
+        id: 'admin.gitlab.clientIdExample',
+        defaultMessage: 'Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
+    },
+    clientSecretExample: {
+        id: 'admin.gitlab.clientSecretExample',
+        defaultMessage: 'Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
+    },
+    authExample: {
+        id: 'admin.gitlab.authExample',
+        defaultMessage: 'Ex ""'
+    },
+    tokenExample: {
+        id: 'admin.gitlab.tokenExample',
+        defaultMessage: 'Ex ""'
+    },
+    userExample: {
+        id: 'admin.gitlab.userExample',
+        defaultMessage: 'Ex ""'
+    },
+    saving: {
+        id: 'admin.gitlab.saving',
+        defaultMessage: 'Saving Config...'
+    }
+});
+
+class GitLabSettings extends React.Component {
     constructor(props) {
         super(props);
 
@@ -65,6 +94,7 @@ export default class GitLabSettings 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>;
@@ -78,7 +108,12 @@ export default class GitLabSettings extends React.Component {
         return (
             <div className='wrapper--fixed'>
 
-                <h3>{'GitLab Settings'}</h3>
+                <h3>
+                    <FormattedMessage
+                        id='admin.gitlab.settingsTitle'
+                        defaultMessage='GitLab Settings'
+                    />
+                </h3>
                 <form
                     className='form-horizontal'
                     role='form'
@@ -89,7 +124,10 @@ export default class GitLabSettings extends React.Component {
                             className='control-label col-sm-4'
                             htmlFor='Enable'
                         >
-                            {'Enable Sign Up With GitLab: '}
+                            <FormattedMessage
+                                id='admin.gitlab.enableTitle'
+                                defaultMessage='Enable Sign Up With GitLab: '
+                            />
                         </label>
                         <div className='col-sm-8'>
                             <label className='radio-inline'>
@@ -101,7 +139,10 @@ export default class GitLabSettings extends React.Component {
                                     defaultChecked={this.props.config.GitLabSettings.Enable}
                                     onChange={this.handleChange.bind(this, 'EnableTrue')}
                                 />
-                                    {'true'}
+                                    <FormattedMessage
+                                        id='admin.gitlab.true'
+                                        defaultMessage='true'
+                                    />
                             </label>
                             <label className='radio-inline'>
                                 <input
@@ -111,18 +152,23 @@ export default class GitLabSettings extends React.Component {
                                     defaultChecked={!this.props.config.GitLabSettings.Enable}
                                     onChange={this.handleChange.bind(this, 'EnableFalse')}
                                 />
-                                    {'false'}
+                                    <FormattedMessage
+                                        id='admin.gitlab.false'
+                                        defaultMessage='false'
+                                    />
                             </label>
                             <p className='help-text'>
-                                {'When true, Mattermost allows team creation and account signup using GitLab OAuth.'} <br/>
+                                <FormattedMessage
+                                    id='admin.gitlab.enableDescription'
+                                    defaultMessage='When true, Mattermost allows team creation and account signup using GitLab OAuth.'
+                                />
+                                <br/>
                             </p>
                             <div className='help-text'>
-                                <ol>
-                                    <li>{'Log in to your GitLab account and go to Applications -> Profile Settings.'}</li>
-                                    <li>{'Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". '}</li>
-                                    <li>{'Then use "Secret" and "Id" fields from GitLab to complete the options below.'}</li>
-                                    <li>{'Complete the Endpoint URLs below. '}</li>
-                                </ol>
+                                <FormattedHTMLMessage
+                                    id='admin.gitlab.EnableHtmlDesc'
+                                    defaultMessage='<ol><li>Log in to your GitLab account and go to Applications -> Profile Settings.</li><li>Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". </li><li>Then use "Secret" and "Id" fields from GitLab to complete the options below.</li><li>Complete the Endpoint URLs below. </li></ol>'
+                                />
                             </div>
                         </div>
                     </div>
@@ -132,7 +178,10 @@ export default class GitLabSettings extends React.Component {
                             className='control-label col-sm-4'
                             htmlFor='Id'
                         >
-                            {'Id:'}
+                            <FormattedMessage
+                                id='admin.gitlab.clientIdTitle'
+                                defaultMessage='Id:'
+                            />
                         </label>
                         <div className='col-sm-8'>
                             <input
@@ -140,12 +189,17 @@ export default class GitLabSettings extends React.Component {
                                 className='form-control'
                                 id='Id'
                                 ref='Id'
-                                placeholder='Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
+                                placeholder={formatMessage(holders.clientIdExample)}
                                 defaultValue={this.props.config.GitLabSettings.Id}
                                 onChange={this.handleChange}
                                 disabled={!this.state.Enable}
                             />
-                            <p className='help-text'>{'Obtain this value via the instructions above for logging into GitLab'}</p>
+                            <p className='help-text'>
+                                <FormattedMessage
+                                    id='admin.gitlab.clientIdDescription'
+                                    defaultMessage='Obtain this value via the instructions above for logging into GitLab'
+                                />
+                            </p>
                         </div>
                     </div>
 
@@ -154,7 +208,10 @@ export default class GitLabSettings extends React.Component {
                             className='control-label col-sm-4'
                             htmlFor='Secret'
                         >
-                            {'Secret:'}
+                            <FormattedMessage
+                                id='admin.gitlab.clientSecretTitle'
+                                defaultMessage='Secret:'
+                            />
                         </label>
                         <div className='col-sm-8'>
                             <input
@@ -162,12 +219,17 @@ export default class GitLabSettings extends React.Component {
                                 className='form-control'
                                 id='Secret'
                                 ref='Secret'
-                                placeholder='Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
+                                placeholder={formatMessage(holders.clientSecretExample)}
                                 defaultValue={this.props.config.GitLabSettings.Secret}
                                 onChange={this.handleChange}
                                 disabled={!this.state.Enable}
                             />
-                            <p className='help-text'>{'Obtain this value via the instructions above for logging into GitLab.'}</p>
+                            <p className='help-text'>
+                                <FormattedMessage
+                                    id='admin.gitab.clientSecretDescription'
+                                    defaultMessage='Obtain this value via the instructions above for logging into GitLab.'
+                                />
+                            </p>
                         </div>
                     </div>
 
@@ -176,7 +238,10 @@ export default class GitLabSettings extends React.Component {
                             className='control-label col-sm-4'
                             htmlFor='AuthEndpoint'
                         >
-                            {'Auth Endpoint:'}
+                            <FormattedMessage
+                                id='admin.gitlab.authTitle'
+                                defaultMessage='Auth Endpoint:'
+                            />
                         </label>
                         <div className='col-sm-8'>
                             <input
@@ -184,12 +249,17 @@ export default class GitLabSettings extends React.Component {
                                 className='form-control'
                                 id='AuthEndpoint'
                                 ref='AuthEndpoint'
-                                placeholder='Ex ""'
+                                placeholder={formatMessage(holders.authExample)}
                                 defaultValue={this.props.config.GitLabSettings.AuthEndpoint}
                                 onChange={this.handleChange}
                                 disabled={!this.state.Enable}
                             />
-                            <p className='help-text'>{'Enter https://<your-gitlab-url>/oauth/authorize (example https://example.com:3000/oauth/authorize).   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'}</p>
+                            <p className='help-text'>
+                                <FormattedMessage
+                                    id='admin.gitlab.authDescription'
+                                    defaultMessage='Enter https://<your-gitlab-url>/oauth/authorize (example https://example.com:3000/oauth/authorize).   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
+                                />
+                            </p>
                         </div>
                     </div>
 
@@ -198,7 +268,10 @@ export default class GitLabSettings extends React.Component {
                             className='control-label col-sm-4'
                             htmlFor='TokenEndpoint'
                         >
-                            {'Token Endpoint:'}
+                            <FormattedMessage
+                                id='admin.gitlab.tokenTitle'
+                                defaultMessage='Token Endpoint:'
+                            />
                         </label>
                         <div className='col-sm-8'>
                             <input
@@ -206,12 +279,17 @@ export default class GitLabSettings extends React.Component {
                                 className='form-control'
                                 id='TokenEndpoint'
                                 ref='TokenEndpoint'
-                                placeholder='Ex ""'
+                                placeholder={formatMessage(holders.tokenExample)}
                                 defaultValue={this.props.config.GitLabSettings.TokenEndpoint}
                                 onChange={this.handleChange}
                                 disabled={!this.state.Enable}
                             />
-                            <p className='help-text'>{'Enter https://<your-gitlab-url>/oauth/token.   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'}</p>
+                            <p className='help-text'>
+                                <FormattedMessage
+                                    id='admin.gitlab.tokenDescription'
+                                    defaultMessage='Enter https://<your-gitlab-url>/oauth/token.   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
+                                />
+                            </p>
                         </div>
                     </div>
 
@@ -220,7 +298,10 @@ export default class GitLabSettings extends React.Component {
                             className='control-label col-sm-4'
                             htmlFor='UserApiEndpoint'
                         >
-                            {'User API Endpoint:'}
+                            <FormattedMessage
+                                id='admin.gitlab.userTitle'
+                                defaultMessage='User API Endpoint:'
+                            />
                         </label>
                         <div className='col-sm-8'>
                             <input
@@ -228,12 +309,17 @@ export default class GitLabSettings extends React.Component {
                                 className='form-control'
                                 id='UserApiEndpoint'
                                 ref='UserApiEndpoint'
-                                placeholder='Ex ""'
+                                placeholder={formatMessage(holders.userExample)}
                                 defaultValue={this.props.config.GitLabSettings.UserApiEndpoint}
                                 onChange={this.handleChange}
                                 disabled={!this.state.Enable}
                             />
-                            <p className='help-text'>{'Enter https://<your-gitlab-url>/api/v3/user.   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'}</p>
+                            <p className='help-text'>
+                                <FormattedMessage
+                                    id='admin.gitlab.userDescription'
+                                    defaultMessage='Enter https://<your-gitlab-url>/api/v3/user.   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
+                                />
+                            </p>
                         </div>
                     </div>
 
@@ -246,9 +332,12 @@ export default class GitLabSettings 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.gitlab.save'
+                                    defaultMessage='Save'
+                                />
                             </button>
                         </div>
                     </div>
@@ -283,5 +372,8 @@ export default class GitLabSettings extends React.Component {
 // </div>
 
 GitLabSettings.propTypes = {
+    intl: intlShape.isRequired,
     config: React.PropTypes.object
 };
+
+export default injectIntl(GitLabSettings);
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22