Improved UI SDk and modal demo

This commit is contained in:
dqj
2026-01-18 21:48:19 +09:00
parent 9bbbae8dd2
commit 055d59f979
7 changed files with 373 additions and 167 deletions

View File

@@ -46,7 +46,6 @@
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="files/config.js"></script>
<script src="files/jquery.js"></script>
<script src="files/popper.js"></script>
<script src="files/bootstrap.js"></script>
<script src="files/perfect-scrollbar.js"></script>
@@ -169,27 +168,25 @@
window.location.href = "login.html";
}
}
$('#user_id').html(user_id);
document.getElementById('user_id').textContent = user_id;
listDevices();
}
async function setSessionStatus(){
const sessionOk = await validSession();
const sessionStatusEl = document.getElementById('session_status');
if(sessionOk){
$('#session_status').html(getI18NText(i18n_messages, 'msg_session_status_ok'))
sessionStatusEl.textContent = getI18NText(i18n_messages, 'msg_session_status_ok');
}else{
$('#session_status').html(getI18NText(i18n_messages, 'msg_session_status_fail'))
sessionStatusEl.textContent = getI18NText(i18n_messages, 'msg_session_status_fail');
}
}
async function addDevice(display_name){
//You can change the display name or ask the user to input it, if the display_name is null.
const result = await registerFido2(user_id, display_name?display_name:'dis_'+user_id);
if(result.status === 'ok'){
//You can try to insert user_id into your user db now if this user_id does not exist in your db.
alert($('#msg_register_ok').html());
alert(document.getElementById('msg_register_ok').textContent);
listDevices();
}else{
errProcessFido2(result)
@@ -213,17 +210,17 @@
async function listDevices(){
const result = await listUserDevicesFido2()
$("#devices_list").html("");
const devicesListEl = document.getElementById('devices_list');
devicesListEl.innerHTML = "";
if("ok" === result.status){
let lst_html = ""
for(let dev of result.devices){
var dev_desc = dev.desc
if(!dev_desc || 0 === dev_desc.length){
let parser = new UAParser(dev.userAgent);
if(parser.getOS().name){
dev_desc = parser.getDevice().model + ',' + parser.getOS().name + ',' + parser.getBrowser().name;
const parser = new UAParser(dev.userAgent);
const osName = parser.getOS().name;
if(osName){
dev_desc = parser.getDevice().model + ',' + osName + ',' + parser.getBrowser().name;
}else{
dev_desc = dev.userAgent;
}
@@ -231,14 +228,35 @@
var date = new Date(dev.registered_time);
lst_html += '<tr><td><strong>'+ dev_desc +'</strong></td><td>'+
date.toLocaleString()+'</td><td>'+
"<a style=\"padding-left: 0px;\" class=\"dropdown-item\" href=\"javascript:delDevice('"+dev.device_id+"');\">"+
'<i class="bx bx-trash me-1"></i><span id="title_del"> '+ getI18NText(i18n_messages, 'title_del') +'</span></a></div></td></tr>'
const row = document.createElement('tr');
const tdDevice = document.createElement('td');
const strong = document.createElement('strong');
strong.textContent = dev_desc;
tdDevice.appendChild(strong);
const tdTime = document.createElement('td');
tdTime.textContent = date.toLocaleString();
const tdAction = document.createElement('td');
const link = document.createElement('a');
link.className = 'dropdown-item';
link.href = "javascript:delDevice('" + dev.device_id + "');";
const icon = document.createElement('i');
icon.className = 'bx bx-trash me-1';
const span = document.createElement('span');
span.textContent = ' ' + getI18NText(i18n_messages, 'title_del');
link.appendChild(icon);
link.appendChild(span);
tdAction.appendChild(link);
row.appendChild(tdDevice);
row.appendChild(tdTime);
row.appendChild(tdAction);
devicesListEl.appendChild(row);
}
$("#devices_list").html(lst_html);
}else{
const msg = getI18NErrorMessage(result.errorMessage); //fido2LibErrMsgLanguages.japanese
const msg = getI18NErrorMessage(result.errorMessage);
alert(msg?msg:result.errorMessage);
}
}