// Credentials Vault Page — 凭据保险箱
// 分类浏览、搜索、新增、编辑、删除、复制、密码显隐

const { useState, useEffect, useCallback, useRef, Component } = React;

const VAULT_CATEGORY_TABS = [
  { key: 'all', label: '全部', icon: '📋' },
  { key: 'website', label: '网站账号', icon: '🌐' },
  { key: 'bankcard', label: '银行卡', icon: '💳' },
  { key: 'idcard', label: '证件信息', icon: '🪪' },
  { key: 'member', label: '会员卡', icon: '🎟️' },
  { key: 'note', label: '私密笔记', icon: '📝' },
];

const VAULT_CATEGORY_LABEL = {};
VAULT_CATEGORY_TABS.forEach(t => { VAULT_CATEGORY_LABEL[t.key] = t.label; });

// 密码打码
function vaultMaskPassword(pwd) {
  if (!pwd) return '';
  if (pwd.length <= 4) return '•'.repeat(pwd.length);
  return pwd.slice(0, 2) + '•'.repeat(Math.min(pwd.length - 4, 8)) + pwd.slice(-2);
}

function CredentialsPage() {
  const [activeCategory, setActiveCategory] = useState('all');
  const [keyword, setKeyword] = useState('');
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState(null);
  const [revealedIds, setRevealedIds] = useState({});

  const [formCategory, setFormCategory] = useState('website');
  const [formName, setFormName] = useState('');
  const [formAccount, setFormAccount] = useState('');
  const [formPassword, setFormPassword] = useState('');
  const [formNote, setFormNote] = useState('');
  const [formUrl, setFormUrl] = useState('');
  const [formSubmitting, setFormSubmitting] = useState(false);

  // 从 useApp 取方法，取失败则用安全降级
  let navigate = function() {};
  let showToast = function(msg) { console.log('[toast]', msg); };
  let requireLogin = function(cb) { console.log('需要登录'); return false; };
  let currentUser = null;

  try {
    if (typeof useApp === 'function') {
      const app = useApp();
      if (app) {
        if (typeof app.navigate === 'function') navigate = app.navigate;
        if (typeof app.showToast === 'function') showToast = app.showToast;
        if (typeof app.requireLogin === 'function') requireLogin = app.requireLogin;
        currentUser = app.currentUser || null;
      }
    }
  } catch (e) {
    console.warn('[Credentials] useApp 不可用，使用降级模式', e);
  }

  const isLoggedIn = !!(currentUser && currentUser.id);

  // 加载凭据列表
  const loadCredentials = useCallback(function() {
    if (!isLoggedIn) {
      setItems([]);
      setLoading(false);
      return Promise.resolve();
    }
    setLoading(true);
    return API.get('/credentials', {
      category: activeCategory,
      keyword: keyword.trim(),
    }).then(function(res) {
      if (res && res.success) {
        setItems(res.data || []);
      } else {
        setItems([]);
      }
    }).catch(function(e) {
      console.error('loadCredentials error:', e);
      setItems([]);
    }).finally(function() {
      setLoading(false);
    });
  }, [isLoggedIn, activeCategory, keyword]);

  useEffect(function() {
    loadCredentials();
  }, [loadCredentials]);

  // 未登录时弹登录框
  useEffect(function() {
    if (!isLoggedIn && typeof requireLogin === 'function') {
      // 只弹一次，延迟避免和 mount 冲突
      var t = setTimeout(function() { requireLogin(function() {}); }, 300);
      return function() { clearTimeout(t); };
    }
  }, [isLoggedIn, requireLogin]);

  // ===== 打开新增表单 =====
  function handleOpenCreate() {
    if (!isLoggedIn) {
      if (typeof requireLogin === 'function') {
        requireLogin(function() { handleOpenCreate(); });
      } else {
        showToast('请先登录');
      }
      return;
    }
    setEditingId(null);
    setFormCategory(activeCategory === 'all' ? 'website' : activeCategory);
    setFormName('');
    setFormAccount('');
    setFormPassword('');
    setFormNote('');
    setFormUrl('');
    setShowForm(true);
  }

  // ===== 打开编辑表单 =====
  function handleOpenEdit(item) {
    if (!isLoggedIn) {
      showToast('请先登录');
      return;
    }
    setEditingId(item.id);
    setFormCategory(item.category || 'website');
    setFormName(item.name || '');
    setFormAccount(item.account || '');
    setFormPassword(item.password || '');
    setFormNote(item.note || '');
    setFormUrl(item.url || '');
    setShowForm(true);
  }

  // ===== 提交表单 =====
  function handleSubmit() {
    if (!formName.trim()) {
      showToast('请输入名称');
      return;
    }
    if (formSubmitting) return;
    setFormSubmitting(true);

    var body = {
      category: formCategory,
      name: formName.trim(),
      account: formAccount,
      password: formPassword,
      note: formNote,
      url: formUrl,
    };

    var promise;
    if (editingId) {
      promise = API.post('/credentials/' + editingId, body);
    } else {
      promise = API.post('/credentials', body);
    }

    promise.then(function(res) {
      if (res && res.success) {
        showToast(editingId ? '已更新' : '已保存');
        setShowForm(false);
        loadCredentials();
      } else {
        showToast((res && res.message) || '操作失败');
      }
    }).catch(function(e) {
      console.error('submit error:', e);
      showToast('操作失败');
    }).finally(function() {
      setFormSubmitting(false);
    });
  }

  // ===== 删除 =====
  function handleDelete(item) {
    if (!window.confirm('确定删除「' + item.name + '」吗？此操作不可撤销。')) return;

    // 优先用 API.delete（如未定义则用 fetch / localStorage 兼容）
    var promise;
    if (typeof API.del === 'function') {
      promise = API.del('/credentials/' + item.id);
    } else if (typeof API.useBackend === 'function' && API.useBackend()) {
      promise = fetch('/api/credentials/' + item.id, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' }
      }).then(function(r) { return r.json(); });
    } else {
      // localStorage 模式：手动调用 api 函数
      if (typeof window._apiFn === 'function') {
        promise = Promise.resolve(window._apiFn('DELETE', '/credentials/' + item.id));
      } else {
        showToast('删除功能暂不可用');
        return;
      }
    }

    promise.then(function(res) {
      if (res && res.success) {
        showToast('已删除');
        loadCredentials();
      } else {
        showToast((res && res.message) || '删除失败');
      }
    }).catch(function(e) {
      console.error('delete error:', e);
      showToast('删除失败');
    });
  }

  // ===== 复制 =====
  function handleCopy(text, label) {
    label = label || '内容';
    if (!text) {
      showToast('暂无' + label);
      return;
    }
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(function() {
        showToast(label + '已复制');
      }).catch(function() {
        fallbackCopy(text, label);
      });
    } else {
      fallbackCopy(text, label);
    }
  }

  function fallbackCopy(text, label) {
    var ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.left = '-9999px';
    ta.style.top = '0';
    document.body.appendChild(ta);
    ta.select();
    try {
      document.execCommand('copy');
      showToast(label + '已复制');
    } catch (e) {
      showToast('复制失败');
    }
    document.body.removeChild(ta);
  }

  function handleToggleReveal(id) {
    setRevealedIds(function(prev) {
      var next = {};
      for (var k in prev) if (prev.hasOwnProperty(k)) next[k] = prev[k];
      next[id] = !prev[id];
      return next;
    });
  }

  // ===== 密码字段 label =====
  function passwordLabel() {
    if (formCategory === 'bankcard') return '卡号';
    if (formCategory === 'idcard') return '身份证号';
    if (formCategory === 'member') return '会员密码';
    return '密码';
  }
  function accountLabel() {
    if (formCategory === 'bankcard') return '持卡人';
    if (formCategory === 'idcard') return '姓名';
    if (formCategory === 'member') return '会员号';
    return '账号';
  }
  function itemPasswordLabel(cat) {
    return cat === 'bankcard' ? '卡号' : cat === 'idcard' ? '证件号' : '密码';
  }

  // ===== 未登录态 =====
  if (!isLoggedIn) {
    return (
      React.createElement(PageWrapper, null,
        React.createElement(AppHeader, { title: '凭据保险箱', showBack: true, onBack: function() { navigate('apps'); }, rightContent: null }),
        React.createElement('div', { style: { padding: '80px 24px', textAlign: 'center' } },
          React.createElement('div', {
            style: {
              width: 72, height: 72, borderRadius: '50%',
              background: 'linear-gradient(135deg, #6366F1, #8B5CF6)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 32, margin: '0 auto 20px',
            }
          }, '🔒'),
          React.createElement('div', { style: { fontSize: 17, fontWeight: 600, marginBottom: 8 } }, '凭据保险箱'),
          React.createElement('div', {
            style: { fontSize: 13, color: 'var(--text-tertiary)', marginBottom: 24, lineHeight: 1.6 }
          }, '登录后即可使用', React.createElement('br'), '所有数据仅您自己可见'),
          React.createElement('button', {
            onClick: function() { if (typeof requireLogin === 'function') requireLogin(function() {}); },
            style: {
              padding: '10px 32px', borderRadius: 20, border: 'none',
              background: 'linear-gradient(135deg, var(--primary), #4080FF)',
              color: '#fff', fontSize: 14, fontWeight: 500, cursor: 'pointer',
            }
          }, '立即登录')
        )
      )
    );
  }

  // ===== 主页面 =====
  return (
    React.createElement(PageWrapper, null,
      // 顶部导航
      React.createElement(AppHeader, {
        title: '凭据保险箱',
        showBack: true,
        onBack: function() { navigate('apps'); },
        rightContent: React.createElement('div', {
          onClick: handleOpenCreate,
          style: {
            fontSize: 22, cursor: 'pointer', width: 32, height: 32,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--primary)', fontWeight: 700,
          }
        }, '＋')
      }),

      // 搜索栏
      React.createElement('div', {
        style: {
          padding: '10px 16px',
          background: 'var(--bg-card)',
          borderBottom: '1px solid var(--border)',
        }
      },
        React.createElement('div', {
          style: {
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 12px', background: 'var(--bg-page)', borderRadius: 20,
          }
        },
          React.createElement('span', { style: { fontSize: 14, color: 'var(--text-tertiary)' } }, '🔍'),
          React.createElement('input', {
            type: 'text', value: keyword,
            onChange: function(e) { setKeyword(e.target.value); },
            placeholder: '搜索名称 / 账号 / 备注',
            style: {
              flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 14,
            }
          }),
          keyword ? React.createElement('span', {
            onClick: function() { setKeyword(''); },
            style: { fontSize: 14, color: 'var(--text-tertiary)', cursor: 'pointer' }
          }, '✕') : null
        )
      ),

      // 分类 Tab
      React.createElement('div', {
        style: {
          background: 'var(--bg-card)',
          borderBottom: '1px solid var(--border)',
          overflowX: 'auto', whiteSpace: 'nowrap',
          padding: '0 8px',
          WebkitOverflowScrolling: 'touch',
        }
      },
        VAULT_CATEGORY_TABS.map(function(tab) {
          return React.createElement('div', {
            key: tab.key,
            onClick: function() { setActiveCategory(tab.key); },
            style: {
              display: 'inline-block', padding: '12px 14px', fontSize: 13,
              fontWeight: activeCategory === tab.key ? 600 : 400,
              color: activeCategory === tab.key ? 'var(--primary)' : 'var(--text-secondary)',
              borderBottom: activeCategory === tab.key
                ? '2px solid var(--primary)'
                : '2px solid transparent',
              cursor: 'pointer',
            }
          }, tab.icon + ' ' + tab.label);
        })
      ),

      // 列表
      React.createElement('div', { style: { padding: '12px 16px 80px' } },
        loading ? (
          React.createElement('div', {
            style: { textAlign: 'center', padding: '40px 0', color: 'var(--text-tertiary)' }
          }, '加载中...')
        ) : items.length === 0 ? (
          React.createElement('div', {
            style: { textAlign: 'center', padding: '60px 24px', color: 'var(--text-tertiary)' }
          },
            React.createElement('div', { style: { fontSize: 48, marginBottom: 12 } }, '🔐'),
            React.createElement('div', { style: { fontSize: 14, marginBottom: 4 } },
              keyword ? '没有找到匹配的凭据' : '还没有保存任何凭据'
            ),
            React.createElement('div', { style: { fontSize: 12, opacity: 0.7 } },
              '点击右上角 ＋ 添加第一条'
            )
          )
        ) : (
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
            items.map(function(item) {
              var catIcon = (VAULT_CATEGORY_TABS.find(function(t) { return t.key === item.category; }) || {}).icon || '📋';
              return React.createElement('div', {
                key: item.id,
                className: 'card card-shadow',
                style: { padding: '14px' }
              },
                // 标题行
                React.createElement('div', {
                  style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }
                },
                  React.createElement('div', {
                    style: {
                      width: 36, height: 36, borderRadius: 10,
                      background: 'linear-gradient(135deg, #6366F122, #8B5CF622)',
                      color: '#6366F1',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 18,
                    }
                  }, catIcon),
                  React.createElement('div', { style: { flex: 1, minWidth: 0 } },
                    React.createElement('div', {
                      style: {
                        fontSize: 15, fontWeight: 600, color: 'var(--text-primary)',
                        marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                      }
                    }, item.name),
                    React.createElement('div', {
                      style: { fontSize: 11, color: 'var(--text-tertiary)' }
                    }, VAULT_CATEGORY_LABEL[item.category] || '其他')
                  )
                ),

                // 账号行
                item.account ? React.createElement('div', {
                  style: { display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0' }
                },
                  React.createElement('span', {
                    style: {
                      fontSize: 12, color: 'var(--text-tertiary)', width: 42, flexShrink: 0,
                    }
                  }, accountLabel()),
                  React.createElement('span', {
                    style: {
                      flex: 1, fontSize: 13, color: 'var(--text-primary)',
                      fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }
                  }, item.account),
                  React.createElement('span', {
                    onClick: function() { handleCopy(item.account, '账号'); },
                    style: {
                      fontSize: 12, color: 'var(--primary)', cursor: 'pointer',
                      padding: '4px 8px', borderRadius: 6, flexShrink: 0,
                    }
                  }, '复制')
                ) : null,

                // 密码/卡号行
                item.password ? React.createElement('div', {
                  style: { display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0' }
                },
                  React.createElement('span', {
                    style: {
                      fontSize: 12, color: 'var(--text-tertiary)', width: 42, flexShrink: 0,
                    }
                  }, itemPasswordLabel(item.category)),
                  React.createElement('span', {
                    style: {
                      flex: 1, fontSize: 13, color: 'var(--text-primary)',
                      fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }
                  }, revealedIds[item.id] ? item.password : vaultMaskPassword(item.password)),
                  React.createElement('span', {
                    onClick: function() { handleToggleReveal(item.id); },
                    style: { fontSize: 14, cursor: 'pointer', padding: '4px 6px', flexShrink: 0 }
                  }, revealedIds[item.id] ? '🙈' : '👁️'),
                  React.createElement('span', {
                    onClick: function() { handleCopy(item.password, itemPasswordLabel(item.category)); },
                    style: {
                      fontSize: 12, color: 'var(--primary)', cursor: 'pointer',
                      padding: '4px 8px', borderRadius: 6, flexShrink: 0,
                    }
                  }, '复制')
                ) : null,

                // 链接行
                item.url ? React.createElement('div', {
                  style: { display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0' }
                },
                  React.createElement('span', {
                    style: {
                      fontSize: 12, color: 'var(--text-tertiary)', width: 42, flexShrink: 0,
                    }
                  }, '链接'),
                  React.createElement('a', {
                    href: item.url, target: '_blank', rel: 'noopener noreferrer',
                    style: {
                      flex: 1, fontSize: 12, color: 'var(--primary)',
                      textDecoration: 'none', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    },
                    onClick: function(e) { e.stopPropagation(); }
                  }, item.url)
                ) : null,

                // 备注行
                item.note ? React.createElement('div', {
                  style: {
                    fontSize: 12, color: 'var(--text-secondary)',
                    padding: '6px 0 2px', lineHeight: 1.5,
                  }
                }, '💬 ' + item.note) : null,

                // 操作按钮
                React.createElement('div', {
                  style: {
                    display: 'flex', justifyContent: 'flex-end', gap: 12,
                    marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--border)',
                  }
                },
                  React.createElement('span', {
                    onClick: function() { handleOpenEdit(item); },
                    style: { fontSize: 12, color: 'var(--text-secondary)', cursor: 'pointer' }
                  }, '✏️ 编辑'),
                  React.createElement('span', {
                    onClick: function() { handleDelete(item); },
                    style: { fontSize: 12, color: '#DC2626', cursor: 'pointer' }
                  }, '🗑️ 删除')
                )
              );
            })
          )
        )
      ),

      // 悬浮新增按钮
      React.createElement('div', {
        onClick: handleOpenCreate,
        style: {
          position: 'fixed', right: 20, bottom: 90, width: 52, height: 52,
          borderRadius: '50%',
          background: 'linear-gradient(135deg, #6366F1, #8B5CF6)',
          color: '#fff', fontSize: 24,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 16px rgba(99, 102, 241, 0.4)',
          cursor: 'pointer', zIndex: 50,
          userSelect: 'none',
        }
      }, '＋'),

      // 底部表单弹窗
      showForm ? React.createElement('div', {
        onClick: function() { setShowForm(false); },
        style: {
          position: 'fixed', inset: 0,
          background: 'rgba(0,0,0,0.5)',
          zIndex: 100,
          display: 'flex', alignItems: 'flex-end',
        }
      },
        React.createElement('div', {
          onClick: function(e) { e.stopPropagation(); },
          style: {
            width: '100%', background: 'var(--bg-card)',
            borderRadius: '16px 16px 0 0',
            maxHeight: '85vh', overflowY: 'auto',
          }
        },
          // 顶部
          React.createElement('div', {
            style: {
              display: 'flex', alignItems: 'center',
              padding: '14px 16px',
              borderBottom: '1px solid var(--border)',
            }
          },
            React.createElement('div', {
              onClick: function() { setShowForm(false); },
              style: { fontSize: 14, color: 'var(--text-secondary)', cursor: 'pointer', width: 40 }
            }, '取消'),
            React.createElement('div', {
              style: { flex: 1, textAlign: 'center', fontSize: 15, fontWeight: 600 }
            }, editingId ? '编辑凭据' : '新增凭据'),
            React.createElement('div', {
              onClick: handleSubmit,
              style: {
                fontSize: 14,
                color: formSubmitting ? '#aaa' : 'var(--primary)',
                fontWeight: 500,
                cursor: formSubmitting ? 'not-allowed' : 'pointer',
                width: 40, textAlign: 'right',
              }
            }, formSubmitting ? '...' : '保存')
          ),

          React.createElement('div', { style: { padding: '16px' } },
            // 分类
            React.createElement('div', { style: { marginBottom: 16 } },
              React.createElement('div', { style: { fontSize: 13, fontWeight: 500, marginBottom: 8 } }, '分类'),
              React.createElement('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
                VAULT_CATEGORY_TABS.filter(function(t) { return t.key !== 'all'; }).map(function(tab) {
                  return React.createElement('div', {
                    key: tab.key,
                    onClick: function() { setFormCategory(tab.key); },
                    style: {
                      padding: '6px 12px', borderRadius: 16, fontSize: 12,
                      background: formCategory === tab.key ? 'var(--primary)' : 'var(--bg-page)',
                      color: formCategory === tab.key ? '#fff' : 'var(--text-secondary)',
                      cursor: 'pointer',
                      border: formCategory === tab.key
                        ? '1px solid var(--primary)'
                        : '1px solid var(--border)',
                    }
                  }, tab.icon + ' ' + tab.label);
                })
              )
            ),

            // 名称
            React.createElement('div', { style: { marginBottom: 14 } },
              React.createElement('div', { style: { fontSize: 13, fontWeight: 500, marginBottom: 6 } }, '名称 *'),
              React.createElement('input', {
                type: 'text', value: formName,
                onChange: function(e) { setFormName(e.target.value); },
                placeholder: formCategory === 'bankcard' ? '银行卡名称（如：招商银行）' : '名称/标题',
                style: {
                  width: '100%', padding: '10px 12px', borderRadius: 8,
                  border: '1px solid var(--border)', fontSize: 14, outline: 'none', boxSizing: 'border-box',
                }
              })
            ),

            // 账号
            React.createElement('div', { style: { marginBottom: 14 } },
              React.createElement('div', { style: { fontSize: 13, fontWeight: 500, marginBottom: 6 } }, accountLabel()),
              React.createElement('input', {
                type: 'text', value: formAccount,
                onChange: function(e) { setFormAccount(e.target.value); },
                placeholder:
                  formCategory === 'bankcard' ? '持卡人姓名' :
                  formCategory === 'idcard' ? '持证人姓名' :
                  formCategory === 'member' ? '会员号/手机号' :
                  '用户名 / 邮箱 / 手机号',
                style: {
                  width: '100%', padding: '10px 12px', borderRadius: 8,
                  border: '1px solid var(--border)', fontSize: 14, outline: 'none', boxSizing: 'border-box',
                }
              })
            ),

            // 密码/卡号
            React.createElement('div', { style: { marginBottom: 14 } },
              React.createElement('div', { style: { fontSize: 13, fontWeight: 500, marginBottom: 6 } }, passwordLabel()),
              React.createElement('input', {
                type: 'text', value: formPassword,
                onChange: function(e) { setFormPassword(e.target.value); },
                placeholder:
                  formCategory === 'bankcard' ? '银行卡号' :
                  formCategory === 'idcard' ? '身份证号码' :
                  '请输入密码',
                style: {
                  width: '100%', padding: '10px 12px', borderRadius: 8,
                  border: '1px solid var(--border)', fontSize: 14, outline: 'none',
                  boxSizing: 'border-box', fontFamily: 'monospace',
                }
              })
            ),

            // 链接
            (formCategory !== 'bankcard' && formCategory !== 'idcard') ? React.createElement('div', { style: { marginBottom: 14 } },
              React.createElement('div', { style: { fontSize: 13, fontWeight: 500, marginBottom: 6 } }, '链接（可选）'),
              React.createElement('input', {
                type: 'text', value: formUrl,
                onChange: function(e) { setFormUrl(e.target.value); },
                placeholder: 'https://...',
                style: {
                  width: '100%', padding: '10px 12px', borderRadius: 8,
                  border: '1px solid var(--border)', fontSize: 14, outline: 'none', boxSizing: 'border-box',
                }
              })
            ) : null,

            // 备注
            React.createElement('div', { style: { marginBottom: 8 } },
              React.createElement('div', { style: { fontSize: 13, fontWeight: 500, marginBottom: 6 } }, '备注（可选）'),
              React.createElement('textarea', {
                value: formNote,
                onChange: function(e) { setFormNote(e.target.value); },
                placeholder: '添加备注信息...',
                rows: 3,
                style: {
                  width: '100%', padding: '10px 12px', borderRadius: 8,
                  border: '1px solid var(--border)', fontSize: 14, outline: 'none',
                  resize: 'vertical', minHeight: 72, boxSizing: 'border-box',
                  fontFamily: 'inherit',
                }
              })
            )
          )
        )
      ) : null
    )
  );
}

window.CredentialsPage = CredentialsPage;