68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
import { useGlobal } from '@/lib/global'
|
|
import { useRouter } from 'next/router'
|
|
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 router = useRouter()
|
|
const passwordInputRef = useRef(null)
|
|
|
|
/**
|
|
* 輸入並送出密碼
|
|
*/
|
|
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>`
|
|
}
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
// 選取密碼輸入框並聚焦
|
|
passwordInputRef.current.focus()
|
|
}, [router])
|
|
|
|
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 mx-4'>
|
|
<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 dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
|
|
<div
|
|
onClick={submitPassword}
|
|
className='px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300'>
|
|
<i className={'duration-200 cursor-pointer fas fa-key'}>
|
|
{locale.COMMON.SUBMIT}
|
|
</i>
|
|
</div>
|
|
</div>
|
|
<div id='tips'></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|