Merge pull request #1425 from weseek/reactify-admin/twitter-security-setting

Reactify admin/twitter security setting

resource/locales/en-US/translation.json

@@ -562,11 +562,12 @@
         "name": "Facebook OAuth"
       },
       "Twitter": {
+        "enable_twitter": "enable Twitter OAuth",
         "name": "Twitter OAuth",
-        "register_1": "Access <a href=\"%s\" target=\"_blank\">%s</a>",
+        "register_1": "Access {{link}}",
         "register_2": "Sign in Twitter",
         "register_3": "Create Credentials &rightarrow; OAuth client ID &rightarrow; Select \"Web application\"",
-        "register_4": "Register your OAuth App with one of Authorized redirect URIs as <code>%s</code>",
+        "register_4": "Register your OAuth App with one of Authorized redirect URIs as <code>{{url}}</code>",
         "register_5": "Copy and paste your ClientID and Client Secret above"
       },
       "GitHub": {

resource/locales/ja/translation.json

@@ -557,8 +557,9 @@
         "name": "Facebook OAuth"
       },
       "Twitter": {
+        "enable_twitter": "Twitter OAuth を有効にする",
         "name": "Twitter OAuth",
-        "register_1": "<a href=\"%s\" target=\"_blank\">%s</a>へアクセス",
+        "register_1": "{{link}} へアクセス",
         "register_2": "Twitterにサインイン",
         "register_3": "Create New Appをクリック &rightarrow; Application Detailsの各項目を入力",
         "register_4": "Create your Twitter Applicationで作成",

src/client/js/app.jsx

@@ -65,6 +65,7 @@ import AdminOidcSecurityContainer from './services/AdminOidcSecurityContainer';
 import AdminBasicSecurityContainer from './services/AdminBasicSecurityContainer';
 import AdminGoogleSecurityContainer from './services/AdminGoogleSecurityContainer';
 import AdminGithubSecurityContainer from './services/AdminGithubSecurityConatainer';
+import AdminTwitterSecurityContainer from './services/AdminTwitterSecurityContainer';
 
 const logger = loggerFactory('growi:app');
 
@@ -227,9 +228,10 @@ if (adminSecuritySettingElem != null) {
   const adminBasicSecurityContainer = new AdminBasicSecurityContainer(appContainer);
   const adminGoogleSecurityContainer = new AdminGoogleSecurityContainer(appContainer);
   const adminGithubSecurityContainer = new AdminGithubSecurityContainer(appContainer);
+  const adminTwitterSecurityContainer = new AdminTwitterSecurityContainer(appContainer);
   const adminSecurityContainers = [
     adminGeneralSecurityContainer, adminLdapSecurityContainer, adminSamlSecurityContainer, adminOidcSecurityContainer, adminBasicSecurityContainer,
-    adminGoogleSecurityContainer, adminGithubSecurityContainer,
+    adminGoogleSecurityContainer, adminGithubSecurityContainer, adminTwitterSecurityContainer,
   ];
   ReactDOM.render(
     <Provider inject={[injectableContainers, adminSecurityContainers]}>

src/client/js/components/Admin/Security/GithubSecuritySetting.jsx

@@ -124,7 +124,7 @@ class GithubSecurityManagement extends React.Component {
         <div style={{ minHeight: '300px' }}>
           <h4>
             <i className="icon-question" aria-hidden="true"></i>
-            <a href="#collapseHelpForGithubOauth" data-toggle="collapse">{ t('security_setting.OAuth.how_to.github') }</a>
+            <a href="#collapseHelpForGithubOauth" data-toggle="collapse"> { t('security_setting.OAuth.how_to.github') }</a>
           </h4>
           <ol id="collapseHelpForGithubOauth" className="collapse">
             {/* eslint-disable-next-line max-len */}

src/client/js/components/Admin/Security/GoogleSecuritySetting.jsx

@@ -124,7 +124,7 @@ class GoogleSecurityManagement extends React.Component {
         <div style={{ minHeight: '300px' }}>
           <h4>
             <i className="icon-question" aria-hidden="true"></i>
-            <a href="#collapseHelpForGoogleOauth" data-toggle="collapse">{ t('security_setting.OAuth.how_to.google') }</a>
+            <a href="#collapseHelpForGoogleOauth" data-toggle="collapse"> { t('security_setting.OAuth.how_to.google') }</a>
           </h4>
           <ol id="collapseHelpForGoogleOauth" className="collapse">
             {/* eslint-disable-next-line max-len */}

src/client/js/components/Admin/Security/SecurityManagement.jsx

@@ -12,6 +12,7 @@ import OidcSecuritySetting from './OidcSecuritySetting';
 import BasicSecuritySetting from './BasicSecuritySetting';
 import GoogleSecuritySetting from './GoogleSecuritySetting';
 import GithubSecuritySetting from './GithubSecuritySetting';
+import TwitterSecuritySetting from './TwitterSecuritySetting';
 
 class SecurityManagement extends React.Component {
 
@@ -167,7 +168,7 @@ class SecurityManagement extends React.Component {
                 <GithubSecuritySetting />
               </div>
               <div id="passport-twitter" className="tab-pane" role="tabpanel">
-                {/* TODO GW-549 reactify twitter.html */}
+                <TwitterSecuritySetting />
               </div>
               <div id="passport-facebook" className="tab-pane" role="tabpanel">
                 {/* TODO GW-550 reactify facebook.html */}

src/client/js/components/Admin/Security/TwitterSecuritySetting.jsx

@@ -0,0 +1,160 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
+import AdminTwitterSecurityContainer from '../../../services/AdminTwitterSecurityContainer';
+
+class TwitterSecurityManagement extends React.Component {
+
+  render() {
+    const { t, adminGeneralSecurityContainer, adminTwitterSecurityContainer } = this.props;
+    return (
+
+      <React.Fragment>
+
+        <h2 className="alert-anchor border-bottom">
+          { t('security_setting.OAuth.Twitter.name') } { t('security_setting.configuration') }
+        </h2>
+
+        <div className="row mb-5">
+          <strong className="col-xs-3 text-right">{ t('security_setting.OAuth.Twitter.name') }</strong>
+          <div className="col-xs-6 text-left">
+            <div className="checkbox checkbox-success">
+              <input
+                id="isTwitterEnabled"
+                type="checkbox"
+                checked={adminGeneralSecurityContainer.state.isTwitterOAuthEnabled}
+                onChange={() => { adminGeneralSecurityContainer.switchIsTwitterOAuthEnabled() }}
+              />
+              <label htmlFor="isTwitterEnabled">
+                { t('security_setting.OAuth.Twitter.enable_twitter') }
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div className="row mb-5">
+          <label className="col-xs-3 text-right">{ t('security_setting.callback_URL') }</label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              value={adminTwitterSecurityContainer.state.callbackUrl}
+              readOnly
+            />
+            <p className="help-block small">{ t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' }) }</p>
+            {!adminGeneralSecurityContainer.state.appSiteUrl && (
+            <div className="alert alert-danger">
+              <i
+                className="icon-exclamation"
+                // eslint-disable-next-line max-len
+                dangerouslySetInnerHTML={{ __html: t('security_setting.alert_siteUrl_is_not_set', { link: `<a href="/admin/app">${t('App settings')}<i class="icon-login"></i></a>` }) }}
+              />
+            </div>
+            )}
+          </div>
+        </div>
+
+
+        {adminGeneralSecurityContainer.state.isTwitterOAuthEnabled && (
+          <React.Fragment>
+
+            <div className="row mb-5">
+              <label htmlFor="TwitterConsumerId" className="col-xs-3 text-right">{ t('security_setting.clientID') }</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="TwitterConsumerId"
+                  value={adminTwitterSecurityContainer.state.TwitterConsumerId}
+                  onChange={e => adminTwitterSecurityContainer.changeTwitterConsumerId(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_TWITTER_CONSUMER_KEY' }) }} />
+                </p>
+              </div>
+            </div>
+
+            <div className="row mb-5">
+              <label htmlFor="TwitterConsumerSecret" className="col-xs-3 text-right">{ t('security_setting.client_secret') }</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="TwitterConsumerSecret"
+                  value={adminTwitterSecurityContainer.state.TwitterConsumerSecret}
+                  onChange={e => adminTwitterSecurityContainer.changeTwitterConsumerSecret(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_TWITTER_CONSUMER_SECRET' }) }} />
+                </p>
+              </div>
+            </div>
+
+            <div className="row mb-5">
+              <div className="col-xs-offset-3 col-xs-6 text-left">
+                <div className="checkbox checkbox-success">
+                  <input
+                    id="bindByUserNameTwitter"
+                    type="checkbox"
+                    checked={adminTwitterSecurityContainer.state.isSameUsernameTreatedAsIdenticalUser}
+                    onChange={() => { adminTwitterSecurityContainer.switchIsSameUsernameTreatedAsIdenticalUser() }}
+                  />
+                  <label
+                    htmlFor="bindByUserNameTwitter"
+                    dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
+                  />
+                </div>
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
+                </p>
+              </div>
+            </div>
+
+          </React.Fragment>
+        )}
+
+        <hr />
+
+        <div style={{ minHeight: '300px' }}>
+          <h4>
+            <i className="icon-question" aria-hidden="true"></i>
+            <a href="#collapseHelpForTwitterOauth" data-toggle="collapse"> { t('security_setting.OAuth.how_to.twitter') }</a>
+          </h4>
+          <ol id="collapseHelpForTwitterOauth" className="collapse">
+            {/* eslint-disable-next-line max-len */}
+            <li dangerouslySetInnerHTML={{ __html:  t('security_setting.OAuth.Twitter.register_1', { link: '<a href="https://apps.twitter.com/" target=_blank>Twitter Application Management</a>' }) }} />
+            <li dangerouslySetInnerHTML={{ __html:  t('security_setting.OAuth.Twitter.register_2') }} />
+            <li dangerouslySetInnerHTML={{ __html:  t('security_setting.OAuth.Twitter.register_3') }} />
+            {/* eslint-disable-next-line max-len */}
+            <li dangerouslySetInnerHTML={{ __html:  t('security_setting.OAuth.Twitter.register_4', { url: adminTwitterSecurityContainer.state.callbackUrl }) }} />
+            <li dangerouslySetInnerHTML={{ __html:  t('security_setting.OAuth.Twitter.register_5') }} />
+          </ol>
+        </div>
+
+      </React.Fragment>
+
+
+    );
+  }
+
+}
+
+
+TwitterSecurityManagement.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
+  adminTwitterSecurityContainer: PropTypes.instanceOf(AdminTwitterSecurityContainer).isRequired,
+};
+
+const TwitterSecurityManagementWrapper = (props) => {
+  return createSubscribedElement(TwitterSecurityManagement, props, [AppContainer, AdminGeneralSecurityContainer, AdminTwitterSecurityContainer]);
+};
+
+export default withTranslation()(TwitterSecurityManagementWrapper);

src/client/js/services/AdminGeneralSecurityContainer.js

@@ -29,6 +29,7 @@ export default class AdminGeneralSecurityContainer extends Container {
       isBasicEnabled: true,
       isGoogleOAuthEnabled: true,
       isGithubOAuthEnabled: true,
+      isTwitterOAuthEnabled: true,
     };
 
     this.init();
@@ -105,4 +106,12 @@ export default class AdminGeneralSecurityContainer extends Container {
     this.setState({ isGithubOAuthEnabled: !this.state.isGithubOAuthEnabled });
   }
 
+  /**
+   * Switch TwitterOAuth enabled
+   */
+  switchIsTwitterOAuthEnabled() {
+    this.setState({ isTwitterOAuthEnabled: !this.state.isTwitterOAuthEnabled });
+  }
+
+
 }

src/client/js/services/AdminTwitterSecurityContainer.js

@@ -0,0 +1,63 @@
+import { Container } from 'unstated';
+
+import loggerFactory from '@alias/logger';
+
+// eslint-disable-next-line no-unused-vars
+const logger = loggerFactory('growi:security:AdminTwitterSecurityContainer');
+
+/**
+ * Service container for admin security page (TwitterSecurityManagement.jsx)
+ * @extends {Container} unstated Container
+ */
+export default class AdminTwitterSecurityContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+
+    this.state = {
+      // TODO GW-583 set value
+      appSiteUrl: '',
+      TwitterConsumerId: '',
+      TwitterConsumerSecret: '',
+      isSameUsernameTreatedAsIdenticalUser: true,
+    };
+
+    this.init();
+
+  }
+
+  init() {
+    // TODO GW-583 fetch config value with api
+  }
+
+  /**
+   * Workaround for the mangling in production build to break constructor.name
+   */
+  static getClassName() {
+    return 'AdminTwitterSecurityContainer';
+  }
+
+  /**
+   * Change TwitterConsumerId
+   */
+  changeTwitterConsumerId(value) {
+    this.setState({ TwitterConsumerId: value });
+  }
+
+  /**
+   * Change TwitterConsumerSecret
+   */
+  changeTwitterConsumerSecret(value) {
+    this.setState({ TwitterConsumerSecret: value });
+  }
+
+  /**
+   * Switch isSameUsernameTreatedAsIdenticalUser
+   */
+  switchIsSameUsernameTreatedAsIdenticalUser() {
+    this.setState({ isSameUsernameTreatedAsIdenticalUser: !this.state.isSameUsernameTreatedAsIdenticalUser });
+  }
+
+}