Merge pull request #49 from rodolfomiranda/signature-in-webpage

Add full flow

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

@@ -23,14 +23,6 @@ function App() {
     <div className="App">
       <header className="App-header">
         <img src={logo} alt="logo" />
-        <input
-          id="aid-input"
-          type="password"
-          onChange={(e) => {
-            console.log(e);
-            setPassword(e.target.value);
-          }}
-        />
         <div>
           <svg
             xmlns="http://www.w3.org/2000/svg"

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

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+// import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -14,4 +14,4 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// reportWebVitals();

src/components/selectIdentifier.tsx

@@ -32,7 +32,13 @@ export function SelectIdentifier(): JSX.Element {
         appState: APP_STATE.DEFAULT,
       },
     });
+
     console.log("data.signins", data.signins);
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {type:"tab", subtype: "reload-state"}, function(response){
+
+      });
+  });
     window.close();
   };
 

src/components/signin.tsx

@@ -122,7 +122,7 @@ export function Signin(props: ISignin): JSX.Element {
       </div>
       <div className="flex flex-row justify-center">
         <a href="#" className="font-medium text-blue-600 hover:underline">
-          Don't have account?
+          Don't have a KERIA agent?
         </a>
       </div>
       <div className="flex flex-row justify-center">

src/pages/background/index.ts

@@ -31,13 +31,7 @@ chrome.runtime.onMessage.addListener(function (
       sendResponse({ data: appData });
     }
 
-    if (
-      message.type === "authentication" &&
-      message.subtype === "check-agent-connection"
-    ) {
-      const isConnected = await signifyService.isConnected();
-      sendResponse({ data: { isConnected, meta: { tab: sender?.tab } } });
-    }
+
 
     if (message.type === "create-resource" && message.subtype === "signin") {
       const signins = await browserStorageService.getValue("signins");
@@ -87,15 +81,43 @@ chrome.runtime.onMessage.addListener(function (
       sendResponse({ data: { credentials: credentials ?? [] } });
     }
 
-    if (sender.tab) {
+
+
+
+
+    if (sender.tab &&  sender.tab.active) {
       // Handle mesages from content script
       console.log(
         "Message received from content script at " +
           sender.tab.url +
           ": " +
-          message.type
+          message.type +
+          "-" +
+          message.subtype
       );
 
+      if (
+        message.type === "authentication" &&
+        message.subtype === "check-agent-connection"
+      ) {
+        const isConnected = await signifyService.isConnected();
+        sendResponse({ data: { isConnected, meta: { tab: sender?.tab } } });
+      }
+
+
+      if (
+        message.type === "authentication" &&
+        message.subtype === "get-signed-headers"
+      ) {
+        // TODO get real signed headers from signify
+        const headers = {
+          'Signify-Resource': "asdasd",
+          'Signify-Timestamp': new Date().toISOString().replace('Z', '000+00:00'),
+        }
+        sendResponse({ data: { headers: headers } });
+
+      }
+
       if (
         message.type === "fetch-resource" &&
         message.subtype === "tab-signin"
@@ -104,35 +126,17 @@ chrome.runtime.onMessage.addListener(function (
         sendResponse({ data: { signins: signins ?? [] } });
       }
 
-      if (message.type) {
-        switch (message.type) {
-          case "getVersion":
-            const manifestData = chrome.runtime.getManifest();
-            sendResponse(manifestData.version);
-            break;
-          case "isUnlocked":
-            const [tab] = await chrome.tabs.query({
-              active: true,
-              lastFocusedWindow: true,
-            });
-            const response = chrome.tabs.sendMessage(tab.id!, {
-              type: "for_content_script",
-            });
-            // sendResponse(true);
-            break;
-          case "hasLogin":
-            sendResponse({ login: "AID 123" });
-            break;
-          case "authenticate":
-            sendResponse({ signature: "ABCD" });
-            break;
-          default:
-            break;
-        }
-      }
     } else if (senderIsPopup(sender)) {
       // handle messages from Popup
-      console.log("Message received from browser extension popup: " + message);
+      console.log("Message received from browser extension popup: " + message.type + "-" + message.subtype);
+
+      if (
+        message.type === "authentication" &&
+        message.subtype === "check-agent-connection"
+      ) {
+        const isConnected = await signifyService.isConnected();
+        sendResponse({ data: { isConnected, meta: { tab: sender?.tab } } });
+      }
 
       if (
         message.type === "authentication" &&

src/pages/background/services/signify.ts

@@ -2,7 +2,7 @@ import { SignifyClient, Tier, ready, Authenticater } from "signify-ts";
 import { userService } from "@pages/background/services/user";
 import { configService } from "@pages/background/services/config";
 
-
+const PASSCODE_TIMEOUT = 5 * 60 * 1000;
 
 const Signify = () => {
   let _client: SignifyClient | null;
@@ -15,7 +15,7 @@ const Signify = () => {
       console.log("Timer expired, client and passcode zeroed out");
       _client = null;
       await userService.removePasscode();
-    }, 120000);
+    }, PASSCODE_TIMEOUT);
   }
 
   const isConnected = async () => {

src/pages/content/index.tsx

@@ -36,21 +36,36 @@ window.addEventListener(
             removeAlertComponent();
           }
           break;
-        case "isUnlocked":
-          break;
       }
     }
   },
   false
 );
 
 // Handle messages from background script
-chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
-  console.log(sender);
+chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
   if (sender.origin === "chrome-extension://" + chrome.runtime.id) {
     // handle messages from Popup
-    console.log("Message received from browser extension pupup: " + message);
-    // sendResponse({ resp: "received" });
+    console.log("Message received from browser extension: " + message.type+" "+message.subtype);
+    if (message.type === "tab" && message.subtype === "reload-state") {
+      removeAlertComponent();
+      const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+        type: "authentication",
+        subtype: "check-agent-connection",
+      });
+      const tabSigninResp = await chrome.runtime.sendMessage<
+              IMessage<void>
+            >({
+              type: "fetch-resource",
+              subtype: "tab-signin",
+            });
+      insertReactComponent({
+        ...data,
+        signins: tabSigninResp?.data?.signins,
+      });
+
+    }
+
   }
 });
 

src/pages/dialog/Dialog.tsx

@@ -7,23 +7,26 @@ export default function Dialog({ isConnected, tab, signins }): JSX.Element {
   const logo = chrome.runtime.getURL("src/assets/img/128_keri_logo.png");
   const [showPopupPrompt, setShowPopupPrompt] = useState(false);
 
-  const handleSetState = async () => {
+  const handleSetState = async (state) => {
     await chrome.runtime.sendMessage({
       type: "tab",
       subtype: "set-tab-state",
       data: {
-        appState: APP_STATE.SELECT_IDENTIFIER,
+        appState: state,
       },
     });
   };
 
   const handleClick = () => {
-    handleSetState();
+    handleSetState(APP_STATE.SELECT_IDENTIFIER);
     setShowPopupPrompt(true);
   };
   useEffect(() => {
     if (!signins?.length) {
-      handleSetState();
+      handleSetState(APP_STATE.SELECT_IDENTIFIER);
+      setShowPopupPrompt(true);
+    } else if (!isConnected) {
+      handleSetState(APP_STATE.KERIA_CONNECT)
       setShowPopupPrompt(true);
     }
   }, []);

src/pages/dialog/signin.tsx

@@ -1,18 +1,37 @@
+import { APP_STATE } from "@pages/popup/constants";
+
 export const SigninItem = ({ signin }): JSX.Element => {
+
+  const handleClick = async () => {
+    const headers = await chrome.runtime.sendMessage({
+      type: "authentication",
+      subtype: "get-signed-headers",
+      data: {
+        signin: "selectedAID",
+      },
+    });
+    console.log("Signed headers: ", headers);
+    alert("Signed headers received");
+    const element = document.getElementById("__root");
+    if (element) element.remove();
+  };
+
   return (
     <div className="flex m-2 flex-row justify-between p-2 items-start border border-black rounded">
       <div>
-        <p className=" text-start text-sm font-bold">{signin.domain}</p>
-        <p className=" text-sm text-start font-normal text-gray">
-          <strong>{signin?.identifier?.name}</strong> (
-          {signin?.identifier?.prefix?.substr(0, 12)}...)
+        <p className=" text-start text-sm font-bold">
+          URL: {signin.domain}
+        </p>
+        <p className=" text-start text-sm font-bold">
+          AID: {signin?.identifier?.name}
         </p>
         <p className=" text-start text-xs font-bold">
-          {new Date(signin.updatedAt).toDateString()}
+          Last used: {new Date(signin.updatedAt).toDateString()}
         </p>
       </div>
       <button
         type="button"
+        onClick={handleClick}
         className="text-white bg-green font-medium rounded-full text-sm px-2 py-1 text-center me-2 mb-2"
       >
         Sign in

src/pages/popup/Popup.tsx

@@ -45,6 +45,13 @@ export default function Popup(): JSX.Element {
       document.body.style.width = "300px";
     }
     setIsConnected(!!data.isConnected);
+    if (data.isConnected) {
+      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {type:"tab", subtype: "reload-state"}, function(response){
+
+        });
+    });
+    }
   };
 
   useEffect(() => {

src/pages/popup/constants.ts

@@ -2,4 +2,5 @@ export const APP_STATE = {
     DEFAULT: "default",
     SELECT_IDENTIFIER: "select-identifier",
     SELECT_CREDENTIAL: "select-credential",
+    KERIA_CONNECT: "keria-connect",
 }