show TwitterSecuritySetting

packages/app/src/client/services/AdminTwitterSecurityContainer.js

@@ -23,7 +23,7 @@ export default class AdminTwitterSecurityContainer extends Container {
     this.dummyTwitterConsumerKeyForError = 1;
 
     this.state = {
-      callbackUrl: urljoin(pathUtils.removeTrailingSlash(appContainer.config.crowi.url), '/passport/twitter/callback'),
+      // callbackUrl: urljoin(pathUtils.removeTrailingSlash(appContainer.config.crowi.url), '/passport/twitter/callback'),
       // set dummy value tile for using suspense
       twitterConsumerKey: this.dummyTwitterConsumerKey,
       twitterConsumerSecret: '',

packages/app/src/components/Admin/Security/SecurityManagementContents.jsx

@@ -15,7 +15,7 @@ import OidcSecuritySetting from './OidcSecuritySetting';
 import SamlSecuritySetting from './SamlSecuritySetting';
 import SecuritySetting from './SecuritySetting';
 import ShareLinkSetting from './ShareLinkSetting';
-// import TwitterSecuritySetting from './TwitterSecuritySetting';
+import TwitterSecuritySetting from './TwitterSecuritySetting';
 
 const SecurityManagementContents = () => {
   const { t } = useTranslation();
@@ -133,7 +133,7 @@ const SecurityManagementContents = () => {
             {activeComponents.has('passport_github') && <GitHubSecuritySetting />}
           </TabPane>
           <TabPane tabId="passport_twitter">
-            {/* {activeComponents.has('passport_twitter') && <TwitterSecuritySetting />} */}
+            {activeComponents.has('passport_twitter') && <TwitterSecuritySetting />}
           </TabPane>
           <TabPane tabId="passport_facebook">
             {/* {activeComponents.has('passport_facebook') && <FacebookSecuritySetting />} */}

packages/app/src/components/Admin/Security/TwitterSecuritySetting.jsx

@@ -15,25 +15,25 @@ import TwitterSecuritySettingContents from './TwitterSecuritySettingContents';
 let retrieveErrors = null;
 function TwitterSecurityManagement(props) {
   const { adminTwitterSecurityContainer } = props;
-  if (adminTwitterSecurityContainer.state.twitterConsumerKey === adminTwitterSecurityContainer.dummyTwitterConsumerKey) {
-    throw (async() => {
-      try {
-        await adminTwitterSecurityContainer.retrieveSecurityData();
-      }
-      catch (err) {
-        const errs = toArrayIfNot(err);
-        toastError(errs);
-        retrieveErrors = errs;
-        adminTwitterSecurityContainer.setState({
-          twitterConsumerKey: adminTwitterSecurityContainer.dummyTwitterConsumerKeyForError,
-        });
-      }
-    })();
-  }
-
-  if (adminTwitterSecurityContainer.state.twitterConsumerKey === adminTwitterSecurityContainer.dummyTwitterConsumerKeyForError) {
-    throw new Error(`${retrieveErrors.length} errors occured`);
-  }
+  // if (adminTwitterSecurityContainer.state.twitterConsumerKey === adminTwitterSecurityContainer.dummyTwitterConsumerKey) {
+  //   throw (async() => {
+  //     try {
+  //       await adminTwitterSecurityContainer.retrieveSecurityData();
+  //     }
+  //     catch (err) {
+  //       const errs = toArrayIfNot(err);
+  //       toastError(errs);
+  //       retrieveErrors = errs;
+  //       adminTwitterSecurityContainer.setState({
+  //         twitterConsumerKey: adminTwitterSecurityContainer.dummyTwitterConsumerKeyForError,
+  //       });
+  //     }
+  //   })();
+  // }
+
+  // if (adminTwitterSecurityContainer.state.twitterConsumerKey === adminTwitterSecurityContainer.dummyTwitterConsumerKeyForError) {
+  //   throw new Error(`${retrieveErrors.length} errors occured`);
+  // }
 
   return <TwitterSecuritySettingContents />;
 }

packages/app/src/components/Admin/Security/TwitterSecuritySettingContents.jsx

@@ -5,6 +5,12 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
 
 
+import urljoin from 'url-join';
+import { pathUtils } from '@growi/core';
+
+import { useSiteUrl } from '~/stores/context';
+
+
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import AdminTwitterSecurityContainer from '~/client/services/AdminTwitterSecurityContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
@@ -33,8 +39,9 @@ class TwitterSecuritySettingContents extends React.Component {
   }
 
   render() {
-    const { t, adminGeneralSecurityContainer, adminTwitterSecurityContainer } = this.props;
+    const { t, adminGeneralSecurityContainer, adminTwitterSecurityContainer, siteUrl } = this.props;
     const { isTwitterEnabled } = adminGeneralSecurityContainer.state;
+    const twitterCallBackUrl = urljoin(pathUtils.removeTrailingSlash(siteUrl), '/passport/twitter/callback')
 
     return (
 
@@ -75,11 +82,11 @@ class TwitterSecuritySettingContents extends React.Component {
             <input
               className="form-control"
               type="text"
-              value={adminTwitterSecurityContainer.state.callbackUrl}
+              value={twitterCallBackUrl}
               readOnly
             />
             <p className="form-text text-muted small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
-            {!adminGeneralSecurityContainer.state.appSiteUrl && (
+            {!siteUrl && (
               <div className="alert alert-danger">
                 <i
                   className="icon-exclamation"
@@ -197,11 +204,13 @@ TwitterSecuritySettingContents.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
   adminTwitterSecurityContainer: PropTypes.instanceOf(AdminTwitterSecurityContainer).isRequired,
+  siteUrl: PropTypes.string,
 };
 
 const TwitterSecuritySettingContentsWrapperFC = (props) => {
   const { t } = useTranslation();
-  return <TwitterSecuritySettingContents t={t} {...props} />;
+  const { data: siteUrl } = useSiteUrl();
+  return <TwitterSecuritySettingContents t={t} siteUrl={siteUrl} {...props} />;
 };
 
 /**