feat: 增加评论与登录入口开关

(cherry picked from commit 69bb559)
openRin · Dec 3, 2024 · ed46795 · ed46795
1 parent beea16f
commit ed46795
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 49 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -119,6 +119,7 @@
       "placeholder": "Please enter your username"
     }
   },
+  "logout": "Logout",
   "next": "Next Page",
   "preview": "Preview",
   "previous": "Previous Page",
@@ -140,6 +141,12 @@
       },
       "clear_failed$message": "Failed to clear cache: {{message}}"
     },
+    "comment": {
+      "enable": {
+        "desc": "Open/close the comment entry and comment area at the bottom of the article",
+        "title": "Enable Comments"
+      }
+    },
     "counter": {
       "enable": {
         "desc": "Enable statistics for article PV and UV",
@@ -175,6 +182,12 @@
     "import_skipped": "Import Skipped",
     "import_skipped_item$title$reason": "《{{title}}》- {{reason}}",
     "import_success$success$skipped": "Import successful, {{success}} articles imported, {{skipped}} articles skipped",
+    "login": {
+      "enable": {
+        "desc": "Turn on/off the login button in the upper right corner. After turning it off, you can trigger the login entrance by double-clicking the bottom text \"© 2024 Powered by\" three times",
+        "title": "Enable the login button in the upper right corner"
+      }
+    },
     "other": {
       "title": "Other Settings"
     },
@@ -221,4 +234,4 @@
   },
   "writing": "Writing",
   "year$year": "{{year}}"
-}
+}
diff --git a/client/public/locales/ja/translation.json b/client/public/locales/ja/translation.json
@@ -119,6 +119,7 @@
       "placeholder": "ユーザー名を入力してください"
     }
   },
+  "logout": "ログアウト",
   "next": "次のページ",
   "preview": "プレビュー",
   "previous": "前のページ",
@@ -140,6 +141,12 @@
       },
       "clear_failed$message": "キャッシュのクリアに失敗しました: {{message}}"
     },
+    "comment": {
+      "enable": {
+        "desc": "記事下部のコメント入り口とコメントエリアの開閉",
+        "title": "コメントを有効にする"
+      }
+    },
     "counter": {
       "enable": {
         "desc": "記事の PV と UV 機能を有効にする",
@@ -175,6 +182,12 @@
     "import_skipped": "インポートをスキップ",
     "import_skipped_item$title$reason": "《{{title}}》- {{reason}}",
     "import_success$success$skipped": "インポートに成功しました。{{success}} 記事がインポートされ、{{skipped}} 記事がスキップされました",
+    "login": {
+      "enable": {
+        "desc": "右上隅のログインボタンをオン/オフにしてから、下部の「© 2024 Powered by」を 3 回ダブルクリックすると、ログイン入り口がトリガーされます。",
+        "title": "ログインを許可する"
+      }
+    },
     "other": {
       "title": "その他の設定"
     },
@@ -221,4 +234,4 @@
   },
   "writing": "執筆",
   "year$year": "{{year}} 年"
-}
+}
diff --git a/client/public/locales/zh/translation.json b/client/public/locales/zh/translation.json
@@ -119,6 +119,7 @@
       "placeholder": "请输入用户名"
     }
   },
+  "logout": "退出登录",
   "next": "下一页",
   "preview": "预览",
   "previous": "上一页",
@@ -140,6 +141,12 @@
       },
       "clear_failed$message": "清除缓存失败: {{message}}"
     },
+    "comment": {
+      "enable": {
+        "desc": "开启/关闭文章底部评论入口与评论区",
+        "title": "启用评论"
+      }
+    },
     "counter": {
       "enable": {
         "desc": "启用统计文章 PV 与 UV 功能",
@@ -175,6 +182,12 @@
     "import_skipped": "跳过导入",
     "import_skipped_item$title$reason": "《{{title}}》- {{reason}}",
     "import_success$success$skipped": "导入成功，{{success}} 篇文章导入成功，{{skipped}} 篇文章跳过",
+    "login": {
+      "enable": {
+        "desc": "开启/关闭右上角登录按钮，关闭后可通过「双击」底部文字 “© 2024 Powered by” 「三次」触发登录入口",
+        "title": "启用右上角登录按钮"
+      }
+    },
     "other": {
       "title": "其他设置"
     },

diff --git a/client/src/components/footer.tsx b/client/src/components/footer.tsx
@@ -4,13 +4,17 @@ import { ClientConfigContext } from '../state/config';
 import { Helmet } from "react-helmet";
 import { siteName } from '../utils/constants';
 import { useTranslation } from "react-i18next";
+import { useLoginModal } from '../hooks/useLoginModal';
 
 type ThemeMode = 'light' | 'dark' | 'system';
 function Footer() {
     const { t } = useTranslation()
     const [modeState, setModeState] = useState<ThemeMode>('system');
     const config = useContext(ClientConfigContext);
     const footerHtml = config.get<string>('footer');
+    const loginEnabled = config.get<boolean>('login.enabled');
+    const [doubleClickTimes, setDoubleClickTimes] = useState(0);
+    const { LoginModal, setIsOpened } = useLoginModal()
     useEffect(() => {
         const mode = localStorage.getItem('theme') as ThemeMode || 'system';
         setModeState(mode);
@@ -45,7 +49,16 @@ function Footer() {
             <div className="flex flex-col mb-8 space-y-2 justify-center items-center t-primary ani-show">
                 {footerHtml && <div dangerouslySetInnerHTML={{ __html: footerHtml }} />}
                 <p className='text-sm text-neutral-500 font-normal link-line'>
-                    <span>
+                    <span onDoubleClick={() => {
+                        if(doubleClickTimes >= 2){ // actually need 3 times doubleClick
+                            setDoubleClickTimes(0)
+                            if(!loginEnabled) {
+                                setIsOpened(true)
+                            }
+                        } else {
+                            setDoubleClickTimes(doubleClickTimes + 1)
+                        }
+                    }}>
                         © 2024 Powered by <a className='hover:underline' href="https://github.com/openRin/Rin" target="_blank">Rin</a>
                     </span>
                     {config.get<boolean>('rss') && <>
@@ -84,6 +97,7 @@ function Footer() {
                     <ThemeButton mode='dark' current={modeState} label="Toggle dark mode" icon="ri-moon-line" onClick={setMode} />
                 </div>
             </div>
+            <LoginModal />
         </footer>
     );
 }

diff --git a/client/src/components/header.tsx b/client/src/components/header.tsx
@@ -10,6 +10,7 @@ import { Button } from "./button";
 import { IconSmall } from "./icon";
 import { Input } from "./input";
 import { Padding } from "./padding";
+import { ClientConfigContext } from "../state/config";
 
 
 export function Header({ children }: { children?: React.ReactNode }) {
@@ -253,25 +254,28 @@ function UserAvatar({ className, profile, onClose }: { className?: string, profi
     const { t } = useTranslation()
     const { LoginModal, setIsOpened } = useLoginModal(onClose)
     const label = t('github_login')
+    const config = useContext(ClientConfigContext);
 
-    return (<div className={className + " flex flex-row items-center"}>
-        {profile?.avatar ? <>
-            <div className="w-8 relative">
-                <img src={profile.avatar} alt="Avatar" className="w-8 h-8 rounded-full border" />
-                <div className="z-50 absolute left-0 top-0 w-10 h-8 opacity-0 hover:opacity-100 duration-300">
-                    <IconSmall label={t('logout')} name="ri-logout-circle-line" onClick={() => {
-                        removeCookie("token")
-                        window.location.reload()
-                    }} hover={false} />
+
+    return (
+        <> {config.get<boolean>('login.enabled') && <div className={className + " flex flex-row items-center"}>
+            {profile?.avatar ? <>
+                <div className="w-8 relative">
+                    <img src={profile.avatar} alt="Avatar" className="w-8 h-8 rounded-full border" />
+                    <div className="z-50 absolute left-0 top-0 w-10 h-8 opacity-0 hover:opacity-100 duration-300">
+                        <IconSmall label={t('logout')} name="ri-logout-circle-line" onClick={() => {
+                            removeCookie("token")
+                            window.location.reload()
+                        }} hover={false} />
+                    </div>
                 </div>
-            </div>
-        </> : <>
-            <button onClick={() => setIsOpened(true)} title={label} aria-label={label}
-                className="flex rounded-full border dark:border-neutral-600 px-2 bg-w aspect-[1] items-center justify-center t-primary bg-button">
-                <i className="ri-user-received-line"></i>
-            </button>
-        </>}
-        <LoginModal />
-    </div>
-    )
+            </> : <>
+                <button onClick={() => setIsOpened(true)} title={label} aria-label={label}
+                    className="flex rounded-full border dark:border-neutral-600 px-2 bg-w aspect-[1] items-center justify-center t-primary bg-button">
+                    <i className="ri-user-received-line"></i>
+                </button>
+            </>}
+            <LoginModal />
+        </div>
+        }</>)
 }
diff --git a/client/src/page/feed.tsx b/client/src/page/feed.tsx
@@ -453,6 +453,7 @@ type Comment = {
 };
 
 function Comments({ id }: { id: string }) {
+  const config = useContext(ClientConfigContext);
   const [comments, setComments] = useState<Comment[]>([]);
   const [error, setError] = useState<string>();
   const ref = useRef("");
@@ -479,33 +480,35 @@ function Comments({ id }: { id: string }) {
   }, [id]);
   return (
     <>
-      <div className="m-2 flex flex-col justify-center items-center">
-        <CommentInput id={id} onRefresh={loadComments} />
-        {error && (
-          <>
-            <div className="flex flex-col wauto rounded-2xl bg-w t-primary m-2 p-6 items-center justify-center">
-              <h1 className="text-xl font-bold t-primary">{error}</h1>
-              <button
-                className="mt-2 bg-theme text-white px-4 py-2 rounded-full"
-                onClick={loadComments}
-              >
-                {t("reload")}
-              </button>
+      {config.get<boolean>('comment.enabled') &&
+        <div className="m-2 flex flex-col justify-center items-center">
+          <CommentInput id={id} onRefresh={loadComments} />
+          {error && (
+            <>
+              <div className="flex flex-col wauto rounded-2xl bg-w t-primary m-2 p-6 items-center justify-center">
+                <h1 className="text-xl font-bold t-primary">{error}</h1>
+                <button
+                  className="mt-2 bg-theme text-white px-4 py-2 rounded-full"
+                  onClick={loadComments}
+                >
+                  {t("reload")}
+                </button>
+              </div>
+            </>
+          )}
+          {comments.length > 0 && (
+            <div className="w-full">
+              {comments.map((comment) => (
+                <CommentItem
+                  key={comment.id}
+                  comment={comment}
+                  onRefresh={loadComments}
+                />
+              ))}
             </div>
-          </>
-        )}
-        {comments.length > 0 && (
-          <div className="w-full">
-            {comments.map((comment) => (
-              <CommentItem
-                key={comment.id}
-                comment={comment}
-                onRefresh={loadComments}
-              />
-            ))}
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      }
     </>
   );
 }

diff --git a/client/src/page/settings.tsx b/client/src/page/settings.tsx
@@ -5,7 +5,7 @@ import ReactLoading from "react-loading";
 import Modal from "react-modal";
 import { Button } from "../components/button.tsx";
 import { useAlert, useConfirm } from "../components/dialog.tsx";
-import { client } from "../main.tsx";
+import { client, oauth_url } from "../main.tsx";
 import { ClientConfigContext, ConfigWrapper, defaultClientConfig, defaultClientConfigWrapper, defaultServerConfig, defaultServerConfigWrapper, ServerConfigContext } from "../state/config.tsx";
 import { headersWithAuth } from "../utils/auth.ts";
 import '../utils/thumb.css';
@@ -94,6 +94,8 @@ export function Settings() {
                             <ItemSwitch title={t('settings.friend.health.title')} description={t('settings.friend.health.desc')} type="server" configKey="friend_crontab" />
                             <ItemInput title={t('settings.friend.health.ua.title')} description={t('settings.friend.health.ua.desc')} type="server" configKey="friend_ua" configKeyTitle="User-Agent" />
                             <ItemTitle title={t('settings.other.title')} />
+                            <ItemSwitch title={t('settings.login.enable.title')} description={t('settings.login.enable.desc', {"url": oauth_url})} type="client" configKey="login.enabled" />
+                            <ItemSwitch title={t('settings.comment.enable.title')} description={t('settings.comment.enable.desc')} type="client" configKey="comment.enabled" />
                             <ItemSwitch title={t('settings.counter.enable.title')} description={t('settings.counter.enable.desc')} type="client" configKey="counter.enabled" />
                             <ItemSwitch title={t('settings.rss.title')} description={t('settings.rss.desc')} type="client" configKey="rss" />
                             <ItemInput title={t('settings.favicon.title')} description={t('settings.favicon.desc')} type="client" configKey="favicon" configKeyTitle="Favicon" />

diff --git a/client/src/state/config.tsx b/client/src/state/config.tsx
@@ -5,6 +5,8 @@ export const defaultClientConfig = new Map(Object.entries({
     "favicon": defaultFavicon,
     "counter.enabled": true,
     "friend_apply_enable": true,
+    "comment.enabled": true,
+    "login.enabled": true,
 }))
 
 export const defaultServerConfig = new Map(Object.entries({