import type { CurrentUser, SiteSettings } from '../env';
import { Layout } from './layout';

export function RegisterPage(props: {
  settings: SiteSettings;
  currentUser: CurrentUser | null;
  csrfToken: string;
  links: Array<{ id: string; name: string; url: string; avatar: string | null; description: string; category: string }>;
}) {
  return (
    <Layout settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} links={props.links} title="注册" showHero={false}>
      <section class="standalone-auth">
        <h1>注册账号</h1>
        {props.settings.allow_register ? (
          <form data-auth-form="register">
            <label><span>用户名</span><input name="username" pattern="[a-zA-Z0-9_]{3,20}" maxlength={20} required /></label>
            <label><span>邮箱</span><input name="email" type="email" required /></label>
            <label><span>昵称</span><input name="displayName" maxlength={24} required /></label>
            <label><span>密码</span><input name="password" type="password" minlength={8} required /></label>
            <button class="primary-button" type="submit">注册并登录</button>
          </form>
        ) : (
          <p class="empty-state">已关闭注册</p>
        )}
      </section>
    </Layout>
  );
}
