Merge pull request #1557 from weseek/reactify-admin/fix-i18n-dropdown

Reactify admin/fix i18n dropdown

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

@@ -46,6 +46,7 @@ class LocalSecuritySetting extends React.Component {
 
   render() {
     const { t, adminGeneralSecurityContainer } = this.props;
+    const { registrationMode } = adminGeneralSecurityContainer.state;
 
     return (
       <React.Fragment>
@@ -55,19 +56,19 @@ class LocalSecuritySetting extends React.Component {
           </div>
         )}
         <h2 className="alert-anchor border-bottom">
-          { t('security_setting.Local.name') } { t('security_setting.configuration') }
+          {t('security_setting.Local.name')} {t('security_setting.configuration')}
         </h2>
 
         {adminGeneralSecurityContainer.state.useOnlyEnvVarsForSomeOptions && (
-        <p
-          className="alert alert-info"
-          // eslint-disable-next-line max-len
-          dangerouslySetInnerHTML={{ __html: t('security_setting.Local.note for the only env option', { env: 'LOCAL_STRATEGY_USES_ONLY_ENV_VARS_FOR_SOME_OPTIONS' }) }}
-        />
+          <p
+            className="alert alert-info"
+            // eslint-disable-next-line max-len
+            dangerouslySetInnerHTML={{ __html: t('security_setting.Local.note for the only env option', { env: 'LOCAL_STRATEGY_USES_ONLY_ENV_VARS_FOR_SOME_OPTIONS' }) }}
+          />
         )}
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">{ t('security_setting.Local.name') }</strong>
+          <strong className="col-xs-3 text-right">{t('security_setting.Local.name')}</strong>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -77,7 +78,7 @@ class LocalSecuritySetting extends React.Component {
                 onChange={() => { adminGeneralSecurityContainer.switchIsLocalEnabled() }}
               />
               <label htmlFor="isLocalEnabled">
-                { t('security_setting.Local.enable_local') }
+                {t('security_setting.Local.enable_local')}
               </label>
             </div>
           </div>
@@ -86,12 +87,14 @@ class LocalSecuritySetting extends React.Component {
         {adminGeneralSecurityContainer.state.isLocalEnabled && (
           <div>
             <div className="row mb-5">
-              <strong className="col-xs-3 text-right">{ t('Register limitation') }</strong>
+              <strong className="col-xs-3 text-right">{t('Register limitation')}</strong>
               <div className="col-xs-9 text-left">
                 <div className="my-0 btn-group">
                   <div className="dropdown">
                     <button className="btn btn-default dropdown-toggle w-100" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <span className="pull-left">{t(`security_setting.registration_mode.${adminGeneralSecurityContainer.state.registrationMode}`)}</span>
+                      {registrationMode === 'Open' && <span className="pull-left">{t('security_setting.registration_mode.open')}</span>}
+                      {registrationMode === 'Restricted' && <span className="pull-left">{t('security_setting.registration_mode.restricted')}</span>}
+                      {registrationMode === 'Closed' && <span className="pull-left">{t('security_setting.registration_mode.closed')}</span>}
                       <span className="bs-caret pull-right">
                         <span className="caret" />
                       </span>
@@ -99,33 +102,33 @@ class LocalSecuritySetting extends React.Component {
                     {/* TODO adjust dropdown after BS4 */}
                     <ul className="dropdown-menu" role="menu">
                       <li
-                        key="open"
+                        key="Open"
                         role="presentation"
                         type="button"
-                        onClick={() => { adminGeneralSecurityContainer.changeRegistrationMode('open') }}
+                        onClick={() => { adminGeneralSecurityContainer.changeRegistrationMode('Open') }}
                       >
-                        <a role="menuitem">{ t('security_setting.registration_mode.open') }</a>
+                        <a role="menuitem">{t('security_setting.registration_mode.open')}</a>
                       </li>
                       <li
-                        key="restricted"
+                        key="Restricted"
                         role="presentation"
                         type="button"
-                        onClick={() => { adminGeneralSecurityContainer.changeRegistrationMode('restricted') }}
+                        onClick={() => { adminGeneralSecurityContainer.changeRegistrationMode('Restricted') }}
                       >
-                        <a role="menuitem">{ t('security_setting.registration_mode.restricted') }</a>
+                        <a role="menuitem">{t('security_setting.registration_mode.restricted')}</a>
                       </li>
                       <li
-                        key="closed"
+                        key="Closed"
                         role="presentation"
                         type="button"
-                        onClick={() => { adminGeneralSecurityContainer.changeRegistrationMode('closed') }}
+                        onClick={() => { adminGeneralSecurityContainer.changeRegistrationMode('Closed') }}
                       >
-                        <a role="menuitem">{ t('security_setting.registration_mode.closed') }</a>
+                        <a role="menuitem">{t('security_setting.registration_mode.closed')}</a>
                       </li>
                     </ul>
                   </div>
                   <p className="help-block">
-                    { t('security_setting.Register limitation desc') }
+                    {t('security_setting.Register limitation desc')}
                   </p>
                 </div>
               </div>
@@ -141,9 +144,9 @@ class LocalSecuritySetting extends React.Component {
                     value={adminGeneralSecurityContainer.state.registrationWhiteList}
                     onChange={e => adminGeneralSecurityContainer.changeRegistrationWhiteList(e.target.value)}
                   />
-                  <p className="help-block small">{ t('security_setting.restrict_emails') }<br />{ t('security_setting.for_instance') }
-                    <code>@growi.org</code>{ t('security_setting.only_those') }<br />
-                    { t('security_setting.insert_single') }
+                  <p className="help-block small">{t('security_setting.restrict_emails')}<br />{t('security_setting.for_instance')}
+                    <code>@growi.org</code>{t('security_setting.only_those')}<br />
+                    {t('security_setting.insert_single')}
                   </p>
                 </div>
               </div>
@@ -153,7 +156,7 @@ class LocalSecuritySetting extends React.Component {
 
         {/*  TODO replace component */}
         <div className="col-xs-offset-3 col-xs-6 mb-5">
-          <button type="submit" className="btn btn-primary" onClick={this.putLocalSecuritySetting}>{ t('Update') }</button>
+          <button type="submit" className="btn btn-primary" onClick={this.putLocalSecuritySetting}>{t('Update')}</button>
         </div>
 
       </React.Fragment>

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

@@ -31,17 +31,16 @@ class SecurityManagement extends React.Component {
 
         {/* XSS configuration link */}
         <div className="mb-5">
-          <h2 className="border-bottom">{ t('security_setting.xss_prevent_setting') }</h2>
+          <h2 className="border-bottom">{t('security_setting.xss_prevent_setting')}</h2>
           <div className="text-center">
             <a style={{ fontSize: 'large' }} href="/admin/markdown/#preventXSS">
-              <i className="fa-fw icon-login"></i> { t('security_setting.xss_prevent_setting_link') }
+              <i className="fa-fw icon-login"></i> {t('security_setting.xss_prevent_setting_link')}
             </a>
           </div>
         </div>
 
-        {/* TODO 542~550 reactify-admin */}
         <div className="auth-mechanism-configurations m-t-10">
-          <h2 className="border-bottom">{ t('security_setting.Authentication mechanism settings') }</h2>
+          <h2 className="border-bottom">{t('security_setting.Authentication mechanism settings')}</h2>
           <div className="passport-settings">
             <ul className="nav nav-tabs" role="tablist">
               <li className="active">

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

@@ -45,6 +45,7 @@ class SecuritySetting extends React.Component {
 
   render() {
     const { t, adminGeneralSecurityContainer } = this.props;
+    const { currentRestrictGuestMode } = adminGeneralSecurityContainer.state;
     const helpPageListingByOwner = { __html: t('security_setting.page_listing_1') };
     const helpPageListingByGroup = { __html: t('security_setting.page_listing_2') };
     // eslint-disable-next-line max-len
@@ -54,7 +55,7 @@ class SecuritySetting extends React.Component {
     return (
       <React.Fragment>
         <fieldset>
-          <legend className="alert-anchor">{ t('security_settings') }</legend>
+          <legend className="alert-anchor">{t('security_settings')}</legend>
           {this.state.retrieveError != null && (
             <div className="alert alert-danger">
               <p>{t('Error occurred')} : {this.state.err}</p>
@@ -62,7 +63,7 @@ class SecuritySetting extends React.Component {
           )}
           {/* TODO adjust layout */}
           <div className="row mb-5">
-            <strong className="col-xs-3 text-right"> { t('security_setting.Guest Users Access') } </strong>
+            <strong className="col-xs-3 text-right"> {t('security_setting.Guest Users Access')} </strong>
             <div className="col-xs-9 text-left">
               <div className="my-0 btn-group">
                 <div className="dropdown">
@@ -74,7 +75,8 @@ class SecuritySetting extends React.Component {
                     aria-expanded="false"
                     disabled={adminGeneralSecurityContainer.state.isWikiModeForced}
                   >
-                    <span className="pull-left">{t(`security_setting.guest_mode.${adminGeneralSecurityContainer.state.currentRestrictGuestMode}`)}</span>
+                    {currentRestrictGuestMode === 'Deny' && <span className="pull-left">{t('security_setting.guest_mode.deny')}</span>}
+                    {currentRestrictGuestMode === 'Readonly' && <span className="pull-left">{t('security_setting.guest_mode.readonly')}</span>}
                     <span className="bs-caret pull-right">
                       <span className="caret" />
                     </span>
@@ -82,20 +84,20 @@ class SecuritySetting extends React.Component {
                   {/* TODO adjust dropdown after BS4 */}
                   <ul className="dropdown-menu" role="menu">
                     <li
-                      key="deny"
+                      key="Deny"
                       role="presentation"
                       type="button"
-                      onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('deny') }}
+                      onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('Deny') }}
                     >
-                      <a role="menuitem">{ t('security_setting.guest_mode.deny') }</a>
+                      <a role="menuitem">{t('security_setting.guest_mode.deny')}</a>
                     </li>
                     <li
-                      key="readonly"
+                      key="Readonly"
                       role="presentation"
                       type="button"
-                      onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('readonly') }}
+                      onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('Readonly') }}
                     >
-                      <a role="menuitem">{ t('security_setting.guest_mode.readonly') }</a>
+                      <a role="menuitem">{t('security_setting.guest_mode.readonly')}</a>
                     </li>
                   </ul>
                 </div>
@@ -109,7 +111,7 @@ class SecuritySetting extends React.Component {
                 <p className="alert alert-warning mt-2 text-left">
                   <i className="icon-exclamation icon-fw">
                   </i><b>FIXED</b><br />
-                  { <b dangerouslySetInnerHTML={helpForceWikiMode} /> }
+                  {<b dangerouslySetInnerHTML={helpForceWikiMode} />}
                 </p>
               </div>
             </div>
@@ -125,7 +127,7 @@ class SecuritySetting extends React.Component {
                   onChange={() => { adminGeneralSecurityContainer.switchIsHideRestrictedByOwner() }}
                 />
                 <label htmlFor="isHideRestrictedByOwner">
-                  <p className="help-block small">{ t('security_setting.page_listing_1_desc') }</p>
+                  <p className="help-block small">{t('security_setting.page_listing_1_desc')}</p>
                 </label>
               </div>
             </div>
@@ -142,14 +144,14 @@ class SecuritySetting extends React.Component {
                   onChange={() => { adminGeneralSecurityContainer.switchIsHideRestrictedByGroup() }}
                 />
                 <label htmlFor="isHideRestrictedByGroup">
-                  <p className="help-block small">{ t('security_setting.page_listing_2_desc') }</p>
+                  <p className="help-block small">{t('security_setting.page_listing_2_desc')}</p>
                 </label>
               </div>
             </div>
           </div>
 
           <div className="row mb-5">
-            <strong className="col-xs-3 text-right"> { t('security_setting.complete_deletion') } </strong>
+            <strong className="col-xs-3 text-right"> {t('security_setting.complete_deletion')} </strong>
             <div className="col-xs-9 text-left">
               <div className="my-0 btn-group">
                 <div className="dropdown">
@@ -167,7 +169,7 @@ class SecuritySetting extends React.Component {
                       type="button"
                       onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('anyone') }}
                     >
-                      <a role="menuitem">{ t('security_setting.anyone') }</a>
+                      <a role="menuitem">{t('security_setting.anyone')}</a>
                     </li>
                     <li
                       key="admin_only"
@@ -175,7 +177,7 @@ class SecuritySetting extends React.Component {
                       type="button"
                       onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('admin_only') }}
                     >
-                      <a role="menuitem">{ t('security_setting.admin_only') }</a>
+                      <a role="menuitem">{t('security_setting.admin_only')}</a>
                     </li>
                     <li
                       key="admin_and_author"
@@ -183,11 +185,11 @@ class SecuritySetting extends React.Component {
                       type="button"
                       onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('admin_and_author') }}
                     >
-                      <a role="menuitem">{ t('security_setting.admin_and_author') }</a>
+                      <a role="menuitem">{t('security_setting.admin_and_author')}</a>
                     </li>
                   </ul>
                   <p className="help-block small">
-                    { t('security_setting.complete_deletion_explain') }
+                    {t('security_setting.complete_deletion_explain')}
                   </p>
                 </div>
               </div>
@@ -197,7 +199,7 @@ class SecuritySetting extends React.Component {
           <div className="form-group">
             <div className="col-xs-offset-3 col-xs-6">
               <input type="hidden" name="_csrf" value={this.props.csrf} />
-              <button type="submit" className="btn btn-primary" onClick={this.putSecuritySetting}>{ t('Update') }</button>
+              <button type="submit" className="btn btn-primary" onClick={this.putSecuritySetting}>{t('Update')}</button>
             </div>
           </div>
         </fieldset>

src/client/js/services/AdminGeneralSecurityContainer.js

@@ -20,40 +20,40 @@ export default class AdminGeneralSecurityContainer extends Container {
     this.state = {
       isWikiModeForced: false,
       wikiMode: '',
-      currentRestrictGuestMode: 'deny',
+      currentRestrictGuestMode: 'Deny',
       currentPageCompleteDeletionAuthority: 'anyone',
-      isHideRestrictedByOwner: true,
-      isHideRestrictedByGroup: true,
-      useOnlyEnvVarsForSomeOptions: true,
+      isHideRestrictedByOwner: false,
+      isHideRestrictedByGroup: false,
+      useOnlyEnvVarsForSomeOptions: false,
       appSiteUrl: appContainer.config.crowi.url || '',
-      isLocalEnabled: true,
-      registrationMode: 'open',
+      isLocalEnabled: false,
+      registrationMode: 'Open',
       registrationWhiteList: '',
-      isLdapEnabled: true,
-      isSamlEnabled: true,
-      isOidcEnabled: true,
-      isBasicEnabled: true,
-      isGoogleEnabled: true,
-      isGithubEnabled: true,
-      isTwitterEnabled: true,
+      isLdapEnabled: false,
+      isSamlEnabled: false,
+      isOidcEnabled: false,
+      isBasicEnabled: false,
+      isGoogleEnabled: false,
+      isGithubEnabled: false,
+      isTwitterEnabled: false,
     };
 
     this.onIsWikiModeForced = this.onIsWikiModeForced.bind(this);
   }
 
   async retrieveSecurityData() {
+    // TODO GW-956 separate local setting container
     const response = await this.appContainer.apiv3.get('/security-setting/');
-    const { generalSetting } = response.data.securityParams;
-    const { localSetting } = response.data.securityParams;
+    const { generalSetting, localSetting } = response.data.securityParams;
     this.onIsWikiModeForced(generalSetting.wikiMode);
     this.setState({
-      currentRestrictGuestMode: generalSetting.restrictGuestMode || 'deny',
+      currentRestrictGuestMode: generalSetting.restrictGuestMode || 'Deny',
       currentPageCompleteDeletionAuthority: generalSetting.pageCompleteDeletionAuthority || 'anyone',
       isHideRestrictedByOwner: generalSetting.hideRestrictedByOwner || false,
       isHideRestrictedByGroup: generalSetting.hideRestrictedByGroup || false,
       wikiMode: generalSetting.wikiMode || '',
       isLocalEnabled: localSetting.isLocalEnabled || false,
-      registrationMode: localSetting.registrationMode || 'open',
+      registrationMode: localSetting.registrationMode || 'Open',
       registrationWhiteList: localSetting.registrationWhiteList.join('\n') || '',
     });
   }