imprv: Security settings screen redesign

apps/app/public/static/locales/en_US/admin.json

@@ -16,9 +16,8 @@
     "set_point": "Set point",
     "Guest Users Access": "Guest users access",
     "readonly_users_access": "ROM users' access",
-    "always_hidden": "Always hidden",
-    "always_displayed": "Always displayed",
-    "displayed_or_hidden": "Hidden / Displayed",
+    "not_displayed": "not display",
+    "displayed": "displayed",
     "Fixed by env var": "This is fixed by the env var <code>{{key}}={{value}}</code>.",
     "register_limitation": "Register limitation",
     "register_limitation_desc": "Restriction of new users' registration",

apps/app/public/static/locales/fr_FR/admin.json

@@ -16,9 +16,8 @@
     "set_point": "Valeur",
     "Guest Users Access": "Accès invité",
     "readonly_users_access": "Accès des utilisateurs ROM",
-    "always_hidden": "Toujours caché",
-    "always_displayed": "Toujours affiché",
-    "displayed_or_hidden": "Caché / Affiché",
+    "not_displayed": "non affiché",
+    "displayed": "affiché",
     "Fixed by env var": "Configuré par la variable d'environnement <code>{{key}}={{value}}</code>.",
     "register_limitation": "Paramètres d'inscription",
     "register_limitation_desc": "Restreindre l'inscription de nouveaux utilisateurs",

apps/app/public/static/locales/ja_JP/admin.json

@@ -25,9 +25,8 @@
     "set_point": "設定値",
     "Guest Users Access":"ゲストユーザーのアクセス",
     "readonly_users_access": "ROMユーザーのアクセス",
-    "always_hidden": "非表示 (固定)",
-    "always_displayed": "表示 (固定)",
-    "displayed_or_hidden": "非表示 / 表示",
+    "not_displayed": "表示しない",
+    "displayed": "表示する",
     "Fixed by env var": "環境変数 <code>{{forcewikimode}}={{wikimode}}</code> により固定されています。",
     "register_limitation": "登録の制限",
     "register_limitation_desc": "新しいユーザーを登録する方法を制限します。",

apps/app/public/static/locales/zh_CN/admin.json

@@ -23,9 +23,8 @@
     "security_settings": "安全设置",
     "scope_of_page_disclosure": "页面公开范围",
     "set_point": "设定值",
-    "always_displayed": "始终显示",
-    "always_hidden": "总是隐藏",
-    "displayed_or_hidden": "隐藏 / 显示",
+    "not_displayed": "不显示",
+    "displayed": "始终显示",
     "Guest Users Access": "来宾用户访问",
     "readonly_users_access": "ROM用户的访问",
 		"Fixed by env var": "这是由env var<code>%s=%s</code>修复的。",

apps/app/src/client/components/Admin/Security/SecuritySetting.jsx

@@ -357,62 +357,119 @@ class SecuritySetting extends React.Component {
         )}
 
         <h4 className="mt-4">{ t('security_settings.page_list_and_search_results') }</h4>
-        <div className="row justify-content-md-center">
-          <table className="table table-bordered col-lg-9 mb-5">
-            <thead>
-              <tr>
-                <th scope="col">{ t('security_settings.scope_of_page_disclosure') }</th>
-                <th scope="col">{ t('security_settings.set_point') }</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th scope="row">{ t('public') }</th>
-                <td><span className="material-symbols-outlined text-success me-1">check_circle</span>{ t('security_settings.always_displayed') }</td>
-              </tr>
-              <tr>
-                <th scope="row">{ t('anyone_with_the_link') }</th>
-                <td><span className="material-symbols-outlined text-danger me-1">cancel</span>{ t('security_settings.always_hidden') }</td>
-              </tr>
-              <tr>
-                <th scope="row">{ t('only_me') }</th>
-                <td>
-                  <div className="form-check form-switch form-check-success">
-                    <input
-                      type="checkbox"
-                      className="form-check-input"
-                      id="isShowRestrictedByOwner"
-                      checked={!adminGeneralSecurityContainer.state.isShowRestrictedByOwner}
-                      onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByOwner() }}
-                    />
-                    <label className="form-label form-check-label" htmlFor="isShowRestrictedByOwner">
-                      {t('security_settings.displayed_or_hidden')}
-                    </label>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <th scope="row">{ t('only_inside_the_group') }</th>
-                <td>
-                  <div className="form-check form-switch form-check-success">
-                    <input
-                      type="checkbox"
-                      className="form-check-input"
-                      id="isShowRestrictedByGroup"
-                      checked={!adminGeneralSecurityContainer.state.isShowRestrictedByGroup}
-                      onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByGroup() }}
-                    />
-                    <label className="form-label form-check-label" htmlFor="isShowRestrictedByGroup">
-                      {t('security_settings.displayed_or_hidden')}
-                    </label>
+
+        <div className="container text-center">
+          <div className="row justify-content-start">
+            <div className="col-4 mt-4">
+              <strong>{ t('public') }</strong>
+            </div>
+            <div className="col-auto mr-auto mt-4 ">
+              { t('security_settings.displayed') }
+            </div>
+          </div>
+        </div>
+
+        <div className="container text-center">
+          <div className="row justify-content-start">
+            <div className="col-4  mt-4">
+              <strong>{ t('anyone_with_the_link') }</strong>
+            </div>
+            <div className="col-auto mr-auto mt-4">
+              { t('security_settings.not_displayed') }
+            </div>
+          </div>
+        </div>
+
+        <div className="container text-center">
+          <div className="row justify-content-start">
+            <div className="col-4  mt-4">
+              <strong>{ t('only_me') }</strong>
+            </div>
+
+            <div className="col-auto mt-4">
+              <div className="dropdown">
+                <button
+                  className={`btn btn-outline-secondary dropdown-toggle text-end col-12
+                            col-md-auto `}
+                  type="button"
+                  id="dropdownMenuButton"
+                  data-bs-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <span>
+                    {adminGeneralSecurityContainer.state.isShowRestrictedByOwner
+                      ? t('security_settings.displayed')
+                      : t('security_settings.not_displayed')}
+                  </span>
+                </button>
+
+                <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                  <button
+                    className="dropdown-item"
+                    type="button"
+                    onClick={() => { adminGeneralSecurityContainer.setState({ isShowRestrictedByOwner: true }) }}
+                  >
+                    {t('security_settings.displayed')}
+                  </button>
+                  <button
+                    className="dropdown-item"
+                    type="button"
+                    onClick={() => { adminGeneralSecurityContainer.setState({ isShowRestrictedByOwner: false }) }}
+                  >
+                    {t('security_settings.not_displayed')}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div className="container text-center">
+              <div className="row  justify-content-start">
+                <div className="col-4 mt-4">
+                  <strong>{ t('only_inside_the_group') }</strong>
+                </div>
+
+                <div className="col-auto mt-4">
+                  <div className="dropdown">
+                    <button
+                      className={`btn btn-outline-secondary dropdown-toggle text-end col-12
+                            col-md-auto`}
+                      type="button"
+                      id="dropdownMenuButton"
+                      data-bs-toggle="dropdown"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    >
+                      <span>
+                        {adminGeneralSecurityContainer.state.isShowRestrictedByGroup
+                          ? t('security_settings.displayed')
+                          : t('security_settings.not_displayed')}
+                      </span>
+                    </button>
+                    <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                      <button
+                        className="dropdown-item"
+                        type="button"
+                        onClick={() => { adminGeneralSecurityContainer.setState({ isShowRestrictedByGroup: true }) }}
+                      >
+                        {t('security_settings.displayed')}
+                      </button>
+                      <button
+                        className="dropdown-item"
+                        type="button"
+                        onClick={() => { adminGeneralSecurityContainer.setState({ isShowRestrictedByGroup: false }) }}
+                      >
+                        {t('security_settings.not_displayed')}
+                      </button>
+                    </div>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
 
-        <h4 className="mb-3">{t('security_settings.page_access_rights')}</h4>
+        <h4 className="my-5">{t('security_settings.page_access_rights')}</h4>
         <div className="row mb-4">
           <div className="col-md-4 text-md-end py-2">
             <strong>{t('security_settings.Guest Users Access')}</strong>
@@ -457,7 +514,7 @@ class SecuritySetting extends React.Component {
           </div>
         </div>
 
-        <h4 className="mb-3">{t('security_settings.page_delete_rights')}</h4>
+        <h4 className="my-5">{t('security_settings.page_delete_rights')}</h4>
         {/* Render PageDeletePermission */}
         {
           [