Client with UI
This commit is contained in:
dqj
534
standalone-demo.html
Normal file
534
standalone-demo.html
Normal file
@@ -0,0 +1,534 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FIDO2 UI SDK - Standalone Demo</title>
|
||||
|
||||
<link rel="stylesheet" href="files/core.css">
|
||||
<link rel="stylesheet" href="files/theme-default.css">
|
||||
<link rel="stylesheet" href="files/demo.css">
|
||||
<link rel="stylesheet" href="files/boxicons.css">
|
||||
<link rel="stylesheet" href="files/fido2-ui-sdk.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
color: #333;
|
||||
margin: 0 0 10px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.demo-header p {
|
||||
color: #666;
|
||||
margin: 0 0 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
color: #333;
|
||||
margin: 0 0 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.demo-section p {
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-btn {
|
||||
padding: 12px 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.demo-btn-primary {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.demo-btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(240, 147, 251, 0.4);
|
||||
}
|
||||
|
||||
.demo-btn-secondary {
|
||||
background: #f8f9fa;
|
||||
color: #333;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.demo-btn-secondary:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.code-block code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.feature-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.feature-list i {
|
||||
color: #28a745;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #e7f3ff;
|
||||
border-left: 4px solid #007bff;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="files/jquery.js"></script>
|
||||
<script src="files/popper.js"></script>
|
||||
<script src="files/bootstrap.js"></script>
|
||||
<script src="files/dfido2-lib.js"></script>
|
||||
<script src="files/fido2-ui-sdk.js"></script>
|
||||
<script src="files/amipro_utils.js"></script>
|
||||
|
||||
<script>
|
||||
const i18n_messages = new Map();
|
||||
|
||||
var lang_map = new Map();
|
||||
lang_map.set("en-US", "🔐 FIDO2 UI SDK - Standalone Demo");
|
||||
lang_map.set("zh-CN", "🔐 FIDO2 UI SDK - 独立页面演示");
|
||||
lang_map.set("ja", "🔐 FIDO2 UI SDK - スタンドアロン デモ");
|
||||
i18n_messages.set("msg_title", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Demonstrate how to use FIDO2 UI SDK to manage devices in a standalone page");
|
||||
lang_map.set("zh-CN", "演示如何使用 FIDO2 UI SDK 在独立页面中管理设备");
|
||||
lang_map.set("ja", "FIDO2 UI SDK を使用してスタンドアロン ページでデバイスを管理する方法をデモします");
|
||||
i18n_messages.set("msg_subtitle", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "📌 What is Standalone Page Mode?");
|
||||
lang_map.set("zh-CN", "📌 什么是独立页面模式？");
|
||||
lang_map.set("ja", "📌 スタンドアロン ページ モードとは？");
|
||||
i18n_messages.set("msg_section_mode_title", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Standalone page mode renders a complete device management interface on the current page, suitable for scenarios requiring a dedicated device management page.");
|
||||
lang_map.set("zh-CN", "独立页面模式会在当前页面渲染完整的设备管理界面，适用于需要独立设备管理页面的场景。");
|
||||
lang_map.set("ja", "スタンドアロン ページ モードは、現在のページに完全なデバイス管理インターフェイスをレンダリングし、専用のデバイス管理ページが必要なシナリオに適しています。");
|
||||
i18n_messages.set("msg_section_mode_desc", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "⚠️ Note:");
|
||||
lang_map.set("zh-CN", "⚠️ 注意：");
|
||||
lang_map.set("ja", "⚠️ 注意：");
|
||||
i18n_messages.set("msg_note", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Standalone page mode will replace the current page content. If your page already has a complete layout (like login.html or devices.html), it is recommended to use modal mode.");
|
||||
lang_map.set("zh-CN", "独立页面模式会替换当前页面的内容。如果您的页面已经加载了完整的布局（例如 login.html 或 devices.html），建议使用模态框模式。");
|
||||
lang_map.set("ja", "スタンドアロン ページ モードは現在のページ内容を置き換えます。ページにすでに完全なレイアウト（login.html や devices.html など）が読み込まれている場合は、モーダル モードの使用をお勧めします。");
|
||||
i18n_messages.set("msg_note_content", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "💻 Code Examples");
|
||||
lang_map.set("zh-CN", "💻 代码示例");
|
||||
lang_map.set("ja", "💻 コード例");
|
||||
i18n_messages.set("msg_section_code_title", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Simplest standalone integration:");
|
||||
lang_map.set("zh-CN", "最简单的独立页面集成方式：");
|
||||
lang_map.set("ja", "最も簡単なスタンドアロン統合：");
|
||||
i18n_messages.set("msg_code_simple", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "With theme customization:");
|
||||
lang_map.set("zh-CN", "带主题定制：");
|
||||
lang_map.set("ja", "テーマのカスタマイズあり：");
|
||||
i18n_messages.set("msg_code_theme", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "✨ Features");
|
||||
lang_map.set("zh-CN", "✨ 功能特性");
|
||||
lang_map.set("ja", "✨ 機能");
|
||||
i18n_messages.set("msg_section_features_title", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Standalone page with complete device management interface");
|
||||
lang_map.set("zh-CN", "独立页面，完整的设备管理界面");
|
||||
lang_map.set("ja", "スタンドアロン ページで完全なデバイス管理インターフェイス");
|
||||
i18n_messages.set("msg_feature_1", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Add/delete FIDO2 devices support");
|
||||
lang_map.set("zh-CN", "支持添加/删除 FIDO2 设备");
|
||||
lang_map.set("ja", "FIDO2 デバイスの追加/削除サポート");
|
||||
i18n_messages.set("msg_feature_2", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Real-time device list display");
|
||||
lang_map.set("zh-CN", "实时显示设备列表");
|
||||
lang_map.set("ja", "リアルタイム デバイスリスト表示");
|
||||
i18n_messages.set("msg_feature_3", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Session status monitoring");
|
||||
lang_map.set("zh-CN", "会话状态监控");
|
||||
lang_map.set("ja", "セッション ステータス監視");
|
||||
i18n_messages.set("msg_feature_4", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Theme color and style customization");
|
||||
lang_map.set("zh-CN", "主题色和样式定制");
|
||||
lang_map.set("ja", "テーマの色とスタイルのカスタマイズ");
|
||||
i18n_messages.set("msg_feature_5", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Multi-language support (Chinese/English/Japanese)");
|
||||
lang_map.set("zh-CN", "多语言支持（中/英/日）");
|
||||
lang_map.set("ja", "多言語対応（中/英/日）");
|
||||
i18n_messages.set("msg_feature_6", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Event callback system");
|
||||
lang_map.set("zh-CN", "事件回调系统");
|
||||
lang_map.set("ja", "イベント コールバック システム");
|
||||
i18n_messages.set("msg_feature_7", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Responsive design, mobile support");
|
||||
lang_map.set("zh-CN", "响应式设计，支持移动端");
|
||||
lang_map.set("ja", "レスポンシブ デザイン、モバイル対応");
|
||||
i18n_messages.set("msg_feature_8", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "🚀 Demo");
|
||||
lang_map.set("zh-CN", "🚀 演示");
|
||||
lang_map.set("ja", "🚀 デモ");
|
||||
i18n_messages.set("msg_section_demo_title", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Click the buttons below to experience standalone page mode:");
|
||||
lang_map.set("zh-CN", "点击下面的按钮体验独立页面模式：");
|
||||
lang_map.set("ja", "以下のボタンを押してスタンドアロン ページ モードを体験してください：");
|
||||
i18n_messages.set("msg_demo_desc", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Default Style");
|
||||
lang_map.set("zh-CN", "默认样式");
|
||||
lang_map.set("ja", "デフォルト スタイル");
|
||||
i18n_messages.set("msg_btn_default", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Custom Style");
|
||||
lang_map.set("zh-CN", "自定义样式");
|
||||
lang_map.set("ja", "カスタム スタイル");
|
||||
i18n_messages.set("msg_btn_custom", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "💡 Tip:");
|
||||
lang_map.set("zh-CN", "💡 提示：");
|
||||
lang_map.set("ja", "💡 ヒント：");
|
||||
i18n_messages.set("msg_tip", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "After clicking the button, the page will be replaced with the device management interface. To return to this demo page, please refresh the browser.");
|
||||
lang_map.set("zh-CN", "点击按钮后，页面将被替换为设备管理界面。要返回此演示页面，请刷新浏览器。");
|
||||
lang_map.set("ja", "ボタンを押すと、ページはデバイス管理インターフェイスに置き換えられます。このデモ ページに戻るには、ブラウザを更新してください。");
|
||||
i18n_messages.set("msg_tip_content", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "📖 Use Cases");
|
||||
lang_map.set("zh-CN", "📖 使用场景");
|
||||
lang_map.set("ja", "📖 ユースケース");
|
||||
i18n_messages.set("msg_section_usecases_title", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Standalone device management page (similar to existing devices.html)");
|
||||
lang_map.set("zh-CN", "需要独立的设备管理页面（类似现有的 devices.html）");
|
||||
lang_map.set("ja", "専用のデバイス管理ページ（既存の devices.html と同様）");
|
||||
i18n_messages.set("msg_usecase_1", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "User accesses device management directly via link");
|
||||
lang_map.set("zh-CN", "用户需要通过链接直接访问设备管理");
|
||||
lang_map.set("ja", "ユーザーがリンクからデバイス管理に直接アクセス");
|
||||
i18n_messages.set("msg_usecase_2", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Device management as a standalone page feature");
|
||||
lang_map.set("zh-CN", "设备管理作为独立的页面功能");
|
||||
lang_map.set("ja", "デバイス管理がスタンドアロン ページ機能として");
|
||||
i18n_messages.set("msg_usecase_3", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Need more screen space to display device information");
|
||||
lang_map.set("zh-CN", "需要更多屏幕空间显示设备信息");
|
||||
lang_map.set("ja", "デバイス情報を表示するためにより多くの画面スペースが必要");
|
||||
i18n_messages.set("msg_usecase_4", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Return to Device Management Page");
|
||||
lang_map.set("zh-CN", "返回设备管理页面");
|
||||
lang_map.set("ja", "デバイス管理ページに戻る");
|
||||
i18n_messages.set("msg_btn_back", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "This operation will replace the current page content. Are you sure you want to continue?");
|
||||
lang_map.set("zh-CN", "此操作将替换当前页面的内容。确定要继续吗？");
|
||||
lang_map.set("ja", "この操作は現在のページ内容を置き換えます。よろしいですか？");
|
||||
i18n_messages.set("msg_confirm", lang_map);
|
||||
|
||||
window.onload = function() {
|
||||
setI18NText(i18n_messages);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="demo-header">
|
||||
<h1 id="msg_title">🔐 FIDO2 UI SDK - Standalone Demo</h1>
|
||||
<p id="msg_subtitle">Demonstrate how to use FIDO2 UI SDK to manage devices in a standalone page</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 id="msg_section_mode_title">📌 What is Standalone Page Mode?</h2>
|
||||
<p id="msg_section_mode_desc">Standalone page mode renders a complete device management interface on the current page, suitable for scenarios requiring a dedicated device management page.</p>
|
||||
<div class="info-box">
|
||||
<strong id="msg_note">⚠️ Note:</strong>
|
||||
<p id="msg_note_content">Standalone page mode will replace the current page content. If your page already has a complete layout (like login.html or devices.html), it is recommended to use modal mode.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 id="msg_section_code_title">💻 Code Examples</h2>
|
||||
<p id="msg_code_simple">Simplest standalone integration:</p>
|
||||
<div class="code-block">
|
||||
<code>Fido2UIManager.renderDeviceManager({
|
||||
mode: 'standalone',
|
||||
serverUrl: SERVER_URL
|
||||
});</code>
|
||||
</div>
|
||||
|
||||
<p id="msg_code_theme">With theme customization:</p>
|
||||
<div class="code-block">
|
||||
<code>Fido2UIManager.renderDeviceManager({
|
||||
mode: 'standalone',
|
||||
serverUrl: SERVER_URL,
|
||||
theme: {
|
||||
logo: 'path/to/logo.png',
|
||||
primaryColor: '#f5576c',
|
||||
backgroundColor: '#ffffff'
|
||||
},
|
||||
language: 'zh-CN'
|
||||
});</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 id="msg_section_features_title">✨ Features</h2>
|
||||
<ul class="feature-list">
|
||||
<li><i class="bx bx-check-circle"></i> <span id="msg_feature_1">Standalone page with complete device management interface</span></li>
|
||||
<li><i class="bx bx-check-circle"></i> <span id="msg_feature_2">Add/delete FIDO2 devices support</span></li>
|
||||
<li><i class="bx bx-check-circle"></i> <span id="msg_feature_3">Real-time device list display</span></li>
|
||||
<li><i class="bx bx-check-circle"></i> <span id="msg_feature_4">Session status monitoring</span></li>
|
||||
<li><i class="bx bx-check-circle"></i> <span id="msg_feature_5">Theme color and style customization</span></li>
|
||||
<li><i class="bx bx-check-circle"></i> <span id="msg_feature_6">Multi-language support (Chinese/English/Japanese)</span></li>
|
||||
<li><i class="bx bx-check-circle"></i> <span id="msg_feature_7">Event callback system</span></li>
|
||||
<li><i class="bx bx-check-circle"></i> <span id="msg_feature_8">Responsive design, mobile support</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 id="msg_section_demo_title">🚀 Demo</h2>
|
||||
<p id="msg_demo_desc">Click the buttons below to experience standalone page mode:</p>
|
||||
<button class="demo-btn demo-btn-primary" onclick="openStandaloneDefault()">
|
||||
<i class="bx bx-desktop"></i> <span id="msg_btn_default">Default Style</span>
|
||||
</button>
|
||||
<button class="demo-btn demo-btn-secondary" onclick="openStandaloneCustom()">
|
||||
<i class="bx bx-palette"></i> <span id="msg_btn_custom">Custom Style</span>
|
||||
</button>
|
||||
|
||||
<div class="info-box" style="margin-top: 20px;">
|
||||
<strong id="msg_tip">💡 Tip:</strong>
|
||||
<p id="msg_tip_content">After clicking the button, the page will be replaced with the device management interface. To return to this demo page, please refresh the browser.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 id="msg_section_usecases_title">📖 Use Cases</h2>
|
||||
<p>Standalone page mode is suitable for the following scenarios:</p>
|
||||
<ul class="feature-list">
|
||||
<li><i class="bx bx-right-arrow"></i> <span id="msg_usecase_1">Standalone device management page (similar to existing devices.html)</span></li>
|
||||
<li><i class="bx bx-right-arrow"></i> <span id="msg_usecase_2">User accesses device management directly via link</span></li>
|
||||
<li><i class="bx bx-right-arrow"></i> <span id="msg_usecase_3">Device management as a standalone page feature</span></li>
|
||||
<li><i class="bx bx-right-arrow"></i> <span id="msg_usecase_4">Need more screen space to display device information</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a href="devices.html" class="demo-btn demo-btn-secondary">
|
||||
<i class="bx bx-arrow-back"></i> <span id="msg_btn_back">Return to Device Management Page</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const SERVER_URL = 'https://local.dqj-macpro.com';
|
||||
|
||||
function getBrowserLanguage() {
|
||||
const lang = window.navigator.language || window.navigator.userLanguage;
|
||||
const supportedLangs = ['en-US', 'zh-CN', 'ja'];
|
||||
if (supportedLangs.includes(lang)) {
|
||||
return lang;
|
||||
}
|
||||
return 'en-US';
|
||||
}
|
||||
|
||||
const CURRENT_LANG = getBrowserLanguage();// 'https://fido2.amipro.me';
|
||||
|
||||
function openStandaloneDefault() {
|
||||
if (!confirm(getI18NText(i18n_messages, 'msg_confirm'))) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Opening standalone device manager with default style...');
|
||||
|
||||
Fido2UIManager.renderDeviceManager({
|
||||
mode: 'standalone',
|
||||
serverUrl: SERVER_URL,
|
||||
language: CURRENT_LANG,
|
||||
callbacks: {
|
||||
onInit: function(manager) {
|
||||
console.log('Standalone device manager initialized');
|
||||
},
|
||||
onDeviceAdded: function(device) {
|
||||
console.log('Device added:', device);
|
||||
},
|
||||
onDeviceDeleted: function(deviceId) {
|
||||
console.log('Device deleted:', deviceId);
|
||||
},
|
||||
onDeviceListLoaded: function(devices) {
|
||||
console.log('Device list loaded:', devices.length, 'devices');
|
||||
},
|
||||
onError: function(error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openStandaloneCustom() {
|
||||
if (!confirm(getI18NText(i18n_messages, 'msg_confirm'))) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Opening standalone device manager with custom style...');
|
||||
|
||||
Fido2UIManager.renderDeviceManager({
|
||||
mode: 'standalone',
|
||||
serverUrl: SERVER_URL,
|
||||
language: CURRENT_LANG,
|
||||
theme: {
|
||||
logo: 'files/favicon.ico',
|
||||
primaryColor: '#f5576c',
|
||||
backgroundColor: '#fff5f7',
|
||||
textColor: '#9f1239',
|
||||
borderRadius: '12px'
|
||||
},
|
||||
features: {
|
||||
showAddButton: true,
|
||||
showDeleteButton: true,
|
||||
showUserInfo: true,
|
||||
showSessionStatus: true
|
||||
},
|
||||
callbacks: {
|
||||
onInit: function(manager) {
|
||||
console.log('Custom standalone device manager initialized');
|
||||
},
|
||||
onDeviceAdded: function(device) {
|
||||
console.log('Device added:', device);
|
||||
},
|
||||
onDeviceDeleted: function(deviceId) {
|
||||
console.log('Device deleted:', deviceId);
|
||||
},
|
||||
onDeviceListLoaded: function(devices) {
|
||||
console.log('Device list loaded:', devices.length, 'devices');
|
||||
},
|
||||
onError: function(error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user