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
@@ -4,10 +4,12 @@ import { Navigate, createBrowserRouter, RouterProvider } from 'react-router-dom'
|
||||
import { AppShell } from '@/app/AppShell';
|
||||
import { RequireAuth } from '@/app/RequireAuth';
|
||||
import { SectionPlaceholder } from '@/app/SectionPlaceholder';
|
||||
import { EnterpriseRegisterPage } from '@/features/auth/EnterpriseRegisterPage';
|
||||
import { LoginPage } from '@/features/auth/LoginPage';
|
||||
import { RegisterPage } from '@/features/auth/RegisterPage';
|
||||
import { ResetPasswordPage } from '@/features/auth/ResetPasswordPage';
|
||||
import { TenantEntryPage } from '@/features/auth/TenantEntryPage';
|
||||
import { TenantFeedbackPage } from '@/features/auth/TenantFeedbackPage';
|
||||
import { ConversationView } from '@/features/messages/ConversationView';
|
||||
import { EmptyMain } from '@/features/messages/EmptyMain';
|
||||
import { MessagesLayout } from '@/features/messages/MessagesLayout';
|
||||
@@ -19,6 +21,8 @@ const router = createBrowserRouter([
|
||||
{ path: 'login', element: <LoginPage /> },
|
||||
{ path: 'register', element: <RegisterPage /> },
|
||||
{ path: 'reset-password', element: <ResetPasswordPage /> },
|
||||
{ path: 'enterprise-register', element: <EnterpriseRegisterPage /> },
|
||||
{ path: 'feedback', element: <TenantFeedbackPage /> },
|
||||
{
|
||||
element: <RequireAuth />,
|
||||
children: [
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Icon } from '@/app/Icon';
|
||||
import { Toast } from '@/features/auth/components/Toast';
|
||||
import { ImApiError } from '@/lib/api/client';
|
||||
import { submitTenantApplication, uploadPublicFile } from '@/lib/api/tenant';
|
||||
|
||||
const CREDIT_CODE_RE = /^[0-9A-Z]{18}$/;
|
||||
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
/** README §10.5 / old app's EnterpriseRegister -- a company registering itself as a new tenant. */
|
||||
export function EnterpriseRegisterPage() {
|
||||
const [creditCode, setCreditCode] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [error, setError] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [reviewDays, setReviewDays] = useState(1);
|
||||
const [toast, setToast] = useState('');
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!CREDIT_CODE_RE.test(creditCode)) return setError('请输入 18 位统一社会信用代码');
|
||||
if (email && !EMAIL_RE.test(email)) return setError('请输入有效的企业邮箱');
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
try {
|
||||
let licenseFileId: string | undefined;
|
||||
if (file) {
|
||||
licenseFileId = (await uploadPublicFile(file, 'enterprise_license')).file_id;
|
||||
}
|
||||
const data = await submitTenantApplication({ credit_code: creditCode, enterprise_email: email || undefined, license_file_id: licenseFileId });
|
||||
setReviewDays(Math.max(1, Math.round((data.estimated_review_hours || 24) / 24)));
|
||||
setSubmitted(true);
|
||||
setToast('提交成功，我们会尽快联系你');
|
||||
} catch (err) {
|
||||
setError(err instanceof ImApiError ? err.message : '提交失败，请稍后重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-dvh w-full flex-col items-center overflow-y-auto bg-surface-page px-6 py-10">
|
||||
<div className="w-full max-w-[420px]">
|
||||
<Link to="/tenant" className="flex items-center gap-1 text-sm text-text-secondary no-underline">
|
||||
<Icon name="arrow_back_ios_new" className="text-[16px]" />
|
||||
返回
|
||||
</Link>
|
||||
<h1 className="mb-6 mt-4 text-[22px] font-bold text-text-title">企业注册</h1>
|
||||
|
||||
<ol className="mb-6 flex items-center text-xs text-text-tertiary-3">
|
||||
{(['填写企业信息', '确定信息', '提交审核'] as const).map((label, i) => (
|
||||
<li key={label} className="flex flex-1 items-center last:flex-none">
|
||||
<span
|
||||
className={`grid h-[22px] w-[22px] flex-none place-items-center rounded-full text-[11px] ${
|
||||
i === 0 || submitted ? 'bg-accent text-white' : 'border border-[#d5d9df] text-text-tertiary-3'
|
||||
}`}
|
||||
>
|
||||
{i + 1}
|
||||
</span>
|
||||
<span className={`ml-1.5 whitespace-nowrap ${i === 0 || submitted ? 'text-text-body' : ''}`}>{label}</span>
|
||||
{i < 2 ? <span className={`mx-2 h-px flex-1 ${submitted ? 'bg-accent' : 'bg-[#d5d9df]'}`} /> : null}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
|
||||
<form onSubmit={submit} className="flex flex-col gap-4">
|
||||
{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}
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm text-text-body">统一社会信用代码</label>
|
||||
<input
|
||||
value={creditCode}
|
||||
onChange={(e) => setCreditCode(e.target.value.trim().toUpperCase().replace(/[^0-9A-Z]/g, ''))}
|
||||
placeholder="请输入18位统一社会信用代码"
|
||||
maxLength={18}
|
||||
className="h-[50px] rounded-lg bg-surface-input px-3.5 text-[15px] outline-none"
|
||||
/>
|
||||
<p className="m-0 text-xs text-text-tertiary-3">请填写营业执照上的统一社会信用代码</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm text-text-body">
|
||||
营业执照 <span className="text-text-tertiary-3">选填</span>
|
||||
</label>
|
||||
<label className="flex h-24 cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border-[1.5px] border-dashed border-[#c5cad2]">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp,application/pdf"
|
||||
onChange={(e) => setFile(e.target.files?.[0] || null)}
|
||||
className="hidden"
|
||||
/>
|
||||
<Icon name="add_photo_alternate" className="text-[22px] text-text-tertiary-3" />
|
||||
<span className="text-sm text-text-body">{file ? file.name : '点击上传营业执照'}</span>
|
||||
<span className="text-xs text-text-tertiary-3">支持 JPG、PNG、WebP、PDF，不超过 10MB</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm text-text-body">
|
||||
企业邮箱 <span className="text-text-tertiary-3">选填</span>
|
||||
</label>
|
||||
<input
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
type="email"
|
||||
placeholder="请输入企业邮箱"
|
||||
className="h-[50px] rounded-lg bg-surface-input px-3.5 text-[15px] outline-none"
|
||||
/>
|
||||
<p className="m-0 text-xs text-text-tertiary-3">用于接收审核结果及企业通知</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitted || submitting || creditCode.length !== 18}
|
||||
className="h-[50px] rounded-lg bg-btn text-base font-medium text-white shadow-btn disabled:bg-btn-disabled disabled:shadow-none"
|
||||
>
|
||||
{submitted ? '已提交' : submitting ? '提交中…' : '提交审核'}
|
||||
</button>
|
||||
<p className="m-0 flex items-center justify-center gap-1 text-xs text-text-tertiary-3">
|
||||
<Icon name="schedule" className="text-[16px]" />
|
||||
资料提交后，预计 {reviewDays} 个工作日完成审核
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<Toast message={toast} onDone={() => setToast('')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import { useEffect, 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 { BASE_APP_NAME } from '@/lib/config';
|
||||
@@ -14,7 +15,6 @@ export function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const tenant = useSessionStore((s) => s.tenant);
|
||||
const setMyUserId = useSessionStore((s) => s.setMyUserId);
|
||||
const tinode = getTinode();
|
||||
const [login, setLogin] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [agreed, setAgreed] = useState(false);
|
||||
@@ -29,6 +29,10 @@ export function LoginPage() {
|
||||
}, [error]);
|
||||
|
||||
if (!tenant) {
|
||||
// Read tenant before touching getTinode() -- getTinode() lazily creates and PERMANENTLY caches
|
||||
// the singleton off whatever tenant is in the store at that moment (or a hardcoded fallback
|
||||
// host if there's none yet); calling it here first would risk creating that singleton against
|
||||
// the wrong tenant before this redirect even happens.
|
||||
return <Navigate to="/tenant" replace />;
|
||||
}
|
||||
|
||||
@@ -38,6 +42,7 @@ export function LoginPage() {
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
try {
|
||||
const tinode = getTinode();
|
||||
if (!tinode.isConnected()) {
|
||||
await connect();
|
||||
}
|
||||
@@ -60,59 +65,75 @@ export function LoginPage() {
|
||||
|
||||
return (
|
||||
<div className="flex h-dvh w-full">
|
||||
<div className="relative hidden flex-1 flex-col justify-center overflow-hidden bg-gradient-to-br from-[#1677ff] to-[#0f56c4] px-16 text-white min-[900px]:flex">
|
||||
<div className="relative hidden shrink-0 flex-col justify-center overflow-hidden bg-gradient-to-br from-[#1677ff] to-[#0f56c4] px-16 text-white min-[900px]:flex min-[900px]:w-[56%]">
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-96 bg-[radial-gradient(circle_at_20%_-10%,rgba(255,255,255,0.25),transparent_60%)]" />
|
||||
<div className="absolute left-16 top-10 flex items-center gap-2.5">
|
||||
<div className="grid h-10 w-10 place-items-center rounded-xl bg-white text-lg font-bold text-accent">M</div>
|
||||
<strong className="text-xl font-semibold">{BASE_APP_NAME}</strong>
|
||||
</div>
|
||||
<h2 className="m-0 max-w-md text-4xl leading-tight font-semibold text-balance">
|
||||
<h2 className="m-0 max-w-md text-[40px] leading-tight font-semibold text-balance">
|
||||
企业内部沟通，安全、即时、多端同步。
|
||||
</h2>
|
||||
<p className="mt-4 max-w-md text-base text-white/80">
|
||||
单聊、群聊、通讯录、文件与收藏、音视频通话，消息与回执在桌面端和手机端保持一致。
|
||||
</p>
|
||||
<div className="absolute bottom-10 left-16 flex gap-5 text-[13px] text-white/75">
|
||||
<span>下载桌面客户端</span>
|
||||
<span>iOS / Android</span>
|
||||
<span>帮助中心</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 items-center justify-center bg-white px-6">
|
||||
<form onSubmit={submit} className="flex w-full max-w-[380px] flex-col gap-4">
|
||||
<Link to="/tenant" 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">
|
||||
<span className="text-[13px] text-text-tertiary-2">{tenant.name}</span>
|
||||
<div className="flex flex-1 flex-col bg-white px-6 py-8">
|
||||
<Link to="/tenant" 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 flex-col items-center justify-center">
|
||||
<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 min-[900px]:hidden">
|
||||
<div className="grid h-[72px] w-[72px] place-items-center rounded-2xl bg-accent text-3xl font-bold text-white">M</div>
|
||||
<strong className="text-2xl font-bold text-text-heading">{tenant.name}</strong>
|
||||
</div>
|
||||
<div className="hidden flex-col gap-1 min-[900px]:flex">
|
||||
<span className="text-[13px] text-text-tertiary-2">{tenant.name}</span>
|
||||
</div>
|
||||
<h1 className="m-0 text-[28px] font-bold text-text-title">登录</h1>
|
||||
</div>
|
||||
{error ? (
|
||||
<div className="rounded-lg bg-error-strip-bg px-3 py-2.5 text-sm text-error-strip-text">{error}</div>
|
||||
) : null}
|
||||
<input
|
||||
value={login}
|
||||
onChange={(e) => setLogin(e.target.value)}
|
||||
placeholder="请输入用户名/手机号"
|
||||
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"
|
||||
/>
|
||||
<PasswordInput value={password} onChange={setPassword} placeholder="请输入密码" autoComplete="current-password" />
|
||||
<Link to="/reset-password" className="-mt-2 self-end text-sm text-accent no-underline">
|
||||
忘记密码
|
||||
</Link>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!login.trim() || !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>
|
||||
<p className="m-0 text-center text-sm text-text-tertiary-1">
|
||||
没有账户？{' '}
|
||||
<Link to="/register" className="text-accent no-underline">
|
||||
马上注册
|
||||
{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}
|
||||
<input
|
||||
value={login}
|
||||
onChange={(e) => setLogin(e.target.value)}
|
||||
placeholder="请输入用户名/手机号"
|
||||
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"
|
||||
/>
|
||||
<PasswordInput value={password} onChange={setPassword} placeholder="请输入密码" autoComplete="current-password" />
|
||||
<Link to="/reset-password" className="-mt-2 self-end text-sm text-accent no-underline">
|
||||
忘记密码
|
||||
</Link>
|
||||
</p>
|
||||
<Agreement checked={agreed} onChange={setAgreed} />
|
||||
</form>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!login.trim() || !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>
|
||||
<p className="m-0 text-center text-sm text-text-tertiary-1">
|
||||
没有账户？{' '}
|
||||
<Link to="/register" className="text-accent no-underline">
|
||||
马上注册
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<Agreement checked={agreed} onChange={setAgreed} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { Icon } from '@/app/Icon';
|
||||
import { ImApiError } from '@/lib/api/client';
|
||||
import { resolveTenant } from '@/lib/api/tenant';
|
||||
import { resetTinode } from '@/lib/tinode/connection';
|
||||
import { parseWebsocketEndpoint, useSessionStore } from '@/stores/session';
|
||||
|
||||
export function TenantEntryPage() {
|
||||
@@ -21,6 +23,10 @@ export function TenantEntryPage() {
|
||||
try {
|
||||
const res = await resolveTenant(code.trim());
|
||||
const { host, secure } = parseWebsocketEndpoint(res.endpoints.websocket);
|
||||
// Without this, switching tenants mid-session silently keeps talking to the OLD tenant's
|
||||
// host: getTinode() lazily creates one singleton and reuses it forever once created, and
|
||||
// createTinode() only ever reads useSessionStore's tenant at that one construction moment.
|
||||
resetTinode();
|
||||
setTenant({ code: res.tenant.code, name: res.tenant.name, endpoints: res.endpoints, host, secure });
|
||||
navigate('/login');
|
||||
} catch (err) {
|
||||
@@ -31,7 +37,10 @@ export function TenantEntryPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-dvh w-full items-center justify-center bg-surface-page px-6">
|
||||
<div className="relative flex h-dvh w-full items-center justify-center bg-surface-page px-6">
|
||||
<Link to="/enterprise-register" className="absolute right-6 top-6 text-sm text-accent no-underline">
|
||||
企业注册
|
||||
</Link>
|
||||
<form onSubmit={submit} className="flex w-full max-w-[380px] flex-col gap-5">
|
||||
<div className="mb-2 flex flex-col items-center gap-3">
|
||||
<div className="grid h-[72px] w-[72px] place-items-center rounded-2xl bg-accent text-3xl font-bold text-white">
|
||||
@@ -40,10 +49,13 @@ export function TenantEntryPage() {
|
||||
<strong className="text-2xl font-bold text-text-heading">MeetingIM</strong>
|
||||
</div>
|
||||
{error ? (
|
||||
<div className="rounded-lg bg-error-strip-bg px-3 py-2.5 text-sm text-error-strip-text">{error}</div>
|
||||
<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="material-icons text-[20px] text-accent">business</span>
|
||||
<Icon name="business" className="text-[20px] text-focus-border" />
|
||||
<input
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
@@ -59,6 +71,9 @@ export function TenantEntryPage() {
|
||||
{submitting ? '进入中…' : '进入企业'}
|
||||
</button>
|
||||
</form>
|
||||
<Link to="/feedback" className="absolute bottom-8 text-sm text-accent no-underline">
|
||||
遇到问题？
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Icon } from '@/app/Icon';
|
||||
import { Toast } from '@/features/auth/components/Toast';
|
||||
import { ImApiError } from '@/lib/api/client';
|
||||
import { submitTenantEntryFeedback, uploadPublicFile } from '@/lib/api/tenant';
|
||||
|
||||
interface PendingImage {
|
||||
file: File;
|
||||
url: string;
|
||||
}
|
||||
|
||||
/** README §10.6 / `01/1j`'s 问题反馈, reached from the tenant-code screen's "遇到问题？" link. */
|
||||
export function TenantFeedbackPage() {
|
||||
const [description, setDescription] = useState('');
|
||||
const [contact, setContact] = useState('');
|
||||
const [images, setImages] = useState<PendingImage[]>([]);
|
||||
const [error, setError] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [toast, setToast] = useState('');
|
||||
|
||||
const addImages = (files: FileList | null) => {
|
||||
const selected = Array.from(files || []).slice(0, 9 - images.length);
|
||||
const valid = selected.filter((f) => f.size <= 10 * 1024 * 1024 && ['image/jpeg', 'image/png', 'image/webp'].includes(f.type));
|
||||
setImages((prev) => prev.concat(valid.map((file) => ({ file, url: URL.createObjectURL(file) }))));
|
||||
};
|
||||
|
||||
const removeImage = (i: number) => {
|
||||
setImages((prev) => {
|
||||
URL.revokeObjectURL(prev[i].url);
|
||||
return prev.filter((_, idx) => idx !== i);
|
||||
});
|
||||
};
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const length = description.trim().length;
|
||||
if (length < 10 || length > 500) return setError('问题描述需为 10 至 500 个字符');
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
try {
|
||||
const screenshotFileIds: string[] = [];
|
||||
for (const item of images) {
|
||||
screenshotFileIds.push((await uploadPublicFile(item.file, 'tenant_entry_feedback')).file_id);
|
||||
}
|
||||
await submitTenantEntryFeedback({ description: description.trim(), screenshot_file_ids: screenshotFileIds, contact: contact.trim() || undefined });
|
||||
setToast('提交成功，我们会尽快联系你');
|
||||
images.forEach((item) => URL.revokeObjectURL(item.url));
|
||||
setDescription('');
|
||||
setImages([]);
|
||||
setContact('');
|
||||
} catch (err) {
|
||||
setError(err instanceof ImApiError ? err.message : '提交失败，请稍后重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-dvh w-full flex-col items-center overflow-y-auto bg-surface-page px-6 py-10">
|
||||
<div className="w-full max-w-[420px]">
|
||||
<Link to="/tenant" className="flex items-center gap-1 text-sm text-text-secondary no-underline">
|
||||
<Icon name="arrow_back_ios_new" className="text-[16px]" />
|
||||
返回
|
||||
</Link>
|
||||
<h1 className="mb-6 mt-4 text-[22px] font-bold text-text-title">问题反馈</h1>
|
||||
|
||||
<form onSubmit={submit} className="flex flex-col gap-4">
|
||||
{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}
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value.slice(0, 500))}
|
||||
placeholder='企业码输入正确但提示"企业码不存在或已停用"'
|
||||
rows={5}
|
||||
className="resize-none rounded-lg bg-surface-input p-3.5 text-[15px] outline-none placeholder:text-text-placeholder-1"
|
||||
/>
|
||||
<span className="self-end text-xs text-text-tertiary-3">{description.length}/500</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{images.map((img, i) => (
|
||||
<div key={img.url} className="relative aspect-square overflow-hidden rounded-lg bg-surface-rail">
|
||||
<img src={img.url} alt="" className="h-full w-full object-cover" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeImage(i)}
|
||||
className="absolute right-1 top-1 grid h-5 w-5 place-items-center rounded-full bg-black/50 text-white"
|
||||
>
|
||||
<Icon name="close" className="text-[14px]" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{images.length < 9 ? (
|
||||
<label className="flex aspect-square cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-[#c5cad2] text-text-tertiary-3">
|
||||
<input type="file" accept="image/jpeg,image/png,image/webp" multiple onChange={(e) => addImages(e.target.files)} className="hidden" />
|
||||
<Icon name="add_photo_alternate" className="text-[20px]" />
|
||||
<span className="text-xs">{images.length}/9</span>
|
||||
</label>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<input
|
||||
value={contact}
|
||||
onChange={(e) => setContact(e.target.value)}
|
||||
placeholder="联系方式（选填，手机号或邮箱）"
|
||||
className="h-[50px] rounded-lg bg-surface-input px-3.5 text-[15px] outline-none placeholder:text-text-placeholder-1"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={description.trim().length < 10 || 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>
|
||||
);
|
||||
}
|
||||
@@ -17,7 +17,7 @@ export function PasswordInput({ value, onChange, placeholder, autoComplete, erro
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div
|
||||
className={`flex h-[50px] items-center rounded-lg bg-surface-input px-3.5 has-focus:border has-focus:shadow-focus-ring ${
|
||||
error ? 'border border-danger-border' : 'has-focus:border-focus-border'
|
||||
error ? 'border border-danger-text' : 'has-focus:border-focus-border'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
@@ -32,7 +32,7 @@ export function PasswordInput({ value, onChange, placeholder, autoComplete, erro
|
||||
type="button"
|
||||
onClick={() => setVisible((v) => !v)}
|
||||
aria-label={visible ? '隐藏密码' : '显示密码'}
|
||||
className="text-text-placeholder-1"
|
||||
className="text-text-placeholder-2"
|
||||
>
|
||||
<Icon name={visible ? 'visibility' : 'visibility_off'} className="text-[20px]" />
|
||||
</button>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { requestVerificationCode } from '@/lib/api/auth';
|
||||
import { ImApiError } from '@/lib/api/client';
|
||||
@@ -18,6 +18,11 @@ export function VerificationCodeButton({ phone, scene, onChallenge, onError }: V
|
||||
const [busy, setBusy] = useState(false);
|
||||
const timerRef = useRef<number | undefined>(undefined);
|
||||
|
||||
// Without this, navigating away mid-countdown (e.g. switching from register back to login)
|
||||
// leaves the interval running against an unmounted component indefinitely until it naturally
|
||||
// reaches 0 -- a real resource leak, not just a React warning, since nothing else ever clears it.
|
||||
useEffect(() => () => window.clearInterval(timerRef.current), []);
|
||||
|
||||
const tick = (initial: number) => {
|
||||
window.clearInterval(timerRef.current);
|
||||
setSeconds(initial);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { imRequest } from './client';
|
||||
import { API_KEY } from '@/lib/config';
|
||||
|
||||
import { apiBase, currentTenantCode, imPost, imRequest, ImApiError, requestId } from './client';
|
||||
|
||||
/**
|
||||
* Shape verified against a real `POST /v1/im/tenants/resolve` response (not assumed from memory/
|
||||
@@ -37,3 +39,66 @@ export async function resolveTenant(tenantCode: string): Promise<ResolveTenantRe
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function clientContext() {
|
||||
return {
|
||||
user_agent: typeof navigator !== 'undefined' ? navigator.userAgent : '',
|
||||
language: typeof navigator !== 'undefined' ? navigator.language : '',
|
||||
};
|
||||
}
|
||||
|
||||
export interface PublicUploadResult {
|
||||
file_id: string;
|
||||
purpose: string;
|
||||
mime_type: string;
|
||||
size: number;
|
||||
expires_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /v1/im/public/uploads -- a pre-login upload surface distinct from the chat file endpoint
|
||||
* (lib/api/upload.ts's uploadFile, which lives at the separate file-serving origin). This one goes
|
||||
* through the regular /v1/im REST API, so it needs imRequest's usual headers -- but as a multipart
|
||||
* body, not the JSON imRequest always sends, so it can't reuse imRequest itself (that function
|
||||
* hardcodes `Content-Type: application/json` and JSON.stringifies its body, which would corrupt a
|
||||
* FormData payload and fight the browser's own multipart boundary header).
|
||||
*/
|
||||
export async function uploadPublicFile(file: File, purpose: 'enterprise_license' | 'tenant_entry_feedback'): Promise<PublicUploadResult> {
|
||||
const form = new FormData();
|
||||
form.append('purpose', purpose);
|
||||
form.append('file', file);
|
||||
const res = await fetch(`${apiBase()}/public/uploads`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-MeetingIM-APIKey': API_KEY,
|
||||
'X-IM-Schema': '1',
|
||||
'X-Tenant-Code': currentTenantCode(),
|
||||
'X-Request-ID': requestId(),
|
||||
},
|
||||
body: form,
|
||||
});
|
||||
const text = await res.text();
|
||||
let payload: { code?: number; data?: PublicUploadResult; message?: string; reason?: string } = {};
|
||||
try {
|
||||
payload = JSON.parse(text);
|
||||
} catch {
|
||||
throw new ImApiError('文件上传失败：服务器返回异常', undefined, res.status);
|
||||
}
|
||||
if (!res.ok || (payload.code && payload.code !== 0) || !payload.data) {
|
||||
throw new ImApiError(payload.message || payload.reason || '文件上传失败', payload.reason, res.status);
|
||||
}
|
||||
return payload.data;
|
||||
}
|
||||
|
||||
export interface TenantApplicationResult {
|
||||
application_id?: string;
|
||||
estimated_review_hours?: number;
|
||||
}
|
||||
|
||||
export function submitTenantApplication(body: { credit_code: string; enterprise_email?: string; license_file_id?: string; tenant_code_hint?: string }) {
|
||||
return imPost<TenantApplicationResult>('/tenant-applications', { client_context: clientContext(), ...body }, { auth: false });
|
||||
}
|
||||
|
||||
export function submitTenantEntryFeedback(body: { description: string; tenant_code_hint?: string; screenshot_file_ids?: string[]; contact?: string }) {
|
||||
return imPost<{ received: boolean }>('/tenant-entry-feedback', { client_context: clientContext(), ...body }, { auth: false });
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user