pure-note/web/src/pages/Login.tsx

import { useState } from 'react'
import { useNavigate } from 'react-router'
import { ArrowLeft, ArrowRight, Eye, EyeOff, Lock } from 'lucide-react'
import { Alert, Button, Card, Input } from 'antd'
import { useAuth } from '../lib/auth'
import { ApiError } from '../lib/api'
import { useDocumentTitle } from '../features/site'

export default function Login() {
  useDocumentTitle('管理员登录')
  const { login, authenticated } = useAuth()
  const navigate = useNavigate()
  const [password, setPassword] = useState('')
  const [showPw, setShowPw] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [submitting, setSubmitting] = useState(false)

  if (authenticated) {
    navigate('/admin', { replace: true })
  }

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
    setSubmitting(true)
    try {
      await login(password)
      navigate('/admin', { replace: true })
    } catch (err) {
      if (err instanceof ApiError) {
        if (err.status === 429) setError('尝试过于频繁，请稍后再试')
        else if (err.status === 403) setError('请求被安全策略拦截，请刷新页面后重试')
        else setError('密码错误，请重试')
      } else {
        setError('登录失败，请重试')
      }
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="pn-login-wrap">
      <div className="pn-login-brand">
        <span className="pn-login-eyebrow">ADMIN</span>
        <span className="pn-login-wordmark">Pure Note</span>
      </div>

      <Card className="pn-login-card" styles={{ body: { padding: 0 } }}>
        <form onSubmit={onSubmit}>
          <h1 className="pn-login-title">管理员登录</h1>
          <p className="pn-login-sub">请输入管理密码以继续</p>

          <label htmlFor="pn-login-username" className="sr-only">用户名</label>
          <input
            id="pn-login-username"
            className="sr-only"
            type="text"
            name="username"
            autoComplete="username"
            value="admin"
            readOnly
            tabIndex={-1}
          />

          <label htmlFor="pn-login-password" className="sr-only">管理密码</label>
          <Input
            id="pn-login-password"
            size="large"
            variant="outlined"
            type={showPw ? 'text' : 'password'}
            name="password"
            placeholder="请输入管理密码"
            autoComplete="current-password"
            autoFocus
            required
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            prefix={<Lock size={16} className="pn-login-lock" aria-hidden />}
            suffix={
              <Button
                type="text"
                size="small"
                aria-label={showPw ? '隐藏密码' : '显示密码'}
                onClick={() => setShowPw((v) => !v)}
                icon={showPw ? <EyeOff size={16} /> : <Eye size={16} />}
              />
            }
          />

          {error && (
            <Alert role="alert" type="error" showIcon message={error} className="pn-login-alert" />
          )}

          <Button
            htmlType="submit"
            type="primary"
            size="large"
            block
            className="mt-5"
            disabled={submitting || password.length === 0}
          >
            <span>{submitting ? '登录中…' : '登录'}</span>
            <ArrowRight size={16} />
          </Button>

          <p className="pn-login-hint">连续失败将被暂时锁定</p>
        </form>
      </Card>

      <Button
        type="text"
        size="small"
        className="pn-login-back"
        icon={<ArrowLeft size={14} />}
        onClick={() => navigate('/')}
      >
        返回博客
      </Button>
    </div>
  )
}