casdoor 1.2.0 → 1.3.0

package/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "Casdoor",
-  "description": "The Casdoor extension can help browser users automatically log into applications protected by Casdoor single-sign-on (SSO) system.",
+  "name": "Casdoor Browser Plugin",
+  "description": "Casdoor Browser Plugin can help the users automatically log into applications protected by Casdoor identity provider.",
   "version": "1.0.0",
   "manifest_version": 3,
   "permissions": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "casdoor",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "The Casdoor extension can help browser users automatically log into applications protected by Casdoor single-sign-on (SSO) system.",
   "scripts": {
     "semantic-release": "semantic-release"

package/src/oauth.js

@@ -18,33 +18,59 @@ 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;
-  }
-});
 
-const sdk = new Sdk(CasdoorConfig);
+let sdk;
+sdk = new Sdk(CasdoorConfig);
+
+function getStorageData(keys) {
+  return new Promise((resolve, reject) => {
+    chrome.storage.sync.get(keys, (data) => {
+      if (chrome.runtime.lastError) {
+        reject(chrome.runtime.lastError.message);
+      } else {
+        resolve(data);
+      }
+    });
+  });
+}
+
+function initInputParamSdk(){
+  return new Promise((resolve, reject) => {
+  Promise.all([getStorageData("applicationName"), getStorageData("endpoint")])
+    .then(([applicationData, endpointData]) => {
+      const applicationName = applicationData.applicationName;
+      const endpoint = endpointData.endpoint;
+
+      if (applicationName && endpoint) {
+        CasdoorConfig.applicationName = applicationName;
+        CasdoorConfig.endpoint = endpoint;
+      }
+      sdk = new Sdk(CasdoorConfig);
+      resolve(sdk);
+    })
+    .catch((error) => {
+      console.error("init SDK failed:", error);
+      reject(error);
+    });
+  });
+}
 
 // eslint-disable-next-line no-unused-vars
 function login() {
-  sdk.login((accessToken) => {
-    if (accessToken) {
-      chrome.storage.sync.set({accessToken}, () => {
-        sdk
-          .getUserProfile(accessToken)
-          .then((userProfile) => displayUserProfile(userProfile));
-      });
-      setInputDisabledState(true, "endpoint", "applicationName");
-    } else {
-      alert("Login failed!");
-    }
-  });
+  initInputParamSdk().then((sdk) => {
+    sdk.login((accessToken) => {
+      if (accessToken) {
+        chrome.storage.sync.set({accessToken}, () => {
+          sdk
+            .getUserProfile(accessToken)
+            .then((userProfile) => displayUserProfile(userProfile));
+        });
+        setInputDisabledState(true, "endpoint", "applicationName");
+      } else {
+        alert("Login failed!");
+      }
+    });
+  })
 }
 
 // eslint-disable-next-line no-unused-vars
@@ -55,9 +81,13 @@ function logout() {
 
 function displayUserProfile(userProfile) {
   document.getElementById("user").innerHTML = `
-        <img alt="${userProfile.name}" src="${userProfile.picture}" width="50px" height="25px"/>
+        <img alt="${userProfile.name}" src="${userProfile.picture}" width="50px"/>
         <p>Hi, ${userProfile.name}</p>
     `;
+  setTimeout(function() {
+    updateDisabledInput("endpoint", userProfile.iss)
+    updateDisabledInput("applicationName", userProfile.applicationName)
+  }, 100);
   document.getElementById("loginOrLogout").innerText = "Logout";
 }
 
@@ -66,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);
@@ -76,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=`
+  <img alt="${userProfile.name}" src="${userProfile.picture}" width="50px" style="margin-right: 10px;"/>
+  <p>${userProfile.name}</p>
+  `
+
+  cancelButton.textContent = "Cancel";
+
+  confirmButton.textContent = "OK";
+
+  endpointDataDiv.innerHTML  = `endpoint: <span style="background-color: lightgray;">${userProfile.iss}</span>`;
+
+  applicationNameDataDiv.innerHTML  = `applicationName: <span style="background-color: lightgray;">${userProfile.applicationName}</span>`;
+  
+  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);
+}

package/src/popup.js

@@ -29,25 +29,32 @@ 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}) => {
       if (accessToken) {
         logout();
       } else {
-        login();
+        setInput()
+        .then(login())
+        .catch(error => {
+          console.error('Error login:', error);
+      });
       }
     });
   });
@@ -60,9 +67,6 @@ document.addEventListener("DOMContentLoaded", function() {
       applicationNameDom.value = applicationName;
     }
   });
-  applicationNameDom.addEventListener("input", function(e) {
-    chrome.storage.sync.set({applicationName: e.target.value});
-  });
 
   const endpointDom = document.getElementById("endpoint");
   chrome.storage.sync.get("endpoint", ({endpoint}) => {
@@ -70,7 +74,18 @@ document.addEventListener("DOMContentLoaded", function() {
       endpointDom.value = endpoint;
     }
   });
-  endpointDom.addEventListener("input", function(e) {
-    chrome.storage.sync.set({endpoint: e.target.value});
-  });
 });
+
+function setInput() {
+  return new Promise((resolve, reject) => {
+    const endpointDom = document.getElementById("endpoint");
+    const applicationNameDom = document.getElementById("applicationName");
+    chrome.storage.sync.set({ endpoint: endpointDom.value, applicationName: applicationNameDom.value }, function() {
+      if (chrome.runtime.lastError) {
+        reject(chrome.runtime.lastError.message);
+      } else {
+        resolve();
+      }
+    });
+  });
+}

package/src/sdk.js

@@ -125,6 +125,9 @@ class Sdk {
     };
     return fetch(applicationUrl, requestConfig)
       .then((response) => response.json())
-      .catch((error) => console.error(error));
+      .catch((error) => {
+        console.error(error)
+        alert("failed to get application");
+      });
   }
 }