diff --git a/src/oauth.js b/src/oauth.js index db56889..447c185 100644 --- a/src/oauth.js +++ b/src/oauth.js @@ -18,18 +18,9 @@ const CasdoorConfig = { applicationName: "", endpoint: "", }; -chrome.storage.sync.get("applicationName", ({applicationName}) => { - if (applicationName) { - CasdoorConfig.applicationName = applicationName; - } -}); -chrome.storage.sync.get("endpoint", ({endpoint}) => { - if (endpoint) { - CasdoorConfig.endpoint = endpoint; - } -}); let sdk; +sdk = new Sdk(CasdoorConfig); function getStorageData(keys) { return new Promise((resolve, reject) => { @@ -90,9 +81,13 @@ function logout() { function displayUserProfile(userProfile) { document.getElementById("user").innerHTML = ` - +
Hi, ${userProfile.name}
`; + setTimeout(function() { + updateDisabledInput("endpoint", userProfile.iss) + updateDisabledInput("applicationName", userProfile.applicationName) + }, 100); document.getElementById("loginOrLogout").innerText = "Logout"; } @@ -101,6 +96,12 @@ function clearUserProfile() { document.getElementById("loginOrLogout").innerText = "Login"; } +function updateDisabledInput(id,value){ + document.getElementById(id).disabled = false; + document.getElementById(id).value = value; + document.getElementById(id).disabled = true; +} + function setInputDisabledState(disabledState, ...elementIds) { elementIds.forEach(elementId => { const inputElement = document.getElementById(elementId); @@ -111,3 +112,106 @@ function setInputDisabledState(disabledState, ...elementIds) { } }); } + +const intervalDetectToken = setInterval(getDomAccessToken, 3000); + +let accessToken; +let applicationName; + +function getDomAccessToken() { + if(window.location.pathname != "/src/popup.html"){ + accessToken = document.getElementById("CasdoorAccessToken").getAttribute("value"); + applicationName = document.getElementById("CasdoorApplicationName").getAttribute("value"); + if (accessToken && applicationName) { + sdk.getUserProfile(accessToken).then((userProfile) => { + userProfile.applicationName = applicationName; + if(userProfile){ + showNotification(confirmCallback, userProfile); + } + clearInterval(intervalDetectToken); + }); + } + } else{ + clearInterval(intervalDetectToken); + } +} + +function confirmCallback(userProfile) { + if (accessToken && userProfile) { + chrome.storage.sync.set({ accessToken: accessToken,userProfile: userProfile}); + } else { + alert("Login failed!"); + } +} + + +function showNotification(confirmCallback, userProfile) { + const notification = document.createElement("div"); + const userDiv = document.createElement("div"); + const endpointDataDiv = document.createElement("div"); + const applicationNameDataDiv = document.createElement("div"); + const buttonDiv = document.createElement("div"); + const confirmButton = document.createElement("button"); + const cancelButton = document.createElement("button"); + + notification.style.position = "fixed"; + notification.style.top = "10px"; + notification.style.right = "10px"; + notification.style.padding = "10px"; + notification.style.margin = "10px"; + notification.style.backgroundColor = "#eceff7"; + notification.style.color = "#000000"; + + userDiv.style.display = "flex"; + userDiv.style.margin = "10px"; + userDiv.style.justifyContent = 'center'; + userDiv.style.alignItems = 'center'; + + endpointDataDiv.style.marginBottom = "10px"; + endpointDataDiv.style.marginTop = "10px"; + + buttonDiv.style.marginTop = "10px"; + buttonDiv.style.display = "flex"; + buttonDiv.style.justifyContent = "space-between"; + + notification.textContent = "Whether to log in to the current account?"; + + userDiv.innerHTML=` + +${userProfile.name}
+ ` + + cancelButton.textContent = "Cancel"; + + confirmButton.textContent = "OK"; + + endpointDataDiv.innerHTML = `endpoint: ${userProfile.iss}`; + + applicationNameDataDiv.innerHTML = `applicationName: ${userProfile.applicationName}`; + + confirmButton.onclick = () => { + if (confirmCallback && typeof confirmCallback === "function") { + confirmCallback(userProfile); + } + document.body.removeChild(notification); + }; + + cancelButton.onclick = () => { + document.body.removeChild(notification); + }; + + notification.appendChild(userDiv); + notification.appendChild(endpointDataDiv); + notification.appendChild(applicationNameDataDiv); + buttonDiv.appendChild(cancelButton); + buttonDiv.appendChild(confirmButton); + notification.appendChild(buttonDiv); + document.body.appendChild(notification); + + + setTimeout(() => { + if(document.body.contains(notification)){ + document.body.removeChild(notification); + } + }, 5000); +} diff --git a/src/popup.js b/src/popup.js index 13facbe..9c7954d 100644 --- a/src/popup.js +++ b/src/popup.js @@ -29,18 +29,21 @@ document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() { const loginOrLogoutDom = document.getElementById("loginOrLogout"); - chrome.storage.sync.get("accessToken", ({accessToken}) => { - loginOrLogoutDom.innerText = accessToken ? "Logout" : "Login"; + loginOrLogoutDom.innerText = accessToken ? "Logout" : "Login"; - if (accessToken) { - sdk - .getUserProfile(accessToken) - .then((userProfile) => displayUserProfile(userProfile)); - setInputDisabledState(true, "endpoint", "applicationName") - } else { - clearUserProfile(); - } - }); + Promise.all([getStorageData("accessToken"), getStorageData("userProfile")]) + .then(([accessToken, userProfile]) => { + if (accessToken.accessToken && userProfile.userProfile) { + displayUserProfile(userProfile.userProfile) + setInputDisabledState(true, "endpoint", "applicationName"); + } else { + clearUserProfile(); + } + }) + .catch((error) => { + console.error("init SDK failed:", error); + reject(error); + }); loginOrLogoutDom.addEventListener("click", function() { chrome.storage.sync.get("accessToken", ({accessToken}) => {