Client with UI

login.html

@@ -62,7 +62,7 @@
         // For stand alone: 'https://local.dqj-macpro.com'
         // For proxy: set 'https://mac-air-m2.dqj-home.com'
       -->
-      setFidoServerURL('https://mac-air-m2.dqj-home.com');//'https://fido2.amipro.me');
+      setFidoServerURL('https://local.dqj-macpro.com');//'https://fido2.amipro.me');
 
       const i18n_messages = new Map();
       
@@ -114,6 +114,42 @@
       lang_map.set("ja", "パスワードレス ログイン");
       i18n_messages.set("title_fido2_login", lang_map);
 
+      lang_map = new Map();
+      lang_map.set("en-US", "This sample is production-oriented.");
+      lang_map.set("zh-CN", "此示例面向生产环境。");
+      lang_map.set("ja", "このサンプルは本番指向です。");
+      i18n_messages.set("msg_prod_note_title", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Handles real-world browser differences");
+      lang_map.set("zh-CN", "处理真实世界的浏览器差异");
+      lang_map.set("ja", "実際のブラウザー差異に対応");
+      i18n_messages.set("msg_prod_note_1", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Uses recommended WebAuthn options");
+      lang_map.set("zh-CN", "使用推荐的 WebAuthn 选项");
+      lang_map.set("ja", "推奨される WebAuthn オプションを使用");
+      i18n_messages.set("msg_prod_note_2", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Mirrors production flow (RP ID, challenge, verification)");
+      lang_map.set("zh-CN", "模拟生产流程（RP ID、质询、验证）");
+      lang_map.set("ja", "本番フロー（RP ID、チャレンジ、検証）を再現");
+      i18n_messages.set("msg_prod_note_3", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Safe to use as a starting point");
+      lang_map.set("zh-CN", "可安全作为起点使用");
+      lang_map.set("ja", "スターターとして安全に利用可能");
+      i18n_messages.set("msg_prod_note_4", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "15-minute integration guide");
+      lang_map.set("zh-CN", "15分钟接入指南");
+      lang_map.set("ja", "15分での導入ガイド");
+      i18n_messages.set("msg_integration_link", lang_map);
+
       window.onload = function() {
         logoutFido2UserSession();
 
@@ -173,6 +209,19 @@
               <h4 class="mb-2" id="msg_welcome">Welcome to amiPro sample site!</h4>
               <p class="mb-4" id="msg_intro">Please sign-in to your account and start the adventure</p>
 
+              <div class="mb-4">
+                <p class="fw-semibold mb-2" id="msg_prod_note_title">This sample is production-oriented.</p>
+                <ul class="ps-3 mb-4" style="list-style: disc;">
+                  <li id="msg_prod_note_1">Handles real-world browser differences</li>
+                  <li id="msg_prod_note_2">Uses recommended WebAuthn options</li>
+                  <li id="msg_prod_note_3">Mirrors production flow (RP ID, challenge, verification)</li>
+                  <li id="msg_prod_note_4">Safe to use as a starting point</li>
+                </ul>
+                <p class="mb-4">
+                  <a id="msg_integration_link" href="https://www.amipro.me/integration.html" target="_blank" rel="noopener">30-minute integration guide</a>
+                </p>
+              </div>
+
               <div id="msg_uid_input" style="display:none;">Input User ID, please!</div>
 
               <form class="mb-3" action="devices.html" method="GET" onsubmit="return checkInput();">