修复认证验证码投递与登录入口体验 05-27-oa-auth-delivery-wecom-entry-fix
这个提交包含在：
@@ -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>
|
||||
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
在新工单中引用
屏蔽一个用户