Merge pull request #3935 from weseek/feat/admin-disable-link-sharing-front-design-fix

Feat/admin disable link sharing front design fix

resource/locales/en_US/translation.json

@@ -441,6 +441,7 @@
     "remove_share_link_success": "Succeeded to remove {{shareLinkId}}",
     "issue_share_link": "Succeeded to issue new share link",
     "remove_share_link": "Succeeded to remove {{count}} share links",
+    "switch_disable_link_sharing_success": "Succeeded to update share link setting",
     "failed_to_reset_password":"Failed to reset password"
   },
   "template": {
@@ -585,12 +586,8 @@
       "closed": "Closed (Invitation Only)"
     },
     "share_link_rights": "Share link rights",
-    "link_sharing": "Link sharing",
-    "link_sharing_rights_choices": {
-      "allow": "Allow",
-      "deny": "Deny"
-    },
-    "updated_shareLink_setting": "Succeeded to update share link setting",
+    "enable_link_sharing": "Enable link sharing",
+    "all_share_links": "All share links",
     "configuration": " Configuration",
     "optional": "Optional",
     "Treat username matching as identical": "Automatically bind external accounts newly logged in to local accounts when <code>username</code> match",

resource/locales/ja_JP/translation.json

@@ -443,6 +443,7 @@
     "remove_share_link_success": "{{shareLinkId}}を削除しました",
     "issue_share_link": "共有リンクを作成しました",
     "remove_share_link": "共有リンクを{{count}}件削除しました",
+    "switch_disable_link_sharing_success": "共有リンクの設定を変更しました",
     "failed_to_reset_password":"パスワードのリセットに失敗しました"
   },
   "template": {
@@ -584,12 +585,8 @@
       "closed": "非公開 (登録には管理者による招待が必要)"
     },
     "share_link_rights": "シェアリンクの権限",
-    "link_sharing": "リンクのシェア",
-    "link_sharing_rights_choices": {
-      "allow": "許可",
-      "deny": "許可しない"
-    },
-    "updated_shareLink_setting": "シェアリンク設定を更新しました。",
+    "enable_link_sharing": "リンクのシェアを許可",
+    "all_share_links": "全てのシェアリンク",
     "configuration": "設定",
     "optional": "オプション",
     "Treat username matching as identical": "新規ログイン時、<code>username</code> が一致したローカルアカウントが存在した場合は自動的に紐付ける",

resource/locales/zh_CN/translation.json

@@ -418,6 +418,7 @@
 		"deactivate_user_success": "Succeeded to deactivate {{username}}",
 		"remove_user_success": "Succeeded to removing {{username}} ",
     "remove_external_user_success": "Succeeded to remove {{accountId}} ",
+    "switch_disable_link_sharing_success": "成功更新分享链接设置",
     "failed_to_reset_password":"Failed to reset password"
   },
 	"template": {
@@ -573,12 +574,8 @@
 			"closed": "已关闭（仅限邀请）"
 		},
     "share_link_rights": "分享链接权",
-    "link_sharing": "链接共享",
-    "link_sharing_rights_choices": {
-      "allow": "允许",
-      "deny": "拒绝"
-    },
-    "updated_shareLink_setting": "成功更新分享链接设置",
+    "enable_link_sharing": "启用链接共享",
+    "all_share_links": "所有共享链接",
 		"configuration": " 配置",
 		"optional": "可选的",
 		"Treat username matching as identical": "Automatically bind external accounts newly logged in to local accounts when <code>username</code> match",

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

@@ -51,7 +51,7 @@ class ShareLinkSetting extends React.Component {
     this.closeDeleteConfirmModal = this.closeDeleteConfirmModal.bind(this);
     this.deleteAllLinksButtonHandler = this.deleteAllLinksButtonHandler.bind(this);
     this.deleteLinkById = this.deleteLinkById.bind(this);
-    this.putShareLinkSetting = this.putShareLinkSetting.bind(this);
+    this.switchDisableLinkSharing = this.switchDisableLinkSharing.bind(this);
   }
 
   componentWillMount() {
@@ -68,17 +68,6 @@ class ShareLinkSetting extends React.Component {
 
   }
 
-  async putShareLinkSetting() {
-    const { t, adminGeneralSecurityContainer } = this.props;
-    try {
-      await adminGeneralSecurityContainer.updateShareLinkSetting();
-      toastSuccess(t('security_setting.updated_shareLink_setting'));
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }
-
   showDeleteConfirmModal() {
     this.setState({ isDeleteConfirmModalShown: true });
   }
@@ -117,6 +106,17 @@ class ShareLinkSetting extends React.Component {
     this.getShareLinkList(shareLinksActivePage);
   }
 
+  async switchDisableLinkSharing() {
+    const { t, adminGeneralSecurityContainer } = this.props;
+    try {
+      await adminGeneralSecurityContainer.switchDisableLinkSharing();
+      toastSuccess(t('toaster.switch_disable_link_sharing_success'));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
 
   render() {
     const { t, adminGeneralSecurityContainer } = this.props;
@@ -138,45 +138,26 @@ class ShareLinkSetting extends React.Component {
           <h2 className="alert-anchor border-bottom">{t('share_links.share_link_management')}</h2>
         </div>
         <h4>{t('security_setting.share_link_rights')}</h4>
-        <div className="row mb-4">
-          <div className="col-md-3 text-md-right py-2">
-            <strong>{t('security_setting.link_sharing')}</strong>
-          </div>
-          <div className="col-md-9">
-            <div className="dropdown">
-              <button
-                className={`btn btn-outline-secondary dropdown-toggle text-right col-12
-                            col-md-auto ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
-                type="button"
-                id="dropdownMenuButton"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="true"
-              >
-                <span className="float-left">
-                  {disableLinkSharing === false && t('security_setting.link_sharing_rights_choices.allow')}
-                  {disableLinkSharing === true && t('security_setting.link_sharing_rights_choices.deny')}
-                </span>
-              </button>
-              <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                <button className="dropdown-item" type="button" onClick={() => { adminGeneralSecurityContainer.setDisableLinkSharing(false) }}>
-                  {t('security_setting.link_sharing_rights_choices.allow')}
-                </button>
-                <button className="dropdown-item" type="button" onClick={() => { adminGeneralSecurityContainer.setDisableLinkSharing(true) }}>
-                  {t('security_setting.link_sharing_rights_choices.deny')}
-                </button>
-              </div>
+        <div className="row mb-5">
+          <div className="col-6 offset-3">
+            <div className="custom-control custom-switch custom-checkbox-success">
+              <input
+                type="checkbox"
+                className="custom-control-input"
+                id="disableLinkSharing"
+                checked={!disableLinkSharing}
+                onChange={() => this.switchDisableLinkSharing()}
+              />
+              <label className="custom-control-label" htmlFor="disableLinkSharing">
+                {t('security_setting.enable_link_sharing')}
+              </label>
             </div>
+            {!adminGeneralSecurityContainer.state.setupStrategies.includes('local') && disableLinkSharing && (
+              <div className="badge badge-warning">{t('security_setting.setup_is_not_yet_complete')}</div>
+            )}
           </div>
         </div>
-
-        <div className="row my-3">
-          <div className="text-center text-md-left offset-md-3 col-md-5">
-            <button type="button" className="btn btn-primary" disabled={adminGeneralSecurityContainer.retrieveError != null} onClick={this.putShareLinkSetting}>
-              {t('Update')}
-            </button>
-          </div>
-        </div>
+        <h4>{t('security_setting.all_share_links')}</h4>
         <Pager
           links={shareLinks}
           activePage={shareLinksActivePage}

src/client/js/services/AdminGeneralSecurityContainer.js

@@ -147,18 +147,15 @@ export default class AdminGeneralSecurityContainer extends Container {
   }
 
   /**
-   * Update Share Link Settings
+   * Switch disableLinkSharing
    */
-  async updateShareLinkSetting() {
-
-    let requestParams = {
-      disableLinkSharing: this.state.disableLinkSharing,
+  async switchDisableLinkSharing() {
+    const requestParams = {
+      disableLinkSharing: !this.state.disableLinkSharing,
     };
-
-    requestParams = await removeNullPropertyFromObject(requestParams);
     const response = await this.appContainer.apiv3.put('/security-setting/share-link-setting', requestParams);
-    const { securitySettingParams } = response.data;
-    return securitySettingParams;
+    this.setDisableLinkSharing(!this.state.disableLinkSharing);
+    return response;
   }
 
   /**