new-api/web/src/components/common/modals/SecureVerificationModal.jsx

/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Modal, Button, Input, Typography, Tabs, TabPane, Space, Spin } from '@douyinfe/semi-ui';

/**
 * 通用安全验证模态框组件
 * 配合 useSecureVerification Hook 使用
 * @param {Object} props
 * @param {boolean} props.visible - 是否显示模态框
 * @param {Object} props.verificationMethods - 可用的验证方式
 * @param {Object} props.verificationState - 当前验证状态
 * @param {Function} props.onVerify - 验证回调
 * @param {Function} props.onCancel - 取消回调
 * @param {Function} props.onCodeChange - 验证码变化回调
 * @param {Function} props.onMethodSwitch - 验证方式切换回调
 * @param {string} props.title - 模态框标题
 * @param {string} props.description - 验证描述文本
 */
const SecureVerificationModal = ({
  visible,
  verificationMethods,
  verificationState,
  onVerify,
  onCancel,
  onCodeChange,
  onMethodSwitch,
  title,
  description,
}) => {
  const { t } = useTranslation();
  const [isAnimating, setIsAnimating] = useState(false);
  const [verifySuccess, setVerifySuccess] = useState(false);

  const { has2FA, hasPasskey, passkeySupported } = verificationMethods;
  const { method, loading, code } = verificationState;

  useEffect(() => {
    if (visible) {
      setIsAnimating(true);
      setVerifySuccess(false);
    } else {
      setIsAnimating(false);
    }
  }, [visible]);

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && code.trim() && !loading && method === '2fa') {
      onVerify(method, code);
    }
    if (e.key === 'Escape' && !loading) {
      onCancel();
    }
  };

  // 如果用户没有启用任何验证方式
  if (visible && !has2FA && !hasPasskey) {
    return (
      <Modal
        title={title || t('安全验证')}
        visible={visible}
        onCancel={onCancel}
        footer={
          <Button onClick={onCancel}>{t('确定')}</Button>
        }
        width={500}
        style={{ maxWidth: '90vw' }}
      >
        <div className='text-center py-6'>
          <div className='mb-4'>
            <svg
              className='w-16 h-16 text-yellow-500 mx-auto mb-4'
              fill='currentColor'
              viewBox='0 0 20 20'
            >
              <path
                fillRule='evenodd'
                d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z'
                clipRule='evenodd'
              />
            </svg>
          </div>
          <Typography.Title heading={4} className='mb-2'>
            {t('需要安全验证')}
          </Typography.Title>
          <Typography.Text type='tertiary'>
            {t('您需要先启用两步验证或 Passkey 才能查看敏感信息。')}
          </Typography.Text>
          <br />
          <Typography.Text type='tertiary'>
            {t('请前往个人设置 → 安全设置进行配置。')}
          </Typography.Text>
        </div>
      </Modal>
    );
  }

  return (
    <Modal
      title={title || t('安全验证')}
      visible={visible}
      onCancel={loading ? undefined : onCancel}
      closeOnEsc={!loading}
      footer={null}
      width={460}
      centered
      style={{
        maxWidth: 'calc(100vw - 32px)'
      }}
      bodyStyle={{
        padding: '20px 24px'
      }}
    >
      <div style={{ width: '100%' }}>
        {/* 描述信息 */}
        {description && (
          <Typography.Paragraph
            type="tertiary"
            style={{
              margin: '0 0 20px 0',
              fontSize: '14px',
              lineHeight: '1.6'
            }}
          >
            {description}
          </Typography.Paragraph>
        )}

        {/* 验证方式选择 */}
        <Tabs
          activeKey={method}
          onChange={onMethodSwitch}
          type='line'
          size='default'
          style={{ margin: 0 }}
        >
          {has2FA && (
            <TabPane
              tab={t('两步验证')}
              itemKey='2fa'
            >
              <div style={{ paddingTop: '20px' }}>
                <div style={{ marginBottom: '12px' }}>
                  <Input
                    placeholder={t('请输入6位验证码或8位备用码')}
                    value={code}
                    onChange={onCodeChange}
                    size='large'
                    maxLength={8}
                    onKeyDown={handleKeyDown}
                    autoFocus={method === '2fa'}
                    disabled={loading}
                    prefix={
                      <svg style={{ width: 16, height: 16, marginRight: 8, flexShrink: 0 }} fill='currentColor' viewBox='0 0 20 20'>
                        <path fillRule='evenodd' d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z' clipRule='evenodd' />
                      </svg>
                    }
                    style={{ width: '100%' }}
                  />
                </div>

                <Typography.Text
                  type="tertiary"
                  size="small"
                  style={{
                    display: 'block',
                    marginBottom: '20px',
                    fontSize: '13px',
                    lineHeight: '1.5'
                  }}
                >
                  {t('从认证器应用中获取验证码，或使用备用码')}
                </Typography.Text>

                <div style={{
                  display: 'flex',
                  justifyContent: 'flex-end',
                  gap: '8px',
                  flexWrap: 'wrap'
                }}>
                  <Button onClick={onCancel} disabled={loading}>
                    {t('取消')}
                  </Button>
                  <Button
                    theme='solid'
                    type='primary'
                    loading={loading}
                    disabled={!code.trim() || loading}
                    onClick={() => onVerify(method, code)}
                  >
                    {t('验证')}
                  </Button>
                </div>
              </div>
            </TabPane>
          )}

          {hasPasskey && passkeySupported && (
            <TabPane
              tab={t('Passkey')}
              itemKey='passkey'
            >
              <div style={{ paddingTop: '20px' }}>
                <div style={{
                  textAlign: 'center',
                  padding: '24px 16px',
                  marginBottom: '20px'
                }}>
                  <div style={{
                    width: 56,
                    height: 56,
                    margin: '0 auto 16px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: '50%',
                    background: 'var(--semi-color-primary-light-default)',
                  }}>
                    <svg style={{ width: 28, height: 28, color: 'var(--semi-color-primary)' }} fill='currentColor' viewBox='0 0 20 20'>
                      <path fillRule='evenodd' d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z' clipRule='evenodd' />
                    </svg>
                  </div>
                  <Typography.Title heading={5} style={{ margin: '0 0 8px', fontSize: '16px' }}>
                    {t('使用 Passkey 验证')}
                  </Typography.Title>
                  <Typography.Text
                    type='tertiary'
                    style={{
                      display: 'block',
                      margin: 0,
                      fontSize: '13px',
                      lineHeight: '1.5'
                    }}
                  >
                    {t('点击验证按钮，使用您的生物特征或安全密钥')}
                  </Typography.Text>
                </div>

                <div style={{
                  display: 'flex',
                  justifyContent: 'flex-end',
                  gap: '8px',
                  flexWrap: 'wrap'
                }}>
                  <Button onClick={onCancel} disabled={loading}>
                    {t('取消')}
                  </Button>
                  <Button
                    theme='solid'
                    type='primary'
                    loading={loading}
                    disabled={loading}
                    onClick={() => onVerify(method)}
                  >
                    {t('验证 Passkey')}
                  </Button>
                </div>
              </div>
            </TabPane>
          )}
        </Tabs>
      </div>
    </Modal>
  );
};

export default SecureVerificationModal;