YogeLiu/doc_ai_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize register error tip

Browse Source
This commit is contained in:
liuyuanchuang
2026-03-06 15:01:34 +08:00
parent f70a9a85c8
commit cd479da0eb
5 changed files with 149 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/AuthModal.tsx
View File

@@ -17,6 +17,7 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [localError, setLocalError] = useState('');
const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string; confirmPassword?: string }>({});
const isBusy = useMemo(
() => ['email_signing_in', 'email_signing_up', 'oauth_redirecting', 'oauth_exchanging'].includes(authPhase),
@@ -28,20 +29,37 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLocalError('');
const nextFieldErrors: { email?: string; password?: string; confirmPassword?: string } = {};
const normalizedEmail = email.trim();
if (!normalizedEmail) {
nextFieldErrors.email = t.auth.emailRequired;
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) {
nextFieldErrors.email = t.auth.emailInvalid;
}
if (!password) {
nextFieldErrors.password = t.auth.passwordRequired;
}
if (mode === 'signup') {
if (password.length < 6) {
setLocalError(t.auth.passwordHint);
return;
if (password && password.length < 6) {
nextFieldErrors.password = t.auth.passwordHint;
}
if (password !== confirmPassword) {
setLocalError(t.auth.passwordMismatch);
return;
if (!confirmPassword) {
nextFieldErrors.confirmPassword = t.auth.passwordRequired;
} else if (password !== confirmPassword) {
nextFieldErrors.confirmPassword = t.auth.passwordMismatch;
}
}
const result = mode === 'signup' ? await signUp(email, password) : await signIn(email, password);
setFieldErrors(nextFieldErrors);
if (Object.keys(nextFieldErrors).length > 0) {
return;
}
const result = mode === 'signup' ? await signUp(normalizedEmail, password) : await signIn(normalizedEmail, password);
if (!result.error) {
onClose();
@@ -75,7 +93,11 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
<div className="grid grid-cols-2 gap-2 rounded-lg bg-gray-100 p-1 mb-4">
<button
type="button"
onClick={() => setMode('signin')}
onClick={() => {
setMode('signin');
setFieldErrors({});
setLocalError('');
}}
aria-pressed={mode === 'signin'}
disabled={isBusy}
className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
@@ -86,7 +108,11 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
</button>
<button
type="button"
onClick={() => setMode('signup')}
onClick={() => {
setMode('signup');
setFieldErrors({});
setLocalError('');
}}
aria-pressed={mode === 'signup'}
disabled={isBusy}
className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
@@ -97,7 +123,7 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
</button>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleSubmit} noValidate className="space-y-4">
<div>
<label htmlFor="auth-email" className="block text-sm font-medium text-gray-700 mb-1">
{t.auth.email}
@@ -106,12 +132,20 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
id="auth-email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
onChange={(e) => {
setEmail(e.target.value);
if (fieldErrors.email) {
setFieldErrors((prev) => ({ ...prev, email: undefined }));
}
}}
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
fieldErrors.email ? 'border-red-400' : 'border-gray-300'
}`}
placeholder="your@email.com"
required
disabled={isBusy}
/>
{fieldErrors.email && <p className="mt-1 text-xs text-red-600">{fieldErrors.email}</p>}
{mode === 'signup' && (
<p className="mt-1 text-xs text-gray-500">{t.auth.emailHint}</p>
)}
@@ -125,13 +159,21 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
id="auth-password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
onChange={(e) => {
setPassword(e.target.value);
if (fieldErrors.password) {
setFieldErrors((prev) => ({ ...prev, password: undefined }));
}
}}
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
fieldErrors.password ? 'border-red-400' : 'border-gray-300'
}`}
placeholder="••••••••"
required
minLength={6}
disabled={isBusy}
/>
{fieldErrors.password && <p className="mt-1 text-xs text-red-600">{fieldErrors.password}</p>}
{mode === 'signup' && (
<p className="mt-1 text-xs text-gray-500">{t.auth.passwordHint}</p>
)}
@@ -146,13 +188,21 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
id="auth-password-confirm"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
onChange={(e) => {
setConfirmPassword(e.target.value);
if (fieldErrors.confirmPassword) {
setFieldErrors((prev) => ({ ...prev, confirmPassword: undefined }));
}
}}
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
fieldErrors.confirmPassword ? 'border-red-400' : 'border-gray-300'
}`}
placeholder="••••••••"
required
minLength={6}
disabled={isBusy}
/>
{fieldErrors.confirmPassword && <p className="mt-1 text-xs text-red-600">{fieldErrors.confirmPassword}</p>}
</div>
)}