reactify client side

src/client/js/components/Admin/App/AwsSetting.jsx

@@ -1,46 +1,71 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
 
+const logger = loggerFactory('growi:appSettings');
 
 class AwsSetting extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.state = {
-    };
+    this.submitHandler = this.submitHandler.bind(this);
   }
 
+  async submitHandler() {
+    const { t, adminAppContainer } = this.props;
+
+    try {
+      await adminAppContainer.updateAwsSettingHandler();
+      toastSuccess(t('app_setting.updated_app_setting'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
 
   render() {
-    const { t } = this.props;
+    const { t, adminAppContainer } = this.props;
 
     return (
       <React.Fragment>
-        <p className="well">{t('app_setting.AWS_access') }<br />
-          { t('app_setting.No_SMTP_setting') }<br />
+        <p className="well">
+          {t('app_setting.AWS_access')}
           <br />
-
-          <span className="text-danger"><i className="ti-unlink"></i> {t('app_setting.change_setting') }</span>
+          {t('app_setting.No_SMTP_setting')}
+          <br />
+          <br />
+          <span className="text-danger">
+            <i className="ti-unlink"></i>
+            {t('app_setting.change_setting')}
+          </span>
         </p>
 
         <div className="row">
           <div className="col-md-12">
             <div className="form-group">
-              <label htmlFor="settingForm[app:region]" className="col-xs-3 control-label">{ t('app_setting.region') }</label>
+              <label htmlFor="settingForm[app:region]" className="col-xs-3 control-label">
+                {t('app_setting.region')}
+              </label>
               <div className="col-xs-6">
                 <input
                   className="form-control"
                   id="settingForm[app:region]"
                   type="text"
                   name="settingForm[aws:region]"
-                  placeholder="例: ap-northeast-1"
-                  value="{{ getConfig('crowi', 'aws:region') | default('') }}"
+                  placeholder={`${t('eg')} ap-northeast-1`}
+                  defaultValue={adminAppContainer.state.region}
+                  onChange={(e) => {
+                    adminAppContainer.changeRegion(e.target.value);
+                  }}
                 />
               </div>
             </div>
@@ -50,17 +75,22 @@ class AwsSetting extends React.Component {
         <div className="row">
           <div className="col-md-12">
             <div className="form-group">
-              <label htmlFor="settingForm[aws:customEndpoint]" className="col-xs-3 control-label">{ t('app_setting.custom endpoint') }</label>
+              <label htmlFor="settingForm[aws:customEndpoint]" className="col-xs-3 control-label">
+                {t('app_setting.custom endpoint')}
+              </label>
               <div className="col-xs-6">
                 <input
                   className="form-control"
                   id="settingForm[aws:customEndpoint]"
                   type="text"
                   name="settingForm[aws:customEndpoint]"
-                  placeholder="例: http://localhost:9000"
-                  value="{{ getConfig('crowi', 'aws:customEndpoint') | default('') }}"
+                  placeholder={`${t('eg')} http://localhost:9000`}
+                  defaultValue={adminAppContainer.state.customEndpoint}
+                  onChange={(e) => {
+                    adminAppContainer.changeCustomEndpoint(e.target.value);
+                  }}
                 />
-                <p className="help-block">{ t('app_setting.custom_endpoint_change') }</p>
+                <p className="help-block">{t('app_setting.custom_endpoint_change')}</p>
               </div>
             </div>
           </div>
@@ -69,33 +99,42 @@ class AwsSetting extends React.Component {
         <div className="row">
           <div className="col-md-12">
             <div className="form-group">
-              <label htmlFor="settingForm[aws:bucket]" className="col-xs-3 control-label">{t('app_setting.bucket name')}</label>
+              <label htmlFor="settingForm[aws:bucket]" className="col-xs-3 control-label">
+                {t('app_setting.bucket name')}
+              </label>
               <div className="col-xs-6">
                 <input
                   className="form-control"
                   id="settingForm[aws:bucket]"
                   type="text"
                   name="settingForm[aws:bucket]"
-                  placeholder="例: crowi"
-                  value="{{ getConfig('crowi', 'aws:bucket') | default('') }}"
+                  placeholder={`${t('eg')} crowi`}
+                  defaultValue={adminAppContainer.state.bucket}
+                  onChange={(e) => {
+                    adminAppContainer.changeBucket(e.target.value);
+                  }}
                 />
               </div>
             </div>
           </div>
         </div>
 
-
         <div className="row">
           <div className="col-md-12">
             <div className="form-group">
-              <label htmlFor="settingForm[aws:accessKeyId]" className="col-xs-3 control-label">Access Key ID</label>
+              <label htmlFor="settingForm[aws:accessKeyId]" className="col-xs-3 control-label">
+                Access Key ID
+              </label>
               <div className="col-xs-6">
                 <input
                   className="form-control"
                   id="settingForm[aws:accessKeyId]"
                   type="text"
                   name="settingForm[aws:accessKeyId]"
-                  value="{{ getConfig('crowi', 'aws:accessKeyId') | default('') }}"
+                  defaultValue={adminAppContainer.state.accessKeyId}
+                  onChange={(e) => {
+                    adminAppContainer.changeAccessKeyId(e.target.value);
+                  }}
                 />
               </div>
             </div>
@@ -105,14 +144,19 @@ class AwsSetting extends React.Component {
         <div className="row">
           <div className="col-md-12">
             <div className="form-group">
-              <label htmlFor="settingForm[aws:secretAccessKey]" className="col-xs-3 control-label">Secret Access Key</label>
+              <label htmlFor="settingForm[aws:secretAccessKey]" className="col-xs-3 control-label">
+                Secret Access Key
+              </label>
               <div className="col-xs-6">
                 <input
                   className="form-control"
                   id="settingForm[aws:secretAccessKey]"
                   type="text"
                   name="settingForm[aws:secretAccessKey]"
-                  value="{{ getConfig('crowi', 'aws:secretAccessKey') | default('') }}"
+                  defaultValue={adminAppContainer.state.secretKey}
+                  onChange={(e) => {
+                    adminAppContainer.changeSecretKey(e.target.value);
+                  }}
                 />
               </div>
             </div>
@@ -123,8 +167,7 @@ class AwsSetting extends React.Component {
           <div className="col-md-12">
             <div className="form-group">
               <div className="col-xs-offset-3 col-xs-6">
-                <input type="hidden" name="_csrf" value="{{ csrf() }}" />
-                <button type="submit" className="btn btn-primary">
+                <button type="submit" className="btn btn-primary" onClick={this.submitHandler}>
                   {t('app_setting.Update')}
                 </button>
               </div>
@@ -141,12 +184,13 @@ class AwsSetting extends React.Component {
  * Wrapper component for using unstated
  */
 const AwsSettingWrapper = (props) => {
-  return createSubscribedElement(AwsSetting, props, [AppContainer]);
+  return createSubscribedElement(AwsSetting, props, [AppContainer, AdminAppContainer]);
 };
 
 AwsSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
 };
 
 export default withTranslation()(AwsSettingWrapper);

src/client/js/services/AdminAppContainer.js

@@ -30,6 +30,11 @@ export default class AdminAppContainer extends Container {
       smtpPort: '',
       smtpUser: '',
       smtpPassword: '',
+      region: '',
+      customEndpoint: '',
+      bucket: '',
+      accessKeyId: '',
+      secretKey: '',
     };
 
     this.changeTitle = this.changeTitle.bind(this);
@@ -42,9 +47,15 @@ export default class AdminAppContainer extends Container {
     this.changeSmtpPort = this.changeSmtpPort.bind(this);
     this.changeSmtpUser = this.changeSmtpUser.bind(this);
     this.changeSmtpPassword = this.changeSmtpPassword.bind(this);
+    this.changeRegion = this.changeRegion.bind(this);
+    this.changeCustomEndpoint = this.changeCustomEndpoint.bind(this);
+    this.changeBucket = this.changeBucket.bind(this);
+    this.changeAccessKeyId = this.changeAccessKeyId.bind(this);
+    this.changeSecretKey = this.changeSecretKey.bind(this);
     this.updateAppSettingHandler = this.updateAppSettingHandler.bind(this);
     this.updateSiteUrlSettingHandler = this.updateSiteUrlSettingHandler.bind(this);
     this.updateMailSettingHandler = this.updateMailSettingHandler.bind(this);
+    this.updateAwsSettingHandler = this.updateAwsSettingHandler.bind(this);
   }
 
   /**
@@ -75,6 +86,11 @@ export default class AdminAppContainer extends Container {
         smtpPort: appSettingsParams.smtpPort,
         smtpUser: appSettingsParams.smtpUser,
         smtpPassword: appSettingsParams.smtpPassword,
+        region: appSettingsParams.region,
+        customEndpoint: appSettingsParams.customEndpoint,
+        bucket: appSettingsParams.bucket,
+        accessKeyId: appSettingsParams.accessKeyId,
+        secretKey: appSettingsParams.secretKey,
       });
 
     }
@@ -155,6 +171,41 @@ export default class AdminAppContainer extends Container {
     this.setState({ smtpPassword });
   }
 
+  /**
+   * Change region
+   */
+  changeRegion(region) {
+    this.setState({ region });
+  }
+
+  /**
+   * Change custom endpoint
+   */
+  changeCustomEndpoint(customEndpoint) {
+    this.setState({ customEndpoint });
+  }
+
+  /**
+   * Change bucket name
+   */
+  changeBucket(bucket) {
+    this.setState({ bucket });
+  }
+
+  /**
+   * Change access key id
+   */
+  changeAccessKeyId(accessKeyId) {
+    this.setState({ accessKeyId });
+  }
+
+  /**
+   * Change secret key
+   */
+  changeSecretKey(secretKey) {
+    this.setState({ secretKey });
+  }
+
   /**
    * Update app setting
    * @memberOf AdminAppContainer
@@ -202,4 +253,21 @@ export default class AdminAppContainer extends Container {
     return mailSettingParams;
   }
 
+  /**
+   * Update AWS setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updateAwsSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/aws-setting', {
+      region: this.state.region,
+      customEndpoint: this.state.customEndpoint,
+      bucket: this.state.bucket,
+      accessKeyId: this.state.accessKeyId,
+      secretKey: this.state.secretKey,
+    });
+    const { awsSettingParams } = response.data;
+    return awsSettingParams;
+  }
+
 }