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 { Agreement } from '@/features/auth/components/Agreement';
|
||||
import { PasswordInput } from '@/features/auth/components/PasswordInput';
|
||||
import { VerificationCodeButton } from '@/features/auth/components/VerificationCodeButton';
|
||||
@@ -99,110 +100,115 @@ export function RegisterPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-dvh w-full items-center justify-center overflow-y-auto bg-surface-page px-6 py-8">
|
||||
<form onSubmit={submit} className="flex w-full max-w-[380px] flex-col gap-4">
|
||||
<div className="mb-1 flex flex-col items-center gap-3">
|
||||
<div className="grid h-[56px] w-[56px] place-items-center rounded-2xl bg-accent text-2xl font-bold text-white">
|
||||
M
|
||||
</div>
|
||||
<strong className="text-xl font-bold text-text-heading">{tenant.name}</strong>
|
||||
</div>
|
||||
<h1 className="m-0 text-[22px] font-bold text-text-title">创建账号</h1>
|
||||
{formError ? (
|
||||
<div className="rounded-lg bg-error-strip-bg px-3 py-2.5 text-sm text-error-strip-text">{formError}</div>
|
||||
) : null}
|
||||
<div className="flex h-dvh w-full flex-col overflow-y-auto bg-surface-page">
|
||||
<div className="flex h-12 flex-none items-center px-2 min-[900px]:hidden">
|
||||
<Link to="/login" className="grid h-9 w-9 place-items-center text-text-heading no-underline">
|
||||
<Icon name="arrow_back_ios_new" className="text-[20px]" />
|
||||
</Link>
|
||||
<strong className="flex-1 -ml-9 text-center text-[17px] font-semibold text-text-heading">注册</strong>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-center px-6 py-8">
|
||||
<form onSubmit={submit} className="flex w-full max-w-[380px] flex-col gap-4">
|
||||
<h1 className="m-0 text-[22px] font-bold text-text-title">创建账号</h1>
|
||||
{formError ? (
|
||||
<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]" />
|
||||
{formError}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value.replace(/[^a-z0-9]/g, '').slice(0, 10))}
|
||||
placeholder="用户名（1-10位小写字母或数字）"
|
||||
autoComplete="username"
|
||||
className={`h-[50px] rounded-lg bg-surface-input px-3.5 text-[15px] outline-none focus:border focus:border-focus-border focus:shadow-focus-ring ${
|
||||
errors.username ? 'border border-danger-border' : ''
|
||||
}`}
|
||||
/>
|
||||
{errors.username ? <div className="text-xs text-danger-border">{errors.username}</div> : null}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-xs text-text-tertiary-3">
|
||||
<div className="h-px flex-1 bg-border-row" />
|
||||
或
|
||||
<div className="h-px flex-1 bg-border-row" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label
|
||||
className={`flex h-[50px] items-center gap-2 rounded-lg bg-surface-input px-3.5 has-focus:border has-focus:shadow-focus-ring ${
|
||||
errors.phone ? 'border border-danger-border' : 'has-focus:border-focus-border'
|
||||
}`}
|
||||
>
|
||||
<span className="text-[15px] text-text-tertiary-2">+86</span>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<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>
|
||||
{errors.phone ? <div className="text-xs text-danger-border">{errors.phone}</div> : null}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<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 ${
|
||||
errors.code ? 'border border-danger-border' : ''
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value.replace(/[^a-z0-9]/g, '').slice(0, 10))}
|
||||
placeholder="用户名（1-10位小写字母或数字）"
|
||||
autoComplete="username"
|
||||
className={`h-[50px] rounded-lg bg-surface-input px-3.5 text-[15px] outline-none focus:border focus:border-focus-border focus:shadow-focus-ring ${
|
||||
errors.username ? 'border border-danger-text' : ''
|
||||
}`}
|
||||
/>
|
||||
<VerificationCodeButton
|
||||
phone={phone}
|
||||
scene="register"
|
||||
onChallenge={setChallengeId}
|
||||
onError={(msg) => setErrors((e) => ({ ...e, code: msg }))}
|
||||
/>
|
||||
{errors.username ? <div className="text-xs text-danger-border">{errors.username}</div> : null}
|
||||
</div>
|
||||
{errors.code ? <div className="text-xs text-danger-border">{errors.code}</div> : null}
|
||||
</div>
|
||||
|
||||
<PasswordInput value={password} onChange={setPassword} placeholder="设置密码" autoComplete="new-password" error={errors.password} />
|
||||
<div className="flex items-center gap-3 text-xs text-text-tertiary-3">
|
||||
<div className="h-px flex-1 bg-border-row" />
|
||||
或
|
||||
<div className="h-px flex-1 bg-border-row" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{/* 邀请码大小写敏感（唯一索引按 ascii_bin 排序），不能像其它字段那样统一大小写 */}
|
||||
<input
|
||||
value={invite}
|
||||
onChange={(e) => setInvite(e.target.value.replace(/[^A-Za-z]/g, '').slice(0, 5))}
|
||||
placeholder="邀请码（5位英文字母，区分大小写）"
|
||||
autoCapitalize="off"
|
||||
autoCorrect="off"
|
||||
className={`h-[50px] rounded-lg bg-surface-input px-3.5 text-[15px] outline-none ${
|
||||
errors.invite ? 'border border-danger-border' : ''
|
||||
}`}
|
||||
/>
|
||||
{errors.invite ? <div className="text-xs text-danger-border">{errors.invite}</div> : null}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label
|
||||
className={`flex h-[50px] items-center gap-2 rounded-lg bg-surface-input px-3.5 has-focus:border has-focus:shadow-focus-ring ${
|
||||
errors.phone ? 'border border-danger-text' : 'has-focus:border-focus-border'
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
{errors.phone ? <div className="text-xs text-danger-border">{errors.phone}</div> : null}
|
||||
</div>
|
||||
|
||||
{!usingPhone ? (
|
||||
<p className="m-0 text-xs text-text-tertiary-3">未绑定手机号无法自助找回密码，忘记密码后只能联系企业管理员重置</p>
|
||||
) : null}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<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 ${
|
||||
errors.code ? 'border border-danger-text' : ''
|
||||
}`}
|
||||
/>
|
||||
<VerificationCodeButton
|
||||
phone={phone}
|
||||
scene="register"
|
||||
onChallenge={setChallengeId}
|
||||
onError={(msg) => setErrors((e) => ({ ...e, code: msg }))}
|
||||
/>
|
||||
</div>
|
||||
{errors.code ? <div className="text-xs text-danger-border">{errors.code}</div> : null}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={(!username && !phone) || !password || !agreed || 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>
|
||||
<Link to="/login" className="text-center text-sm text-accent no-underline">
|
||||
已有账号？返回登录
|
||||
</Link>
|
||||
<Agreement checked={agreed} onChange={setAgreed} prefix="注册即认同MeetingIM" />
|
||||
</form>
|
||||
<PasswordInput value={password} onChange={setPassword} placeholder="设置密码" autoComplete="new-password" error={errors.password} />
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{/* 邀请码大小写敏感（唯一索引按 ascii_bin 排序），不能像其它字段那样统一大小写 */}
|
||||
<input
|
||||
value={invite}
|
||||
onChange={(e) => setInvite(e.target.value.replace(/[^A-Za-z]/g, '').slice(0, 5))}
|
||||
placeholder="邀请码（5位英文字母，区分大小写）"
|
||||
autoCapitalize="off"
|
||||
autoCorrect="off"
|
||||
className={`h-[50px] rounded-lg bg-surface-input px-3.5 text-[15px] outline-none ${
|
||||
errors.invite ? 'border border-danger-text' : ''
|
||||
}`}
|
||||
/>
|
||||
{errors.invite ? <div className="text-xs text-danger-border">{errors.invite}</div> : null}
|
||||
</div>
|
||||
|
||||
{!usingPhone ? (
|
||||
<p className="m-0 text-xs text-text-tertiary-3">未绑定手机号无法自助找回密码，忘记密码后只能联系企业管理员重置</p>
|
||||
) : null}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={(!username && !phone) || !password || !agreed || 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>
|
||||
<Link to="/login" className="text-center text-sm text-accent no-underline">
|
||||
已有账号？返回登录
|
||||
</Link>
|
||||
<Agreement checked={agreed} onChange={setAgreed} prefix="注册即认同MeetingIM" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user