react security setting

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

@@ -66,38 +66,37 @@ class SecuritySetting extends React.Component {
               </div>
             )}
           </div>
-          <div className="form-group">
-            <label htmlFor="{{configName}}" className="col-xs-3 control-label">{ t('security_setting.page_listing_1') }</label>
-            <div className="col-xs-9">
-              <div className="btn-group btn-toggle" data-toggle="buttons">
-                <label className="btn btn-default btn-rounded btn-outline {% if isEnabled %}active{% endif %}" data-active-class="primary">
-                  <input name="{{configName}}" value="false" type="radio"></input>
-                </label>
-                <label className="btn btn-default btn-rounded btn-outline {% if !isEnabled %}active{% endif %}" data-active-class="default">
-                  <input name="{{configName}}" value="true" type="radio"></input>
+          <div className="row mb-5">
+            <strong className="col-xs-3 text-right">{ t('security_setting.page_listing_1') }</strong>
+            <div className="col-xs-6 text-left">
+              <div className="checkbox checkbox-success">
+                <input
+                  id="isHideRestrictedByOwner"
+                  type="checkbox"
+                  checked={adminGeneralSecurityContainer.state.isHideRestrictedByOwner}
+                  onChange={() => { adminGeneralSecurityContainer.switchIsHideRestrictedByOwner() }}
+                />
+                <label htmlFor="isHideRestrictedByOwner">
+                  { t('security_setting.page_listing_1_desc') }
                 </label>
               </div>
-              <p className="help-block small">
-                { t('security_setting.page_listing_1_desc') }
-              </p>
             </div>
           </div>
 
-          <div className="form-group">
-            <label htmlFor="{{configName}}" className="col-xs-3 control-label">{ t('security_setting.page_listing_2') }</label>
-            <div className="col-xs-9">
-              <div className="btn-group btn-toggle" data-toggle="buttons">
-                <label className="btn btn-default btn-rounded btn-outline {% if isEnabled %}active{% endif %}" data-active-class="primary">
-                  <input name="{{configName}}" value="false" type="radio" />
-                </label>
-                <label className="btn btn-default btn-rounded btn-outline {% if !isEnabled %}active{% endif %}" data-active-class="default">
-                  <input name="{{configName}}" value="true" type="radio" />
+          <div className="row mb-5">
+            <strong className="col-xs-3 text-right">{ t('security_setting.page_listing_2') }</strong>
+            <div className="col-xs-6 text-left">
+              <div className="checkbox checkbox-success">
+                <input
+                  id="isHideRestrictedByGroup"
+                  type="checkbox"
+                  checked={adminGeneralSecurityContainer.state.isHideRestrictedByGroup}
+                  onChange={() => { adminGeneralSecurityContainer.switchIsHideRestrictedByGroup() }}
+                />
+                <label htmlFor="isHideRestrictedByOwner">
+                  { t('security_setting.page_listing_2_desc') }
                 </label>
               </div>
-
-              <p className="help-block small">
-                { t('security_setting.page_listing_2_desc') }
-              </p>
             </div>
           </div>
 
@@ -115,10 +114,50 @@ class SecuritySetting extends React.Component {
               </p>
             </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.guest_mode.${adminGeneralSecurityContainer.state.currentRestrictGuestMode}`)}</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.guest_mode.anyone') }</a>
+                  </li>
+                  <li
+                    key="admin_only"
+                    role="presentation"
+                    type="button"
+                    onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('adminOnly') }}
+                  >
+                    <a role="menuitem">{ t('security_setting.guest_mode.admin_only') }</a>
+                  </li>
+                  <li
+                    key="admin_and_author"
+                    role="presentation"
+                    type="button"
+                    onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('adminAndAuthor') }}
+                  >
+                    <a role="menuitem">{ t('security_setting.guest_mode.admin_only') }</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
           {/* TODO GW-540 */}
           <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>
             </div>
           </div>
         </fieldset>

src/client/js/services/AdminGeneralSecurityContainer.js

@@ -19,10 +19,10 @@ export default class AdminGeneralSecurityContainer extends Container {
     this.state = {
       // TODO GW-583 set value
       isWikiModeForced: false,
-      currentRestrictGuestMode: 'deny',
-      currentpageCompleteDeletionAuthority: ' ',
-      hideRestrictedByOwner: true,
-      hideRestrictedByGroup: true,
+      currentRestrictGuestMode: 'Deny',
+      currentpageCompleteDeletionAuthority: 'adminOnly',
+      isHideRestrictedByOwner: true,
+      isHideRestrictedByGroup: true,
       useOnlyEnvVarsForSomeOptions: true,
       isLocalEnabled: true,
       registrationMode: 'open',
@@ -36,6 +36,9 @@ export default class AdminGeneralSecurityContainer extends Container {
     this.switchIsLocalEnabled = this.switchIsLocalEnabled.bind(this);
     this.changeRegistrationMode = this.changeRegistrationMode.bind(this);
     this.changeRestrictGuestMode = this.changeRestrictGuestMode.bind(this);
+    this.switchIsHideRestrictedByGroup = this.switchIsHideRestrictedByGroup.bind(this);
+    this.switchIsHideRestrictedByOwner = this.switchIsHideRestrictedByOwner.bind(this);
+    this.changePageCompleteDeletionAuthority = this.changePageCompleteDeletionAuthority.bind(this);
   }
 
   init() {
@@ -86,24 +89,24 @@ export default class AdminGeneralSecurityContainer extends Container {
   }
 
   /**
-   * Switch pageCompleteDeletionAuthority
+   * Change pageCompleteDeletionAuthority
    */
-  switchPageCompleteDeletionAuthority(pageCompleteDeletionAuthorityLabel) {
+  changePageCompleteDeletionAuthority(pageCompleteDeletionAuthorityLabel) {
     this.setState({ currentpageCompleteDeletionAuthority: pageCompleteDeletionAuthorityLabel });
   }
 
   /**
    * Switch hideRestrictedByOwner
    */
-  switchHideRestrictedByOwner() {
-    this.setState({ hideRestrictedByOwner:  !this.state.hideRestrictedByOwner });
+  switchIsHideRestrictedByOwner() {
+    this.setState({ isHideRestrictedByOwner:  !this.state.isHideRestrictedByOwner });
   }
 
   /**
    * Switch hideRestrictedByGroup
    */
-  switchHideRestrictedByGroup() {
-    this.setState({ hideRestrictedByGroup:  !this.state.hideRestrictedByGroup });
+  switchIsHideRestrictedByGroup() {
+    this.setState({ isHideRestrictedByGroup:  !this.state.isHideRestrictedByGroup });
   }
 
   /**

src/server/routes/apiv3/security-setting.js

@@ -139,7 +139,7 @@ module.exports = (crowi) => {
    *                    status:
    *                      $ref: '#/components/schemas/PageDeletionParams'
    */
-  router.put('/page-deletion', loginRequiredStrictly, adminRequired, csrf, validator.pageDeletion, ApiV3FormValidator, async(req, res) => {
+  router.put('/page-deletion', loginRequiredStrictly, adminRequired, , validator.pageDeletion, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
       'security:pageCompleteDeletionAuthority': req.body.pageCompleteDeletionAuthority,
     };