wangsli/hyb-oa
1
0
派生 0
代码 工单 合并请求 工作流 5 软件包 项目 发布 百科 活动

修复认证验证码投递与登录入口体验 05-27-oa-auth-delivery-wecom-entry-fix

浏览代码
这个提交包含在：
wangsli
2026-05-27 10:14:49 +08:00
父节点 347d337c0c
当前提交 511efa0b2d
共修改 17 个文件，包含 746 行新增和 63 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
client/src/api/auth.ts
+17
查看文件
@@ -57,6 +57,19 @@ export async function verifyEmailLoginCode(payload: { email: string; code: strin
});
}
export type AuthCapabilities = {
emailDelivery: {
ready: boolean;
statusReasons: string[];
};
emailLoginCode: {
enabled: boolean;
};
passwordReset: {
enabled: boolean;
};
};
export type SsoProviderInfo = { id: "oidc"; label: string; enabled: boolean; loginUrl: string };
export type WecomEntryConfig = {
@@ -76,6 +89,10 @@ export async function fetchSsoProviders() {
return apiRequestData<SsoProviderInfo[]>("/api/auth/sso/providers", { auth: false });
}
export async function fetchAuthCapabilities() {
return apiRequestData<AuthCapabilities>("/api/auth/capabilities", { auth: false });
}
export async function fetchWecomConfig() {
return apiRequestData<WecomEntryConfig>("/api/auth/wecom/config", { auth: false });
}
client/src/api/errorMessages.ts
+4
查看文件
@@ -82,6 +82,10 @@ export function mapApiErrorMessage(
return "目标数据不存在或已被删除。";
}
if (code === "SYS_001" && details?.email === "delivery_not_configured") {
return "邮件验证码暂不可用，请使用密码登录或联系管理员。";
}
if (code === "SYS_001") {
return "服务暂不可用，请稍后重试或联系管理员。";
}
client/src/pages/ForgotPasswordPage.tsx
+42 -4
查看文件
@@ -1,6 +1,8 @@
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { MailCheck } from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
import { forgotPassword, resetPassword } from "../api/auth";
import { fetchAuthCapabilities, forgotPassword, resetPassword } from "../api/auth";
import { mapApiErrorMessage } from "../api/errorMessages";
import { isApiError } from "../api/types";
import { AuthPanel } from "../components/auth/AuthPanel";
@@ -26,6 +28,15 @@ export function ForgotPasswordPage() {
const [submittingReset, setSubmittingReset] = useState(false);
const [message, setMessage] = useState("");
const [error, setError] = useState("");
const authCapabilitiesQuery = useQuery({
queryKey: ["auth", "capabilities"],
queryFn: () => fetchAuthCapabilities(),
staleTime: 60_000,
});
const emailDeliveryReady = authCapabilitiesQuery.data?.emailDelivery.ready === true;
const emailDeliveryChecking = authCapabilitiesQuery.isLoading;
const emailDeliveryUnavailable = authCapabilitiesQuery.isSuccess && !emailDeliveryReady;
const emailDeliveryUnknown = authCapabilitiesQuery.isError;
async function handleRequestCode(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
@@ -37,12 +48,20 @@ export function ForgotPasswordPage() {
setError("请输入邮箱。");
return;
}
if (!emailDeliveryReady) {
setError(
emailDeliveryChecking
? "正在检查邮件服务，请稍后再试。"
: "邮件验证码暂不可用，请联系管理员处理。",
);
return;
}
setSubmittingCode(true);
try {
await forgotPassword({ email: normalizedEmail });
setCodeRequested(true);
setMessage("如账号可用，验证码将发送到该邮箱。请在有效期内完成重置。");
setMessage("如账号可用，验证码将发送到企业邮箱；请在有效期内完成重置，并查看免提醒邮件。");
} catch (err) {
if (isApiError(err)) {
setError(mapApiErrorMessage(err.code, err.details, err.message));
@@ -118,8 +137,27 @@ export function ForgotPasswordPage() {
/>
</div>
<Button className="w-full" data-testid="forgot-password-request-code" disabled={submittingCode || !email.trim()} type="submit">
{submittingCode ? "发送中..." : codeRequested ? "重新发送验证码" : "发送验证码"}
{!emailDeliveryReady ? (
<div
aria-live="polite"
className="flex gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm leading-6 text-amber-800"
data-testid="forgot-password-email-delivery-status"
>
<MailCheck aria-hidden="true" className="mt-0.5 h-4 w-4 flex-none" />
<span>
{emailDeliveryChecking
? "正在检查企业邮箱验证码服务。"
: emailDeliveryUnknown
? "暂时无法确认邮件服务，请稍后刷新或联系管理员。"
: emailDeliveryUnavailable
? "邮件验证码暂不可用，请联系管理员处理。"
: "邮件验证码暂不可用。"}
</span>
</div>
) : null}
<Button className="w-full" data-testid="forgot-password-request-code" disabled={submittingCode || !email.trim() || !emailDeliveryReady} type="submit">
{emailDeliveryChecking ? "检查邮件服务..." : submittingCode ? "发送中..." : codeRequested ? "重新发送验证码" : "发送验证码"}
</Button>
</form>
client/src/pages/LoginPage.tsx
+63 -9
查看文件
@@ -1,7 +1,8 @@
import { useEffect, useMemo, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Building2, MailCheck } from "lucide-react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { fetchSsoProviders, fetchWecomConfig, requestEmailLoginCode } from "../api/auth";
import { fetchAuthCapabilities, fetchSsoProviders, fetchWecomConfig, requestEmailLoginCode } from "../api/auth";
import { mapApiErrorMessage } from "../api/errorMessages";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
@@ -70,6 +71,16 @@ export function LoginPage() {
});
const oidcProvider = (ssoProvidersQuery.data ?? []).find((item) => item.id === "oidc" && item.enabled);
const authCapabilitiesQuery = useQuery({
queryKey: ["auth", "capabilities"],
queryFn: () => fetchAuthCapabilities(),
staleTime: 60_000,
});
const emailDeliveryReady = authCapabilitiesQuery.data?.emailDelivery.ready === true;
const emailDeliveryChecking = authCapabilitiesQuery.isLoading;
const emailDeliveryUnavailable = authCapabilitiesQuery.isSuccess && !emailDeliveryReady;
const emailDeliveryUnknown = authCapabilitiesQuery.isError;
const wecomConfigQuery = useQuery({
queryKey: ["auth", "wecom-config"],
queryFn: () => fetchWecomConfig(),
@@ -85,6 +96,7 @@ export function LoginPage() {
const showWecomPrimary = isWecomContext;
const showPasswordPanel = !showWecomPrimary || Boolean(wecomNotice) || passwordFallbackOpen || (showWecomPrimary && wecomConfig && !wecomEntry);
const showBrowserWecomNotice = !showWecomPrimary && Boolean(wecomEntry);
useEffect(() => {
if (emailCodeCooldown <= 0) {
@@ -140,13 +152,21 @@ export function LoginPage() {
setEmailCodeError("请输入企业邮箱。");
return;
}
if (!emailDeliveryReady) {
setEmailCodeError(
emailDeliveryChecking
? "正在检查邮件服务，请稍后再试。"
: "邮件验证码暂不可用，请使用密码登录或联系管理员。",
);
return;
}
setEmailCodeSending(true);
try {
await requestEmailLoginCode({ email });
setEmailCodeRequested(true);
setEmailCodeCooldown(60);
setEmailCodeMessage("如账号可用，验证码将发送到该邮箱。");
setEmailCodeMessage("如账号可用，验证码将发送到企业邮箱；请同时查看免提醒邮件。");
} catch (err) {
if (isApiError(err)) {
setEmailCodeError(mapApiErrorMessage(err.code, err.details, err.message));
@@ -266,14 +286,41 @@ export function LoginPage() {
<Button
className="w-full"
data-testid="login-email-code-request"
disabled={emailCodeSending || emailCodeCooldown > 0 || !emailLoginEmail.trim()}
disabled={emailCodeSending || emailCodeCooldown > 0 || !emailLoginEmail.trim() || !emailDeliveryReady}
type="submit"
variant="secondary"
>
{emailCodeSending ? "发送中..." : emailCodeCooldown > 0 ? `${emailCodeCooldown} 秒后重发` : emailCodeRequested ? "重新发送验证码" : "发送验证码"}
{emailDeliveryChecking
? "检查邮件服务..."
: emailCodeSending
? "发送中..."
: emailCodeCooldown > 0
? `${emailCodeCooldown} 秒后重发`
: emailCodeRequested
? "重新发送验证码"
: "发送验证码"}
</Button>
</form>
{!emailDeliveryReady ? (
<div
aria-live="polite"
className="flex gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm leading-6 text-amber-800"
data-testid="login-email-delivery-status"
>
<MailCheck aria-hidden="true" className="mt-0.5 h-4 w-4 flex-none" />
<span>
{emailDeliveryChecking
? "正在检查企业邮箱验证码服务。"
: emailDeliveryUnknown
? "暂时无法确认邮件服务，请使用密码登录或稍后刷新。"
: emailDeliveryUnavailable
? "邮件验证码暂不可用，请使用密码登录或联系管理员。"
: "邮件验证码暂不可用。"}
</span>
</div>
) : null}
<form className="space-y-4" onSubmit={handleEmailCodeLogin}>
<div className="space-y-2">
<Label htmlFor="login-email-code">验证码</Label>
@@ -375,7 +422,7 @@ export function LoginPage() {
: renderPasswordPanel(showWecomPrimary ? "login-password-secondary-panel" : "login-password-primary-panel")
: null}
{!showWecomPrimary && (wecomEntry || oidcProvider) ? (
{!showWecomPrimary && (showBrowserWecomNotice || oidcProvider) ? (
<div className="space-y-3">
<div className="flex items-center gap-3 text-xs text-slate-400">
<span className="h-px flex-1 bg-slate-100" />
@@ -383,10 +430,17 @@ export function LoginPage() {
<span className="h-px flex-1 bg-slate-100" />
</div>
{wecomEntry ? (
<Button className="w-full" data-testid="wecom-entry-secondary" type="button" variant="secondary" onClick={handleWecomLogin}>
企业微信登录
</Button>
{showBrowserWecomNotice ? (
<div
className="flex gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm leading-6 text-slate-600"
data-testid="wecom-entry-browser-notice"
>
<Building2 aria-hidden="true" className="mt-0.5 h-4 w-4 flex-none text-primary" />
<div>
<div className="font-medium text-slate-900">企业微信一键进入</div>
<div>请从企业微信工作台打开 OA；普通浏览器使用密码或邮箱验证码。</div>
</div>
</div>
) : null}
{oidcProvider ? (