Merge pull request #130 from NIAEFEUP/fix/autologin

Fix auto-login to new layout

background.js

@@ -31,7 +31,7 @@ chrome.runtime.onInstalled.addListener((object) => {
 
   if (object.reason === "update") {
     for (const opt in popupOptions) {
-      if (chrome.storage.local.get(opt) != null)
+      if (chrome.storage.local.get(opt) == null)
         chrome.storage.local.set({[opt]: popupOptions[opt]});
     }
   }
@@ -52,7 +52,7 @@ chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
     }
     message.auto_login.verifed = true;
     await chrome.storage.local.set({ auto_login: message.auto_login });
-    chrome.tabs.reload(sender.tab.id);
+    sendResponse(true);
   }
 });
 

content-scripts/src/index.js

@@ -57,8 +57,7 @@ const init = async () => {
   // // Inject user preferences
   const data = await getStorage(userPreferences);
   injectAllChanges(data);
-  rememberLogin(data);
-
+
   functionsToExecute.forEach(f => {
     try {
       f.func();
@@ -67,6 +66,10 @@ const init = async () => {
       console.error(error);
     }
   });
+  // we run rememberLogin at last, because it's async
+  // TODO (luisd): make a better mechanism for functions that depend on previous
+  // steps and might be async
+  await rememberLogin(data);
 };
 
 init();

content-scripts/src/modules/layout.js

@@ -68,7 +68,7 @@ const authentication = (auth) =>
                     }">
                         <span class="se-icon ri-money-euro-circle-line"></span> Conta corrente
                     </a>
-                    <a href="vld_validacao.sair?p_address=WEB_PAGE.INICIAL">
+                    <a id="se-logout-button" href="vld_validacao.sair?p_address=WEB_PAGE.INICIAL">
                         <span class="se-icon ri-logout-box-line"></span> Terminar Sessão
                     </a>
                 </nav>

content-scripts/src/modules/login.js

@@ -1,73 +1,91 @@
+import { fetchSigarraPage } from "./utilities/pageUtils";
 import { getStorage, setStorage } from "./utilities/storage";
 
 const emptyLogin = { auto_login: { verifed: false, user_info: "" } };
 
-var auto_login;
+var auto_login = {};
 
 export const rememberLogin = async (data) => {
     if (!(data?.autoLogin === "on")) return;
 
+    const isAuthenticated = document.querySelector('#se-auth-form') == null;
+
     auto_login = await getStorage("auto_login");
-    console.log(auto_login);
-    if (auto_login === undefined) {
+    if (!auto_login) {
         await setStorage(emptyLogin);
         auto_login = emptyLogin;
     }
     if (!auto_login.verifed) {
-        if (document.querySelector(".autenticado") == null) {
+        if (!isAuthenticated) {
             //inject button onClick
             document
-                .querySelector(".autenticacao > form")
+                .querySelector('#se-auth-form')
                 .addEventListener("submit", loginButtonHandler);
         }
 
-    } else if (document.querySelector(".autenticado") == null) {
+    } else if (!isAuthenticated) {
         const res = await tryLogin(auto_login);
-        if (res.status != 200) {
-            console.log("Something went wrong while logging in...");
-            return;
-        }
-        //check if there is a error while loading page
-        const htmlRes = document.createElement('html');
-        htmlRes.innerHTML = await res.text();
-        if(htmlRes.querySelector("p.aviso-invalidado") != null){
+        // NOTE(luisd): if this happens probably the login is now invalid
+        // eg.: user changes password / expires
+        // we should then prompt the user to login again
+        if(res.querySelector("p.aviso-invalidado") != null){
             await setStorage(emptyLogin);
+            return; 
         }
         await chrome.runtime.sendMessage({ type: "login", auto_login: auto_login });
+        window.location.reload();
+
 
     }
-    if (document.querySelector(".autenticado") != null) {
-        document.querySelector(".terminar-sessao").onclick = function () {
+    if (isAuthenticated) {
+        document.querySelector("#se-logout-button").onclick = function () {
             setStorage(emptyLogin);
         }
     };
 };
 
 
 
-function loginButtonHandler(event) {
+export const loginButtonHandler = (event) => {
     event.preventDefault();
+
+    document.getElementById("se-auth-user").classList.remove("se-auth-invalid");
+    document.getElementById("se-auth-pass").classList.remove("se-auth-invalid");
+    document.getElementById("se-auth-wrong-details")?.remove();
+
+
+
+
     auto_login.user_info = btoa(JSON.stringify({
-        user: document.getElementById("user").value,
-        pass: document.getElementById("pass").value
+        user: document.getElementById("se-auth-user").value,
+        pass: document.getElementById("se-auth-pass").value
     }));
 
     tryLogin(auto_login).then(
         async (res) => {
-            if (res.status != 200) {
-                console.log("Something went wrong while logging in...");
+            if(res.querySelector("p.aviso-invalidado") != null){
+                document.getElementById("se-auth-user").classList.add("se-auth-invalid");
+                document.getElementById("se-auth-pass").classList.add("se-auth-invalid");
+                const p = document.createElement('p');
+                p.id = "se-auth-wrong-details";
+                p.textContent = "Utilizador ou password incorreta."
+                document.querySelector('#se-auth-form').prepend(p);
+                console.log("Wrong details... try again");
                 return;
             }
+
             const loggedIn = await chrome.runtime.sendMessage({ type: "login", auto_login: auto_login });
             if (loggedIn === false) {
-                //TODO: (issue #59) show error to user
-                console.log("Wrong details... try again");
                 return;
+            } else {
+                window.location.reload();
             }
         }
     );
+    return false;
 }
 
+
 async function tryLogin(auto_login) {
     const user_info = JSON.parse(atob(auto_login.user_info));
     const formBody = new URLSearchParams();
@@ -78,7 +96,7 @@ async function tryLogin(auto_login) {
     formBody.append("p_pass", user_info.pass);
     const url = new URL('https://sigarra.up.pt/feup/pt/vld_validacao.validacao');
     url.search = formBody.toString();
-    return await fetch(url,
+    return await fetchSigarraPage(url,
         {
             method: "POST",
             headers: {

content-scripts/src/modules/utilities/pageUtils.js

@@ -153,8 +153,14 @@ export function groupChildrenBySelector(childSelectors, classList){
 
 }
 
-export async function fetchSigarraPage(url) {
-    const r = await fetch(url);
+/**
+ * 
+ * @param {RequestInfo | URL} url 
+ * @param {RequestInit | undefined} init 
+ * @returns 
+ */
+export async function fetchSigarraPage(url, init=undefined) {
+    const r = await fetch(url, init);
 
     const decoder = new TextDecoder(
         r.headers.get("Content-Type").replace("text/html; charset=", "")

css/simpler.css

@@ -250,6 +250,17 @@ body:is(body) {
     overflow: hidden;
 }
 
+.se-auth-invalid {
+  border: 1px solid #cc0000 !important;
+
+}
+
+#se-auth-wrong-details {
+  color: #cc0000;
+  font-weight: bold;
+  font-size: 0.8em;
+}
+
 #se-auth-close-button,
 #se-auth-button {
     grid-area: 1 / 1;