# Register2 Component

## Overview

`Register2` 是登录体系的注册端，实现邮箱、手机号、验证码、邮件链接以及 OAuth 注册。组件以配置驱动，提供分步骤流程（账号 → 验证 → 设置密码），与 `Login2` 共享多项交互优化与密码规则。

## Props

| Prop | Type | Description | Default |
|------|------|-------------|---------|
| `config` | `Register2Config` | 注册配置 | — |
| `visible` | `boolean` | 是否展示组件 | `true` |
| `onClose` | `() => void` | 关闭回调 | — |
| `className` | `string` | 自定义类名 | — |
| `style` | `React.CSSProperties` | 自定义样式 | — |
| `onRegister` | `(originResult, method, data, channel) => void` | 注册成功回调 | — |
| `onOAuthLogin` | `(provider, channel) => void` | OAuth 注册回调 | — |
| `onSendVerificationCode` | `(account, type, channel) => void` | 发送验证码回调 | — |
| `onEmailLinkExpired` | `() => void` | 邮件链接过期回调 | — |
| `onGoToLogin` | `() => void` | 前往登录回调 | — |
| `onError` | `(error, method) => void` | 错误回调 | — |

### `Register2Config`

```ts
interface Register2Config {
  registrationMethods?: RegistrationMethodItem[]; // 注册方式（推荐）
  email?: EmailAuthConfig;                         // 旧邮箱配置（兼容）
  phone?: PhoneAuthConfig;                         // 旧手机配置（兼容）
  oauth?: OAuthConfig;                             // 第三方注册
  defaultAuthMethod?: AuthMethodType;              // 默认方式
  channel?: string;                                // 渠道标识
  ui?: UIConfig;                                   // UI 定制（含 passwordRules、文案等）
  emailLinkVerification?: { enabled: boolean; code: string };
  legalTerms?: LegalTermsConfig;
}
```

与登录类似，`registrationMethods` 支持邮箱、手机、Google、Apple、Facebook 等，并可声明验证手段（验证码 / 链接）以及多步骤流程。

### 密码规则

`config.ui?.passwordRules` 与 `Login2` 共用 `usePasswordValidationRules`：

```ts
ui: {
  passwordRules?: {
    minLength?: number;
    requireUppercase?: boolean;
    requireLowercase?: boolean;
    requireNumber?: boolean;
    requireSpecialCharacters?: boolean;
  };
}
```

规则会自动体现在注册表单与设置密码步骤中，相关提示文本使用 `pisell-register2-*` 与 `pisell-set-password-*` 文案，可自由在多语言包里覆盖。

## Key Features

- **流程解耦**：初始表单、验证码校验、邮件链接、设置密码、完成页面通过 `RegisterStep` 拆分，阅读与维护更轻松。
- **复用能力**：`usePasswordValidationRules`、`OAuthButtonGroup` 与 `Login2` 共用，简化逻辑重复。
- **错误呈现**：验证码错误直接在 `CodeInput` 下方展示，并清空输入框；避免频繁的 `message.error`。
- **浏览器适配**：隐藏 `username` 字段、动态 `input name` 降低自动填充干扰，密码字段在弹层关闭时自动清空。

## Usage Example

```tsx
import Register2, { Register2Config } from '@pisell/private-materials/pro/Login2.0';

const config: Register2Config = {
  registrationMethods: [
    {
      type: 'email',
      verificationMethod: 'verification_code',
    },
    {
      type: 'phone',
      verificationMethod: 'verification_code',
    },
    { type: 'google' },
  ],
  ui: {
    passwordRules: {
      minLength: 8,
      requireUppercase: true,
      requireNumber: true,
    },
  },
};

export default function RegisterExample() {
  return (
    <Register2
      config={config}
      onRegister={(result, method, data) => {
        console.log('register success', method, data, result);
      }}
      onGoToLogin={() => console.log('switch to login')}
    />
  );
}
```

## Best Practices

1. **统一配置**：优先通过 `registrationMethods` 维护注册方式，保留旧配置仅用于兼容。
2. **密码提示**：根据 `passwordRules` 提前告知密码要求，并在设置密码页复用相同规则。
3. **分步骤体验**：邮箱/手机可启用 `verificationMethod` 与 `stepByStep` 组合，营造顺滑的账号 → 验证 → 密码流程。
4. **错误集中处理**：利用 `onError` 与内部错误提示位，保持业务日志与用户提示的统一。