+ { sectionRefs.current[1] = el; }}
- >
-
+
- DNS 聚合管理
++ {t('landing.features.dnsManagement.title')} +
++ {t('landing.features.dnsManagement.description')} +
- HiDNS - 一站式 DNS 聚合管理平台 -
-{t('landing.hero.description')}
-
-
-
+
-
-
- {/* Section 1: Pipeline - Core Component Workflow */}
-
+
+
+
+
+ {dnsProviders.map((p) => (
+
+
+
+ ))}
+ 核心工作流水线
-从用户接入到 DNS 解析分发，全链路覆盖
-
- {pipelineLayers.map((layer, li) => (
-
-
- {layer.icon}
- {layer.title}
+
+
+ {/* Row: 安全 (blue) | NS 监控 (bordered) */}
+
+
+
+
+
+
+
+ + {t('landing.features.security.title')} +
++ {t('landing.features.security.description')} +
+
+ Security
+ 2FA + JWT
+
+
+ { sectionRefs.current[2] = el; }}
- >
-
-
- {/* Section 3: Footer */}
- { sectionRefs.current[3] = el; }}
- >
-
+
+
+
- >([]);
- const [oauthLoading, setOauthLoading] = useState(false);
- const [require2FA, setRequire2FA] = useState(false);
- const [supported2FATypes, setSupported2FATypes] = useState([]);
- const [totpCode, setTotpCode] = useState('');
- const [useBackupCode, setUseBackupCode] = useState(false);
- const [backupCode, setBackupCode] = useState('');
useEffect(() => {
if (user) {
@@ -71,184 +27,9 @@ export function Login() {
navigate('/setup');
}
})
- .catch(() => {
- // If status cannot be checked, keep the login page available.
- })
- .finally(() => {
- setChecking(false);
- });
- }, [navigate]);
-
- useEffect(() => {
- authApi.oauthStatus()
- .then((res) => {
- if (res.data.code === 0 && res.data.data.enabled) {
- setOauthEnabled(true);
- setOauthProviders(res.data.data.providers || []);
- } else {
- setOauthEnabled(false);
- setOauthProviders([]);
- }
- })
- .catch(() => {
- setOauthEnabled(false);
- setOauthProviders([]);
- });
- }, []);
-
- const submitLogin = async () => {
- if (!username || !password) {
- setError(t('login.required'));
- return;
- }
- if (require2FA && !useBackupCode && !totpCode) {
- setError(t('login.authCodeRequired'));
- return;
- }
- if (require2FA && useBackupCode && !backupCode) {
- setError(t('login.backupCodeRequired'));
- return;
- }
-
- setError('');
- setLoading(true);
- try {
- // Encrypt password before sending
- let passwordToSend: string;
- try {
- passwordToSend = await encryptPassword(password);
- } catch (encryptError) {
- console.warn('Password encryption failed, falling back to plain text:', encryptError);
- passwordToSend = password; // Fallback to plain text if encryption fails
- }
-
- await login(
- username,
- passwordToSend,
- require2FA && !useBackupCode ? totpCode : undefined,
- require2FA && useBackupCode ? backupCode : undefined,
- undefined,
- true, // encrypted flag
- );
- navigate(returnTo);
- } catch (err: any) {
- if (err.message === '2FA_REQUIRED') {
- setRequire2FA(true);
- setSupported2FATypes(err.types || ['totp']);
- setError('');
- } else {
- setError(err.message || t('login.failed'));
- }
- } finally {
- setLoading(false);
- }
- };
-
- const handlePasskeyLogin = async () => {
- try {
- setLoading(true);
- setError('');
- const optsRes = await authApi.webauthnLoginOptions(username);
- if (optsRes.data.code !== 0) throw new Error(optsRes.data.msg);
-
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const attResp = await startAuthentication({ optionsJSON: optsRes.data.data.options as any });
-
- // Encrypt password for WebAuthn login too
- let passwordToSend: string;
- try {
- passwordToSend = await encryptPassword(password);
- } catch (encryptError) {
- console.warn('Password encryption failed, falling back to plain text:', encryptError);
- passwordToSend = password;
- }
-
- await login(username, passwordToSend, undefined, undefined, attResp as unknown as WebAuthnResponse, true);
- navigate(returnTo);
- } catch (e: unknown) {
- setError(e instanceof Error ? e.message : t('login.failed'));
- } finally {
- setLoading(false);
- }
- };
-
- const sendResetCode = async () => {
- if (!resetEmail.trim()) {
- toast.error(t('login.resetEmailRequired'));
- return;
- }
- setResetLoading(true);
- try {
- const res = await authApi.requestPasswordReset(resetEmail.trim());
- if (res.data.code !== 0) {
- toast.error(res.data.msg || t('login.resetRequestFailed'));
- return;
- }
- toast.success(t('login.resetCodeSent'));
- } catch (e) {
- toast.error(e instanceof Error ? e.message : t('login.resetRequestFailed'));
- } finally {
- setResetLoading(false);
- }
- };
-
- const confirmReset = async () => {
- if (!resetEmail.trim() || !resetCode.trim() || !resetNewPassword.trim()) {
- toast.error(t('login.resetFieldsRequired'));
- return;
- }
- setResetLoading(true);
- try {
- // Encrypt password before sending
- let encryptedPassword: string;
- try {
- encryptedPassword = await encryptPassword(resetNewPassword);
- } catch (encryptError) {
- console.warn('Password encryption failed, falling back to plain text:', encryptError);
- encryptedPassword = resetNewPassword;
- }
-
- const res = await authApi.confirmPasswordReset(resetEmail.trim(), resetCode.trim(), encryptedPassword, true);
- if (res.data.code !== 0) {
- toast.error(res.data.msg || t('login.resetConfirmFailed'));
- return;
- }
- toast.success(t('login.resetPasswordSuccess'));
- setShowReset(false);
- setResetCode('');
- setResetNewPassword('');
- } catch (e) {
- toast.error(e instanceof Error ? e.message : t('login.resetConfirmFailed'));
- } finally {
- setResetLoading(false);
- }
- };
-
- const startOauthLogin = async (provider?: 'custom' | 'logto') => {
- setError('');
- const isProviderReady = oauthEnabled && (
- provider ? oauthProviders.some((item) => item.key === provider) : oauthProviders.length > 0
- );
-
- if (!isProviderReady) {
- setError(provider === 'logto' ? t('login.logtoUnavailable') : t('login.oauthUnavailable'));
- return;
- }
-
- setOauthLoading(true);
- try {
- const res = await authApi.oauthStart(provider);
- if (res.data.code !== 0) {
- setError(res.data.msg || t('login.oauthFailed'));
- return;
- }
- window.location.href = res.data.data.authUrl;
- } catch (e) {
- setError(getApiErrorMessage(e, t('login.oauthFailed')));
- } finally {
- setOauthLoading(false);
- }
- };
+ .catch(() => {})
+ .finally(() => setChecking(false));
+ }, [navigate, user]);
if (checking) {
return (
@@ -263,247 +44,10 @@ export function Login() {
return (
<>
-
-
+
+
- );
+
+ );
}
diff --git a/client/src/pages/LoginCard.tsx b/client/src/pages/LoginCard.tsx
new file mode 100644
index 00000000..07cbfbf3
--- /dev/null
+++ b/client/src/pages/LoginCard.tsx
@@ -0,0 +1,684 @@
+import { useState, useRef, useEffect, useMemo, useCallback, type ReactNode } from 'react';
+import svgPaths from '../utils/loginSvgPaths';
+import { useAuth } from '../contexts/AuthContext';
+import { useI18n } from '../contexts/I18nContext';
+import { authApi } from '../api';
+import type { WebAuthnResponse } from '../api';
+import { useToast } from '../hooks/useToast';
+import { startAuthentication } from '@simplewebauthn/browser';
+import { encryptPassword } from '../utils/rsaEncrypt';
+import { Dropdown } from 'tdesign-react';
+import type { DropdownOption } from 'tdesign-react';
+import { CheckIcon, TranslateIcon } from 'tdesign-icons-react';
+import { localeOptions } from '../i18n';
+import { Modal } from '../components/Modal';
+import './Login.css';
+
+const SYS = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+
+type ApiErrorPayload = { msg?: string; message?: string };
+function getApiErrorMessage(error: unknown, fallback: string) {
+ if (typeof error === 'object' && error !== null && 'response' in error) {
+ const response = (error as { response?: { data?: ApiErrorPayload } }).response;
+ const message = response?.data?.msg ?? response?.data?.message;
+ if (message) return message;
+ }
+ return fallback;
+}
+
+function getUserFriendlyError(error: unknown, fallback: string) {
+ if (typeof error === 'object' && error !== null && 'response' in error) {
+ const response = (error as { response?: { data?: ApiErrorPayload } }).response;
+ const message = response?.data?.msg ?? response?.data?.message;
+ if (message && message.length < 200) return message;
+ }
+ return fallback;
+}
+
+/**
+ * Try RSA-encrypt the password.
+ * On HTTPS: encryption failure is fatal (password must not be sent in plaintext).
+ * On HTTP: encryption failure triggers a confirmation dialog; if the user
+ * confirms, the plaintext password is returned so login can proceed
+ * over plain HTTP (the server must still accept it).
+ */
+async function encryptWithFallback(
+ password: string,
+ confirmFn: () => Promise,
+ encryptionFailed: string,
+): Promise<{ encrypted: string; plaintext: boolean }> {
+ try {
+ const encrypted = await encryptPassword(password);
+ return { encrypted, plaintext: false };
+ } catch {
+ if (window.location.protocol === 'https:') {
+ throw new Error(encryptionFailed);
+ }
+ const confirmed = await confirmFn();
+ if (!confirmed) throw new Error(encryptionFailed);
+ return { encrypted: password, plaintext: true };
+ }
+}
+
+/* ─── SVG icons ──────────────────────────────────────────────────────────── */
+function GlobePurple() {
+ return (
+ ;
+}) {
+ const { t } = useI18n();
+ return (
+ ;
+}) {
+ const { t } = useI18n();
+ return (
+ ;
+}) {
+ const { t } = useI18n();
+ return (
+ ('username');
+ const [phase, setPhase] = useState('idle');
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [require2FA, setRequire2FA] = useState(false);
+ const [supported2FATypes, setSupported2FATypes] = useState([]);
+ const [totpCode, setTotpCode] = useState('');
+ const [useBackupCode, setUseBackupCode] = useState(false);
+ const [backupCode, setBackupCode] = useState('');
+ const [showReset, setShowReset] = useState(false);
+ const [resetEmail, setResetEmail] = useState('');
+ const [resetCode, setResetCode] = useState('');
+ const [resetNewPassword, setResetNewPassword] = useState('');
+ const [resetLoading, setResetLoading] = useState(false);
+ const [oauthEnabled, setOauthEnabled] = useState(false);
+ const [oauthProviders, setOauthProviders] = useState>([]);
+ const [oauthLoading, setOauthLoading] = useState(false);
+ const timer = useRef | null>(null);
+ const usernameInputRef = useRef(null);
+ const passwordInputRef = useRef(null);
+ const totpInputRef = useRef(null);
+ const httpWarningResolveRef = useRef<((value: boolean) => void) | null>(null);
+ const [httpWarningOpen, setHttpWarningOpen] = useState(false);
+
+ const EXIT_DUR = 480;
+ const EASE_OUT = 'cubic-bezier(0.55,0,0.8,0.45)';
+ const EASE_IN = 'cubic-bezier(0.22,1,0.36,1)';
+
+ useEffect(() => {
+ authApi.oauthStatus()
+ .then((res) => {
+ if (res.data.code === 0 && res.data.data.enabled) {
+ setOauthEnabled(true);
+ setOauthProviders(res.data.data.providers || []);
+ }
+ })
+ .catch(() => {});
+ }, []);
+
+ const showHttpWarningModal = useCallback(() => {
+ return new Promise((resolve) => {
+ httpWarningResolveRef.current = resolve;
+ setHttpWarningOpen(true);
+ });
+ }, []);
+
+ const resolveHttpWarning = (confirmed: boolean) => {
+ httpWarningResolveRef.current?.(confirmed);
+ httpWarningResolveRef.current = null;
+ setHttpWarningOpen(false);
+ };
+
+ const languageOptions = useMemo(() => localeOptions.map((option) => ({
+ content: option.label,
+ value: option.code,
+ active: option.code === locale,
+ prefixIcon: option.code === locale ? ,
+ encryptionFailed: string,
+): Promise<{ encrypted: string; plaintext: boolean }> {
+ try {
+ const encrypted = await encryptPassword(password);
+ return { encrypted, plaintext: false };
+ } catch {
+ // HTTPS：加密失败是致命错误
+ if (window.location.protocol === 'https:') {
+ throw new Error(encryptionFailed);
+ }
+ // HTTP：显示确认弹窗，等待用户选择
+ const confirmed = await confirmFn();
+ if (!confirmed) throw new Error(encryptionFailed);
+ return { encrypted: password, plaintext: true };
+ }
+}
+```
+
+### i18n 键
+
+| 键 | 用途 | 示例（中文） |
+|----|------|-------------|
+| `login.httpWarning` | 弹窗正文 | "当前使用 HTTP 协议，密码将以明文传输，存在安全风险。是否继续？" |
+| `login.httpWarningTitle` | 弹窗标题 | "不安全的连接" |
+| `login.httpWarningConfirm` | 确认按钮 | "继续" |
+| `login.httpWarningCancel` | 取消按钮 | "取消" |
+
+### 登录 API 标志
+
+登录请求包含 `encrypted` 布尔值，告知服务端如何解析密码：
+
+```json
+{
+ "username": "admin",
+ "password": "...",
+ "encrypted": true // 使用明文回退时为 false
+}
+```
+
+## 何时触发？
+
+- 用户通过 `http://`（非 `https://`）访问 HiDNS
+- 服务端 RSA 公钥端点（`/api/auth/public-key`）不可达
+- Web Crypto API 不可用（旧版浏览器、非安全上下文）
+ {t('landing.features.nsMonitoring.title')} +
++ {t('landing.features.nsMonitoring.description')} +
+
+
-
-
- {/* Section 2: Features */}
-
+
-
- {layer.items.map((item, ii) => (
-
- ))}
-
- {item.icon}
- {item.label}
- {item.desc}
-
- ))}
+
+
- {li < pipelineLayers.length - 1 && (
-
-
-
- )}
- {t('landing.features.title')}
-
- {features.map((f, i) => (
-
-
-
- ))}
- {f.icon}
- {f.title}
-{f.description}
-
-
-
-
+
+
+
+ {/* CTA */}
+
-
- - 开源 · 安全 · 高效 —— 现代化 DNS 管理平台 -
- + + {/* Card 3: 多平台支持 — Full Width */} +
+
-
-
+
+ Multi-Provider
++ {t('landing.features.multiProvider.title')} +
++ {t('landing.features.multiProvider.description')} +
+
+
-
+ {multiProviders.map((p) => (
+
+
+ ))}
+ {t('landing.footer.copyright')}
+
+ {t('landing.cta.title')}
+{t('landing.cta.description')}
+ +
- 滚动探索
-
);
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Login.css b/client/src/pages/Login.css
index fbe6b2a9..a2c0ee41 100644
--- a/client/src/pages/Login.css
+++ b/client/src/pages/Login.css
@@ -1,9 +1,10 @@
+/* ─── Page ───────────────────────────────────────────────────────────────── */
.login-page {
- min-height: var(--app-scaled-vh);
+ min-height: var(--app-scaled-vh, 100vh);
display: grid;
place-items: center;
padding: clamp(20px, 4vw, 56px);
- background: #f4f6f8;
+ background: #f8fbff;
color: #1f2329;
}
@@ -13,408 +14,508 @@
padding: 24px;
}
-.login-shell {
+.login-footer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ padding: 14px 20px;
+ font-size: 12px;
+ color: #999;
+ z-index: 10;
+ pointer-events: none;
+ user-select: none;
+}
+
+html.dark .login-footer { color: #666; }
+html.dark .login-page { background: #111418; }
+
+/* ─── Card ───────────────────────────────────────────────────────────────── */
+.lc-card {
position: relative;
- display: grid;
- grid-template-columns: minmax(360px, 1fr) minmax(360px, 440px);
- width: min(100%, 1040px);
- min-height: 620px;
+ width: 867px;
+ height: 467px;
+ background: var(--lc-bg, #fbfbfb);
+ border-radius: 5px;
overflow: hidden;
- border: 1px solid #e3e6eb;
- border-radius: 8px;
- background: #fff;
- box-shadow: 0 20px 48px rgba(31, 35, 41, 0.08);
+ box-shadow: 0 4px 40px rgba(0, 0, 0, 0.10);
}
-.login-identity {
- position: relative;
- display: grid;
- grid-template-rows: auto 1fr;
- min-width: 0;
- padding: 44px;
- border-right: 1px solid #e7e7e7;
- background:
- linear-gradient(180deg, rgba(0, 82, 217, 0.035), transparent 42%),
- #f8fafc;
+html.dark .lc-card {
+ --lc-bg: #1c2027;
+ --lc-surface: #252b35;
+ --lc-text: #f3f6fb;
+ --lc-text-muted: #a6b0c0;
+ --lc-border: #3f4652;
+ --lc-input-bg: #171b22;
+ box-shadow: 0 4px 40px rgba(0, 0, 0, 0.32);
}
-.login-brand {
- display: flex;
- align-items: center;
- gap: 12px;
- min-width: 0;
+/* ─── Language switcher ──────────────────────────────────────────────────── */
+.lc-lang {
+ position: absolute;
+ top: 6px;
+ right: 8px;
+ z-index: 20;
}
-.login-brand__mark {
- width: 40px;
- height: 40px;
- display: inline-flex;
+.lc-lang-btn {
+ width: 32px;
+ height: 32px;
+ display: flex;
align-items: center;
justify-content: center;
- flex: 0 0 auto;
- border: 1px solid #dcdfe6;
- border-radius: 8px;
- background: #fff;
+ background: none;
+ border: none;
+ border-radius: 6px;
+ color: var(--lc-text-muted, #8a94a6);
+ cursor: pointer;
+ font-size: 18px;
+ transition: background 0.15s ease, color 0.15s ease;
}
-.login-brand__mark img {
- width: 24px;
- height: 24px;
- display: block;
+.lc-lang-btn:hover {
+ background: var(--lc-surface-hover, rgba(0, 0, 0, 0.06));
+ color: var(--lc-text, #1f2329);
}
-.login-brand > div {
- display: grid;
- gap: 2px;
- min-width: 0;
+html.dark .lc-lang-btn:hover {
+ background: rgba(255, 255, 255, 0.08);
+ color: var(--lc-text, #f3f6fb);
}
-.login-brand strong {
- color: #1f2329;
- font-size: 16px;
- line-height: 24px;
+.lc-lang__menu .t-dropdown__item--active {
+ color: #0482f8;
}
-.login-brand span,
-.login-identity__copy p,
-.login-panel__heading p {
- color: #5f6673;
- font-size: 14px;
- line-height: 22px;
+/* ─── Left branding panel ────────────────────────────────────────────────── */
+.lc-branding {
+ position: absolute;
+ left: 4px;
+ top: 7px;
+ width: 460px;
+ height: 453px;
+ background: #fff;
+ border-radius: 5px;
}
-.login-identity__copy {
- align-self: center;
- max-width: 460px;
- padding-bottom: 24px;
+html.dark .lc-branding { background: var(--lc-surface); }
+
+.lc-branding__logo {
+ position: absolute;
+ left: 44px;
+ top: 115px;
+ display: flex;
+ align-items: center;
+ gap: 3px;
}
-.login-identity__copy h1,
-.login-panel__heading h2 {
+.lc-branding__hi {
+ font-family: SYS, system-ui;
+ font-weight: 700;
+ font-size: 24px;
+ color: #8533ff;
+ line-height: normal;
+}
+
+.lc-branding__dns {
+ position: absolute;
+ left: 43px;
+ top: 137px;
margin: 0;
- color: #1f2329;
+ font-family: SYS, system-ui;
font-weight: 600;
- letter-spacing: 0;
+ font-size: 24px;
+ color: var(--lc-text, #000);
+ line-height: normal;
}
-.login-identity__copy h1 {
- font-size: clamp(32px, 4vw, 44px);
- line-height: 1.15;
+.lc-branding__headline {
+ position: absolute;
+ left: 43px;
+ top: 178px;
+ width: 284px;
+ font-family: SYS, system-ui;
+ font-weight: 600;
+ font-size: 36px;
+ color: var(--lc-text, #000);
+ line-height: 1.35;
}
-.login-identity__copy p,
-.login-panel__heading p {
- margin: 10px 0 0;
-}
+.lc-branding__line { margin: 0; }
-.login-panel {
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-width: 0;
- padding: 54px 44px 42px;
- background: #fff;
-}
+.lc-branding__hicolor { color: #0482f8; }
-.login-panel__heading {
- margin-bottom: 28px;
+/* ─── Right panel ────────────────────────────────────────────────────────── */
+.lc-card__right {
+ position: absolute;
+ left: 460px;
+ top: 0;
+ right: 0;
+ bottom: 0;
}
-.login-panel__heading h2 {
- font-size: 26px;
- line-height: 34px;
+.lc-card__right-viewport {
+ position: absolute;
+ inset: 0;
+ overflow: hidden;
}
-.login-form__stack,
-.login-reset-dialog {
- width: 100%;
+.lc-card__panel {
+ position: absolute;
+ inset: 0;
}
-.login-form .t-form__item {
- margin-bottom: 0;
+/* ─── Error ──────────────────────────────────────────────────────────────── */
+.lc-error {
+ position: absolute;
+ top: 12px;
+ left: 31px;
+ right: 31px;
+ z-index: 10;
+ padding: 10px 14px;
+ background: #fef2f2;
+ border: 1px solid #fecaca;
+ border-radius: 6px;
+ color: #991b1b;
+ font-family: SYS, system-ui;
+ font-size: 13px;
+ line-height: 1.4;
}
-.login-form .t-form__label {
- color: #3f4652;
- font-weight: 500;
+html.dark .lc-error {
+ background: rgba(239, 68, 68, 0.15);
+ border-color: rgba(239, 68, 68, 0.3);
+ color: #fca5a5;
}
-.login-form :where(.t-input, .t-input-adornment) {
- background: #fff;
+/* ─── Step (shared) ──────────────────────────────────────────────────────── */
+.lc-step {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 132px;
+ box-sizing: border-box;
}
-.login-form :where(.t-input__inner) {
- background: transparent;
+.lc-step__heading {
+ width: 341px;
+ font-family: SYS, system-ui;
+ font-weight: 500;
+ font-size: 36px;
+ color: var(--lc-text, #000);
+ line-height: 1.2;
+ margin-bottom: 24px;
}
-.login-form .t-button--theme-primary {
- font-weight: 600;
-}
+.lc-step__heading p { margin: 0; }
-.login-two-factor {
+/* ─── Back button ────────────────────────────────────────────────────────── */
+.lc-back {
+ width: 341px;
+ height: 27px;
+ background: none;
+ border: none;
+ padding: 0;
+ cursor: pointer;
display: flex;
- flex-direction: column;
- gap: 16px;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 21px;
+ font-family: inherit;
+ color: var(--lc-text, #000);
}
-.login-code-input {
- font-size: 20px;
- font-weight: 600;
- letter-spacing: 0;
+/* ─── Input ──────────────────────────────────────────────────────────────── */
+.lc-input-wrap {
+ width: 341px;
+ height: 46px;
+ background: var(--lc-surface, #fff);
+ border-radius: 6px;
+ border: 1px solid var(--lc-border, #eee);
+ box-sizing: border-box;
+ margin-bottom: 29px;
}
-.login-switch-code {
+.lc-input {
width: 100%;
- margin-top: 8px;
-}
-
-.login-panel__footer,
-.login-external-providers {
- display: flex;
- align-items: stretch;
- justify-content: center;
- min-width: 0;
+ height: 100%;
+ background: transparent;
+ border: none;
+ outline: none;
+ padding: 0 14px;
+ box-sizing: border-box;
+ font-family: SYS, system-ui;
+ font-weight: 500;
+ font-size: 14px;
+ color: var(--lc-text, #000);
}
-.login-panel__footer {
- gap: 0;
- margin-top: 20px;
- padding-top: 18px;
- border-top: 1px solid #e7e7e7;
+.lc-input::placeholder {
+ color: var(--lc-text-muted, rgba(147, 147, 147, 0.38));
}
-.login-external-providers {
- margin-top: 8px;
+.lc-input--center {
+ text-align: center;
+ font-size: 20px;
+ font-weight: 600;
+ letter-spacing: 0;
}
-.login-footer-action {
- min-width: max-content;
- max-width: 100%;
- height: 34px;
- display: inline-flex;
+/* ─── Primary button ─────────────────────────────────────────────────────── */
+.lc-btn-primary {
+ width: 341px;
+ height: 39px;
+ background: #004ffa;
+ border-radius: 6px;
+ border: none;
+ display: flex;
align-items: center;
justify-content: center;
gap: 6px;
- padding: 0 14px;
- border: 0;
- border-radius: 0;
- background: transparent;
- color: #0052d9;
- font-size: 14px;
- line-height: 1;
cursor: pointer;
- white-space: nowrap;
-}
-
-.login-footer-action + .login-footer-action {
- border-left: 1px solid #dcdfe6;
-}
-
-.login-footer-action:hover {
- color: #266fe8;
+ opacity: 1;
+ transition: opacity 0.15s;
+ margin-bottom: 12px;
+ font-family: inherit;
}
-.login-footer-action:disabled {
- color: #a8abb2;
+.lc-btn-primary:disabled {
+ opacity: 0.5;
cursor: not-allowed;
}
-.login-footer-action svg {
- width: 16px;
- height: 16px;
- flex: 0 0 auto;
-}
+html.dark .lc-btn-primary { background: #266fe8; }
-.login-footer-action .t-button__text {
- display: inline-flex;
+/* ─── Outline button ─────────────────────────────────────────────────────── */
+.lc-btn-outline {
+ width: 100%;
+ height: 39px;
+ background: transparent;
+ border-radius: 6px;
+ border: 1px solid var(--lc-border, #eee);
+ display: flex;
align-items: center;
+ justify-content: center;
gap: 6px;
- min-width: 0;
- overflow: visible;
- white-space: nowrap;
+ cursor: pointer;
+ font-family: SYS, system-ui;
+ font-weight: 500;
+ font-size: 14px;
+ color: var(--lc-text, #000);
+ transition: background 0.15s;
}
-.login-reset-code-row {
- display: grid;
- grid-template-columns: minmax(0, 1fr) auto;
- align-items: center;
- gap: 8px;
- width: 100%;
- min-width: 0;
-}
+.lc-btn-outline:hover { background: var(--lc-surface, #f5f5f5); }
-.login-reset-code-row > .t-input {
- min-width: 0;
+/* ─── SSO row ────────────────────────────────────────────────────────────── */
+.lc-sso {
+ width: 341px;
+ height: 36px;
+ background: var(--lc-surface, #fff);
+ border-radius: 6px;
+ border: 1px solid rgba(192, 192, 192, 0.16);
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ cursor: pointer;
+ transition: background 0.15s;
+ font-family: inherit;
+ margin-bottom: 6px;
}
-.login-reset-code-button {
- width: auto;
- min-width: 104px;
- flex: 0 0 auto;
- white-space: nowrap;
+.lc-sso:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
}
-.login-reset-code-button .t-button__text {
- overflow: visible;
- white-space: nowrap;
+.lc-sso:hover:not(:disabled) {
+ background: var(--lc-surface, #f9f9f9);
}
-html.dark .login-page {
- background: #111418;
- color: #f3f6fb;
+html.dark .lc-sso {
+ background: var(--lc-surface);
+ border-color: var(--lc-border);
}
-.login-footer {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
+/* ─── Divider ────────────────────────────────────────────────────────────── */
+.lc-divider {
+ width: 341px;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin: 4px 0;
+ font-family: SYS, system-ui;
+ font-size: 13px;
+ color: var(--lc-text-muted, #999);
+}
+
+.lc-divider::before,
+.lc-divider::after {
+ content: '';
+ flex: 1;
+ height: 1px;
+ background: var(--lc-border, #eee);
+}
+
+/* ─── Switch code link ───────────────────────────────────────────────────── */
+.lc-switch-code {
+ width: 341px;
+ background: none;
+ border: none;
+ padding: 4px 0;
+ cursor: pointer;
+ font-family: SYS, system-ui;
+ font-weight: 500;
+ font-size: 13px;
+ color: #0089fa;
text-align: center;
- padding: 14px 20px;
- font-size: 12px;
- color: #999;
- z-index: 10;
- pointer-events: none;
- user-select: none;
+ margin-bottom: 8px;
}
-html.dark .login-footer {
- color: #666;
-}
+.lc-switch-code:hover { text-decoration: underline; }
-html.dark .login-shell {
- border-color: #343b47;
- background: #1c2027;
- box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
-}
-
-html.dark .login-identity {
- border-right-color: #343b47;
- background:
- linear-gradient(180deg, rgba(69, 143, 255, 0.08), transparent 44%),
- #171b22;
+/* ─── Spinner ────────────────────────────────────────────────────────────── */
+.lc-spinner {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ border-top-color: #fff;
+ border-radius: 50%;
+ animation: lc-spin 0.6s linear infinite;
}
-html.dark .login-panel__footer {
- border-top-color: #343b47;
+.lc-spinner--sm {
+ width: 14px;
+ height: 14px;
}
-html.dark .login-brand__mark {
- border-color: #3f4652;
- background: #202631;
+@keyframes lc-spin {
+ to { transform: rotate(360deg); }
}
-html.dark .login-brand strong,
-html.dark .login-identity__copy h1,
-html.dark .login-panel__heading h2 {
- color: #f3f6fb;
-}
+/* ─── Icon helpers ───────────────────────────────────────────────────────── */
+.lc-icon-24 { width: 24px; height: 24px; position: relative; overflow: hidden; flex-shrink: 0; }
+.lc-icon-20 { width: 20px; height: 20px; position: relative; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+.lc-icon-22 { width: 22px; height: 22px; position: relative; overflow: hidden; flex-shrink: 0; }
+.lc-icon-30 { width: 30px; height: 27px; position: relative; overflow: hidden; flex-shrink: 0; }
+.lc-icon-inset { position: absolute; inset: 16.67%; }
-html.dark .login-brand span,
-html.dark .login-identity__copy p,
-html.dark .login-panel__heading p {
- color: #a6b0c0;
+/* ─── Reset dialog overlay ───────────────────────────────────────────────── */
+.lc-reset-overlay {
+ position: absolute;
+ inset: 0;
+ z-index: 20;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(4px);
}
-html.dark .login-panel {
- background: #1c2027;
+.lc-reset-dialog {
+ width: 380px;
+ background: var(--lc-bg, #fff);
+ border-radius: 12px;
+ padding: 28px;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
-html.dark .login-form .t-form__label {
- color: #d7dce5;
-}
+html.dark .lc-reset-dialog { background: #252b35; }
-html.dark .login-form .t-input,
-html.dark .login-form .t-input-adornment {
- border-color: #3f4652;
- background: #171b22 !important;
- background-color: #171b22 !important;
- background-image: none !important;
- color: #f3f6fb;
+.lc-reset-dialog h3 {
+ margin: 0 0 4px;
+ font-family: SYS, system-ui;
+ font-weight: 600;
+ font-size: 18px;
+ color: var(--lc-text, #000);
}
-html.dark .login-form :where(.t-input__inner) {
- background: transparent !important;
- color: #f3f6fb;
- -webkit-text-fill-color: #f3f6fb;
+.lc-reset-code-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ gap: 8px;
}
-html.dark .login-form :where(.t-input__inner::placeholder) {
- color: #7d8794;
- -webkit-text-fill-color: #7d8794;
+.lc-reset-code-row .lc-input-wrap {
+ width: auto;
+ margin-bottom: 0;
}
-html.dark .login-form input:-webkit-autofill,
-html.dark .login-form input:-webkit-autofill:hover,
-html.dark .login-form input:-webkit-autofill:focus {
- caret-color: #f3f6fb;
- box-shadow: 0 0 0 1000px #171b22 inset;
- -webkit-text-fill-color: #f3f6fb;
+.lc-reset-code-row .lc-btn-outline {
+ width: auto;
+ min-width: 100px;
+ height: 46px;
+ padding: 0 14px;
}
-html.dark .login-footer-action {
- color: #72a7ff;
+.lc-reset-actions {
+ display: flex;
+ gap: 10px;
+ margin-top: 4px;
}
-html.dark .login-footer-action + .login-footer-action {
- border-left-color: #3f4652;
+.lc-reset-actions .lc-btn-outline {
+ flex: 1;
+ height: 39px;
}
-html.dark .login-footer-action:hover {
- color: #9fc4ff;
+.lc-reset-actions .lc-btn-primary {
+ flex: 1;
}
+/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
- .login-page {
- padding: 24px 18px;
- }
+ .login-page { padding: 24px 18px; }
- .login-shell {
- grid-template-columns: minmax(0, 1fr);
+ .lc-card {
width: min(100%, 520px);
- min-height: 0;
+ height: auto;
+ min-height: 467px;
}
- .login-identity {
- gap: 28px;
- padding: 28px;
- border-right: 0;
- border-bottom: 1px solid #e7e7e7;
- }
-
- .login-identity__copy {
- padding-bottom: 0;
- }
-
- .login-identity__copy h1 {
- font-size: 30px;
- }
+ .lc-branding { display: none; }
- .login-panel {
- padding: 32px 28px;
- }
-
- html.dark .login-identity {
- border-bottom-color: #343b47;
+ .lc-card__right {
+ position: relative;
+ left: auto;
+ top: auto;
+ right: auto;
+ bottom: auto;
+ min-height: 467px;
}
}
@media (max-width: 520px) {
- .login-page {
- padding: 14px;
- }
+ .login-page { padding: 14px; }
- .login-identity,
- .login-panel {
- padding: 24px 18px;
+ .lc-card {
+ width: 100%;
+ border-radius: 8px;
}
- .login-panel__footer,
- .login-external-providers {
- flex-wrap: wrap;
+ .lc-step { padding-top: 48px; }
+
+ .lc-step__heading,
+ .lc-input-wrap,
+ .lc-btn-primary,
+ .lc-sso,
+ .lc-divider,
+ .lc-switch-code {
+ width: min(100%, 341px);
}
- .login-footer-action {
- padding: 0 10px;
+ .lc-reset-dialog {
+ width: calc(100% - 32px);
+ padding: 20px;
}
}
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
index 3e223559..a69655ce 100644
--- a/client/src/pages/Login.tsx
+++ b/client/src/pages/Login.tsx
@@ -1,64 +1,20 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Alert, Button, Dialog, Divider, Form, Input, Loading, Space } from 'tdesign-react';
-import {
- FingerprintIcon,
- KeyIcon,
- LockOnIcon,
- MailIcon,
- SecuredIcon,
- UserIcon,
-} from 'tdesign-icons-react';
+import { Loading } from 'tdesign-react';
import { useAuth } from '../contexts/AuthContext';
import { useI18n } from '../contexts/I18nContext';
-import { authApi, initApi } from '../api';
-import type { WebAuthnResponse } from '../api';
-import { useToast } from '../hooks/useToast';
-import { startAuthentication } from '@simplewebauthn/browser';
-import { encryptPassword } from '../utils/rsaEncrypt';
+import { initApi } from '../api';
+import LoginCard from './LoginCard';
import './Login.css';
-type ApiErrorPayload = {
- msg?: string;
- message?: string;
-};
-
-function getApiErrorMessage(error: unknown, fallback: string) {
- if (typeof error === 'object' && error !== null && 'response' in error) {
- const response = (error as { response?: { data?: ApiErrorPayload } }).response;
- const message = response?.data?.msg ?? response?.data?.message;
- if (message) return message;
- }
-
- return error instanceof Error ? error.message : fallback;
-}
-
export function Login() {
const year = new Date().getFullYear();
- const { user, login } = useAuth();
+ const { user } = useAuth();
const { t } = useI18n();
- const toast = useToast();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const returnTo = searchParams.get('return_to') || '/dash';
- const [username, setUsername] = useState('');
- const [password, setPassword] = useState('');
- const [error, setError] = useState('');
- const [loading, setLoading] = useState(false);
const [checking, setChecking] = useState(true);
- const [showReset, setShowReset] = useState(false);
- const [resetEmail, setResetEmail] = useState('');
- const [resetCode, setResetCode] = useState('');
- const [resetNewPassword, setResetNewPassword] = useState('');
- const [resetLoading, setResetLoading] = useState(false);
- const [oauthEnabled, setOauthEnabled] = useState(false);
- const [oauthProviders, setOauthProviders] = useState
-
+ {/* Footer */}
+
+ {t('landing.footer.copyright')}
+
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
- HiDNS
- {t('login.subtitle')}
-
-
-
- {t('login.consoleTitle')}
-{t('login.consoleSubtitle')}
-
-
-
-
-
- {require2FA ? t('login.verify2FA') : t('login.title')}
-{require2FA ? t('login.twoFactorHint') : t('login.accountHint')}
-
-
-
- {/* 动态显示 Logto 登录（仅当后端配置了 Logto） */}
- {oauthEnabled && oauthProviders.some((provider) => provider.key === 'logto') && (
-
- )}
-
-
- {/* 动态显示其他 OAuth 提供商 */}
- {oauthEnabled && oauthProviders.some((provider) => provider.key !== 'logto') && (
-
- {oauthProviders.filter((provider) => provider.key !== 'logto').map((provider) => (
-
- ))}
-
- )}
-
+
+ );
+}
+
+function ArrowForward() {
+ return (
+
+
+
+
+
+ );
+}
+
+function ArrowBack() {
+ return (
+
+
+
+
+
+ );
+}
+
+/* ─── Left branding panel ───────────────────────────────────────────────── */
+function BrandingPanel() {
+ const { t } = useI18n();
+ return (
+
+
+
+
+
+ );
+}
+
+/* ─── SSO row ───────────────────────────────────────────────────────────── */
+function SsoRow({ icon, label, brand, onClick, disabled }: {
+ icon: ReactNode; label: string; brand: string; onClick?: () => void; disabled?: boolean;
+}) {
+ const { t } = useI18n();
+ return (
+
+ );
+}
+
+/* ─── Step: Username ─────────────────────────────────────────────────────── */
+function UsernamePanel({ username, setUsername, onContinue, loading, oauthEnabled, oauthProviders, onOauthLogin, oauthLoading, inputRef }: {
+ username: string; setUsername: (v: string) => void; onContinue: () => void; loading: boolean;
+ oauthEnabled: boolean; oauthProviders: Array<{ key: 'custom' | 'logto'; providerName: string }>;
+ onOauthLogin: (provider?: 'custom' | 'logto') => void; oauthLoading: boolean;
+ inputRef: React.RefObject
+ Hi
+
+ DNS
+
+
+ {t('login.brandLine1', { defaultValue: '登录以继续使用' })}
++ HiDNS + {t('login.brandLine2Suffix', { defaultValue: ' 管理' })} +
+{t('login.brandLine3', { defaultValue: '您的域名' })}
+
+
+ );
+}
+
+/* ─── Step: Password ─────────────────────────────────────────────────────── */
+function PasswordPanel({ password, setPassword, onBack, onSubmit, loading, username, onForgotPassword, onPasskeyLogin, supported2FATypes, inputRef }: {
+ password: string; setPassword: (v: string) => void; onBack: () => void; onSubmit: () => void; loading: boolean;
+ username: string; onForgotPassword: () => void; onPasskeyLogin: () => void; supported2FATypes: string[];
+ inputRef: React.RefObject
+
+ {t('login.usernameStepLine1', { defaultValue: '输入用户名' })}
+{t('login.usernameStepLine2', { defaultValue: '以继续' })}
+
+ }
+ value={username}
+ onChange={(e) => setUsername(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && username.trim() && onContinue()}
+ placeholder={t('login.usernameOrEmailPlaceholder')}
+ className="lc-input"
+ />
+
+
+ {oauthEnabled && (
+
+
+ )}
+
+
+
+ );
+}
+
+/* ─── Step: 2FA ──────────────────────────────────────────────────────────── */
+function TwoFactorPanel({ onBack, totpCode, setTotpCode, onSubmit, loading, useBackupCode, setUseBackupCode, backupCode, setBackupCode, onPasskeyLogin, supported2FATypes, username, inputRef }: {
+ onBack: () => void; totpCode: string; setTotpCode: (v: string) => void; onSubmit: () => void; loading: boolean;
+ useBackupCode: boolean; setUseBackupCode: (v: boolean) => void; backupCode: string; setBackupCode: (v: string) => void;
+ onPasskeyLogin: () => void; supported2FATypes: string[]; username: string;
+ inputRef: React.RefObject
+
+ {t('login.passwordStepLine1', { defaultValue: '输入' })}
+{t('login.passwordStepLine2', { defaultValue: '您的密码' })}
+
+ }
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && password.trim() && onSubmit()}
+ placeholder={t('login.passwordPlaceholder')}
+ className="lc-input"
+ autoComplete="current-password"
+ />
+
+
+
+ {supported2FATypes.includes('webauthn') && (
+
+ )}
+
+
+
+ );
+}
+
+/* ─── Main component ─────────────────────────────────────────────────────── */
+type Phase = 'idle' | 'exit-fwd' | 'exit-bwd';
+type ViewStep = 'username' | 'password' | '2fa';
+
+export default function LoginCard() {
+ const { login } = useAuth();
+ const { locale, setLocale, t } = useI18n();
+ const toast = useToast();
+ const [viewStep, setViewStep] = useState
+
+ {supported2FATypes.includes('webauthn') && (
+
+ )}
+ {supported2FATypes.includes('webauthn') && supported2FATypes.includes('totp') && (
+ {t('login.verify2FA')}
+{t('login.twoFactorHint')}
+OR
+ )}
+ {!useBackupCode ? (
+
+ }
+ value={totpCode}
+ onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ''))}
+ onKeyDown={(e) => e.key === 'Enter' && totpCode.trim() && onSubmit()}
+ placeholder={t('login.enterAuthCode')}
+ className="lc-input lc-input--center"
+ maxLength={6}
+ autoComplete="one-time-code"
+ />
+
+ ) : (
+
+ }
+ value={backupCode}
+ onChange={(e) => setBackupCode(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && backupCode.trim() && onSubmit()}
+ placeholder={t('login.enterBackupCode')}
+ className="lc-input lc-input--center"
+ autoComplete="one-time-code"
+ />
+
+ )}
+
+
+
+ resolveHttpWarning(false)} size="sm">
+
+ )}
+
+ );
+}
diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
index ff03621d..9ddfef7d 100644
--- a/client/src/styles/globals.css
+++ b/client/src/styles/globals.css
@@ -10,7 +10,6 @@
--app-scaled-vw: calc(100vw / var(--app-ui-scale));
/* Light mode (default) */
- --td-theme-button-shadow-color: rgba(255, 255, 255, 0.6);
--color-bg-primary: #ffffff;
--color-bg-secondary: #f9fafb;
--color-bg-tertiary: #f3f4f6;
@@ -38,7 +37,6 @@
/* Dark mode is resolved by ThemeContext so manual light/dark can override the OS. */
html.dark {
- --td-theme-button-shadow-color: rgba(0, 0, 0, 0.6);
--color-bg-primary: #111827;
--color-bg-secondary: #1f2937;
--color-bg-tertiary: #374151;
@@ -215,10 +213,6 @@ html.dark input:-webkit-autofill:focus {
flex: 0 0 auto;
}
-.t-button {
- text-shadow: 0 1px 3px var(--td-theme-button-shadow-color, transparent);
-}
-
.page-heading--compact {
align-items: center;
}
@@ -358,7 +352,6 @@ html.dark input:-webkit-autofill:focus {
}
.t-table .t-button {
- text-shadow: var(--td-theme-button-shadow, none);
max-width: 100%;
}
@@ -496,7 +489,6 @@ html.dark input:-webkit-autofill:focus {
--app-popup-shift-y: -6px;
--app-popup-exit-shift-x: 0;
--app-popup-exit-shift-y: -3px;
- backface-visibility: hidden;
transform-origin: top center;
}
@@ -505,9 +497,7 @@ html.dark input:-webkit-autofill:focus {
--app-popup-frame-shift-y: -6px;
--app-popup-frame-exit-shift-x: 0;
--app-popup-frame-exit-shift-y: -3px;
- backface-visibility: hidden;
transform-origin: top center;
- will-change: opacity, translate, scale;
}
.t-popup[data-popper-placement^='top'] > .t-popup__content {
@@ -570,7 +560,7 @@ html.dark input:-webkit-autofill:focus {
.t-popup--animation-expand-enter-active {
-webkit-clip-path: none !important;
clip-path: none !important;
- animation: appPopupFrameIn var(--app-popup-enter-duration) var(--app-popup-motion-ease-out) both !important;
+ animation: appPopupFrameIn var(--app-popup-enter-duration) var(--app-popup-motion-ease-out) backwards !important;
transition: none !important;
}
@@ -578,7 +568,7 @@ html.dark input:-webkit-autofill:focus {
.t-popup--animation-expand-leave-active {
-webkit-clip-path: none !important;
clip-path: none !important;
- animation: appPopupFrameOut var(--app-popup-exit-duration) var(--app-popup-motion-ease-in) both !important;
+ animation: appPopupFrameOut var(--app-popup-exit-duration) var(--app-popup-motion-ease-in) forwards !important;
transition: none !important;
}
@@ -595,7 +585,7 @@ html.dark input:-webkit-autofill:focus {
.t-popup--animation-enter-active :where(.t-select-option, .t-dropdown__item),
.t-popup--animation-expand-enter-active :where(.t-select-option, .t-dropdown__item) {
- animation: appPopupItemIn 180ms var(--app-popup-motion-ease-out) both;
+ animation: appPopupItemIn 180ms var(--app-popup-motion-ease-out) backwards;
}
.t-popup--animation-enter-active :where(.t-select-option, .t-dropdown__item):nth-child(2),
@@ -652,14 +642,12 @@ html.dark input:-webkit-autofill:focus {
opacity: 0;
visibility: visible;
translate: var(--app-popup-frame-shift-x) var(--app-popup-frame-shift-y);
- scale: 1;
}
100% {
opacity: 1;
visibility: visible;
translate: 0 0;
- scale: 1;
}
}
@@ -668,26 +656,22 @@ html.dark input:-webkit-autofill:focus {
opacity: 1;
visibility: visible;
translate: 0 0;
- scale: 1;
}
100% {
opacity: 0;
visibility: hidden;
translate: var(--app-popup-frame-exit-shift-x) var(--app-popup-frame-exit-shift-y);
- scale: 1;
}
}
@keyframes appPopupItemIn {
0% {
opacity: 0;
- transform: translate3d(0, 0, 0);
}
100% {
opacity: 1;
- transform: translate3d(0, 0, 0);
}
}
diff --git a/client/src/utils/loginSvgPaths.ts b/client/src/utils/loginSvgPaths.ts
new file mode 100644
index 00000000..04c5d388
--- /dev/null
+++ b/client/src/utils/loginSvgPaths.ts
@@ -0,0 +1,6 @@
+export default {
+p157ad100: "M4.78125 10.125L11.7813 16.425L10 18L0 9L10 0L11.7813 1.575L4.78125 7.875H20V10.125H4.78125Z",
+p1640b480: "M11.1604 8.25H0V6.41667H11.1604L6.02708 1.28333L7.33333 0L14.6667 7.33333L7.33333 14.6667L6.02708 13.3833L11.1604 8.25Z",
+p3f788380: "M8.33333 16.6667C7.19444 16.6667 6.11806 16.4479 5.10417 16.0104C4.09028 15.5729 3.20486 14.9757 2.44792 14.2187C1.69097 13.4618 1.09375 12.5764 0.65625 11.5625C0.21875 10.5486 0 9.47222 0 8.33333C0 7.18056 0.21875 6.10069 0.65625 5.09375C1.09375 4.08681 1.69097 3.20486 2.44792 2.44792C3.20486 1.69097 4.09028 1.09375 5.10417 0.65625C6.11806 0.21875 7.19444 0 8.33333 0C9.48611 0 10.566 0.21875 11.5729 0.65625C12.5799 1.09375 13.4618 1.69097 14.2187 2.44792C14.9757 3.20486 15.5729 4.08681 16.0104 5.09375C16.4479 6.10069 16.6667 7.18056 16.6667 8.33333C16.6667 9.47222 16.4479 10.5486 16.0104 11.5625C15.5729 12.5764 14.9757 13.4618 14.2187 14.2187C13.4618 14.9757 12.5799 15.5729 11.5729 16.0104C10.566 16.4479 9.48611 16.6667 8.33333 16.6667ZM8.33333 14.9583C8.69444 14.4583 9.00694 13.9375 9.27083 13.3958C9.53472 12.8542 9.75 12.2778 9.91667 11.6667H6.75C6.91667 12.2778 7.13194 12.8542 7.39583 13.3958C7.65972 13.9375 7.97222 14.4583 8.33333 14.9583ZM6.16667 14.625C5.91667 14.1667 5.69792 13.691 5.51042 13.1979C5.32292 12.7049 5.16667 12.1944 5.04167 11.6667H2.58333C2.98611 12.3611 3.48958 12.9653 4.09375 13.4792C4.69792 13.9931 5.38889 14.375 6.16667 14.625ZM10.5 14.625C11.2778 14.375 11.9688 13.9931 12.5729 13.4792C13.1771 12.9653 13.6806 12.3611 14.0833 11.6667H11.625C11.5 12.1944 11.3437 12.7049 11.1562 13.1979C10.9687 13.691 10.75 14.1667 10.5 14.625ZM1.875 10H4.70833C4.66667 9.72222 4.63542 9.44792 4.61458 9.17708C4.59375 8.90625 4.58333 8.625 4.58333 8.33333C4.58333 8.04167 4.59375 7.76042 4.61458 7.48958C4.63542 7.21875 4.66667 6.94444 4.70833 6.66667H1.875C1.80556 6.94444 1.75347 7.21875 1.71875 7.48958C1.68403 7.76042 1.66667 8.04167 1.66667 8.33333C1.66667 8.625 1.68403 8.90625 1.71875 9.17708C1.75347 9.44792 1.80556 9.72222 1.875 10ZM6.375 10H10.2917C10.3333 9.72222 10.3646 9.44792 10.3854 9.17708C10.4063 8.90625 10.4167 8.625 10.4167 8.33333C10.4167 8.04167 10.4063 7.76042 10.3854 7.48958C10.3646 7.21875 10.3333 6.94444 10.2917 6.66667H6.375C6.33333 6.94444 6.30208 7.21875 6.28125 7.48958C6.26042 7.76042 6.25 8.04167 6.25 8.33333C6.25 8.625 6.26042 8.90625 6.28125 9.17708C6.30208 9.44792 6.33333 9.72222 6.375 10ZM11.9583 10H14.7917C14.8611 9.72222 14.9132 9.44792 14.9479 9.17708C14.9826 8.90625 15 8.625 15 8.33333C15 8.04167 14.9826 7.76042 14.9479 7.48958C14.9132 7.21875 14.8611 6.94444 14.7917 6.66667H11.9583C12 6.94444 12.0313 7.21875 12.0521 7.48958C12.0729 7.76042 12.0833 8.04167 12.0833 8.33333C12.0833 8.625 12.0729 8.90625 12.0521 9.17708C12.0313 9.44792 12 9.72222 11.9583 10ZM11.625 5H14.0833C13.6806 4.30556 13.1771 3.70139 12.5729 3.1875C11.9688 2.67361 11.2778 2.29167 10.5 2.04167C10.75 2.5 10.9687 2.97569 11.1562 3.46875C11.3437 3.96181 11.5 4.47222 11.625 5ZM6.75 5H9.91667C9.75 4.38889 9.53472 3.8125 9.27083 3.27083C9.00694 2.72917 8.69444 2.20833 8.33333 1.70833C7.97222 2.20833 7.65972 2.72917 7.39583 3.27083C7.13194 3.8125 6.91667 4.38889 6.75 5ZM2.58333 5H5.04167C5.16667 4.47222 5.32292 3.96181 5.51042 3.46875C5.69792 2.97569 5.91667 2.5 6.16667 2.04167C5.38889 2.29167 4.69792 2.67361 4.09375 3.1875C3.48958 3.70139 2.98611 4.30556 2.58333 5Z",
+pdb50800: "M10 20C8.63333 20 7.34167 19.7375 6.125 19.2125C4.90833 18.6875 3.84583 17.9708 2.9375 17.0625C2.02917 16.1542 1.3125 15.0917 0.7875 13.875C0.2625 12.6583 0 11.3667 0 10C0 8.61667 0.2625 7.32083 0.7875 6.1125C1.3125 4.90417 2.02917 3.84583 2.9375 2.9375C3.84583 2.02917 4.90833 1.3125 6.125 0.7875C7.34167 0.2625 8.63333 0 10 0C11.3833 0 12.6792 0.2625 13.8875 0.7875C15.0958 1.3125 16.1542 2.02917 17.0625 2.9375C17.9708 3.84583 18.6875 4.90417 19.2125 6.1125C19.7375 7.32083 20 8.61667 20 10C20 11.3667 19.7375 12.6583 19.2125 13.875C18.6875 15.0917 17.9708 16.1542 17.0625 17.0625C16.1542 17.9708 15.0958 18.6875 13.8875 19.2125C12.6792 19.7375 11.3833 20 10 20ZM10 17.95C10.4333 17.35 10.8083 16.725 11.125 16.075C11.4417 15.425 11.7 14.7333 11.9 14H8.1C8.3 14.7333 8.55833 15.425 8.875 16.075C9.19167 16.725 9.56667 17.35 10 17.95ZM7.4 17.55C7.1 17 6.8375 16.4292 6.6125 15.8375C6.3875 15.2458 6.2 14.6333 6.05 14H3.1C3.58333 14.8333 4.1875 15.5583 4.9125 16.175C5.6375 16.7917 6.46667 17.25 7.4 17.55ZM12.6 17.55C13.5333 17.25 14.3625 16.7917 15.0875 16.175C15.8125 15.5583 16.4167 14.8333 16.9 14H13.95C13.8 14.6333 13.6125 15.2458 13.3875 15.8375C13.1625 16.4292 12.9 17 12.6 17.55ZM2.25 12H5.65C5.6 11.6667 5.5625 11.3375 5.5375 11.0125C5.5125 10.6875 5.5 10.35 5.5 10C5.5 9.65 5.5125 9.3125 5.5375 8.9875C5.5625 8.6625 5.6 8.33333 5.65 8H2.25C2.16667 8.33333 2.10417 8.6625 2.0625 8.9875C2.02083 9.3125 2 9.65 2 10C2 10.35 2.02083 10.6875 2.0625 11.0125C2.10417 11.3375 2.16667 11.6667 2.25 12ZM7.65 12H12.35C12.4 11.6667 12.4375 11.3375 12.4625 11.0125C12.4875 10.6875 12.5 10.35 12.5 10C12.5 9.65 12.4875 9.3125 12.4625 8.9875C12.4375 8.6625 12.4 8.33333 12.35 8H7.65C7.6 8.33333 7.5625 8.6625 7.5375 8.9875C7.5125 9.3125 7.5 9.65 7.5 10C7.5 10.35 7.5125 10.6875 7.5375 11.0125C7.5625 11.3375 7.6 11.6667 7.65 12ZM14.35 12H17.75C17.8333 11.6667 17.8958 11.3375 17.9375 11.0125C17.9792 10.6875 18 10.35 18 10C18 9.65 17.9792 9.3125 17.9375 8.9875C17.8958 8.6625 17.8333 8.33333 17.75 8H14.35C14.4 8.33333 14.4375 8.6625 14.4625 8.9875C14.4875 9.3125 14.5 9.65 14.5 10C14.5 10.35 14.4875 10.6875 14.4625 11.0125C14.4375 11.3375 14.4 11.6667 14.35 12ZM13.95 6H16.9C16.4167 5.16667 15.8125 4.44167 15.0875 3.825C14.3625 3.20833 13.5333 2.75 12.6 2.45C12.9 3 13.1625 3.57083 13.3875 4.1625C13.6125 4.75417 13.8 5.36667 13.95 6ZM8.1 6H11.9C11.7 5.26667 11.4417 4.575 11.125 3.925C10.8083 3.275 10.4333 2.65 10 2.05C9.56667 2.65 9.19167 3.275 8.875 3.925C8.55833 4.575 8.3 5.26667 8.1 6ZM3.1 6H6.05C6.2 5.36667 6.3875 4.75417 6.6125 4.1625C6.8375 3.57083 7.1 3 7.4 2.45C6.46667 2.75 5.6375 3.20833 4.9125 3.825C4.1875 4.44167 3.58333 5.16667 3.1 6Z",
+}
diff --git a/docs/ENCRYPTION_FALLBACK.md b/docs/ENCRYPTION_FALLBACK.md
new file mode 100644
index 00000000..27c19978
--- /dev/null
+++ b/docs/ENCRYPTION_FALLBACK.md
@@ -0,0 +1,110 @@
+# 密码加密回退策略
+
+## 概述
+
+HiDNS 使用 RSA-OAEP（通过 Web Crypto API）在密码传输到服务器之前进行加密。本文档描述加密不可用时的回退策略。
+
+## 协议检测
+
+| 协议 | 加密可用 | 行为 |
+|------|---------|------|
+| HTTPS | 是（Web Crypto API 可用） | 加密**必须**；失败则阻止登录 |
+| HTTP | 否（非安全上下文中 Web Crypto API 不可用） | 加密**尝试**；失败则触发用户确认回退 |
+
+## 流程图
+
+```
+登录尝试
+ │
+ ▼
+┌─────────────────────┐
+│ encryptPassword() │
+│ (RSA-OAEP) │
+└─────────┬───────────┘
+ │
+ ┌─────┴─────┐
+ │ 成功？ │
+ └─────┬─────┘
+ 是 │ 否
+ │ │
+ ▼ ▼
+ 密文 ┌──────────────────────────┐
+ 登录 │ 协议 = HTTPS？ │
+ └──────┬───────────────────┘
+ 是 │ 否
+ │ │
+ ▼ ▼
+ 阻止 显示警告弹窗
+ 登录 （明文传输风险）
+ │
+ ┌─────┴─────┐
+ │ 用户 │
+ │ 确认？ │
+ └─────┬─────┘
+ 是 │ 否
+ │ │
+ ▼ ▼
+ 明文 阻止
+ 登录 登录
+```
+
+## 安全考量
+
+1. **HTTPS 模式**：密码在传输前始终进行 RSA 加密。加密失败（如服务器公钥不可用）会硬性阻止——用户无法继续登录。
+
+2. **HTTP 模式**：Web Crypto API 的 `SubtleCrypto.encrypt()` 仅在安全上下文（HTTPS 或 localhost）中可用。在纯 HTTP 下，`encryptPassword()` 会抛出异常。回退策略允许用户在通过弹窗确认风险后，以明文方式传输密码继续登录。
+
+3. **服务端接受**：服务端需配置为同时接受加密和明文密码（登录 API 中的 `encrypted` 布尔标志用于指示密码是否经过 RSA 加密）。
+
+## 实现
+
+### 客户端（`LoginCard.tsx`）
+
+```typescript
+async function encryptWithFallback(
+ password: string,
+ confirmFn: () => Promise
+ setLocale(String(option.value))}
+ >
+
+
+
+
+ {error &&
+
+ {showReset && (
+ {error}
}
+
+
+
+
+
+ setShowReset(true)} onPasskeyLogin={handlePasskeyLogin}
+ supported2FATypes={supported2FATypes} inputRef={passwordInputRef}
+ />
+
+
+
+
+
+ )}
+ {httpWarningOpen && (
+
+
+ {t('login.resetPassword')}
+ setResetEmail(e.target.value)} placeholder={t('login.resetEmailPlaceholder')} className="lc-input" /> +
+ setResetCode(e.target.value)} placeholder={t('login.resetCodePlaceholder')} className="lc-input" />
+
+
+ setResetNewPassword(e.target.value)} placeholder={t('login.resetNewPasswordPlaceholder')} className="lc-input" autoComplete="new-password" />
+
+
+
+
+ {t('login.httpWarning')}
+
+
+
+
+