Refactor Layout to use tsx

content-scripts/components/Button.tsx

@@ -0,0 +1,21 @@
+import jsx from "texsaur";
+import Icon from "./Icon";
+
+interface ButtonProps {
+    title?: string;
+    icon?: string;
+    id?: string;
+    className?: string;
+    onclick?: (e: Event) => void;
+}
+
+const Button: JSX.Component<ButtonProps> = ({ title, icon, id, className, onclick }) => {
+    return (
+        <button id={id ? id : ""} className={className ? className : ""} onclick={onclick}>
+            {icon ? <Icon name={icon} /> : ""}
+            {title ? <span>{title}</span> : ""}
+        </button>
+    );
+}
+
+export default Button;

content-scripts/components/Header.tsx

@@ -0,0 +1,59 @@
+import jsx from "texsaur";
+
+import HeaderLinks from "./HeaderLinks";
+import Authentication from "./HeaderAuthentication";
+import { AuthSession } from "../types";
+
+const HEADER_LINKS = {
+  Estudantes: {
+    Bolsas: "web_base.gera_pagina?p_pagina=242366",
+    "Escolher turmas": "it_geral.ver_insc",
+    "Estatutos especiais": "web_base.gera_pagina?p_pagina=242322",
+    Exames: "web_base.gera_pagina?p_pagina=242382",
+    Matrículas: "web_base.gera_pagina?p_pagina=31583",
+    Propinas: "web_base.gera_pagina?p_pagina=propinas ano corrente",
+    "Mais opções": "web_base.gera_pagina?p_pagina=ESTUDANTES",
+  },
+  Faculdade: {
+    Alumni: "web_base.gera_pagina?p_pagina=243186",
+    "Calendário escolar":
+      "web_base.gera_pagina?p_pagina=página estática genérica 106",
+    Cursos: "cur_geral.cur_inicio",
+    Departamentos: "uni_geral.nivel_list?pv_nivel_id=1",
+    Empresas: "web_base.gera_pagina?p_pagina=242380",
+    Governo: "web_base.gera_pagina?p_pagina=31715",
+    Notícias: "noticias_geral.lista_noticias",
+    "Serviços/Gabinetes": "uni_geral.nivel_list?pv_nivel_id=4",
+  },
+  Pesquisa: {
+    Edifícios: "instal_geral.edificio_query",
+    Estudantes: "fest_geral.fest_query",
+    Horários: "hor_geral.pesquisa_form",
+    Notícias: "noticias_geral.pesquisa",
+    Pessoal: "func_geral.formquery",
+    "Projetos de investigação": "projectos_geral.pesquisa_projectos",
+    Publicações: "pub_geral.pub_pesquisa",
+    Salas: "instal_geral.espaco_query",
+    Turmas: "it_turmas_geral.formquery",
+    "Unidades Curriculares": "ucurr_geral.pesquisa_ucs",
+    "Mais opções": "web_base.gera_pagina?p_pagina=1831",
+  },
+};
+
+interface Props {
+  auth?: AuthSession | null;
+}
+
+const Header = ({ auth = null }: Props) => {
+  return (
+    <header id="se-header">
+      <a id="se-logo" href="/feup">
+        <img src={chrome.runtime.getURL("images/FEUP.svg")} alt="FEUP Logo" />
+      </a>
+      <HeaderLinks links={HEADER_LINKS} />
+      <Authentication auth={auth} />
+    </header>
+  );
+};
+
+export default Header;

content-scripts/components/HeaderAuthentication.tsx

@@ -0,0 +1,137 @@
+import jsx from "texsaur";
+import { AuthSession } from "../types";
+import { togglePopover } from "../modules/utilities/popover";
+import Icon from "./Icon";
+
+interface Props {
+  auth: AuthSession | null;
+}
+
+const Authentication = ({ auth }: Props) => {
+  if (auth)
+    return (
+      <div id="se-auth">
+        <button
+          id="se-auth-notifications-button"
+          className={`se-button se-icon-button ${auth.hasNotifications ? "se-badge" : ""
+            }`}
+          onclick={() => togglePopover("se-auth-notifications-menu")}
+        >
+          <Icon name="ri-notification-line" />
+        </button>
+        <div id="se-auth-notifications-menu">
+          <input
+            type="radio"
+            name="se-auth-notifications"
+            id="se-auth-new-notifications-radio"
+            checked
+          />
+          <input
+            type="radio"
+            name="se-auth-notifications"
+            id="se-auth-read-notifications-radio"
+          />
+          <div id="se-auth-notifications-header">
+            <label htmlFor="se-auth-new-notifications-radio">Novas</label>
+            <label htmlFor="se-auth-read-notifications-radio">Lidas</label>
+          </div>
+          <div id="se-auth-notifications-list">
+            <ol id="se-auth-new-notifications"></ol>
+            <ol id="se-auth-read-notifications"></ol>
+            <div id="se-auth-empty-notifications">
+              <Icon name="ri-notification-off-line" />
+              <span>Sem notificações</span>
+            </div>
+            <div className="se-loading-indicator">
+              <Icon name="ri-refresh-line" />
+            </div>
+          </div>
+        </div>
+
+        <button id="se-auth-profile-button" onclick={() => togglePopover("se-auth-profile-menu")}>
+          <img
+            src={`fotografias_service.foto?pct_cod=${auth.number}`}
+            alt="Foto de perfil"
+          />
+        </button>
+        <div id="se-auth-profile-menu">
+          <div id="se-auth-header">
+            <span>{auth.name}</span>
+            <span>{auth.number}</span>
+          </div>
+          <nav id="se-auth-profile-links">
+            <a
+              className="se-auth-profile"
+              href={`fest_geral.cursos_list?pv_num_unico=${auth.number}`}
+            >
+              <Icon name="ri-user-line" />
+              Perfil
+            </a>
+            <a
+              href={`gpag_ccorrente_geral.conta_corrente_view?pct_cod=${auth.number}`}
+            >
+              <Icon name="ri-money-euro-circle-line" />
+              Conta corrente
+            </a>
+            <a
+              id="se-logout-button"
+              href="vld_validacao.sair?p_address=WEB_PAGE.INICIAL"
+            >
+              <Icon name="ri-logout-box-line" />
+              Terminar Sessão
+            </a>
+          </nav>
+        </div>
+      </div>
+    );
+
+  return (
+    <div id="se-auth">
+      <button className="se-buttonn" id="se-auth-button" onclick={() => togglePopover("se-auth-form")}>
+        Iniciar Sessão
+      </button>
+      <form id="se-auth-form" action="vld_validacao.validacao" method="post">
+        <input type="hidden" name="p_address" value="web_page.inicial" />
+        <input type="hidden" name="p_app" value="162" />
+        <input type="hidden" name="p_amo" value="55" />
+        <label htmlFor="se-auth-user" className="acs">
+          Utilizador
+        </label>
+        <input
+          id="se-auth-user"
+          type="text"
+          name="p_user"
+          placeholder="Utilizador"
+          autoComplete="username"
+        />
+        <label htmlFor="se-auth-pass" className="acs">
+          Palavra-passe
+        </label>
+        <input
+          id="se-auth-pass"
+          type="password"
+          name="p_pass"
+          placeholder="Palavra-passe"
+          autoComplete="current-password"
+        />
+        <button className="se-button se-primary-button" type="submit">
+          Iniciar Sessão
+        </button>
+        <span className="se-separator">ou</span>
+        <a
+          href="vld_validacao.federate_login?p_redirect=web_page.Inicial"
+          id="se-auth-federate"
+          className="se-button"
+        >
+          <Icon name="ri-shield-user-line" />
+          Autenticação Federada
+        </a>
+        <a href="gent_geral.list_services" id="se-auth-reset">
+          Recuperar palavra-passe
+        </a>
+      </form>
+    </div >
+  );
+};
+
+export default Authentication;

content-scripts/components/HeaderLinks.tsx

@@ -0,0 +1,26 @@
+import jsx from "texsaur";
+
+interface Props {
+  links: Record<string, Record<string, string>>;
+}
+
+const HeaderLinks = ({ links }: Props) => {
+  return (
+    <nav id="se-header-links">
+      {Object.entries(links).map(([key, value]) => (
+        <div className="se-header-link" key={key}>
+          <button>{key}</button>
+          <div className="se-header-link-popover">
+            {Object.entries(value).map(([label, url]) => (
+              <a href={url} key={label}>
+                {label}
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+    </nav>
+  );
+};
+
+export default HeaderLinks;

content-scripts/components/Icon.tsx

@@ -0,0 +1,13 @@
+import jsx from "texsaur";
+
+interface IconProps {
+    name?: string;
+}
+
+const Icon: JSX.Component<IconProps> = ({ name }) => {
+    return (
+        <span className={"se-icon " + name}></span>
+    );
+}
+
+export default Icon;

content-scripts/index.js

@@ -4,7 +4,7 @@ import {
   currentAccountPage,
   addSortTableActions
 } from "./modules/initialize";
-import { injectAllChanges, userPreferences } from "./modules/options/all";
+import { injectAllChanges, userPreferences } from "./modules/options";
 import constructNewData from "./modules/utilities/constructNewData";
 import { getStorage, setStorage } from "./modules/utilities/storage";
 import { rememberLogin } from "./modules/login";
@@ -48,21 +48,19 @@ const functionsToExecute = [
   { name: "classPage", func: classPage },
   { name: "courseUnitPage", func: courseUnitPage },
   { name: "injectOverrideFunctions", func: injectOverrideFunctions },
-  { name: "addStarIconToCard", func: addStarIconToCard}
+  { name: "addStarIconToCard", func: addStarIconToCard }
 ]
 
 const init = async () => {
 
-  // // Watch for resize events
-  // addResizeListener();
-  // // Inject user preferences
+  // Inject user preferences
   const data = await getStorage(userPreferences);
   injectAllChanges(data);
 
-  if(!(await getStorage('favorite_courses'))){
-    await setStorage({'favorite_courses': '{}'}) //Insert empty object
+  if (!(await getStorage('favorite_courses'))) {
+    await setStorage({ 'favorite_courses': '{}' }) //Insert empty object
   }
-  
+
   functionsToExecute.forEach(f => {
     try {
       f.func();