313 lines
13 KiB
TypeScript
313 lines
13 KiB
TypeScript
'use client';
|
||
|
||
import Image from 'next/image';
|
||
import Link from 'next/link';
|
||
import { useSearchParams } from 'next/navigation';
|
||
import { useState } from 'react';
|
||
|
||
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
|
||
import { buildFrontendHandoffUrl, configureProviderOnboarding, register, withNext } from '@/lib/auth-client';
|
||
import { pickPortalText } from '@/lib/i18n/core';
|
||
import { usePortalI18n } from '@/lib/i18n/provider';
|
||
import type { TokenResponse } from '@/types/auth';
|
||
|
||
const PROVIDER_OPTIONS = [
|
||
{ id: 'openrouter', label: 'OpenRouter', model: 'openrouter/anthropic/claude-sonnet-4.5' },
|
||
{ id: 'openai', label: 'OpenAI', model: 'openai/gpt-5' },
|
||
{ id: 'anthropic', label: 'Anthropic', model: 'claude-sonnet-4.5' },
|
||
{ id: 'dashscope', label: 'DashScope', model: 'qwen-plus' },
|
||
{ id: 'deepseek', label: 'DeepSeek', model: 'deepseek-chat' },
|
||
{ id: 'gemini', label: 'Gemini', model: 'gemini/gemini-2.5-pro' },
|
||
{ id: 'moonshot', label: 'Moonshot', model: 'moonshot/kimi-k2.5' },
|
||
{ id: 'minimax', label: 'MiniMax', model: 'minimax/minimax-m1' },
|
||
{ id: 'siliconflow', label: 'SiliconFlow', model: 'Qwen/Qwen3-32B' },
|
||
{ id: 'volcengine', label: 'VolcEngine', model: 'volcengine/deepseek-v3' },
|
||
{ id: 'vllm', label: 'vLLM / Local', model: 'hosted_vllm/local-model' },
|
||
];
|
||
|
||
export default function RegisterPage() {
|
||
const { locale } = usePortalI18n();
|
||
const searchParams = useSearchParams();
|
||
const nextPath = searchParams?.get('next') || '/mcp';
|
||
|
||
const [username, setUsername] = useState('');
|
||
const [email, setEmail] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [confirmPassword, setConfirmPassword] = useState('');
|
||
const [registrationResponse, setRegistrationResponse] = useState<TokenResponse | null>(null);
|
||
const [provider, setProvider] = useState(PROVIDER_OPTIONS[0].id);
|
||
const [model, setModel] = useState(PROVIDER_OPTIONS[0].model);
|
||
const [apiKey, setApiKey] = useState('');
|
||
const [apiBase, setApiBase] = useState('');
|
||
const [showPassword, setShowPassword] = useState(false);
|
||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||
const [showApiKey, setShowApiKey] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
const [onboardingLoading, setOnboardingLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const [onboardingError, setOnboardingError] = useState('');
|
||
|
||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||
event.preventDefault();
|
||
setLoading(true);
|
||
setError('');
|
||
|
||
try {
|
||
if (password !== confirmPassword) {
|
||
throw new Error(pickPortalText(locale, '两次输入的密码不一致', 'Passwords do not match'));
|
||
}
|
||
const response = await register(username, email, password);
|
||
setRegistrationResponse(response);
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : pickPortalText(locale, '注册失败，请稍后重试', 'Sign-up failed. Please try again.'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleProviderChange = (value: string) => {
|
||
const previousDefault = PROVIDER_OPTIONS.find((item) => item.id === provider)?.model;
|
||
const selected = PROVIDER_OPTIONS.find((item) => item.id === value);
|
||
setProvider(value);
|
||
if (selected && (!model.trim() || model === previousDefault)) {
|
||
setModel(selected.model);
|
||
}
|
||
};
|
||
|
||
const continueWithoutProvider = () => {
|
||
if (!registrationResponse) return;
|
||
window.location.replace(buildFrontendHandoffUrl(registrationResponse, nextPath));
|
||
};
|
||
|
||
const handleProviderSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||
event.preventDefault();
|
||
if (!registrationResponse) return;
|
||
setOnboardingLoading(true);
|
||
setOnboardingError('');
|
||
|
||
try {
|
||
const response = await configureProviderOnboarding({
|
||
username,
|
||
password,
|
||
provider,
|
||
model,
|
||
api_key: apiKey,
|
||
api_base: apiBase,
|
||
});
|
||
window.location.replace(buildFrontendHandoffUrl(response, nextPath));
|
||
} catch (err) {
|
||
setOnboardingError(err instanceof Error ? err.message : pickPortalText(locale, '模型配置失败，请检查后重试', 'Provider setup failed. Check the values and try again.'));
|
||
} finally {
|
||
setOnboardingLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<main className="portal-page">
|
||
<div className="portal-toolbar">
|
||
<LanguageSwitcher />
|
||
</div>
|
||
<section className="auth-page">
|
||
<div className="portal-panel">
|
||
{registrationResponse ? (
|
||
<div className="auth-card login-card register-card">
|
||
<BrandHeader title={pickPortalText(locale, '配置模型', 'Model Setup')} />
|
||
|
||
<form className="auth-form" onSubmit={handleProviderSubmit}>
|
||
<div className="field login-field">
|
||
<label className="visually-hidden" htmlFor="provider">{pickPortalText(locale, '模型提供商', 'Model provider')}</label>
|
||
<select
|
||
id="provider"
|
||
value={provider}
|
||
onChange={(event) => handleProviderChange(event.target.value)}
|
||
disabled={onboardingLoading}
|
||
>
|
||
{PROVIDER_OPTIONS.map((item) => (
|
||
<option key={item.id} value={item.id}>{item.label}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="field login-field">
|
||
<label className="visually-hidden" htmlFor="model">{pickPortalText(locale, '模型', 'Model')}</label>
|
||
<input
|
||
id="model"
|
||
value={model}
|
||
onChange={(event) => setModel(event.target.value)}
|
||
placeholder={pickPortalText(locale, '模型', 'Model')}
|
||
required
|
||
disabled={onboardingLoading}
|
||
/>
|
||
</div>
|
||
|
||
<div className="field login-field">
|
||
<label className="visually-hidden" htmlFor="apiKey">API Key</label>
|
||
<input
|
||
id="apiKey"
|
||
type={showApiKey ? 'text' : 'password'}
|
||
value={apiKey}
|
||
onChange={(event) => setApiKey(event.target.value)}
|
||
autoComplete="off"
|
||
placeholder={provider === 'vllm' ? pickPortalText(locale, 'API Key 可选', 'API key optional') : 'API Key'}
|
||
required={provider !== 'vllm'}
|
||
disabled={onboardingLoading}
|
||
/>
|
||
<VisibilityButton
|
||
active={showApiKey}
|
||
onClick={() => setShowApiKey((value) => !value)}
|
||
label={pickPortalText(locale, showApiKey ? '隐藏 API Key' : '显示 API Key', showApiKey ? 'Hide API key' : 'Show API key')}
|
||
/>
|
||
</div>
|
||
|
||
<div className="field login-field">
|
||
<label className="visually-hidden" htmlFor="apiBase">API Base</label>
|
||
<input
|
||
id="apiBase"
|
||
value={apiBase}
|
||
onChange={(event) => setApiBase(event.target.value)}
|
||
placeholder="API Base"
|
||
disabled={onboardingLoading}
|
||
/>
|
||
</div>
|
||
|
||
<div className="error-text">{onboardingError}</div>
|
||
|
||
<button className="primary-button" type="submit" disabled={onboardingLoading}>
|
||
{onboardingLoading ? pickPortalText(locale, '写入中...', 'Saving...') : <ArrowRightIcon />}
|
||
</button>
|
||
<button className="secondary-button" type="button" onClick={continueWithoutProvider} disabled={onboardingLoading}>
|
||
{pickPortalText(locale, '跳过', 'Skip')}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
) : (
|
||
<div className="auth-card login-card register-card">
|
||
<BrandHeader title="Beaver AgentSandbox" />
|
||
|
||
<form className="auth-form" onSubmit={handleSubmit}>
|
||
<div className="field login-field">
|
||
<label className="visually-hidden" htmlFor="username">{pickPortalText(locale, '用户名', 'Username')}</label>
|
||
<input
|
||
id="username"
|
||
value={username}
|
||
onChange={(event) => setUsername(event.target.value)}
|
||
autoComplete="username"
|
||
placeholder={pickPortalText(locale, '用户名', 'Username')}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="field login-field">
|
||
<label className="visually-hidden" htmlFor="email">{pickPortalText(locale, '邮箱', 'Email')}</label>
|
||
<input
|
||
id="email"
|
||
type="email"
|
||
value={email}
|
||
onChange={(event) => setEmail(event.target.value)}
|
||
autoComplete="email"
|
||
placeholder={pickPortalText(locale, '邮箱', 'Email')}
|
||
/>
|
||
</div>
|
||
|
||
<div className="field login-field">
|
||
<label className="visually-hidden" htmlFor="password">{pickPortalText(locale, '密码', 'Password')}</label>
|
||
<input
|
||
id="password"
|
||
type={showPassword ? 'text' : 'password'}
|
||
value={password}
|
||
onChange={(event) => setPassword(event.target.value)}
|
||
autoComplete="new-password"
|
||
placeholder={pickPortalText(locale, '密码', 'Password')}
|
||
required
|
||
/>
|
||
<VisibilityButton
|
||
active={showPassword}
|
||
onClick={() => setShowPassword((value) => !value)}
|
||
label={pickPortalText(locale, showPassword ? '隐藏密码' : '显示密码', showPassword ? 'Hide password' : 'Show password')}
|
||
/>
|
||
</div>
|
||
|
||
<div className="field login-field">
|
||
<label className="visually-hidden" htmlFor="confirmPassword">{pickPortalText(locale, '确认密码', 'Confirm password')}</label>
|
||
<input
|
||
id="confirmPassword"
|
||
type={showConfirmPassword ? 'text' : 'password'}
|
||
value={confirmPassword}
|
||
onChange={(event) => setConfirmPassword(event.target.value)}
|
||
autoComplete="new-password"
|
||
placeholder={pickPortalText(locale, '确认密码', 'Confirm password')}
|
||
required
|
||
/>
|
||
<VisibilityButton
|
||
active={showConfirmPassword}
|
||
onClick={() => setShowConfirmPassword((value) => !value)}
|
||
label={pickPortalText(locale, showConfirmPassword ? '隐藏确认密码' : '显示确认密码', showConfirmPassword ? 'Hide confirm password' : 'Show confirm password')}
|
||
/>
|
||
</div>
|
||
|
||
<div className="error-text">{error}</div>
|
||
|
||
<button className="primary-button" type="submit" disabled={loading}>
|
||
{loading ? pickPortalText(locale, '注册中...', 'Creating...') : <ArrowRightIcon />}
|
||
</button>
|
||
</form>
|
||
|
||
<div className="login-divider">
|
||
<span>{pickPortalText(locale, '或', 'or')}</span>
|
||
</div>
|
||
|
||
<div className="auth-footer login-footer">
|
||
<span>{pickPortalText(locale, '已有账号？', 'Already have an account?')}</span>
|
||
<Link href={withNext('/login', nextPath)}>{pickPortalText(locale, '登录', 'Sign in')} <span aria-hidden="true">›</span></Link>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function BrandHeader({ title }: { title: string }) {
|
||
return (
|
||
<>
|
||
<Image
|
||
src="/boardware-logo.jpg"
|
||
alt="Boardware logo"
|
||
width={120}
|
||
height={120}
|
||
className="login-logo"
|
||
priority
|
||
/>
|
||
<h1>{title}</h1>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function VisibilityButton({ active, label, onClick }: { active: boolean; label: string; onClick: () => void }) {
|
||
return (
|
||
<button className="ghost-icon-button" type="button" onClick={onClick} aria-label={label} aria-pressed={active}>
|
||
<EyeIcon />
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function EyeIcon() {
|
||
return (
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M3.75 12s2.8-5.25 8.25-5.25S20.25 12 20.25 12s-2.8 5.25-8.25 5.25S3.75 12 3.75 12Z" />
|
||
<path d="m4.75 4.75 14.5 14.5" />
|
||
<path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function ArrowRightIcon() {
|
||
return (
|
||
<svg className="button-arrow" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M5 12h13" />
|
||
<path d="m13 6 6 6-6 6" />
|
||
</svg>
|
||
);
|
||
}
|