Working UI SDK and modal demo

modal-demo.html

@@ -96,6 +96,13 @@
       background: #e9ecef;
     }
 
+    .demo-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none !important;
+      box-shadow: none !important;
+    }
+
     .code-block {
       background: #f8f9fa;
       border: 1px solid #e9ecef;
@@ -195,15 +202,75 @@
     i18n_messages.set("msg_subtitle", lang_map);
 
     lang_map = new Map();
-    lang_map.set("en-US", "📌 Quick Start");
+    lang_map.set("en-US", "👤 Step1: Login");
-    lang_map.set("zh-CN", "📌 快速开始");
+    lang_map.set("zh-CN", "👤 步骤1：登录");
-    lang_map.set("ja", "📌 クイック スタート");
+    lang_map.set("ja", "👤 ステップ1：ログイン");
+    i18n_messages.set("msg_section_login_title", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "Click the button below to open the login modal:");
+    lang_map.set("zh-CN", "点击下面的按钮打开登录模态框：");
+    lang_map.set("ja", "以下のボタンを押してログインモーダルを開いてください：");
+    i18n_messages.set("msg_login_desc", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "Login");
+    lang_map.set("zh-CN", "登录");
+    lang_map.set("ja", "ログイン");
+    i18n_messages.set("msg_btn_passkey_login", 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_password_login", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "Logout");
+    lang_map.set("zh-CN", "退出登录");
+    lang_map.set("ja", "ログアウト");
+    i18n_messages.set("msg_btn_logout", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "Logged out successfully");
+    lang_map.set("zh-CN", "退出登录成功");
+    lang_map.set("ja", "ログアウトしました");
+    i18n_messages.set("msg_logout_success", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "Please login first to access device management");
+    lang_map.set("zh-CN", "请先登录以访问设备管理");
+    lang_map.set("ja", "デバイス管理にアクセスするにはまずログインしてください");
+    i18n_messages.set("msg_login_required", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "Login successful");
+    lang_map.set("zh-CN", "登录成功");
+    lang_map.set("ja", "ログイン成功");
+    i18n_messages.set("msg_login_success", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "Opening login modal...");
+    lang_map.set("zh-CN", "打开登录模态框...");
+    lang_map.set("ja", "ログインモーダルを開いています...");
+    i18n_messages.set("msg_log_open_login", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "Opening password login modal...");
+    lang_map.set("zh-CN", "打开密码登录模态框...");
+    lang_map.set("ja", "パスワードログイン模ーダルを開いています...");
+    i18n_messages.set("msg_log_open_password_login", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "📌 Step2: Device Management");
+    lang_map.set("zh-CN", "📌　 步骤2：设备管理");
+    lang_map.set("ja", "📌 ステップ２: デバイス管理");
     i18n_messages.set("msg_section_quick_title", lang_map);
 
     lang_map = new Map();
-    lang_map.set("en-US", "Click the button below to open the device manager modal:");
+    lang_map.set("en-US", "Login first by Step1, then manage your FIDO2 devices");
-    lang_map.set("zh-CN", "点击下面的按钮打开设备管理模态框：");
+    lang_map.set("zh-CN", "先在步骤1登录，再管理您的FIDO2设备");
-    lang_map.set("ja", "以下のボタンを押してデバイス管理モーダルを開いてください：");
+    lang_map.set("ja", "まずステップ１でログインして、FIDO2デバイスを管理します");
     i18n_messages.set("msg_quick_desc", lang_map);
 
     lang_map = new Map();
@@ -248,42 +315,78 @@
     lang_map.set("ja", "ポップアップ モードで現在のページに留まる");
     i18n_messages.set("msg_feature_1", lang_map);
 
+    lang_map = new Map();
+    lang_map.set("en-US", "Auto FIDO2/Passkey authentication");
+    lang_map.set("zh-CN", "自动 FIDO2/Passkey 认证");
+    lang_map.set("ja", "自動 FIDO2/Passkey 認証");
+    i18n_messages.set("msg_feature_2", lang_map);
+
+    lang_map = new Map();
+    lang_map.set("en-US", "Password login fallback option");
+    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", "Add/delete FIDO2 devices support");
     lang_map.set("zh-CN", "支持添加/删除 FIDO2 设备");
     lang_map.set("ja", "FIDO2 デバイスの追加/削除サポート");
-    i18n_messages.set("msg_feature_2", lang_map);
+    i18n_messages.set("msg_feature_4", 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);
+    i18n_messages.set("msg_feature_5", 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);
+    i18n_messages.set("msg_feature_6", 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);
+    i18n_messages.set("msg_feature_7", lang_map);
 
     lang_map = new Map();
-    lang_map.set("en-US", "Multi-language support (Chinese/English/Japanese)");
+    lang_map.set("en-US", "Multi-language support (English/Japanese/Chinese)");
-    lang_map.set("zh-CN", "多语言支持（中/英/日）");
+    lang_map.set("zh-CN", "多语言支持（英/日/中）");
-    lang_map.set("ja", "多言語対応（中/英/日）");
+    lang_map.set("ja", "多言語対応（英/日/中）");
-    i18n_messages.set("msg_feature_6", lang_map);
+    i18n_messages.set("msg_feature_8", 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_9", lang_map);
+    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", "Multi-language support (English/Japanese/Chinese)");
+    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", "Event callback system");
+    lang_map.set("zh-CN", "事件回调系统");
+    lang_map.set("ja", "イベント コールバック システム");
+    i18n_messages.set("msg_feature_9", lang_map);
+    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", "Event callback system");
+    lang_map.set("zh-CN", "事件回调系统");
+    lang_map.set("ja", "イベント コールバック システム");
+    i18n_messages.set("msg_feature_9", lang_map);
+
     lang_map = new Map();
     lang_map.set("en-US", "📊 Event Log");
     lang_map.set("zh-CN", "📊 事件日志");
@@ -357,6 +460,9 @@
     i18n_messages.set("msg_log_closed", lang_map);
 
     window.onload = function() {
+      if (window.location.hostname === '127.0.0.1') {
+        alert('本地测试请使用 localhost');
+      }
       setI18NText(i18n_messages);
     };
   </script>
@@ -369,53 +475,29 @@
     </div>
 
     <div class="demo-section">
-      <h2 id="msg_section_quick_title">📌 Quick Start</h2>
+      <h2 id="msg_section_login_title">👤 Step1: Login</h2>
-      <p id="msg_quick_desc">Click the button below to open the device manager modal:</p>
+      <p id="msg_login_desc">Click the button below to open the login modal:</p>
-      <button class="demo-btn demo-btn-primary" onclick="openDeviceManager()">
+      <button class="demo-btn demo-btn-primary" onclick="openPasskeyLogin()">
+        <i class="bx bx-key"></i> <span id="msg_btn_passkey_login">Passkey Login</span>
+      </button>
+       <button class="demo-btn demo-btn-secondary" onclick="openPasswordLogin()">
+         <i class="bx bx-palette"></i> <span id="msg_btn_password_login">Custom Style</span>
+       </button>
+       <button class="demo-btn demo-btn-secondary" id="btn-logout" onclick="logout()" disabled>
+         <i class="bx bx-log-out"></i> <span id="msg_btn_logout">Logout</span>
+       </button>
+    </div>
+
+    <div class="demo-section">
+      <h2 id="msg_section_quick_title">📌 Step2: Device Management</h2>
+      <p id="msg_quick_desc">Step1: Login first, then manage your FIDO2 devices</p>
+      <button class="demo-btn demo-btn-primary" id="btn-manage-devices" onclick="openDeviceManager()" disabled>
         <i class="bx bx-device"></i> <span id="msg_btn_manage">Manage Devices</span>
       </button>
-      <button class="demo-btn demo-btn-secondary" onclick="openCustomDeviceManager()">
+      <button class="demo-btn demo-btn-secondary" id="btn-custom-style" onclick="openCustomDeviceManager()" disabled>
         <i class="bx bx-palette"></i> <span id="msg_btn_custom">Custom Style</span>
       </button>
-    </div>
+      <p id="msg_login_required" style="color: #999; margin-top: 10px;">Please login first to access device management</p>
-
-    <div class="demo-section">
-      <h2 id="msg_section_code_title">💻 Code Examples</h2>
-      <p id="msg_code_simple">Simplest integration:</p>
-      <div class="code-block">
-        <code>Fido2UIManager.renderDeviceManager({
-  container: '#device-container',
-  mode: 'modal',
-  serverUrl: SERVER_URL
-});</code>
-      </div>
-
-      <p id="msg_code_theme">With theme customization:</p>
-      <div class="code-block">
-        <code>Fido2UIManager.renderDeviceManager({
-  container: '#device-container',
-  mode: 'modal',
-  serverUrl: SERVER_URL,
-  theme: {
-    primaryColor: '#ce59d9',
-    backgroundColor: '#f8f9fa'
-  },
-  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">Popup mode, stay on current page</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>
-      </ul>
     </div>
 
     <div class="demo-section">
@@ -425,12 +507,74 @@
         <span id="msg_btn_clear">Clear Log</span>
       </button>
     </div>
+
+    <div class="demo-section">
+      <h2 id="msg_section_code_title">💻 Code Examples</h2>
+      <p id="msg_code_simple">Simplest integration:</p>
+      <div class="code-block">
+        <code>Fido2UIManager.renderLogin({
+  container: '#login-container',
+  mode: 'modal',
+  serverUrl: SERVER_URL
+});</code>
+      </div>
+
+      <p id="msg_code_theme">With theme customization:</p>
+      <div class="code-block">
+        <code>Fido2UIManager.renderLogin({
+  container: '#login-container',
+  mode: 'modal',
+  serverUrl: SERVER_URL,
+  language: 'ja',
+  theme: {
+    primaryColor: '#ce59d9',
+    backgroundColor: '#faf5ff'
+  },
+  features: {
+    enablePasswordLogin: true,
+    autoShowPassword: true
+  }
+});</code>
+      </div>
+
+      <p id="msg_code_device">Device Manager:</p>
+      <div class="code-block">
+        <code>Fido2UIManager.renderDeviceManager({
+  userId: currentUserId,
+  container: '#device-container',
+  mode: 'modal',
+  serverUrl: SERVER_URL,
+  language: 'ja'
+});</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">Popup mode, stay on current page</span></li>
+        <li><i class="bx bx-check-circle"></i> <span id="msg_feature_2">Auto FIDO2/Passkey authentication</span></li>
+        <li><i class="bx bx-check-circle"></i> <span id="msg_feature_3">Password login fallback option</span></li>
+        <li><i class="bx bx-check-circle"></i> <span id="msg_feature_4">Add/delete FIDO2 devices support</span></li>
+        <li><i class="bx bx-check-circle"></i> <span id="msg_feature_5">Real-time device list display</span></li>
+        <li><i class="bx bx-check-circle"></i> <span id="msg_feature_6">Session status monitoring</span></li>
+        <li><i class="bx bx-check-circle"></i> <span id="msg_feature_7">Theme color and style customization</span></li>
+        <li><i class="bx bx-check-circle"></i> <span id="msg_feature_8">Multi-language support (English/Japanese/Chinese)</span></li>
+        <li><i class="bx bx-check-circle"></i> <span id="msg_feature_9">Event callback system</span></li>
+      </ul>
+    </div>
+
   </div>
 
+  <div id="login-container"></div>
   <div id="device-container"></div>
 
   <script>
-    const SERVER_URL = 'https://local.dqj-macpro.com';
+    const SERVER_URL = 'https://local.dqj-macpro.com';//'https://fido2.amipro.me';
+    
+    let currentUserId = null;
+    let isLoggedIn = false;
+    let loginManager = null;
     
     function getBrowserLanguage() {
       const lang = window.navigator.language || window.navigator.userLanguage;
@@ -443,11 +587,144 @@
 
     const CURRENT_LANG = getBrowserLanguage();//'https://fido2.amipro.me';
 
+    function enableDeviceManagementButtons() {
+      document.getElementById('btn-manage-devices').disabled = false;
+      document.getElementById('btn-custom-style').disabled = false;
+      document.getElementById('msg_login_required').style.display = 'none';
+      document.getElementById('btn-logout').disabled = false;
+    }
+
+    function disableDeviceManagementButtons() {
+      document.getElementById('btn-manage-devices').disabled = true;
+      document.getElementById('btn-custom-style').disabled = true;
+      document.getElementById('msg_login_required').style.display = 'block';
+      document.getElementById('btn-logout').disabled = true;
+    }
+
+    function logout() {
+      currentUserId = null;
+      isLoggedIn = false;
+      log('success', getI18NText(i18n_messages, 'msg_logout_success'));
+      disableDeviceManagementButtons();
+    }
+
+    function openPasskeyLogin() {
+      clearLog();
+      log('info', getI18NText(i18n_messages, 'msg_log_open_login'));
+
+      if (loginManager) {
+        loginManager.destroy();
+      }
+
+      loginManager = Fido2UIManager.renderLogin({
+        container: '#login-container',
+        mode: 'modal',
+        serverUrl: SERVER_URL,
+        language: CURRENT_LANG,
+        features: {
+          autoAuth: true,
+          enablePasswordLogin: true,
+          autoShowPassword: false,
+          maxPasswordAttempts: 3,
+          showRemainingAttempts: true,
+        },
+        callbacks: {
+          onFido2Success: function(username, session) {
+            log('success', getI18NText(i18n_messages, 'msg_login_success') + ': ' + username);
+            currentUserId = username;
+            isLoggedIn = true;
+            enableDeviceManagementButtons();
+            openDeviceManager();
+          },
+          onFido2Error: function(error) {
+            log('error', getI18NText(i18n_messages, 'msg_log_error') + ': ' + error.message);
+          },
+          onPasswordLogin: function(userId, password) {
+            return new Promise(function(resolve) {
+              log('info', 'Password login for user: ' + userId);
+              currentUserId = userId;
+              isLoggedIn = true;
+              enableDeviceManagementButtons();
+              resolve(true);
+            });
+          },
+          onPasswordExhausted: function(userId, attemptCount, maxAttempts) {
+            log('error', getI18NText(i18n_messages, 'msg_log_error') + ': ' + getI18NText(i18n_messages, 'msg_password_exhausted'));
+          },
+          onLoginClosed: function() {
+            log('info', getI18NText(i18n_messages, 'msg_log_closed'));
+          }
+        }
+      });
+    }
+
+    function openPasswordLogin() {
+      clearLog();
+      log('info', getI18NText(i18n_messages, 'msg_log_open_password_login'));
+
+      if (loginManager) {
+        loginManager.destroy();
+      }
+
+      loginManager = Fido2UIManager.renderLogin({
+        container: '#login-container',
+        mode: 'modal',
+        serverUrl: SERVER_URL,
+        language: CURRENT_LANG,
+        theme: {
+          logo: 'files/favicon.ico',
+          primaryColor: '#ce59d9',
+          backgroundColor: '#faf5ff',
+          textColor: '#6b21a8',
+          borderRadius: '12px'
+        },
+        features: {
+          autoAuth: false,
+          enablePasswordLogin: true,
+          autoShowPassword: true,
+          maxPasswordAttempts: 3,
+          showRemainingAttempts: true,
+        },
+        callbacks: {
+          onFido2Success: function(username, session) {
+            log('success', getI18NText(i18n_messages, 'msg_login_success') + ': ' + username);
+            currentUserId = username;
+            isLoggedIn = true;
+            enableDeviceManagementButtons();
+          },
+          onFido2Error: function(error) {
+            log('error', getI18NText(i18n_messages, 'msg_log_error') + ': ' + error.message);
+          },
+          onPasswordLogin: function(userId, password) {
+            return new Promise(function(resolve) {
+              log('info', 'Password login for user: ' + userId);
+              currentUserId = userId;
+              isLoggedIn = true;
+              enableDeviceManagementButtons();
+              resolve(true);
+            });
+          },
+          onPasswordExhausted: function(userId, attemptCount, maxAttempts) {
+            log('error', getI18NText(i18n_messages, 'msg_log_error') + ': ' + getI18NText(i18n_messages, 'msg_password_exhausted'));
+          },
+          onLoginClosed: function() {
+            log('info', getI18NText(i18n_messages, 'msg_log_closed'));
+          }
+        }
+      });
+    }
+
     function openDeviceManager() {
+      if (!isLoggedIn) {
+        log('info', getI18NText(i18n_messages, 'msg_login_required'));
+        return;
+      }
+      
       clearLog();
       log('info', getI18NText(i18n_messages, 'msg_log_open_default'));
 
       Fido2UIManager.renderDeviceManager({
+        userId: currentUserId,
         container: '#device-container',
         mode: 'modal',
         serverUrl: SERVER_URL,
@@ -476,10 +753,16 @@
     }
 
     function openCustomDeviceManager() {
+      if (!isLoggedIn) {
+        log('info', getI18NText(i18n_messages, 'msg_login_required'));
+        return;
+      }
+      
       clearLog();
       log('info', getI18NText(i18n_messages, 'msg_log_open_custom'));
 
       Fido2UIManager.renderDeviceManager({
+        userId: currentUserId,
         container: '#device-container',
         mode: 'modal',
         serverUrl: SERVER_URL,
@@ -537,5 +820,10 @@
       document.getElementById('log-container').innerHTML = '';
     }
   </script>
+  <p style="text-align: center; margin-top: 20px;">
+    <a href="https://amipro.me/fido2_top.html" target="_blank" style="display: inline-block; padding: 12px 24px; background: #667eea; color: white; text-decoration: none; border-radius: 8px; font-weight: bold;">
+      https://amipro.me/fido2_top.html
+    </a>
+  </p>
 </body>
 </html>

standalone-demo.html

@@ -442,7 +442,7 @@
   </div>
 
   <script>
-    const SERVER_URL = 'https://local.dqj-macpro.com';
+    const SERVER_URL = 'https://fido2.amipro.me';// 'https://local.dqj-macpro.com';
     
     function getBrowserLanguage() {
       const lang = window.navigator.language || window.navigator.userLanguage;
@@ -463,6 +463,7 @@
       console.log('Opening standalone device manager with default style...');
 
       Fido2UIManager.renderDeviceManager({
+        userId: 'user@example.com',
         mode: 'standalone',
         serverUrl: SERVER_URL,
         language: CURRENT_LANG,
@@ -494,6 +495,7 @@
       console.log('Opening standalone device manager with custom style...');
 
       Fido2UIManager.renderDeviceManager({
+        userId: 'user@example.com',
         mode: 'standalone',
         serverUrl: SERVER_URL,
         language: CURRENT_LANG,