Convert im_webapp from static mock prototypes to real backend integration
Implements all 11 product chapters (auth, messaging, contacts, groups,
files/favorites, calls, workplace/reports, settings, security) against the
real /v1/im REST API and native Tinode WS protocol, replacing the hardcoded
mock data the ba8f48ee prototype commit shipped with. Adds src/lib/im-api.js
as the REST client, plus supporting fixes across messages-view.jsx and the
attachment/upload/download pipeline (wrong SDK auth headers, group topic
naming, seq/timezone edge cases) found via live end-to-end testing against
the real backend.
Backup checkpoint before reconciling with origin/dev's parallel rewrite.
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
ba8f48ee83
commit
251c9de87c
+394
-105
@@ -1,6 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
import HashNavigation from '../lib/navigation.js';
|
||||
import {
|
||||
resolveTenant, submitTenantApplication, submitTenantEntryFeedback, uploadPublicFile,
|
||||
requestVerificationCode, verifyRegisterCode, verifyPasswordResetCode, confirmPasswordReset,
|
||||
createSecurityChallenge, verifySecurityChallenge, getRealnameStatus, submitRealname, setIndependentPassword
|
||||
} from '../lib/im-api.js';
|
||||
|
||||
const USERNAME_RE = /^[a-z0-9]{1,10}$/;
|
||||
const PHONE_RE = /^\d{11}$/;
|
||||
@@ -23,7 +28,7 @@ function AppMark({tenantName}) {
|
||||
|
||||
function Header({title, back = 'tenant'}) {
|
||||
return <header className="auth-header">
|
||||
<button type="button" className="auth-icon-button" onClick={() => navigate(back)} aria-label="返回">
|
||||
<button type="button" className="auth-icon-button" onClick={() => { if (!HashNavigation.goBack()) navigate(back); }} aria-label="返回">
|
||||
<Icon>arrow_back_ios_new</Icon>
|
||||
</button>
|
||||
<h1>{title}</h1>
|
||||
@@ -65,21 +70,42 @@ function Toast({message, onDone}) {
|
||||
return message ? <div className="auth-toast" role="status"><Icon>check_circle</Icon>{message}</div> : null;
|
||||
}
|
||||
|
||||
function TenantEntry({onTenantSelected}) {
|
||||
// Shared alert for errors coming back from a real API/WS call (as opposed to local form validation,
|
||||
// which each form already reports inline per-field).
|
||||
function FormAlert({text}) {
|
||||
return text ? <div className="auth-form-alert"><Icon>error_outline</Icon>{text}</div> : null;
|
||||
}
|
||||
|
||||
function TenantEntry({onTenantResolved}) {
|
||||
const [code, setCode] = React.useState(sessionStorage.getItem('im-tenant-code') || '');
|
||||
const [error, setError] = React.useState('');
|
||||
const [busy, setBusy] = React.useState(false);
|
||||
|
||||
const submit = e => {
|
||||
const submit = async e => {
|
||||
e.preventDefault();
|
||||
const value = code.trim();
|
||||
if (!value || value.length > 64) {
|
||||
setError(value ? '企业码不能超过 64 个字符' : '请输入企业码');
|
||||
return;
|
||||
}
|
||||
sessionStorage.setItem('im-tenant-code', value);
|
||||
sessionStorage.setItem('im-tenant-name', value === 'acme' ? '示例企业' : value);
|
||||
onTenantSelected(value);
|
||||
navigate('login');
|
||||
setBusy(true);
|
||||
setError('');
|
||||
try {
|
||||
const data = await resolveTenant(value);
|
||||
// Kept for the mock UI's own display of the tenant name while on this screen; the durable
|
||||
// context (read by every subsequent /v1/im/* call and by the {hi} tenant field) is persisted
|
||||
// by onTenantResolved.
|
||||
sessionStorage.setItem('im-tenant-code', data.tenant.code || value);
|
||||
sessionStorage.setItem('im-tenant-name', data.tenant.name || data.tenant.code || value);
|
||||
onTenantResolved(data, value);
|
||||
navigate('login');
|
||||
} catch (err) {
|
||||
// Per the product spec, tenant-resolve failures are shown as one generic message
|
||||
// regardless of reason (not found vs. disabled vs. rate limited).
|
||||
setError('企业码不存在或已停用，请核实后重试');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return <div className="auth-landing">
|
||||
@@ -88,46 +114,57 @@ function TenantEntry({onTenantSelected}) {
|
||||
<AppMark />
|
||||
<Field value={code} onChange={e => { setCode(e.target.value); setError(''); }}
|
||||
placeholder="请输入企业码" autoComplete="organization" maxLength="64" error={error} autoFocus />
|
||||
<button className="auth-primary" type="submit" disabled={!code.trim()}>进入企业</button>
|
||||
<button className="auth-primary" type="submit" disabled={!code.trim() || busy}>{busy ? '进入中…' : '进入企业'}</button>
|
||||
</form>
|
||||
<button className="auth-bottom-link" type="button" onClick={() => navigate('enterprise-feedback')}>遇到问题？</button>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function Login({tenantName}) {
|
||||
const [account, setAccount] = React.useState('');
|
||||
function Login({tenantName, login, loginDisabled, persist, errorText, errorLevel, onLoginRequest, onPersistenceChange, onError}) {
|
||||
const [account, setAccount] = React.useState(login || '');
|
||||
const [password, setPassword] = React.useState('');
|
||||
const [agreed, setAgreed] = React.useState(false);
|
||||
const [error, setError] = React.useState('');
|
||||
const [toast, setToast] = React.useState('');
|
||||
|
||||
// The prototype (docs/images/登录页面.png) has no "stay logged in" checkbox -- a consumer IM app
|
||||
// just keeps you signed in. Opt in silently instead of exposing the old debug-era toggle.
|
||||
React.useEffect(() => {
|
||||
if (!persist) {
|
||||
onPersistenceChange(true);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Real login failures (wrong password, disabled account, ...) clear the password and keep the account,
|
||||
// matching the product spec.
|
||||
React.useEffect(() => {
|
||||
if (errorLevel === 'err' && errorText) {
|
||||
setPassword('');
|
||||
}
|
||||
}, [errorText, errorLevel]);
|
||||
|
||||
const submit = e => {
|
||||
e.preventDefault();
|
||||
if (!account.trim() || !password || !agreed) return;
|
||||
if (password === 'error') {
|
||||
setPassword('');
|
||||
setError('账号或密码错误');
|
||||
} else {
|
||||
setToast('登录成功');
|
||||
window.setTimeout(() => navigate('messages-home'), 500);
|
||||
}
|
||||
if (!account.trim() || !password || !agreed || loginDisabled) return;
|
||||
onLoginRequest(account.trim(), password);
|
||||
};
|
||||
|
||||
return <div className="auth-landing auth-login-page">
|
||||
<button type="button" className="auth-back-link" onClick={() => navigate('tenant')}><Icon>arrow_back_ios_new</Icon>切换企业</button>
|
||||
<button type="button" className="auth-back-link"
|
||||
onClick={() => { onError && onError(); navigate('tenant'); }}><Icon>arrow_back_ios_new</Icon>切换企业</button>
|
||||
<form className="auth-landing-form" onSubmit={submit}>
|
||||
<AppMark tenantName={tenantName} />
|
||||
{error ? <div className="auth-form-alert"><Icon>error_outline</Icon>{error}</div> : null}
|
||||
<Field value={account} onChange={e => { setAccount(e.target.value); setError(''); }}
|
||||
<FormAlert text={errorLevel === 'err' ? errorText : ''} />
|
||||
<Field value={account} onChange={e => setAccount(e.target.value)}
|
||||
placeholder="请输入用户名/手机号" autoComplete="username" />
|
||||
<PasswordField value={password} onChange={e => { setPassword(e.target.value); setError(''); }}
|
||||
<PasswordField value={password} onChange={e => setPassword(e.target.value)}
|
||||
placeholder="请输入密码" autoComplete="current-password" />
|
||||
<div className="auth-row auth-row-end"><button type="button" className="auth-text-button" onClick={() => navigate('reset')}>忘记密码</button></div>
|
||||
<button className="auth-primary" type="submit" disabled={!account.trim() || !password || !agreed}>登录</button>
|
||||
<button className="auth-primary" type="submit" disabled={!account.trim() || !password || !agreed || loginDisabled}>
|
||||
{loginDisabled ? '登录中…' : '登录'}
|
||||
</button>
|
||||
<p className="auth-switch">没有账户？ <button type="button" onClick={() => navigate('register')}>马上注册</button></p>
|
||||
</form>
|
||||
<Agreement checked={agreed} onChange={setAgreed} />
|
||||
<Toast message={toast} onDone={() => setToast('')} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
@@ -136,7 +173,9 @@ function EnterpriseRegister() {
|
||||
const [email, setEmail] = React.useState('');
|
||||
const [file, setFile] = React.useState(null);
|
||||
const [errors, setErrors] = React.useState({});
|
||||
const [submitted, setSubmitted] = React.useState(sessionStorage.getItem('im-enterprise-application-status') === 'received');
|
||||
const [submitting, setSubmitting] = React.useState(false);
|
||||
const [submitted, setSubmitted] = React.useState(false);
|
||||
const [reviewDays, setReviewDays] = React.useState(1);
|
||||
const [toast, setToast] = React.useState('');
|
||||
|
||||
React.useEffect(() => () => file && URL.revokeObjectURL(file.url), [file]);
|
||||
@@ -149,31 +188,52 @@ function EnterpriseRegister() {
|
||||
return;
|
||||
}
|
||||
if (file) URL.revokeObjectURL(file.url);
|
||||
setFile({name: selected.name, type: selected.type, url: URL.createObjectURL(selected)});
|
||||
setFile({name: selected.name, type: selected.type, url: URL.createObjectURL(selected), blob: selected});
|
||||
setErrors({...errors, file: ''});
|
||||
};
|
||||
|
||||
const submit = e => {
|
||||
const submit = async e => {
|
||||
e.preventDefault();
|
||||
const next = {};
|
||||
if (!CREDIT_CODE_RE.test(creditCode)) next.creditCode = '请输入 18 位统一社会信用代码';
|
||||
if (email && !EMAIL_RE.test(email)) next.email = '请输入有效的企业邮箱';
|
||||
setErrors(next);
|
||||
if (Object.keys(next).length) return;
|
||||
setSubmitted(true);
|
||||
sessionStorage.setItem('im-enterprise-application-status', 'received');
|
||||
setToast('提交成功，我们会尽快联系你');
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
let licenseFileId = '';
|
||||
if (file) {
|
||||
const uploaded = await uploadPublicFile(file.blob, 'enterprise_license');
|
||||
licenseFileId = uploaded.file_id;
|
||||
}
|
||||
const data = await submitTenantApplication({
|
||||
credit_code: creditCode,
|
||||
enterprise_email: email,
|
||||
license_file_id: licenseFileId,
|
||||
tenant_code_hint: sessionStorage.getItem('im-tenant-code') || ''
|
||||
});
|
||||
// Prototype (docs/images/企业注册-填写注册信息.png) states this in business days, not hours.
|
||||
setReviewDays(Math.max(1, Math.round((data.estimated_review_hours || 24) / 24)));
|
||||
setSubmitted(true);
|
||||
setToast('提交成功，我们会尽快联系你');
|
||||
} catch (err) {
|
||||
setErrors({...next, form: err.message || '提交失败，请稍后重试'});
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return <div className="auth-page">
|
||||
<Header title="企业注册" />
|
||||
<main className="auth-content auth-content-narrow">
|
||||
<ol className="auth-steps">
|
||||
<li className="active"><span>1</span><b>填写企业信息</b></li>
|
||||
<li className={submitted ? '' : 'active'}><span>1</span><b>填写企业信息</b></li>
|
||||
<li><span>2</span><b>确定信息</b></li>
|
||||
<li><span>3</span><b>提交审核</b></li>
|
||||
<li className={submitted ? 'active' : ''}><span>3</span><b>提交审核</b></li>
|
||||
</ol>
|
||||
<form className="auth-form" onSubmit={submit}>
|
||||
<FormAlert text={errors.form} />
|
||||
<label className="auth-label">统一社会信用代码</label>
|
||||
<Field value={creditCode} onChange={e => setCreditCode(e.target.value.trim().toUpperCase().replace(/[^0-9A-Z]/g, ''))}
|
||||
placeholder="请输入18位统一社会信用代码" maxLength="18" icon="qr_code_scanner" error={errors.creditCode} />
|
||||
@@ -193,187 +253,397 @@ function EnterpriseRegister() {
|
||||
<Field icon="mail_outline" value={email} onChange={e => setEmail(e.target.value)}
|
||||
placeholder="请输入企业邮箱" type="email" error={errors.email} />
|
||||
<p className="auth-help">用于接收审核结果及企业通知</p>
|
||||
<button className="auth-primary" type="submit" disabled={submitted || creditCode.length !== 18}>{submitted ? '已提交' : '提交资料'}</button>
|
||||
<p className="auth-review-time"><Icon>schedule</Icon>资料提交后，预计 1 个工作日完成审核</p>
|
||||
<button className="auth-primary" type="submit" disabled={submitted || submitting || creditCode.length !== 18}>
|
||||
{submitted ? '已提交' : submitting ? '提交中…' : '提交资料'}
|
||||
</button>
|
||||
<p className="auth-review-time"><Icon>schedule</Icon>资料提交后，预计 {reviewDays} 个工作日完成审核</p>
|
||||
</form>
|
||||
</main>
|
||||
<Toast message={toast} onDone={() => setToast('')} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
// Per docs/images/企业注册-问题反馈.png: titled "意见反馈", 300-char textarea with the instructions
|
||||
// as its placeholder (not a separate label), "图片（N/9）" counter-style label, and no contact field.
|
||||
function EnterpriseFeedback() {
|
||||
const [description, setDescription] = React.useState('');
|
||||
const [contact, setContact] = React.useState('');
|
||||
const [files, setFiles] = React.useState([]);
|
||||
const [error, setError] = React.useState('');
|
||||
const [submitting, setSubmitting] = React.useState(false);
|
||||
const [toast, setToast] = React.useState('');
|
||||
|
||||
const addFiles = e => {
|
||||
const selected = Array.from(e.target.files || []).slice(0, 9 - files.length);
|
||||
const valid = selected.filter(file => file.size <= 10 * 1024 * 1024 && ['image/jpeg', 'image/png', 'image/webp'].includes(file.type));
|
||||
setFiles(files.concat(valid.map(file => ({name: file.name, url: URL.createObjectURL(file)}))));
|
||||
setFiles(files.concat(valid.map(file => ({name: file.name, url: URL.createObjectURL(file), blob: file}))));
|
||||
};
|
||||
const submit = e => {
|
||||
const submit = async e => {
|
||||
e.preventDefault();
|
||||
const length = description.trim().length;
|
||||
if (length < 10 || length > 1000) {
|
||||
setError('问题描述需为 10 至 1000 个字符');
|
||||
if (length < 10 || length > 300) {
|
||||
setError('问题描述需为 10 至 300 个字符');
|
||||
return;
|
||||
}
|
||||
setToast('已收到反馈，我们会尽快处理');
|
||||
files.forEach(item => URL.revokeObjectURL(item.url));
|
||||
setDescription(''); setContact(''); setFiles([]);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const screenshotFileIds = [];
|
||||
for (const item of files) {
|
||||
const uploaded = await uploadPublicFile(item.blob, 'tenant_entry_feedback');
|
||||
screenshotFileIds.push(uploaded.file_id);
|
||||
}
|
||||
await submitTenantEntryFeedback({
|
||||
description: description.trim(),
|
||||
tenant_code_hint: sessionStorage.getItem('im-tenant-code') || '',
|
||||
screenshot_file_ids: screenshotFileIds
|
||||
});
|
||||
setToast('已收到反馈，我们会尽快处理');
|
||||
files.forEach(item => URL.revokeObjectURL(item.url));
|
||||
setDescription(''); setFiles([]); setError('');
|
||||
} catch (err) {
|
||||
setError(err.message || '提交失败，请稍后重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return <div className="auth-page auth-soft-bg">
|
||||
<Header title="问题反馈" />
|
||||
<Header title="意见反馈" />
|
||||
<main className="auth-content auth-content-narrow">
|
||||
<form className="auth-form" onSubmit={submit}>
|
||||
<label className="auth-label">问题描述</label>
|
||||
<textarea value={description} maxLength="1000" onChange={e => { setDescription(e.target.value); setError(''); }}
|
||||
placeholder="请详细描述遇到的问题，至少输入10个字" className={error ? 'invalid' : ''} />
|
||||
<div className="auth-counter">{description.length}/1000</div>
|
||||
<label className="auth-label">问题反馈</label>
|
||||
<textarea value={description} maxLength="300" onChange={e => { setDescription(e.target.value); setError(''); }}
|
||||
placeholder="为了更好的帮您解决问题，请在提交问题时上传截图信息，方便我们更快速的帮助您解决问题。" className={error ? 'invalid' : ''} />
|
||||
<div className="auth-counter">{description.length}/300</div>
|
||||
{error ? <div className="auth-field-error">{error}</div> : null}
|
||||
<label className="auth-label">上传截图 <span>最多 9 张</span></label>
|
||||
<label className="auth-label">图片（{files.length}/9）</label>
|
||||
<div className="auth-screenshot-grid">
|
||||
{files.map((file, index) => <div className="auth-screenshot" key={file.url}>
|
||||
<img src={file.url} alt={file.name} />
|
||||
<button type="button" onClick={() => { URL.revokeObjectURL(file.url); setFiles(files.filter((_, i) => i !== index)); }} aria-label="删除截图"><Icon>close</Icon></button>
|
||||
</div>)}
|
||||
{files.length < 9 ? <label className="auth-add-screenshot"><input type="file" multiple accept="image/jpeg,image/png,image/webp" onChange={addFiles} /><Icon>add</Icon></label> : null}
|
||||
{files.length < 9 ? <label className="auth-add-screenshot"><input type="file" multiple accept="image/jpeg,image/png,image/webp" onChange={addFiles} /><Icon>photo_camera</Icon><span>点击上传</span></label> : null}
|
||||
</div>
|
||||
<label className="auth-label">联系方式 <span>选填</span></label>
|
||||
<Field value={contact} onChange={e => setContact(e.target.value)} placeholder="手机号或邮箱，便于我们联系您" />
|
||||
<button className="auth-primary" type="submit" disabled={description.trim().length < 10}>提交反馈</button>
|
||||
<button className="auth-primary" type="submit" disabled={description.trim().length < 10 || submitting}>{submitting ? '提交中…' : '提交'}</button>
|
||||
</form>
|
||||
</main>
|
||||
<Toast message={toast} onDone={() => setToast('')} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
function VerificationButton({phone, scene = 'register'}) {
|
||||
// Requests a phone verification code (scene: 'register' | 'reset_password' | 'security') and reports the
|
||||
// resulting challenge_id upward -- the caller needs it to verify the code the user types in.
|
||||
function VerificationButton({phone, scene = 'register', onChallenge, onError}) {
|
||||
const [seconds, setSeconds] = React.useState(0);
|
||||
const [busy, setBusy] = React.useState(false);
|
||||
React.useEffect(() => {
|
||||
if (!seconds) return undefined;
|
||||
const timer = window.setTimeout(() => setSeconds(seconds - 1), 1000);
|
||||
const timer = window.setTimeout(() => setSeconds(s => s - 1), 1000);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [seconds]);
|
||||
return <button type="button" className="auth-code-button" disabled={seconds > 0 || !PHONE_RE.test(phone)}
|
||||
onClick={() => { sessionStorage.setItem('im-verification-scene', scene); setSeconds(60); }}>
|
||||
{seconds > 0 ? `${seconds}s` : '获取验证码'}
|
||||
|
||||
const click = async () => {
|
||||
if (busy || seconds > 0 || !PHONE_RE.test(phone)) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const data = await requestVerificationCode(scene, phone);
|
||||
onChallenge(data.challenge_id);
|
||||
setSeconds(data.resend_after_seconds || 60);
|
||||
} catch (err) {
|
||||
onError && onError(err.message || '获取验证码失败');
|
||||
if (err.details && err.details.retry_after_seconds) {
|
||||
setSeconds(err.details.retry_after_seconds);
|
||||
}
|
||||
if (err.details && err.details.challenge_id) {
|
||||
// Rate-limited but a still-valid challenge already exists for this phone/scene -- reuse it.
|
||||
onChallenge(err.details.challenge_id);
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return <button type="button" className="auth-code-button" disabled={busy || seconds > 0 || !PHONE_RE.test(phone)} onClick={click}>
|
||||
{seconds > 0 ? `${seconds}s` : busy ? '发送中…' : '获取验证码'}
|
||||
</button>;
|
||||
}
|
||||
|
||||
function Register() {
|
||||
// Per the actual prototype screenshots (docs/images/注册页面.png), all fields are shown together --
|
||||
// no phone-vs-username mode toggle. "Phone takes precedence" (per the spec text) is validation-only:
|
||||
// if a phone is filled it must be verified; the invite code is only required for a username-only
|
||||
// signup (matching the mock's original submit-time validation, now with real backend calls behind it).
|
||||
function Register({errorText, errorLevel, onImRegisterRequest}) {
|
||||
const [form, setForm] = React.useState({username: '', phone: '', code: '', password: '', invite: ''});
|
||||
const [challengeId, setChallengeId] = React.useState('');
|
||||
const [agreed, setAgreed] = React.useState(false);
|
||||
const [errors, setErrors] = React.useState({});
|
||||
const [toast, setToast] = React.useState('');
|
||||
const [submitting, setSubmitting] = React.useState(false);
|
||||
const change = key => e => setForm({...form, [key]: e.target.value});
|
||||
const submit = e => {
|
||||
const usingPhone = !!form.phone;
|
||||
|
||||
// onImRegisterRequest (tinode-web.jsx's handleImRegisterRequest -> a WS connect+createAccountBasic
|
||||
// chain) isn't awaited and doesn't return a promise -- on the username/invite-code path (no
|
||||
// verifyRegisterCode await ahead of it) `submit` returns and its `finally` clears `submitting`
|
||||
// within milliseconds, long before that WS round-trip finishes, leaving the button re-clickable
|
||||
// and able to fire a second concurrent registration. The parent's only failure signal is these
|
||||
// props changing, so hold `submitting` until either that happens or the phone-path's own catch
|
||||
// already handled it (success unmounts this component regardless).
|
||||
React.useEffect(() => {
|
||||
if (errorLevel === 'err' && errorText) setSubmitting(false);
|
||||
}, [errorText, errorLevel]);
|
||||
|
||||
const submit = async e => {
|
||||
e.preventDefault();
|
||||
const next = {};
|
||||
if (!form.username && !form.phone) next.username = '用户名和手机号至少填写一项';
|
||||
if (form.username && !USERNAME_RE.test(form.username)) next.username = '用户名仅支持 1-10 位小写字母或数字';
|
||||
if (form.phone && !PHONE_RE.test(form.phone)) next.phone = '请输入 11 位手机号';
|
||||
if (!form.phone && !INVITE_RE.test(form.invite)) next.invite = '用户名注册需填写 5 位字母邀请码';
|
||||
if (form.invite && !INVITE_RE.test(form.invite)) next.invite = '邀请码为 5 位大小写字母';
|
||||
if (usingPhone) {
|
||||
if (!PHONE_RE.test(form.phone)) next.phone = '请输入 11 位手机号';
|
||||
if (!challengeId) next.code = '请先获取验证码';
|
||||
else if (!/^\d{6}$/.test(form.code)) next.code = '请输入 6 位验证码';
|
||||
} else if (!INVITE_RE.test(form.invite)) {
|
||||
next.invite = '用户名注册需填写 5 位字母邀请码';
|
||||
}
|
||||
if (form.password.length < 8) next.password = '密码至少 8 位';
|
||||
setErrors(next);
|
||||
if (Object.keys(next).length) return;
|
||||
setToast(form.phone ? '注册信息已准备，接口将在联调阶段启用' : '未绑定手机号，忘记密码需联系企业管理员');
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
if (usingPhone) {
|
||||
const verified = await verifyRegisterCode(challengeId, form.code);
|
||||
// The username field is optional even on the phone path -- filling in both used to silently
|
||||
// drop the typed username (always sent '' and always logged in as the phone), because the
|
||||
// server only auto-assigns a random handle when username is actually empty
|
||||
// (server/user.go resolveRegistrationAccount: username!="" && phone!="" => account=username,
|
||||
// secretAccount=username; only username=="" falls back to the phone-derived random handle).
|
||||
// Per the protocol spec, the phone number itself must never become the display name -- leave
|
||||
// it blank when no username was typed either (server assigns a random handle; the user can
|
||||
// set a nickname afterwards).
|
||||
const secretAccount = form.username || ('+86' + form.phone);
|
||||
onImRegisterRequest(secretAccount, form.password, form.username || '',
|
||||
{username: form.username || '', phone: form.phone, invite_code: ''},
|
||||
{meth: 'tel', val: form.phone, resp: verified.verification_token, params: {challenge_id: challengeId}});
|
||||
} else {
|
||||
onImRegisterRequest(form.username, form.password, form.username,
|
||||
{username: form.username, phone: '', invite_code: form.invite}, null);
|
||||
}
|
||||
// On success the parent (tinode-web.jsx handleImRegisterRequest -> handleLoginSuccessful)
|
||||
// navigates away (unmounting this component, so `submitting` no longer matters); on failure
|
||||
// it surfaces errorText/errorLevel, which the effect above clears `submitting` on. No
|
||||
// `finally` here on purpose -- onImRegisterRequest isn't awaited (it's not a promise), so a
|
||||
// `finally` would clear `submitting` within milliseconds on the username/invite-code path,
|
||||
// long before that request's own WS round-trip resolves, defeating the double-submit guard.
|
||||
} catch (err) {
|
||||
setErrors({...next, code: err.message || '验证码错误或已过期'});
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return <div className="auth-landing auth-register-page">
|
||||
<button type="button" className="auth-back-link" onClick={() => navigate('login')}><Icon>arrow_back_ios_new</Icon>返回登录</button>
|
||||
<form className="auth-landing-form auth-register-form" onSubmit={submit}>
|
||||
<AppMark tenantName={sessionStorage.getItem('im-tenant-name') || '讯工捷迅'} />
|
||||
<FormAlert text={errorLevel === 'err' ? errorText : ''} />
|
||||
<Field value={form.username} onChange={e => setForm({...form, username: e.target.value.replace(/[^a-z0-9]/g, '').slice(0, 10)})}
|
||||
placeholder="请输入用户名" error={errors.username} autoComplete="username" />
|
||||
<Field value={form.phone} onChange={e => setForm({...form, phone: e.target.value.replace(/\D/g, '').slice(0, 11)})}
|
||||
placeholder="请输入手机号" error={errors.phone} inputMode="numeric" />
|
||||
<Field value={form.code} onChange={change('code')} placeholder="请输入短信验证码" inputMode="numeric"
|
||||
action={<VerificationButton phone={form.phone} />} />
|
||||
<Field value={form.code} onChange={e => setForm({...form, code: e.target.value.replace(/\D/g, '').slice(0, 6)})}
|
||||
placeholder="请输入短信验证码" inputMode="numeric" error={errors.code}
|
||||
action={<VerificationButton phone={form.phone} scene="register" onChallenge={setChallengeId}
|
||||
onError={msg => setErrors(e => ({...e, code: msg}))} />} />
|
||||
<PasswordField value={form.password} onChange={change('password')} placeholder="请输入密码" autoComplete="new-password" error={errors.password} />
|
||||
<Field value={form.invite} onChange={e => setForm({...form, invite: e.target.value.replace(/[^A-Za-z]/g, '').slice(0, 5)})}
|
||||
placeholder="请输入邀请码（非必填）" error={errors.invite} />
|
||||
<button className="auth-primary" type="submit" disabled={(!form.username && !form.phone) || !form.password || !agreed}>注册</button>
|
||||
<button className="auth-primary" type="submit" disabled={(!form.username && !form.phone) || !form.password || !agreed || submitting}>
|
||||
{submitting ? '注册中…' : '注册'}
|
||||
</button>
|
||||
<p className="auth-switch">已有讯工捷迅账号？ <button type="button" onClick={() => navigate('login')}>登录</button></p>
|
||||
</form>
|
||||
<Agreement checked={agreed} onChange={setAgreed} prefix="注册即认同捷讯" />
|
||||
<Toast message={toast} onDone={() => setToast('')} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
function PasswordReset() {
|
||||
const [form, setForm] = React.useState({phone: '', code: '', password: '', confirm: ''});
|
||||
const [challengeId, setChallengeId] = React.useState('');
|
||||
const [error, setError] = React.useState('');
|
||||
const [submitting, setSubmitting] = React.useState(false);
|
||||
const [toast, setToast] = React.useState('');
|
||||
const change = key => e => setForm({...form, [key]: e.target.value});
|
||||
const submit = e => {
|
||||
|
||||
const submit = async e => {
|
||||
e.preventDefault();
|
||||
if (!PHONE_RE.test(form.phone)) return setError('请输入 11 位手机号');
|
||||
if (form.password.length < 8 || form.password.length > 20) return setError('密码需为 8-20 位字母或数字组合');
|
||||
if (!challengeId || !/^\d{6}$/.test(form.code)) return setError('请先获取并输入 6 位验证码');
|
||||
// Matches Register's rule (>= 8, no upper bound -- the backend's own checkPasswordPolicy only
|
||||
// enforces a minimum length). This page used to also reject anything over 20 characters, a limit
|
||||
// invented here with no backend counterpart: a password set during registration could exceed
|
||||
// it, then resetting it back to that same value through this flow would be rejected -- a
|
||||
// self-inflicted lockout for password reset's own sake.
|
||||
if (form.password.length < 8) return setError('密码至少 8 位');
|
||||
if (form.password !== form.confirm) return setError('两次输入的密码不一致');
|
||||
setError(''); setToast('密码修改成功，请重新登录');
|
||||
window.setTimeout(() => navigate('login'), 1200);
|
||||
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
try {
|
||||
const verified = await verifyPasswordResetCode(challengeId, form.code);
|
||||
await confirmPasswordReset(verified.reset_token, form.password);
|
||||
setToast('密码修改成功，请重新登录');
|
||||
window.setTimeout(() => navigate('login'), 1200);
|
||||
} catch (err) {
|
||||
setError(err.message || '验证码错误或已过期');
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
return <div className="auth-page auth-soft-bg">
|
||||
<Header title="忘记密码" back="login" />
|
||||
<main className="auth-content auth-content-narrow auth-reset-content">
|
||||
<form className="auth-list-form" onSubmit={submit}>
|
||||
<label><span>手机号</span><input value={form.phone} onChange={e => setForm({...form, phone: e.target.value.replace(/\D/g, '').slice(0, 11)})} placeholder="请输入手机号" inputMode="numeric" /></label>
|
||||
<label><span>验证码</span><input value={form.code} onChange={change('code')} placeholder="请输入验证码" inputMode="numeric" /><VerificationButton phone={form.phone} scene="reset_password" /></label>
|
||||
<label><span>验证码</span><input value={form.code} onChange={e => setForm({...form, code: e.target.value.replace(/\D/g, '').slice(0, 6)})} placeholder="请输入验证码" inputMode="numeric" />
|
||||
<VerificationButton phone={form.phone} scene="reset_password" onChallenge={setChallengeId} onError={setError} /></label>
|
||||
<div className="auth-list-gap" />
|
||||
<label><span>设置密码</span><input type="password" value={form.password} onChange={change('password')} placeholder="8-20位字母或数字组合" /></label>
|
||||
<label><span>设置密码</span><input type="password" value={form.password} onChange={change('password')} placeholder="至少 8 位" /></label>
|
||||
<label><span>再次输入</span><input type="password" value={form.confirm} onChange={change('confirm')} placeholder="请再次确定密码" /></label>
|
||||
{error ? <div className="auth-form-alert"><Icon>error_outline</Icon>{error}</div> : null}
|
||||
<button className="auth-primary auth-sticky-action" type="submit" disabled={!form.phone || !form.code || !form.password || !form.confirm}>修改密码</button>
|
||||
<button className="auth-primary auth-sticky-action" type="submit"
|
||||
disabled={!form.phone || !form.code || !form.password || !form.confirm || submitting}>
|
||||
{submitting ? '提交中…' : '修改密码'}
|
||||
</button>
|
||||
</form>
|
||||
</main>
|
||||
<Toast message={toast} onDone={() => setToast('')} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
// Precedes 1.11 (setting the independent password): resolves the account's own verified phone
|
||||
// server-side (POST /v1/im/security/challenges never takes a phone number from the client) and, on
|
||||
// successful verify, stashes the resulting action_token for the next screen to spend.
|
||||
const IDENTITY_CHECK_SCENE = 'set_independent_password';
|
||||
|
||||
function IdentityCheck({authenticated}) {
|
||||
const [phone] = React.useState('138****8899');
|
||||
const [phoneMask, setPhoneMask] = React.useState('');
|
||||
const [challengeId, setChallengeId] = React.useState('');
|
||||
const [code, setCode] = React.useState('');
|
||||
const [toast, setToast] = React.useState('');
|
||||
return <div className="auth-page auth-soft-bg">
|
||||
const [seconds, setSeconds] = React.useState(0);
|
||||
const [busy, setBusy] = React.useState(false);
|
||||
const [error, setError] = React.useState('');
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!seconds) return undefined;
|
||||
const timer = window.setTimeout(() => setSeconds(s => s - 1), 1000);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [seconds]);
|
||||
|
||||
const requestCode = React.useCallback(async () => {
|
||||
setBusy(true);
|
||||
setError('');
|
||||
try {
|
||||
const data = await createSecurityChallenge(IDENTITY_CHECK_SCENE);
|
||||
setChallengeId(data.challenge_id);
|
||||
setPhoneMask(data.phone_mask);
|
||||
setSeconds(data.resend_after_seconds || 60);
|
||||
} catch (err) {
|
||||
setError(err.reason === 'REALNAME_REQUIRED' ? '需要先完成实名认证并绑定手机号' : (err.message || '获取验证码失败'));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => { requestCode(); }, [requestCode]);
|
||||
|
||||
const submit = async e => {
|
||||
e.preventDefault();
|
||||
if (!challengeId || code.length !== 6 || busy) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const data = await verifySecurityChallenge(challengeId, code);
|
||||
sessionStorage.setItem('im-action-token:' + IDENTITY_CHECK_SCENE, JSON.stringify(data));
|
||||
navigate('independent-password');
|
||||
} catch (err) {
|
||||
setError(err.message || '验证码错误');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return <div className="auth-page auth-soft-bg auth-identity-check-page">
|
||||
<Header title="身份验证" back={authenticated ? 'security' : 'login'} />
|
||||
<main className="auth-content auth-content-narrow auth-reset-content">
|
||||
<form className="auth-list-form" onSubmit={e => { e.preventDefault(); setToast('身份验证成功'); }}>
|
||||
<label><span>手机号</span><input value={phone} readOnly /></label>
|
||||
<label><span>验证码</span><input value={code} onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))} placeholder="请输入验证码" inputMode="numeric" /><VerificationButton phone="13800008899" scene="security" /></label>
|
||||
<button className="auth-primary auth-sticky-action" type="submit" disabled={code.length !== 6}>确定</button>
|
||||
<form className="auth-list-form" onSubmit={submit}>
|
||||
<label><span>手机号</span><input value={phoneMask} readOnly placeholder="获取中…" /></label>
|
||||
<label><span>验证码</span>
|
||||
<input value={code} onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))} placeholder="请输入验证码" inputMode="numeric" />
|
||||
<button type="button" className="auth-code-button" disabled={busy || seconds > 0} onClick={requestCode}>
|
||||
{seconds > 0 ? `${seconds}s` : '获取验证码'}
|
||||
</button>
|
||||
</label>
|
||||
{error ? <div className="auth-field-error">{error}</div> : null}
|
||||
<button className="auth-primary auth-sticky-action" type="submit" disabled={code.length !== 6 || busy}>确定</button>
|
||||
</form>
|
||||
</main>
|
||||
<Toast message={toast} onDone={() => setToast('')} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
function Realname({verified = false, authenticated = false}) {
|
||||
const [name, setName] = React.useState(verified ? '蒋欣' : '');
|
||||
const [idNumber, setIdNumber] = React.useState(verified ? '43993838581999355454' : '');
|
||||
const [status, setStatus] = React.useState(verified ? 'verified' : 'unverified');
|
||||
function Realname({authenticated = false}) {
|
||||
// Real status (unverified/pending/verified/rejected) drives the view -- the old mock's `verified`
|
||||
// prop toggle is gone, both 'realname' and 'realname-verified' routes render this and let the
|
||||
// GET /v1/im/security/realname response decide what to show.
|
||||
const [status, setStatus] = React.useState('loading');
|
||||
const [maskedName, setMaskedName] = React.useState('');
|
||||
const [maskedIdNumber, setMaskedIdNumber] = React.useState('');
|
||||
const [name, setName] = React.useState('');
|
||||
const [idNumber, setIdNumber] = React.useState('');
|
||||
const [error, setError] = React.useState('');
|
||||
const submit = e => {
|
||||
const [busy, setBusy] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
getRealnameStatus().then(data => {
|
||||
setStatus(data.status);
|
||||
setMaskedName(data.masked_name || '');
|
||||
setMaskedIdNumber(data.masked_id_number || '');
|
||||
}).catch(err => { setError(err.message || '加载实名状态失败'); setStatus('load_error'); });
|
||||
}, []);
|
||||
|
||||
const editable = status === 'unverified' || status === 'rejected';
|
||||
|
||||
const submit = async e => {
|
||||
e.preventDefault();
|
||||
if (name.trim().length < 2 || !/^\d{17}[\dXx]$/.test(idNumber)) {
|
||||
setError('请输入有效姓名和 18 位身份证号码'); return;
|
||||
}
|
||||
setStatus('pending'); setError('');
|
||||
setBusy(true);
|
||||
try {
|
||||
// Backend's validIMRealName only accepts the literal 'cn_id' -- 'id_card' was rejected outright
|
||||
// with a 400 every time, so real-name submission never actually worked.
|
||||
const data = await submitRealname({name: name.trim(), id_type: 'cn_id', id_number: idNumber.toUpperCase()});
|
||||
setStatus(data.status || 'pending');
|
||||
setError('');
|
||||
} catch (err) {
|
||||
setError(err.message || '提交失败，请稍后重试');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (status === 'loading' || status === 'load_error') {
|
||||
return <div className="auth-page auth-realname-page"><Header title="实名认证" back={authenticated ? 'security' : 'login'} />
|
||||
<p className="auth-privacy-note" style={{margin: '2rem 1rem'}}>{status === 'load_error' ? (error || '加载失败，请重试') : '加载中…'}</p>
|
||||
</div>;
|
||||
}
|
||||
|
||||
return <div className="auth-page auth-realname-page">
|
||||
<Header title="实名认证" back={authenticated ? 'security' : 'login'} />
|
||||
<div className="auth-realname-hero"><div><strong>实名认证</strong><span>更加真实，更受欢迎</span></div><Icon>verified_user</Icon></div>
|
||||
<main className="auth-realname-content">
|
||||
<h2>{status === 'verified' ? '认证信息' : '请您使用有效身份证信息认证'}</h2>
|
||||
<form onSubmit={submit}>
|
||||
<label><span>姓名</span><input value={status === 'verified' ? name[0] + '*' : name} onChange={e => setName(e.target.value)} readOnly={status !== 'unverified'} placeholder="请输入真实姓名" /></label>
|
||||
<label><span>证件号码</span><input value={status === 'verified' ? idNumber.slice(0, 3) + '***********' + idNumber.slice(-4) : idNumber} onChange={e => setIdNumber(e.target.value)} readOnly={status !== 'unverified'} placeholder="请输入证件号码" /></label>
|
||||
<label><span>姓名</span><input value={editable ? name : maskedName} onChange={e => setName(e.target.value)} readOnly={!editable} placeholder="请输入真实姓名" /></label>
|
||||
<label><span>证件号码</span><input value={editable ? idNumber : maskedIdNumber} onChange={e => setIdNumber(e.target.value)} readOnly={!editable} placeholder="请输入证件号码" /></label>
|
||||
{error ? <div className="auth-field-error">{error}</div> : null}
|
||||
<button className="auth-primary" type="submit" disabled={status !== 'unverified'}>{status === 'verified' ? '已实名' : status === 'pending' ? '审核中' : '提交'}</button>
|
||||
<button className="auth-primary" type="submit" disabled={!editable || busy}>
|
||||
{status === 'verified' ? '已实名' : status === 'pending' ? '审核中' : busy ? '提交中…' : '提交'}
|
||||
</button>
|
||||
</form>
|
||||
<p className="auth-privacy-note"><Icon>info</Icon>我们将获取您的姓名、证件号用于认证，信息会被严格保护</p>
|
||||
</main>
|
||||
@@ -384,7 +654,7 @@ function RealnameReminder() {
|
||||
return <div className="auth-page auth-reminder-demo">
|
||||
<div className="auth-demo-chat"><h1>消息</h1><div className="auth-demo-search"><Icon>search</Icon>搜索</div>{['系统消息', '文件助手', '项目协作群', '陈经理'].map((item, i) => <div className="auth-demo-row" key={item}><span>{item[0]}</span><div><b>{item}</b><small>{i ? '最近一条消息内容' : '安全通知与账号动态'}</small></div></div>)}</div>
|
||||
<div className="auth-modal-backdrop">
|
||||
<div className="auth-modal"><h2>实名认证提醒</h2><p>根据国家法律法规要求，您需先进行实名认证才能使用该应用</p><button className="auth-primary" onClick={() => navigate('realname')}>去实名认证</button><button className="auth-text-button" onClick={() => navigate('tenant')}>稍后处理</button></div>
|
||||
<div className="auth-modal"><h2>实名认证提醒</h2><p>根据国家法律法规要求，您需先进行实名认证才能使用该项 APP</p><button className="auth-primary" onClick={() => navigate('realname')}>去实名认证</button></div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
@@ -393,11 +663,25 @@ function IndependentPassword({authenticated}) {
|
||||
const [pin, setPin] = React.useState('');
|
||||
const [error, setError] = React.useState('');
|
||||
const [toast, setToast] = React.useState('');
|
||||
const [busy, setBusy] = React.useState(false);
|
||||
// Mirrors server/im_http.go validIMIndependentPassword: 4 digits, not all-same, not a run.
|
||||
const invalid = ['0000','1111','2222','3333','4444','5555','6666','7777','8888','9999','0123','1234','2345','3456','4567','5678','6789','9876','8765','7654','6543','5432','4321','3210'];
|
||||
const submit = e => {
|
||||
const submit = async e => {
|
||||
e.preventDefault();
|
||||
if (invalid.includes(pin)) { setError('请勿使用连续或重复数字'); return; }
|
||||
setError(''); setToast('独立密码设置成功'); setPin('');
|
||||
const stored = sessionStorage.getItem('im-action-token:' + IDENTITY_CHECK_SCENE);
|
||||
const actionToken = stored && JSON.parse(stored).action_token;
|
||||
if (!actionToken) { setError('身份验证已过期，请返回重新验证'); return; }
|
||||
setBusy(true);
|
||||
try {
|
||||
await setIndependentPassword(pin, 'youth_mode', actionToken);
|
||||
sessionStorage.removeItem('im-action-token:' + IDENTITY_CHECK_SCENE);
|
||||
setError(''); setToast('独立密码设置成功'); setPin('');
|
||||
} catch (err) {
|
||||
setError(err.message || '设置失败，请返回重新验证身份');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
return <div className="auth-page">
|
||||
<Header title="" back={authenticated ? 'security' : 'login'} />
|
||||
@@ -406,26 +690,31 @@ function IndependentPassword({authenticated}) {
|
||||
<div className="auth-pin-boxes" aria-hidden="true">{[0,1,2,3].map(i => <span key={i}>{pin[i] ? '●' : ''}</span>)}</div>
|
||||
<input className="auth-pin-input" type="text" value={pin} onChange={e => setPin(e.target.value.replace(/\D/g, '').slice(0, 4))} inputMode="numeric" autoComplete="off" aria-label="四位独立密码" autoFocus />
|
||||
{error ? <div className="auth-field-error">{error}</div> : null}
|
||||
<button className="auth-primary" disabled={pin.length !== 4} onClick={submit}>确定</button>
|
||||
<button className="auth-primary" disabled={pin.length !== 4 || busy} onClick={submit}>{busy ? '提交中…' : '确定'}</button>
|
||||
</main>
|
||||
<Toast message={toast} onDone={() => setToast('')} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
export default function AuthOnboardingView({view, onTenantSelected, authenticated = false}) {
|
||||
export default function AuthOnboardingView({
|
||||
view, onTenantResolved, authenticated = false,
|
||||
login, loginDisabled, persist, errorText, errorLevel,
|
||||
onLoginRequest, onPersistenceChange, onImRegisterRequest, onError
|
||||
}) {
|
||||
const tenantName = sessionStorage.getItem('im-tenant-name') || '';
|
||||
switch (view) {
|
||||
case 'tenant': return <TenantEntry onTenantSelected={onTenantSelected || (() => {})} />;
|
||||
case 'login': return <Login tenantName={tenantName} />;
|
||||
case 'tenant': return <TenantEntry onTenantResolved={onTenantResolved || (() => {})} />;
|
||||
case 'login': return <Login tenantName={tenantName} login={login} loginDisabled={loginDisabled} persist={persist}
|
||||
errorText={errorText} errorLevel={errorLevel} onLoginRequest={onLoginRequest} onPersistenceChange={onPersistenceChange} onError={onError} />;
|
||||
case 'enterprise-register': return <EnterpriseRegister />;
|
||||
case 'enterprise-feedback': return <EnterpriseFeedback />;
|
||||
case 'register': return <Register />;
|
||||
case 'register': return <Register errorText={errorText} errorLevel={errorLevel} onImRegisterRequest={onImRegisterRequest} />;
|
||||
case 'reset': return <PasswordReset />;
|
||||
case 'identity-check': return <IdentityCheck authenticated={authenticated} />;
|
||||
case 'realname': return <Realname authenticated={authenticated} />;
|
||||
case 'realname-verified': return <Realname verified authenticated={authenticated} />;
|
||||
case 'realname-verified': return <Realname authenticated={authenticated} />;
|
||||
case 'realname-reminder': return <RealnameReminder />;
|
||||
case 'independent-password': return <IndependentPassword authenticated={authenticated} />;
|
||||
default: return <TenantEntry onTenantSelected={onTenantSelected || (() => {})} />;
|
||||
default: return <TenantEntry onTenantResolved={onTenantResolved || (() => {})} />;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user