From aa339cbc37b020a3ccb498e794188d68a1bd50e6 Mon Sep 17 00:00:00 2001
From: Ray-D-Song <songraysmail@gmail.com>
Date: Wed, 23 Oct 2024 10:57:09 +0800
Subject: [PATCH] refactor: password encryption and view optimization

---
 packages/server/src/model/store.ts |  9 ++++++++
 packages/web/src/pages/login.tsx   | 33 +++++++++++++++++++++---------
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/server/src/model/store.ts b/packages/server/src/model/store.ts
index 68d18d1..c0f0e70 100644
--- a/packages/server/src/model/store.ts
+++ b/packages/server/src/model/store.ts
@@ -1,9 +1,18 @@
+import { createHash } from 'node:crypto'
+
+function hashToken(token: string): string {
+  return createHash('sha256').update(token).digest('hex')
+}
+
 async function checkAdminExist(DB: D1Database): Promise<boolean> {
   const result: { count: number } = await DB.prepare(`SELECT COUNT(*) as count FROM stores WHERE key = 'ADMIN_TOKEN'`).first()
   return result.count > 0
 }
 
 async function verifyAdminToken(DB: D1Database, token: string): Promise<'new' | 'fail' | 'reject' | 'accept'> {
+  if (typeof token !== 'string' || token.length < 8)
+    return 'reject'
+  token = hashToken(token)
   const result: { count: number } = await DB.prepare(`SELECT COUNT(*) as count FROM stores WHERE key = 'ADMIN_TOKEN' AND value = ?`).bind(token).first()
   if (result.count > 0) {
     return 'accept'
diff --git a/packages/web/src/pages/login.tsx b/packages/web/src/pages/login.tsx
index 4b33253..d5a7904 100644
--- a/packages/web/src/pages/login.tsx
+++ b/packages/web/src/pages/login.tsx
@@ -4,18 +4,20 @@ import { Button } from '@web-archive/shared/components/button'
 import { Input } from '@web-archive/shared/components/input'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@web-archive/shared/components/card'
 import toast, { Toaster } from 'react-hot-toast'
+import { Eye, EyeOff } from 'lucide-react'
 import router from '~/utils/router'
 
 export default function LoginPage() {
   const [key, setKey] = useState('')
   const [loading, setLoading] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
   const handleLogin = (e: FormEvent<HTMLFormElement>) => {
-    setLoading(true)
     e.preventDefault()
-    if (key.length === 0) {
-      toast.error('Key is required')
+    if (key.length < 8) {
+      toast.error('Password must be at least 8 characters')
       return
     }
+    setLoading(true)
     fetch('api/auth', {
       method: 'POST',
       headers: {
@@ -29,7 +31,7 @@ export default function LoginPage() {
           return
         }
         if (res.status === 201) {
-          toast.success('Admin token set, please use it login again')
+          toast.success('Admin password set, please use it login again')
           return
         }
         const json = await res.json()
@@ -57,12 +59,23 @@ export default function LoginPage() {
         <CardContent>
           <form onSubmit={handleLogin}>
             <div className="space-y-4">
-              <Input
-                type="password"
-                placeholder="Enter your key"
-                value={key}
-                onChange={e => setKey(e.target.value)}
-              />
+              <div className="relative">
+                <Input
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="Enter your password, at least 8 characters"
+                  value={key}
+                  onChange={e => setKey(e.target.value)}
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="absolute right-2 top-1/2 transform -translate-y-1/2"
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? <Eye /> : <EyeOff />}
+                </Button>
+              </div>
               <Button type="submit" className="w-full" disabled={loading}>
                 {loading ? 'Logging in...' : 'Login'}
               </Button>