feat: add detect CasdoorAccessToken and notification (#23)

casdoor · Mar 29, 2024 · fe14f8f · fe14f8f
1 parent 051bd29
commit fe14f8f
Show file tree

Hide file tree

Showing 2 changed files with 129 additions and 22 deletions.
diff --git 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 = `
-        <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";
 }
 
@@ -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=`
+  <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);
+}
diff --git 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}) => {