overwrite values of inputs with refs

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

@@ -21,6 +21,12 @@ class MailSetting extends React.Component {
       isInitializeValueModalOpen: false,
     };
 
+    this.emailInput = React.createRef();
+    this.hostInput = React.createRef();
+    this.portInput = React.createRef();
+    this.userInput = React.createRef();
+    this.passwordInput = React.createRef();
+
     this.openInitializeValueModal = this.openInitializeValueModal.bind(this);
     this.closeInitializeValueModal = this.closeInitializeValueModal.bind(this);
     this.submitHandler = this.submitHandler.bind(this);
@@ -52,9 +58,14 @@ class MailSetting extends React.Component {
     const { t, adminAppContainer } = this.props;
 
     try {
-      await adminAppContainer.initializeMailSettingHandler();
+      const mailSettingParams = await adminAppContainer.initializeMailSettingHandler();
       toastSuccess(t('toaster.initialize_successed', { target: t('admin:app_setting.mail_settings') }));
-      window.location.reload();
+      this.emailInput.current.value = mailSettingParams.fromAddress;
+      this.hostInput.current.value = mailSettingParams.smtpHost;
+      this.portInput.current.value = mailSettingParams.smtpPort;
+      this.userInput.current.value = mailSettingParams.smtpUser;
+      this.passwordInput.current.value = mailSettingParams.smtpPassword;
+      this.closeInitializeValueModal();
     }
     catch (err) {
       toastError(err);
@@ -74,6 +85,7 @@ class MailSetting extends React.Component {
             <input
               className="form-control"
               type="text"
+              ref={this.emailInput}
               placeholder={`${t('eg')} mail@growi.org`}
               defaultValue={adminAppContainer.state.fromAddress || ''}
               onChange={(e) => { adminAppContainer.changeFromAddress(e.target.value) }}
@@ -88,6 +100,7 @@ class MailSetting extends React.Component {
             <input
               className="form-control"
               type="text"
+              ref={this.hostInput}
               defaultValue={adminAppContainer.state.smtpHost || ''}
               onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
             />
@@ -96,6 +109,7 @@ class MailSetting extends React.Component {
             <label>{t('admin:app_setting.port')}</label>
             <input
               className="form-control"
+              ref={this.portInput}
               defaultValue={adminAppContainer.state.smtpPort || ''}
               onChange={(e) => { adminAppContainer.changeSmtpPort(e.target.value) }}
             />
@@ -108,6 +122,7 @@ class MailSetting extends React.Component {
             <input
               className="form-control"
               type="text"
+              ref={this.userInput}
               defaultValue={adminAppContainer.state.smtpUser || ''}
               onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
             />
@@ -117,6 +132,7 @@ class MailSetting extends React.Component {
             <input
               className="form-control"
               type="password"
+              ref={this.passwordInput}
               defaultValue={adminAppContainer.state.smtpPassword || ''}
               onChange={(e) => { adminAppContainer.changeSmtpPassword(e.target.value) }}
             />

src/client/js/services/AdminAppContainer.js

@@ -273,10 +273,15 @@ export default class AdminAppContainer extends Container {
    * @return {Array} Appearance
    */
   async initializeMailSettingHandler() {
-    const response = await this.appContainer.apiv3.delete('/app-settings/mail-setting', {});
-    const {
-      mailSettingParams,
-    } = response.data;
+    const { data } = await this.appContainer.apiv3.delete('/app-settings/mail-setting', {});
+    // convert values to '' if value is null for overwriting values of inputs with refs
+    const mailSettingParams = {
+      fromAddress: data.mailSettingParams.fromAddress || '',
+      smtpHost: data.mailSettingParams.smtpHost || '',
+      smtpPort: data.mailSettingParams.smtpPort || '',
+      smtpUser: data.mailSettingParams.smtpUser || '',
+      smtpPassword: data.mailSettingParams.smtpPassword || '',
+    };
     this.setState(mailSettingParams);
     return mailSettingParams;
   }