fix(web): code review round 1 -- auth pages design fidelity + missing screens
- CRITICAL correctness bug: resetTinode() was defined but never called anywhere. Switching tenants (TenantEntryPage) only updated the session store; the Tinode singleton it drives is created once and permanently cached (getTinode() lazily creates it, reusing it forever afterward), so every subsequent login kept talking to the FIRST tenant's host regardless of which tenant was actually selected -- multi-tenant switching was silently broken. Also moved LoginPage's getTinode() call to after its "no tenant yet" redirect guard, so it can't get created against a not-yet-resolved tenant in the first place. - Error strips across all four auth pages were missing the error_outline icon README §10.1 specifies. - Fixed a token mix-up affecting every error-state input border across Register/PasswordInput: README's exact spec is border #d94b4b (this app's --color-danger-text) with #cf3f3f text below (--color-danger-border) -- the code had them backwards, borders were using danger-border. - TenantEntryPage: added the missing 企业注册/遇到问题 links (now real, working pages -- see below), fixed the business icon's color token (was accent #1677ff, spec calls for focus-border #4091ff). - LoginPage/ResetPasswordPage: the "切换企业"/"返回登录" back link was nested inside the vertically-centered form container, so it got pulled to the page's middle instead of staying pinned to the top like every reference screenshot shows it. Also gave LoginPage's brand panel the spec's 56/44 split (was an even 50/50), 40px headline (was Tailwind's 36px text-4xl), and the missing footer links row; added a mobile-only large-logo facade (matches 1e-mobile-login.png) since the desktop split-panel brand block is hidden below 900px and mobile had no tenant-identifying visual at all. - RegisterPage: removed an extra 56px-logo+tenant-name block that appears in neither the desktop nor mobile reference screenshots; added the mobile-only 48px back-chevron+title header bar the design calls for (RegisterPage previously had zero back-navigation on any breakpoint). - ResetPasswordPage: the password error text said "需要包含字母和数字" while the actual check only enforces a minimum length (>=8, no character-class requirement, matching Register's own rule) -- the message was promising a validation this page doesn't perform. - VerificationCodeButton: the resend countdown's setInterval was never cleared on unmount -- a real leak if the user navigates away mid-countdown. - New: EnterpriseRegisterPage (企业注册, README §10.5) and TenantFeedbackPage (问题反馈, README §10.6 / `01/1j`), both previously linked-to-but-nonexistent. lib/api/tenant.ts gained the REST calls they need (submitTenantApplication, submitTenantEntryFeedback, uploadPublicFile against the pre-login /v1/im/public/uploads surface, distinct from the chat-file upload endpoint). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Your Name
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
986432addd
commit
569f266390
@@ -2,6 +2,7 @@ import { useState } from 'react';
|
||||
|
||||
import { Link, Navigate, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { Icon } from '@/app/Icon';
|
||||
import { PasswordInput } from '@/features/auth/components/PasswordInput';
|
||||
import { Toast } from '@/features/auth/components/Toast';
|
||||
import { VerificationCodeButton } from '@/features/auth/components/VerificationCodeButton';
|
||||
@@ -31,8 +32,8 @@ export function ResetPasswordPage() {
|
||||
if (!PHONE_RE.test(phone)) return setError('请输入 11 位手机号');
|
||||
if (!challengeId || !/^\d{6}$/.test(code)) return setError('请先获取并输入 6 位验证码');
|
||||
// Matches Register's rule (>= 8, no upper bound -- the backend's checkPasswordPolicy only
|
||||
// enforces a minimum length).
|
||||
if (password.length < 8) return setError('密码至少 8 位，需包含字母和数字');
|
||||
// enforces a minimum length, so the message says exactly that and nothing more).
|
||||
if (password.length < 8) return setError('密码至少 8 位');
|
||||
if (password !== confirm) return setError('两次输入的密码不一致');
|
||||
|
||||
setSubmitting(true);
|
||||
@@ -49,55 +50,60 @@ export function ResetPasswordPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-dvh w-full items-center justify-center bg-surface-page px-6">
|
||||
<form onSubmit={submit} className="flex w-full max-w-[380px] flex-col gap-4">
|
||||
<Link to="/login" className="flex items-center gap-1 text-sm text-text-secondary no-underline">
|
||||
<span className="material-icons text-[16px]">arrow_back_ios_new</span>
|
||||
返回登录
|
||||
</Link>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="m-0 text-[22px] font-bold text-text-title">重置密码</h1>
|
||||
<p className="m-0 text-sm text-text-tertiary-1">
|
||||
通过已绑定的手机号验证身份。未绑定手机号的账号请联系企业管理员重置。
|
||||
</p>
|
||||
</div>
|
||||
{error ? (
|
||||
<div className="rounded-lg bg-error-strip-bg px-3 py-2.5 text-sm text-error-strip-text">{error}</div>
|
||||
) : null}
|
||||
<div className="flex h-dvh w-full flex-col bg-surface-page px-6 py-8">
|
||||
<Link to="/login" className="flex items-center gap-1 text-sm text-text-secondary no-underline">
|
||||
<Icon name="arrow_back_ios_new" className="text-[16px]" />
|
||||
返回登录
|
||||
</Link>
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<form onSubmit={submit} className="flex w-full max-w-[380px] flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="m-0 text-[22px] font-bold text-text-title">重置密码</h1>
|
||||
<p className="m-0 text-sm text-text-tertiary-1">
|
||||
通过已绑定的手机号验证身份。未绑定手机号的账号请联系企业管理员重置。
|
||||
</p>
|
||||
</div>
|
||||
{error ? (
|
||||
<div className="flex items-center gap-1.5 rounded-lg bg-error-strip-bg px-3 py-2.5 text-sm text-error-strip-text">
|
||||
<Icon name="error_outline" className="text-[18px]" />
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<label className="flex h-[50px] items-center gap-2 rounded-lg bg-surface-input px-3.5 has-focus:border has-focus:border-focus-border has-focus:shadow-focus-ring">
|
||||
<span className="text-[15px] text-text-tertiary-2">+86</span>
|
||||
<input
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value.replace(/\D/g, '').slice(0, 11))}
|
||||
placeholder="请输入手机号"
|
||||
inputMode="numeric"
|
||||
className="w-full bg-transparent text-[15px] outline-none"
|
||||
/>
|
||||
</label>
|
||||
<label className="flex h-[50px] items-center gap-2 rounded-lg bg-surface-input px-3.5 has-focus:border has-focus:border-focus-border has-focus:shadow-focus-ring">
|
||||
<span className="text-[15px] text-text-tertiary-2">+86</span>
|
||||
<input
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value.replace(/\D/g, '').slice(0, 11))}
|
||||
placeholder="请输入手机号"
|
||||
inputMode="numeric"
|
||||
className="w-full bg-transparent text-[15px] outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||
placeholder="短信验证码"
|
||||
inputMode="numeric"
|
||||
className="h-[50px] flex-1 rounded-lg bg-surface-input px-3.5 text-[15px] outline-none"
|
||||
/>
|
||||
<VerificationCodeButton phone={phone} scene="reset_password" onChallenge={setChallengeId} onError={setError} />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||
placeholder="短信验证码"
|
||||
inputMode="numeric"
|
||||
className="h-[50px] flex-1 rounded-lg bg-surface-input px-3.5 text-[15px] outline-none"
|
||||
/>
|
||||
<VerificationCodeButton phone={phone} scene="reset_password" onChallenge={setChallengeId} onError={setError} />
|
||||
</div>
|
||||
|
||||
<PasswordInput value={password} onChange={setPassword} placeholder="新密码" autoComplete="new-password" />
|
||||
<PasswordInput value={confirm} onChange={setConfirm} placeholder="再次输入新密码" autoComplete="new-password" />
|
||||
<PasswordInput value={password} onChange={setPassword} placeholder="新密码" autoComplete="new-password" />
|
||||
<PasswordInput value={confirm} onChange={setConfirm} placeholder="再次输入新密码" autoComplete="new-password" />
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!phone || !code || !password || !confirm || submitting}
|
||||
className="h-[50px] rounded-lg bg-btn text-base font-medium text-white shadow-btn disabled:bg-btn-disabled disabled:shadow-none"
|
||||
>
|
||||
{submitting ? '提交中…' : '确认重置'}
|
||||
</button>
|
||||
</form>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!phone || !code || !password || !confirm || submitting}
|
||||
className="h-[50px] rounded-lg bg-btn text-base font-medium text-white shadow-btn disabled:bg-btn-disabled disabled:shadow-none"
|
||||
>
|
||||
{submitting ? '提交中…' : '确认重置'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<Toast message={toast} onDone={() => setToast('')} />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user