# Login2 测试配置指南

## 快速测试配置

### 1. 分步骤邮箱登录 + Google + Facebook

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "email",
        "verificationMethods": ["password", "verification_code"],
        "stepByStep": true
      },
      {
        "type": "google",
        "clientId": "your-google-client-id"
      },
      {
        "type": "facebook",
        "appId": "your-facebook-app-id"
      }
    ],
    "ui": {
      "title": {
        "show": true,
        "text": "Welcome to BBPet",
        "align": "center"
      },
      "subtitle": {
        "show": true,
        "text": "Log in to your account",
        "align": "center"
      },
      "desc": {
        "show": true,
        "text": "Welcome back! Please enter your details.",
        "align": "center"
      },
      "themeColor": "#7F56D9"
    }
  }
}
```

**预期效果：**
- 第一步：邮箱输入框 + "Continue with email" 按钮
- 点击后进入第二步：显示邮箱（只读）+ 密码输入框
- 底部显示："Email code to xxx" 切换选项
- OR 分隔符
- Google 和 Facebook 按钮

### 2. 单步邮箱登录（传统模式）

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "email",
        "verificationMethods": ["password", "verification_code"],
        "stepByStep": false
      }
    ]
  }
}
```

**预期效果：**
- 邮箱和密码在同一页面
- Remember me + Forgot password
- Log in 按钮
- 底部："Email code to xxx" 切换选项

### 3. 手机分步骤登录

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "phone",
        "verificationMethods": ["password"],
        "stepByStep": true
      }
    ]
  }
}
```

**预期效果：**
- 第一步：手机号输入框 + "Continue with phone" 按钮
- 第二步：手机号（只读）+ 密码输入框 + Log in + Back

### 4. 多种登录方式混合

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "email",
        "verificationMethods": ["password", "verification_code"],
        "stepByStep": true
      },
      {
        "type": "google",
        "clientId": "xxx"
      },
      {
        "type": "phone",
        "verificationMethods": ["verification_code", "password"],
        "stepByStep": false
      },
      {
        "type": "apple",
        "clientId": "xxx"
      }
    ]
  }
}
```

**预期效果：**
- 主表单：邮箱分步骤登录
- 底部切换区域：
  - 📧 Email code to xxx
  - 📱 Phone login
  - Google 按钮
  - Apple 按钮

### 5. 纯第三方登录

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "google",
        "clientId": "xxx"
      },
      {
        "type": "facebook",
        "appId": "xxx"
      },
      {
        "type": "apple",
        "clientId": "xxx"
      }
    ]
  }
}
```

**预期效果：**
- 只显示 Google 按钮（主要）
- OR 分隔符
- Facebook 和 Apple 按钮

## 在低代码编辑器中测试

### 步骤 1：拖入组件

1. 从组件库拖入 "登录 2.0（推荐配置）"
2. 默认已配置好分步骤邮箱登录

### 步骤 2：修改配置

在右侧属性面板中：

1. **登录方式配置（推荐）** 组
   - 点击 "登录方式列表"
   - 添加/删除/重新排序登录方式
   - 对邮箱/手机登录方式：
     - 勾选 "分步骤登录（密码）" 启用分步骤模式
     - 设置 "验证方式" 数组（第一项为默认）

2. **UI 配置** 组
   - 修改标题、副标题、描述
   - 修改主题色

3. **其他配置** 组
   - 设置 "渠道标识"（可选）

### 步骤 3：绑定事件

在右侧属性面板底部 "事件" 区域：

```javascript
// onLogin
function(data, method, channel) {
  console.log('Login:', data, method, channel);
  // data = { account, password, verification_code, remember_me }
}

// onSendVerificationCode
function(account, type, channel) {
  console.log('Send code to:', account, type, channel);
}

// onOAuthLogin
function(provider, channel) {
  console.log('OAuth login:', provider, channel);
}

// onForgotPassword
function(account, channel) {
  console.log('Forgot password:', account, channel);
}
```

### 步骤 4：预览测试

点击 "预览" 按钮，测试以下场景：

#### 分步骤登录测试
1. 输入邮箱 → 点击 "Continue with email"
2. 查看是否进入密码页
3. 点击 "Back" 按钮
4. 查看是否返回邮箱输入页

#### 验证方式切换测试
1. 在邮箱密码页，点击底部 "Email code to xxx"
2. 查看是否切换到验证码输入模式
3. 点击 "Password login" 切换回密码模式

#### 登录方式切换测试
1. 点击底部 "Phone login"
2. 查看是否切换到手机登录表单
3. 查看手机登录的默认验证方式是否正确

## 常见问题

### Q1: 分步骤模式不生效？
**检查：**
- `stepByStep` 是否设置为 `true`
- `verificationMethods` 中是否包含 `'password'`
- 当前是否在密码登录模式（不是验证码模式）

### Q2: 底部切换选项不显示？
**检查：**
- `loginMethods` 数组是否有多个项
- 或邮箱/手机登录方式的 `verificationMethods` 是否有多个

### Q3: 第三方登录按钮不显示？
**检查：**
- `type` 是否正确（'google'/'facebook'/'apple'）
- 是否在 `loginMethods` 数组中

### Q4: 样式不对？
**检查：**
- `ui.themeColor` 是否设置
- 组件是否正确导入样式文件

## 调试技巧

1. **查看 console.log**
   - 组件内部有多个 `console.log` 用于调试
   - 检查 `normalizedLoginMethods` 输出
   - 检查 `currentLoginMethod` 和 `loginStep` 状态

2. **使用 React DevTools**
   - 查看组件 state
   - 查看 props 传递是否正确

3. **分步测试**
   - 先测试单一登录方式
   - 再测试多种登录方式组合
   - 最后测试分步骤功能

## 配置模板

### 图片中的配置（分步骤邮箱 + 三方）

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "email",
        "verificationMethods": ["password"],
        "stepByStep": true
      },
      {
        "type": "google",
        "clientId": ""
      },
      {
        "type": "facebook",
        "appId": ""
      },
      {
        "type": "apple",
        "clientId": ""
      }
    ],
    "ui": {
      "logo": {
        "show": true,
        "url": "https://your-logo-url.png",
        "position": "center"
      },
      "title": {
        "show": true,
        "text": "Welcome to BBPet",
        "align": "center"
      },
      "subtitle": {
        "show": true,
        "text": "Log in to your account",
        "align": "center"
      },
      "desc": {
        "show": true,
        "text": "Welcome back! Please enter your details.",
        "align": "center"
      },
      "themeColor": "#7F56D9"
    }
  }
}
```