Feat/auto login alert

example-web/my-app/src/App.js

@@ -17,6 +17,10 @@ function App() {
     window.postMessage({ type: "select-aid-or-credential" }, "*");
   };
 
+  const handleRequestAutoSignin = () => {
+    window.postMessage({ type: "select-auto-signin" }, "*");
+  };
+
   const handleSyncRequest = async () => {
     // TODO extension Id harcoded just for testing, need to find a way to get it dynamically
     const { data, error } = await chrome.runtime.sendMessage(extensionId, {
@@ -25,7 +29,7 @@ function App() {
     });
 
     if (error) {
-      alert(error?.message);
+      handleRequestAutoSignin();
     } else {
       alert(
         "Signed headers received\n" + JSON.stringify(data.headers, null, 2)

src/components/main.tsx

@@ -39,6 +39,9 @@ export function Main(props: IMain): JSX.Element {
                 : "Credentials"
             );
           }
+          if (data?.appState === TAB_STATE.SELECT_AUTO_SIGNIN) {
+            setActiveSidebar("Sign Ins");
+          }
         }
       }
     );

src/pages/background/index.ts

@@ -65,8 +65,9 @@ chrome.runtime.onMessage.addListener(function (
         message.type === "fetch-resource" &&
         message.subtype === "tab-signin"
       ) {
-        const signins = await browserStorageService.getValue("signins");
-        sendResponse({ data: { signins: signins ?? [] } });
+        const signins = await getSigninsByDomain(removeSlash(sender.url));
+        const autoSigninObj = signins?.find((signin) => signin.autoSignin);
+        sendResponse({ data: { signins: signins ?? [], autoSigninObj } });
       }
 
       // Handle messages from Popup

src/pages/content/index.tsx

@@ -20,6 +20,7 @@ window.addEventListener(
         case TAB_STATE.SELECT_IDENTIFIER:
         case TAB_STATE.SELECT_CREDENTIAL:
         case TAB_STATE.SELECT_ID_CRED:
+        case TAB_STATE.SELECT_AUTO_SIGNIN:
           setTabState(TAB_STATE.DEFAULT);
           const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
             type: "authentication",
@@ -35,7 +36,8 @@ window.addEventListener(
             data.isConnected,
             data.tabUrl,
             tabSigninResp?.data?.signins,
-            event.data.type
+            event.data.type,
+            tabSigninResp?.data?.autoSigninObj
           );
           break;
         default:
@@ -74,7 +76,8 @@ chrome.runtime.onMessage.addListener(async function (
           data.isConnected,
           data.tabUrl,
           tabSigninResp?.data?.signins,
-          message.eventType ?? ""
+          message.eventType ?? "",
+          tabSigninResp?.data?.autoSigninObj
         );
       }
     }
@@ -93,7 +96,8 @@ function insertDialog(
   isConnected: boolean,
   tabUrl: string,
   signins: any,
-  eventType: string
+  eventType: string,
+  autoSigninObj: any
 ) {
   const div = document.createElement("div");
   div.id = "__root";
@@ -106,6 +110,7 @@ function insertDialog(
       isConnected={isConnected}
       tabUrl={tabUrl}
       signins={signins}
+      autoSigninObj={autoSigninObj}
       eventType={eventType}
       removeDialog={removeDialog}
     />

src/pages/dialog/Dialog.tsx

@@ -8,12 +8,18 @@ export default function Dialog({
   isConnected = false,
   tabUrl = "",
   signins = [],
+  autoSigninObj,
   eventType = "",
   removeDialog,
 }): JSX.Element {
   const logo = chrome.runtime.getURL("src/assets/img/128_keri_logo.png");
   const [showPopupPrompt, setShowPopupPrompt] = useState(false);
 
+  const showRequestAuthPrompt =
+    !signins.length ||
+    (!autoSigninObj && eventType === TAB_STATE.SELECT_AUTO_SIGNIN) ||
+    !isConnected;
+
   const getEventTypeAppState = () => {
     return eventType ?? TAB_STATE.DEFAULT;
   };
@@ -24,7 +30,10 @@ export default function Dialog({
   };
 
   useEffect(() => {
-    if (!signins?.length) {
+    if (
+      !signins?.length ||
+      (!autoSigninObj && eventType === TAB_STATE.SELECT_AUTO_SIGNIN)
+    ) {
       setTabState(getEventTypeAppState());
       setShowPopupPrompt(true);
     } else if (!isConnected) {
@@ -37,6 +46,19 @@ export default function Dialog({
     removeDialog();
   };
 
+  const getTextByEventType = () => {
+    switch (eventType) {
+      case TAB_STATE.SELECT_CREDENTIAL:
+        return "Credential";
+      case TAB_STATE.SELECT_ID_CRED:
+        return "AID or Credential";
+      case TAB_STATE.SELECT_AUTO_SIGNIN:
+        return "Auto Signin";
+      default:
+        return "AID";
+    }
+  };
+
   return (
     <div className="absolute top-10 right-10 w-[320px] max-h-[540px] overflow-auto pt-7 ">
       {showPopupPrompt ? (
@@ -64,18 +86,12 @@ export default function Dialog({
           <img src={logo} className="h-8" alt="logo" />
           <p className="text-2xl font-bold text-green">Sign in with KERI</p>
         </div>
-        {!signins.length || !isConnected ? (
+        {showRequestAuthPrompt ? (
           <p className="mt-2 text-sm text-green max-w-[280px] font-bold">
             <span className="">{tabUrl}</span> requests authentication with{" "}
-            {eventType === TAB_STATE.SELECT_IDENTIFIER
-              ? "AID"
-              : eventType === TAB_STATE.SELECT_ID_CRED
-              ? "AID or Credential"
-              : "Credential"}
+            {getTextByEventType()}
           </p>
-        ) : null}
-
-        {signins.length && isConnected ? (
+        ) : (
           <>
             {signins?.map((signin) => (
               <SigninItem signin={signin} />
@@ -88,11 +104,10 @@ export default function Dialog({
               <span className="inline-block">
                 <img src={logo} className="h-4" alt="logo" />
               </span>{" "}
-              to select other{" "}
-              {eventType === TAB_STATE.SELECT_IDENTIFIER ? "AID" : "credential"}{" "}
+              to select other {getTextByEventType()}
             </button>
           </>
-        ) : null}
+        )}
       </div>
     </div>
   );

src/pages/popup/constants.ts

@@ -3,5 +3,6 @@ export const TAB_STATE = {
     SELECT_IDENTIFIER: "select-identifier",
     SELECT_CREDENTIAL: "select-credential",
     SELECT_ID_CRED: "select-aid-or-credential",
+    SELECT_AUTO_SIGNIN: "select-auto-signin",
     NONE: "none"
 }

src/screens/signin/config.tsx

@@ -43,7 +43,7 @@ export function Config(props: IConfig): JSX.Element {
   return (
     <>
       <div className="px-4 py-2">
-        <p className="text-sm font-bold text-gray-dark">Vendor Url:</p>
+        <p className="text-sm font-bold text-gray-dark">Agent Url:</p>
         <input
           type="text"
           id="vendor_url"

src/screens/signin/index.tsx

@@ -31,7 +31,7 @@ export function Signin(props: ISignin): JSX.Element {
     <div className="grid grid-cols-1 gap-2">
       <div className="flex flex-row justify-between p-2">
         <p className="text-xl text-green capitalize font-bold">
-          {showConfig ? "Config" : "KERI"}
+          {showConfig ? "Settings" : "KERI"}
         </p>
         <button onClick={() => setShowConfig(true)}>
           <svg