From 18a0a14f3f2b076a2f200cff8bc5cc52e8943042 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 31 Oct 2024 17:11:00 +0800
Subject: [PATCH] =?UTF-8?q?starter=20=E4=B8=BB=E9=A2=98=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=8A=A0=E5=AF=86=E6=96=87=E7=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/starter/components/ArticleLock.js | 53 ++++++++++++++++++++++++
 themes/starter/index.js                  | 17 +++++---
 2 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 themes/starter/components/ArticleLock.js

diff --git a/themes/starter/components/ArticleLock.js b/themes/starter/components/ArticleLock.js
new file mode 100644
index 00000000..3a5f4b4c
--- /dev/null
+++ b/themes/starter/components/ArticleLock.js
@@ -0,0 +1,53 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { validPassword } = props
+  const { locale } = useGlobal()
+
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (!validPassword(p?.value)) {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
+      }
+    }
+  }
+
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
+  return <div id='container' className='w-full flex justify-center items-center h-96 '>
+        <div className='text-center space-y-3'>
+            <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+            <div className='flex'>
+                <input id="password" type='password'
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        submitPassword()
+                      }
+                    }}
+                    ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+                    className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'
+                ></input>
+                <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
+                    <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
+                </div>
+            </div>
+            <div id='tips'>
+            </div>
+        </div>
+    </div>
+}
diff --git a/themes/starter/index.js b/themes/starter/index.js
index 21298c42..922c05fe 100644
--- a/themes/starter/index.js
+++ b/themes/starter/index.js
@@ -30,6 +30,7 @@ import { useGlobal } from '@/lib/global'
 import { loadWowJS } from '@/lib/plugins/wow'
 import { SignIn, SignUp } from '@clerk/nextjs'
 import Link from 'next/link'
+import { ArticleLock } from './components/ArticleLock'
 import { Banner } from './components/Banner'
 import { CTA } from './components/CTA'
 import { SignInForm } from './components/SignInForm'
@@ -126,7 +127,7 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutSlug = props => {
-  const { post } = props
+  const { post, lock, validPassword } = props
 
   // 如果 是 /article/[slug] 的文章路径则視情況进行重定向到另一个域名
   const router = useRouter()
@@ -153,11 +154,15 @@ const LayoutSlug = props => {
       <div className='container grow'>
         <div className='flex flex-wrap justify-center -mx-4'>
           <div id='container-inner' className='w-full p-4'>
-            <div id='article-wrapper' className='mx-auto'>
-              <NotionPage {...props} />
-              <Comment frontMatter={post} />
-              <ShareBar post={post} />
-            </div>
+            {lock && <ArticleLock validPassword={validPassword} />}
+
+            {!lock && (
+              <div id='article-wrapper' className='mx-auto'>
+                <NotionPage {...props} />
+                <Comment frontMatter={post} />
+                <ShareBar post={post} />
+              </div>
+            )}
           </div>
         </div>
       </div>