feat: 重构密码重置流程,整合请求和确认表单,优化用户体验

This commit is contained in:
ryan
2026-03-11 14:06:05 +08:00
parent 5713ee2b44
commit 4c8d60f8ab
5 changed files with 27 additions and 6 deletions
+2 -2
View File
@@ -1,12 +1,12 @@
import { Suspense } from 'react';
import { LoadingState } from '@/components/feedback/loading-state';
import { PasswordResetRequestForm } from '@/features/auth/components/password-reset-request-form';
import { PasswordResetFlow } from '@/features/auth/components/password-reset-flow';
export default function ResetPasswordPage() {
return (
<Suspense fallback={<LoadingState />}>
<PasswordResetRequestForm />
<PasswordResetFlow />
</Suspense>
);
}
@@ -1,12 +1,12 @@
import { Suspense } from 'react';
import { LoadingState } from '@/components/feedback/loading-state';
import { PasswordResetConfirmForm } from '@/features/auth/components/password-reset-confirm-form';
import { PasswordResetFlow } from '@/features/auth/components/password-reset-flow';
export default function LegacyResetPasswordPage() {
return (
<Suspense fallback={<LoadingState />}>
<PasswordResetConfirmForm />
<PasswordResetFlow />
</Suspense>
);
}
@@ -15,9 +15,9 @@ export function PublicShell({ children }: PublicShellProps) {
<div className='mb-8 flex flex-col gap-4 border-b border-[var(--border-default)] pb-6 md:flex-row md:items-end md:justify-between'>
<div>
<p className='text-sm font-medium uppercase tracking-[0.24em] text-[var(--brand-primary)]'>ATSFlare</p>
<h1 className='mt-2 text-3xl font-semibold text-[var(--foreground-primary)]'>管理端改造进行中</h1>
<h1 className='mt-2 text-3xl font-semibold text-[var(--foreground-primary)]'>欢迎使用 ATSFlare 管理端</h1>
<p className='mt-2 text-sm leading-6 text-[var(--foreground-secondary)]'>
认证流程将在阶段 2 接入。当前页面用于承载入口骨架与路由占位。
当前已接入登录、注册、密码重置与 GitHub OAuth 基础流程,后续将继续完善鉴权与业务模块体验。
</p>
</div>
<div className='flex flex-col items-start gap-3 text-sm text-[var(--foreground-secondary)] md:items-end'>
@@ -1,6 +1,7 @@
'use client';
import { useMutation } from '@tanstack/react-query';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
@@ -68,6 +69,13 @@ export function PasswordResetConfirmForm() {
</SecondaryButton>
) : null}
</div>
<div className='text-sm text-[var(--foreground-secondary)]'>
处理完成后可返回
<Link href='/login' className='ml-2 text-[var(--brand-primary)] transition hover:opacity-80'>
登录页
</Link>
</div>
</div>
</AppCard>
);
@@ -0,0 +1,13 @@
'use client';
import { useSearchParams } from 'next/navigation';
import { PasswordResetConfirmForm } from '@/features/auth/components/password-reset-confirm-form';
import { PasswordResetRequestForm } from '@/features/auth/components/password-reset-request-form';
export function PasswordResetFlow() {
const searchParams = useSearchParams();
const hasConfirmationParams = Boolean(searchParams?.get('email') && searchParams?.get('token'));
return hasConfirmationParams ? <PasswordResetConfirmForm /> : <PasswordResetRequestForm />;
}