create conponent

resource/locales/en-US/translation.json

@@ -570,8 +570,9 @@
         "register_5": "Copy and paste your ClientID and Client Secret above"
       },
       "GitHub": {
+        "enable_github":"enable Github OAuth",
         "name": "GitHub OAuth",
-        "register_1": "Access <a href=\"%s\" target=\"_blank\">%s</a>",
+        "register_1": "Access {{link}}",
         "register_2": "Register your OAuth App with \"Authorization callback URL\" as <code>%s</code>",
         "register_3": "Copy and paste your ClientID and Client Secret above"
       },

resource/locales/ja/translation.json

@@ -565,8 +565,9 @@
         "register_5": "上記フォームにクライアントIDとクライアントシークレットを入力"
       },
       "GitHub": {
+        "enable_github":"Github OAuth を有効にする",
         "name": "GitHub OAuth",
-        "register_1": "<a href=\"%s\" target=\"_blank\">%s</a>へアクセス",
+        "register_1": "{{link}} へアクセス",
         "register_2": "\"Authorization callback URL\"を<code>%s</code>としてGrowiを登録",
         "register_3": "上記フォームにクライアントIDとクライアントシークレットを入力"
       },

src/client/js/app.jsx

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

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

@@ -0,0 +1,157 @@
+/* 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 AdminGithubSecurityContainer from '../../../services/AdminGithubSecurityConatainer';
+
+class GithubSecurityManagement extends React.Component {
+
+  render() {
+    const { t, adminGeneralSecurityContainer, adminGithubSecurityContainer } = this.props;
+    return (
+
+      <React.Fragment>
+
+        <h2 className="alert-anchor border-bottom">
+          { t('security_setting.OAuth.Github.name') } { t('security_setting.configuration') }
+        </h2>
+
+        <div className="row mb-5">
+          <strong className="col-xs-3 text-right">{ t('security_setting.OAuth.Github.name') }</strong>
+          <div className="col-xs-6 text-left">
+            <div className="checkbox checkbox-success">
+              <input
+                id="isGithubEnabled"
+                type="checkbox"
+                checked={adminGeneralSecurityContainer.state.isGithubOAuthEnabled}
+                onChange={() => { adminGeneralSecurityContainer.switchIsGithubOAuthEnabled() }}
+              />
+              <label htmlFor="isGithubEnabled">
+                { t('security_setting.OAuth.Github.enable_github') }
+              </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={adminGithubSecurityContainer.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.isGithubOAuthEnabled && (
+          <React.Fragment>
+
+            <div className="row mb-5">
+              <label htmlFor="githubClientId" className="col-xs-3 text-right">{ t('security_setting.clientID') }</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="githubClientId"
+                  value={adminGithubSecurityContainer.state.githubClientId}
+                  onChange={e => adminGithubSecurityContainer.changeGithubClientId(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_GITHUB_CLIENT_ID' }) }} />
+                </p>
+              </div>
+            </div>
+
+            <div className="row mb-5">
+              <label htmlFor="githubClientSecret" className="col-xs-3 text-right">{ t('security_setting.client_secret') }</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="githubClientSecret"
+                  value={adminGithubSecurityContainer.state.githubClientSecret}
+                  onChange={e => adminGithubSecurityContainer.changeGithubClientSecret(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_GITHUB_CLIENT_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="bindByUserNameGithub"
+                    type="checkbox"
+                    checked={adminGithubSecurityContainer.state.isSameUsernameTreatedAsIdenticalUser}
+                    onChange={() => { adminGithubSecurityContainer.switchIsSameUsernameTreatedAsIdenticalUser() }}
+                  />
+                  <label
+                    htmlFor="bindByUserNameGithub"
+                    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="#collapseHelpForGithubOauth" data-toggle="collapse">{ t('security_setting.OAuth.how_to.github') }</a>
+          </h4>
+          <ol id="collapseHelpForGithubOauth" className="collapse">
+            {/* eslint-disable-next-line max-len */}
+            <li dangerouslySetInnerHTML={{ __html:  t('security_setting.OAuth.Github.register_1', { link: '<a href="https://github.com/settings/developers" target=_blank>GitHub Developer Settings</a>' }) }} />
+            <li dangerouslySetInnerHTML={{ __html:  t('security_setting.OAuth.Github.register_2') }} />
+            <li dangerouslySetInnerHTML={{ __html:  t('security_setting.OAuth.Github.register_3') }} />
+          </ol>
+        </div>
+
+      </React.Fragment>
+
+
+    );
+  }
+
+}
+
+
+GithubSecurityManagement.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
+  adminGithubSecurityContainer: PropTypes.instanceOf(AdminGithubSecurityContainer).isRequired,
+};
+
+const GithubSecurityManagementWrapper = (props) => {
+  return createSubscribedElement(GithubSecurityManagement, props, [AppContainer, AdminGeneralSecurityContainer, AdminGithubSecurityContainer]);
+};
+
+export default withTranslation()(GithubSecurityManagementWrapper);

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

@@ -11,6 +11,7 @@ import SamlSecuritySetting from './SamlSecuritySetting';
 import OidcSecuritySetting from './OidcSecuritySetting';
 import BasicSecuritySetting from './BasicSecuritySetting';
 import GoogleSecuritySetting from './GoogleSecuritySetting';
+import GithubSecuritySetting from './GithubSecuritySetting';
 
 class SecurityManagement extends React.Component {
 
@@ -163,7 +164,7 @@ class SecurityManagement extends React.Component {
                 <GoogleSecuritySetting />
               </div>
               <div id="passport-github" className="tab-pane" role="tabpanel">
-                {/* TODO GW-548 reactify github.html */}
+                <GithubSecuritySetting />
               </div>
               <div id="passport-twitter" className="tab-pane" role="tabpanel">
                 {/* TODO GW-549 reactify twitter.html */}

src/client/js/services/AdminGithubSecurityConatainer.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:AdminGithubSecurityContainer');
+
+/**
+ * Service container for admin security page (GithubSecurityManagement.jsx)
+ * @extends {Container} unstated Container
+ */
+export default class AdminGithubSecurityContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+
+    this.state = {
+      // TODO GW-583 set value
+      appSiteUrl: '',
+      githubClientId: '',
+      githubClientSecret: '',
+      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 'AdminGithubSecurityContainer';
+  }
+
+  /**
+   * Change githubClientId
+   */
+  changeGithubClientId(value) {
+    this.setState({ githubClientId: value });
+  }
+
+  /**
+   * Change githubClientSecret
+   */
+  changeGithubClientSecret(value) {
+    this.setState({ githubClientSecret: value });
+  }
+
+  /**
+   * Switch isSameUsernameTreatedAsIdenticalUser
+   */
+  switchIsSameUsernameTreatedAsIdenticalUser() {
+    this.setState({ isSameUsernameTreatedAsIdenticalUser: !this.state.isSameUsernameTreatedAsIdenticalUser });
+  }
+
+}