From 6c105075bff4e8423fb9f86a05c54aed85e8154c Mon Sep 17 00:00:00 2001
From: nicomiguelino <nicomiguelino2014@gmail.com>
Date: Thu, 21 Nov 2024 12:51:33 -0800
Subject: [PATCH 1/2] fix: gatekeep the signed in page if the token is invalid

---
 src/assets/js/main.mjs    |  9 +++++++++
 src/assets/js/options.mjs | 18 ++++++++++++++++--
 src/options.html          |  3 ++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/assets/js/main.mjs b/src/assets/js/main.mjs
index 8ee2afe..856e3bf 100644
--- a/src/assets/js/main.mjs
+++ b/src/assets/js/main.mjs
@@ -113,6 +113,15 @@ export function getWebAsset(assetId, user) {
     )
 }
 
+export function getTeam(user) {
+    return callApi(
+        "GET",
+        "https://api.screenlyapp.com/api/v4.1/teams/",
+        null,
+        user.token
+    )
+}
+
 export function getAssetDashboardLink(assetId) {
     return `https://login.screenlyapp.com/login?next=/manage/assets/${assetId}`;
 }
diff --git a/src/assets/js/options.mjs b/src/assets/js/options.mjs
index aa7fb23..785ef07 100644
--- a/src/assets/js/options.mjs
+++ b/src/assets/js/options.mjs
@@ -5,6 +5,7 @@
 import {
     assert,
     getUser,
+    getTeam,
     hideElement,
     setButtonWaitState,
     showElement,
@@ -62,8 +63,21 @@ export function initOptions() {
 
     getUser().then((user) => {
         if (user.token) {
-            showPage(elements.signedInPage);
-            console.info(user);
+            getTeam(user)
+                .then((team) => {
+                    if (team.length > 0) {
+                        const teamNames = team.map((t) => `<li>${t.name}</li>`).join('');
+                        document.querySelector('.team-name')
+                            .innerHTML = `<ul>${teamNames}</ul>`;
+                    }
+
+                    showPage(elements.signedInPage);
+                })
+                .catch(() => {
+                    showPage(elements.signInPage);
+                    showElement(elements.signInError);
+                    browser.storage.sync.clear();
+                });
         } else {
             showPage(elements.signInPage);
         }
diff --git a/src/options.html b/src/options.html
index df635b7..b9f601b 100644
--- a/src/options.html
+++ b/src/options.html
@@ -34,7 +34,8 @@
       </div>
       <div class='page' id='signed-in-page'>
         <section>
-          Signed in
+          Signed in as a member of the following team(s):
+          <span class="font-weight-bold text-break team-name"></span>
         </section>
         <section class='mt-3'>
           <button class='btn btn-primary w-100' id='sign-out' type='submit'>

From 4824fcb4424553e0ed457efe90fdedee2aa829bd Mon Sep 17 00:00:00 2001
From: nicomiguelino <nicomiguelino2014@gmail.com>
Date: Thu, 12 Dec 2024 18:26:16 -0800
Subject: [PATCH 2/2] feat: include the company/team name in the settings page

---
 src/assets/js/components/popup/settings.jsx | 38 ++++++++++++++++++---
 src/assets/js/main.mjs                      |  8 +++--
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/assets/js/components/popup/settings.jsx b/src/assets/js/components/popup/settings.jsx
index 82d9640..eda325b 100644
--- a/src/assets/js/components/popup/settings.jsx
+++ b/src/assets/js/components/popup/settings.jsx
@@ -1,21 +1,41 @@
 import React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import classNames from 'classnames';
 
 import { signOut } from '@/features/popup/popupSlice';
+import { getCompany, getUser } from '@/main'
+import { PopupSpinner } from '@/components/popup/popup-spinner';
 
 export const Settings = () => {
   const dispatch = useDispatch();
-  const [isLoading, setIsLoading] = useState(false);
+  const [isButtonLoading, setIsButtonLoading] = useState(false);
+  const [companyName, setCompanyName] = useState('');
+  const [isViewLoading, setIsViewLoading] = useState(false);
+
+  const getCompanyData = async () => {
+    setIsViewLoading(true);
+    const user = await getUser();
+    const company = await getCompany(user);
+    setCompanyName(company);
+    setIsViewLoading(false);
+  };
+
+  useEffect(() => {
+    getCompanyData();
+  }, [companyName]);
 
   const handleSignOut = async (event) => {
     event.preventDefault();
-    setIsLoading(true);
+    setIsButtonLoading(true);
     dispatch(signOut());
-    setIsLoading(false);
+    setIsButtonLoading(false);
   };
 
+  if (isViewLoading) {
+    return <PopupSpinner />;
+  }
+
   return (
     <div className="page mt-3" id="success-page">
       <div className="d-flex flex-column">
@@ -34,6 +54,14 @@ export const Settings = () => {
               <br />
               signed in
             </h3>
+
+            {
+              companyName && (
+                <p className="text-muted">
+                  You are signed in as a member of {companyName}.
+                </p>
+              )
+            }
           </div>
         </section>
         <section>
@@ -42,7 +70,7 @@ export const Settings = () => {
             onClick={handleSignOut}
           >
             {
-              isLoading
+              isButtonLoading
                 ? (
                   <span
                     className="spinner spinner-border spinner-border-sm"
diff --git a/src/assets/js/main.mjs b/src/assets/js/main.mjs
index 24356f3..d7d15f7 100644
--- a/src/assets/js/main.mjs
+++ b/src/assets/js/main.mjs
@@ -79,13 +79,15 @@ export function getWebAsset(assetId, user) {
   )
 }
 
-export function getTeam(user) {
-    return callApi(
+export async function getCompany(user) {
+    const result = await callApi(
         "GET",
-        "https://api.screenlyapp.com/api/v4.1/teams/",
+        "https://api.screenlyapp.com/api/v4.1/users/",
         null,
         user.token
     )
+
+    return result[0].company
 }
 
 export function getAssetDashboardLink(assetId) {