add submit method

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

@@ -4,12 +4,24 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 
 class SecuritySetting extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.putSecuritySetting = this.putSecuritySetting.bind(this);
+  }
+
+  async putSecuritySetting() {
+    const { t } = this.props;
+
+  }
+
   render() {
     const { t, adminGeneralSecurityContainer } = this.props;
     const helpPageListingByOwner = { __html: t('security_setting.page_listing_1') };
@@ -18,13 +30,9 @@ class SecuritySetting extends React.Component {
       <React.Fragment>
         <fieldset>
           <legend className="alert-anchor">{ t('security_settings') }</legend>
-          <div className="form-group">
-            <label
-              htmlFor="restrictGuestMode"
-              className="col-xs-3 control-label"
-            >
-              { t('security_setting.Guest Users Access') }
-            </label>
+          {/* TODO adjust layout */}
+          <div className="row mb-5">
+            <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">
@@ -63,7 +71,9 @@ class SecuritySetting extends React.Component {
                 </div>
               </div>
             </div>
-            {adminGeneralSecurityContainer.state.isWikiModeForced && (
+          </div>
+          {adminGeneralSecurityContainer.state.isWikiModeForced && (
+            <div className="row mb-5">
               <div className="col-xs-6">
                 <p className="alert alert-warning mt-2">
                   <i className="icon-exclamation icon-fw">
@@ -71,8 +81,8 @@ class SecuritySetting extends React.Component {
                   { t('security_setting.Fixed by env var', 'FORCE_WIKI_MODE') }<br></br>
                 </p>
               </div>
-            )}
-          </div>
+            </div>
+          )}
           <div className="row mb-5">
             <strong className="col-xs-3 text-right" dangerouslySetInnerHTML={helpPageListingByOwner} />
             <div className="col-xs-6 text-left">
@@ -106,45 +116,49 @@ class SecuritySetting extends React.Component {
               </div>
             </div>
           </div>
-          <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.${adminGeneralSecurityContainer.state.currentpageCompleteDeletionAuthority}`)}</span>
-                  <span className="bs-caret pull-right">
-                    <span className="caret" />
-                  </span>
-                </button>
-                {/* TODO adjust dropdown after BS4 */}
-                <ul className="dropdown-menu" role="menu">
-                  <li
-                    key="anyone"
-                    role="presentation"
-                    type="button"
-                    onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('anyone') }}
-                  >
-                    <a role="menuitem">{ t('security_setting.anyone') }</a>
-                  </li>
-                  <li
-                    key="admin_only"
-                    role="presentation"
-                    type="button"
-                    onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('admin_only') }}
-                  >
-                    <a role="menuitem">{ t('security_setting.admin_only') }</a>
-                  </li>
-                  <li
-                    key="admin_and_author"
-                    role="presentation"
-                    type="button"
-                    onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('admin_and_author') }}
-                  >
-                    <a role="menuitem">{ t('security_setting.admin_and_author') }</a>
-                  </li>
-                </ul>
-                <p className="help-block small">
-                  { t('security_setting.complete_deletion_explain') }
-                </p>
+
+          <div className="row mb-5">
+            <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">
+                  <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.${adminGeneralSecurityContainer.state.currentpageCompleteDeletionAuthority}`)}</span>
+                    <span className="bs-caret pull-right">
+                      <span className="caret" />
+                    </span>
+                  </button>
+                  {/* TODO adjust dropdown after BS4 */}
+                  <ul className="dropdown-menu" role="menu">
+                    <li
+                      key="anyone"
+                      role="presentation"
+                      type="button"
+                      onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('anyone') }}
+                    >
+                      <a role="menuitem">{ t('security_setting.anyone') }</a>
+                    </li>
+                    <li
+                      key="admin_only"
+                      role="presentation"
+                      type="button"
+                      onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('admin_only') }}
+                    >
+                      <a role="menuitem">{ t('security_setting.admin_only') }</a>
+                    </li>
+                    <li
+                      key="admin_and_author"
+                      role="presentation"
+                      type="button"
+                      onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('admin_and_author') }}
+                    >
+                      <a role="menuitem">{ t('security_setting.admin_and_author') }</a>
+                    </li>
+                  </ul>
+                  <p className="help-block small">
+                    { t('security_setting.complete_deletion_explain') }
+                  </p>
+                </div>
               </div>
             </div>
           </div>
@@ -152,7 +166,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">{ t('Update') }</button>
+              <button type="submit" className="btn btn-primary" onClick={this.putSecuritySetting}>{ t('Update') }</button>
             </div>
           </div>
         </fieldset>