Improved UI SDk and modal demo
This commit is contained in:
dqj
165
modal-demo.html
165
modal-demo.html
@@ -177,9 +177,8 @@
|
||||
.log-type-error {
|
||||
color: #f48771;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
@@ -366,6 +365,36 @@
|
||||
lang_map.set("ja", "テーマの色とスタイルのカスタマイズ");
|
||||
i18n_messages.set("msg_feature_7", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Login Default");
|
||||
lang_map.set("zh-CN", "登录缺省");
|
||||
lang_map.set("ja", "ログイン デフォルト");
|
||||
i18n_messages.set("msg_code_login_default", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Login Custom");
|
||||
lang_map.set("zh-CN", "登录定制");
|
||||
lang_map.set("ja", "ログイン カスタム");
|
||||
i18n_messages.set("msg_code_login_custom", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Device Manager Default");
|
||||
lang_map.set("zh-CN", "设备管理缺省");
|
||||
lang_map.set("ja", "デバイス管理 デフォルト");
|
||||
i18n_messages.set("msg_code_device_default", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Device Manager Custom");
|
||||
lang_map.set("zh-CN", "设备管理定制");
|
||||
lang_map.set("ja", "デバイス管理 カスタム");
|
||||
i18n_messages.set("msg_code_device_custom", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "JS Import Examples:");
|
||||
lang_map.set("zh-CN", "JS 引入示例：");
|
||||
lang_map.set("ja", "JS インポート例：");
|
||||
i18n_messages.set("msg_js_import_examples", lang_map);
|
||||
|
||||
lang_map = new Map();
|
||||
lang_map.set("en-US", "Multi-language support (English/Japanese/Chinese)");
|
||||
lang_map.set("zh-CN", "多语言支持（英/日/中）");
|
||||
@@ -510,41 +539,107 @@
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 id="msg_section_code_title">💻 Code Examples</h2>
|
||||
<p id="msg_code_simple">Simplest integration:</p>
|
||||
|
||||
<p id="msg_js_import_examples">JS Import Examples:</p>
|
||||
<div class="code-block">
|
||||
<code>Fido2UIManager.renderLogin({
|
||||
container: '#login-container',
|
||||
mode: 'modal',
|
||||
serverUrl: SERVER_URL
|
||||
<code><script src="files/popper.js"></script><br>
|
||||
<script src="files/bootstrap.js"></script><br>
|
||||
<script src="files/dfido2-lib.js"></script><br>
|
||||
<script src="files/fido2-ui-sdk.js"></script><br>
|
||||
<script src="files/amipro_utils.js"></script></code>
|
||||
</div>
|
||||
|
||||
<p id="msg_code_login_default">Login Default:</p>
|
||||
<div class="code-block">
|
||||
<code>// Login Default<br>
|
||||
Fido2UIManager.renderLogin({<br>
|
||||
container: '#login-container',<br>
|
||||
mode: 'modal',<br>
|
||||
serverUrl: SERVER_URL,<br>
|
||||
language: CURRENT_LANG<br>
|
||||
});</code>
|
||||
</div>
|
||||
|
||||
<p id="msg_code_theme">With theme customization:</p>
|
||||
<p id="msg_code_login_custom">Login Custom:</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>// Login with Custom Theme<br>
|
||||
Fido2UIManager.renderLogin({<br>
|
||||
container: '#login-container',<br>
|
||||
mode: 'modal',<br>
|
||||
serverUrl: SERVER_URL,<br>
|
||||
language: 'ja',<br>
|
||||
theme: {<br>
|
||||
logo: 'files/favicon.ico',<br>
|
||||
primaryColor: '#ce59d9',<br>
|
||||
backgroundColor: '#faf5ff',<br>
|
||||
textColor: '#6b21a8',<br>
|
||||
borderRadius: '12px'<br>
|
||||
},<br>
|
||||
features: {<br>
|
||||
autoAuth: false,<br>
|
||||
enablePasswordLogin: true,<br>
|
||||
autoShowPassword: true,<br>
|
||||
maxPasswordAttempts: 3<br>
|
||||
},<br>
|
||||
callbacks: {<br>
|
||||
onFido2Success: function(username, session) {<br>
|
||||
// Handle login success<br>
|
||||
},<br>
|
||||
onFido2Error: function(error) {<br>
|
||||
// Handle error<br>
|
||||
}<br>
|
||||
}<br>
|
||||
});</code>
|
||||
</div>
|
||||
|
||||
<p id="msg_code_device">Device Manager:</p>
|
||||
<p id="msg_code_device_default">Device Manager Default:</p>
|
||||
<div class="code-block">
|
||||
<code>Fido2UIManager.renderDeviceManager({
|
||||
userId: currentUserId,
|
||||
container: '#device-container',
|
||||
mode: 'modal',
|
||||
serverUrl: SERVER_URL,
|
||||
language: 'ja'
|
||||
<code>// Device Manager Default<br>
|
||||
Fido2UIManager.renderDeviceManager({<br>
|
||||
userId: currentUserId,<br>
|
||||
container: '#device-container',<br>
|
||||
mode: 'modal',<br>
|
||||
serverUrl: SERVER_URL,<br>
|
||||
language: CURRENT_LANG<br>
|
||||
});</code>
|
||||
</div>
|
||||
|
||||
<p id="msg_code_device_custom">Device Manager Custom:</p>
|
||||
<div class="code-block">
|
||||
<code>// Device Manager with Custom Style<br>
|
||||
Fido2UIManager.renderDeviceManager({<br>
|
||||
userId: currentUserId,<br>
|
||||
container: '#device-container',<br>
|
||||
mode: 'modal',<br>
|
||||
serverUrl: SERVER_URL,<br>
|
||||
language: 'ja',<br>
|
||||
theme: {<br>
|
||||
logo: 'files/favicon.ico',<br>
|
||||
primaryColor: '#ce59d9',<br>
|
||||
backgroundColor: '#faf5ff',<br>
|
||||
textColor: '#6b21a8',<br>
|
||||
borderRadius: '12px'<br>
|
||||
},<br>
|
||||
features: {<br>
|
||||
showAddButton: true,<br>
|
||||
showDeleteButton: true,<br>
|
||||
showUserInfo: true,<br>
|
||||
showSessionStatus: true<br>
|
||||
},<br>
|
||||
callbacks: {<br>
|
||||
onInit: function(manager) {<br>
|
||||
// Manager initialized<br>
|
||||
},<br>
|
||||
onDeviceAdded: function(device) {<br>
|
||||
// Device added<br>
|
||||
},<br>
|
||||
onDeviceDeleted: function(deviceId) {<br>
|
||||
// Device deleted<br>
|
||||
},<br>
|
||||
onClose: function() {<br>
|
||||
// Manager closed<br>
|
||||
}<br>
|
||||
}<br>
|
||||
});</code>
|
||||
</div>
|
||||
</div>
|
||||
@@ -585,7 +680,7 @@
|
||||
return 'en-US';
|
||||
}
|
||||
|
||||
const CURRENT_LANG = getBrowserLanguage();//'https://fido2.amipro.me';
|
||||
const CURRENT_LANG = getBrowserLanguage();
|
||||
|
||||
function enableDeviceManagementButtons() {
|
||||
document.getElementById('btn-manage-devices').disabled = false;
|
||||
@@ -602,6 +697,7 @@
|
||||
}
|
||||
|
||||
function logout() {
|
||||
Fido2UIManager.logout();
|
||||
currentUserId = null;
|
||||
isLoggedIn = false;
|
||||
log('success', getI18NText(i18n_messages, 'msg_logout_success'));
|
||||
@@ -825,5 +921,16 @@
|
||||
https://amipro.me/fido2_top.html
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<!--
|
||||
CSP (Content Security Policy) 示例 - 生产环境部署建议添加：
|
||||
|
||||
<meta http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self';
|
||||
script-src 'self' 'unsafe-inline';
|
||||
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
|
||||
font-src 'self' https://fonts.gstatic.com;
|
||||
connect-src 'self' https://your-server.com;">
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user