Feat/integration

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

@@ -1,26 +1,73 @@
-import logo from './ACME_Corporation.png';
-import Button from '@mui/material/Button';
-import './App.css';
+import { useState } from "react";
+import logo from "./ACME_Corporation.png";
+import Button from "@mui/material/Button";
+import "./App.css";
 
 function App() {
-
-  function clickMe() {
-      window.postMessage(
-          {type : "getVersion"}, "*");
-
-  }
+  const [password, setPassword] = useState("");
+  const handleAuth = () => {
+    window.postMessage({ type: "initAuth" }, "*");
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+  };
+
+  const handleAutoAuth = () => {
+    localStorage.setItem("token", password);
+  };
+
+  const storageToken = localStorage.getItem("token");
 
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo}  alt="logo" />
+        <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"
+            viewBox="0 0 32 32"
+            id="loading"
+            className="animate-spin h-3 w-3"
+          >
+            <g data-name="Loader">
+              <path
+                fill="currentColor"
+                d="M29.89 15.81a2.51 2.51 0 1 0-5 .45 9.65 9.65 0 0 1-1.68 6.34 10.24 10.24 0 0 1-5.74 4 10.71 10.71 0 0 1-7.38-.7 11.44 11.44 0 0 1-5.48-5.62A12.07 12.07 0 0 0 9.46 27 12.58 12.58 0 0 0 17.9 29a13.31 13.31 0 0 0 8.18-4 14 14 0 0 0 3.81-8.75v-.08A2.29 2.29 0 0 0 29.89 15.81zM7.11 15.74A9.65 9.65 0 0 1 8.79 9.4a10.24 10.24 0 0 1 5.74-4 10.71 10.71 0 0 1 7.38.7 11.44 11.44 0 0 1 5.48 5.62A12.07 12.07 0 0 0 22.54 5 12.58 12.58 0 0 0 14.1 3 13.31 13.31 0 0 0 5.92 7a14 14 0 0 0-3.81 8.75v.08a2.29 2.29 0 0 0 0 .37 2.51 2.51 0 1 0 5-.45z"
+              ></path>
+            </g>
+          </svg>
+        </div>
         <p>
-        <Button variant="contained" onClick={clickMe}>
-        Authenticate with AID
-        </Button>
+          {storageToken ? (
+            <Button variant="contained" onClick={handleLogout}>
+              Logout
+            </Button>
+          ) : (
+            <Button variant="contained" onClick={handleAuth}>
+              Authenticate with AID
+            </Button>
+          )}
         </p>
+        {storageToken ? null : (
+          <Button
+            id="login-btn"
+            style={{ visibility: "hidden" }}
+            variant="contained"
+            onClick={handleAutoAuth}
+          >
+            Auth with AID
+          </Button>
+        )}
       </header>
-
     </div>
   );
 }

manifest.json

@@ -18,7 +18,8 @@
   },
   "permissions": [
     "activeTab",
-    "storage"
+    "storage",
+    "tabs"
   ],
   "content_scripts": [
     {
@@ -27,6 +28,7 @@
         "https://*/*",
         "<all_urls>"
       ],
+      "run_at": "document_end",
       "js": [
         "src/pages/content/index.tsx"
       ],
@@ -38,11 +40,9 @@
   "web_accessible_resources": [
     {
       "resources": [
-        "contentStyle.css",
-        "128_keri_logo.png",
-        "32_keri_logo.png"
+        "src/assets/img/128_keri_logo.png"
       ],
-      "matches": []
+      "matches": ["<all_urls>"]
     }
   ],
   "content_security_policy": {

src/components/credentialList.tsx

@@ -1,16 +1,20 @@
 import { useState, useEffect } from "react";
 import { CredentialCard } from "@components/credentialCard";
+import { Loader } from "@components/loader";
 import { IMessage } from "@pages/background/types";
 
 export function CredentialList(): JSX.Element {
   const [credentials, setCredentials] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
   const fetchCredentials = async () => {
+    setIsLoading(true);
     const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
       type: "fetch-resource",
       subtype: "credentials",
     });
     console.log("credentials", data);
     setCredentials(data.credentials);
+    setIsLoading(false);
   };
 
   useEffect(() => {
@@ -19,6 +23,11 @@ export function CredentialList(): JSX.Element {
 
   return (
     <>
+      {isLoading ? (
+        <div className="flex flex-row justify-center items-center">
+          <Loader size={6} />
+        </div>
+      ) : null}
       {credentials.map((credential, index) => (
         <div key={index} className="my-2 mx-4">
           <CredentialCard credential={credential} />

src/components/customRadio.tsx

@@ -0,0 +1,34 @@
+interface ICustomRadio {
+  id?: string;
+  component?: JSX.Element;
+  checked: boolean;
+  onClick: () => void;
+}
+
+export function CustomRadio({
+  id,
+  component,
+  checked,
+  onClick,
+}: ICustomRadio): JSX.Element {
+  return (
+    <div
+      onClick={onClick}
+      className={`flex cursor-pointer items-center border ${
+        checked ? "border-green" : ""
+      }`}
+    >
+      <input
+        checked={checked}
+        id={id}
+        type="radio"
+        value=""
+        name="bordered-radio"
+        className="w-4 h-4 dark:ring-offset-green  "
+      />
+      <label htmlFor={id} className="w-full ms-1 font-medium">
+        {component}
+      </label>
+    </div>
+  );
+}

src/components/identifierList.tsx

@@ -1,16 +1,20 @@
 import { useState, useEffect } from "react";
 import { IdentifierCard } from "@components/identifierCard";
+import { Loader } from "@components/loader";
 import { IMessage } from "@pages/background/types";
 
 export function IdentifierList(): JSX.Element {
   const [aids, setAids] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
   const fetchIdentifiers = async () => {
+    setIsLoading(true);
     const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
       type: "fetch-resource",
       subtype: "identifiers",
     });
     console.log("data", data);
     setAids(data.aids);
+    setIsLoading(false);
   };
 
   useEffect(() => {
@@ -19,6 +23,11 @@ export function IdentifierList(): JSX.Element {
 
   return (
     <>
+      {isLoading ? (
+        <div className="flex flex-row justify-center items-center">
+          <Loader size={6} />
+        </div>
+      ) : null}
       {aids.map((aid, index) => (
         <div key={index} className="my-2 mx-4">
           <IdentifierCard aid={aid} />

src/components/loader.tsx

@@ -0,0 +1,22 @@
+interface ILoader {
+  color?: string;
+  size?: number;
+}
+
+export const Loader = ({ color = "currentColor", size = 3 }: ILoader) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      id="Loading"
+      className={`animate-spin h-${size} w-${size}`}
+    >
+      <g data-name="Loader">
+        <path
+          fill={color}
+          d="M29.89 15.81a2.51 2.51 0 1 0-5 .45 9.65 9.65 0 0 1-1.68 6.34 10.24 10.24 0 0 1-5.74 4 10.71 10.71 0 0 1-7.38-.7 11.44 11.44 0 0 1-5.48-5.62A12.07 12.07 0 0 0 9.46 27 12.58 12.58 0 0 0 17.9 29a13.31 13.31 0 0 0 8.18-4 14 14 0 0 0 3.81-8.75v-.08A2.29 2.29 0 0 0 29.89 15.81zM7.11 15.74A9.65 9.65 0 0 1 8.79 9.4a10.24 10.24 0 0 1 5.74-4 10.71 10.71 0 0 1 7.38.7 11.44 11.44 0 0 1 5.48 5.62A12.07 12.07 0 0 0 22.54 5 12.58 12.58 0 0 0 14.1 3 13.31 13.31 0 0 0 5.92 7a14 14 0 0 0-3.81 8.75v.08a2.29 2.29 0 0 0 0 .37 2.51 2.51 0 1 0 5-.45z"
+        ></path>
+      </g>
+    </svg>
+  );
+};

src/components/main.tsx

@@ -1,35 +1,67 @@
-import { useState } from "react";
-import { Appbar } from "@components/appbar";
+import { useEffect, useState } from "react";
 import { Sidebar } from "@components/sidebar";
+import { SelectIdentifier } from "@components/selectIdentifier";
+import { APP_STATE } from "@pages/popup/constants";
 import { IdentifierList } from "@components/identifierList";
 import { CredentialList } from "@components/credentialList";
-import { SigninCard } from "@components/signinCard";
+import { SigninList } from "@components/signinList";
 
 interface IMain {
   handleDisconnect: () => void;
 }
 
 export function Main(props: IMain): JSX.Element {
   const [activeSidebar, setActiveSidebar] = useState("Identifiers");
+  const [tabState, setTabState] = useState(APP_STATE.DEFAULT);
+
+  const fetchTabState = async () => {
+    const { data } = await chrome.runtime.sendMessage({
+      type: "tab",
+      subtype: "get-tab-state",
+    });
+
+    console.log("tab state data", data);
+    if (!data) return;
+
+    if (data?.appState) {
+      setTabState(data?.appState);
+    }
+  };
+
+  useEffect(() => {
+    fetchTabState();
+  }, []);
+
   const renderItems = () => {
+    if (tabState === APP_STATE.SELECT_IDENTIFIER) return <SelectIdentifier />;
+
+    if (tabState === APP_STATE.SELECT_CREDENTIAL) return <SelectIdentifier />;
+
     switch (activeSidebar) {
       case "Credentials":
         return <CredentialList />;
       case "Sign Ins":
-        return <SigninCard />;
+        return <SigninList />;
 
       default:
         return <IdentifierList />;
     }
   };
 
+  const isSidebarDisabled = () => {
+    return (
+      tabState === APP_STATE.SELECT_IDENTIFIER ||
+      tabState === APP_STATE.SELECT_CREDENTIAL
+    );
+  };
+
   return (
     <main className="">
-      {/* <Appbar /> */}
       <Sidebar
         active={activeSidebar}
         onClickLink={setActiveSidebar}
         onSignout={props.handleDisconnect}
+        disabled={isSidebarDisabled()}
       />
       <div className="rounded p-2 sm:ml-48 sm:mt-4 bg-gray-dark text-gray-light mr-4">
         <div className="">

src/components/selectIdentifier.tsx

@@ -0,0 +1,66 @@
+import { useState, useEffect } from "react";
+import { CustomRadio } from "@components/customRadio";
+import { IdentifierCard } from "@components/identifierCard";
+import { IMessage } from "@pages/background/types";
+import { APP_STATE } from "@pages/popup/constants";
+
+export function SelectIdentifier(): JSX.Element {
+  const [aids, setAids] = useState([]);
+  const [selectedAid, setSelectedAid] = useState(null);
+
+  const fetchIdentifiers = async () => {
+    const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+      type: "fetch-resource",
+      subtype: "identifiers",
+    });
+    console.log("data", data);
+    setAids(data.aids);
+  };
+
+  const createSigninWithIdentifiers = async () => {
+    const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+      type: "create-resource",
+      subtype: "signin",
+      data: {
+        identifier: selectedAid,
+      },
+    });
+    await chrome.runtime.sendMessage({
+      type: "tab",
+      subtype: "set-tab-state",
+      data: {
+        appState: APP_STATE.DEFAULT,
+      },
+    });
+    console.log("data.signins", data.signins);
+    window.close();
+  };
+
+  useEffect(() => {
+    fetchIdentifiers();
+  }, []);
+
+  return (
+    <>
+      {aids.map((aid, index) => (
+        <div key={index} className="my-2 mx-4">
+          <CustomRadio
+            id={aid.name}
+            checked={selectedAid?.prefix === aid?.prefix}
+            onClick={() => setSelectedAid(aid)}
+            component={<IdentifierCard aid={aid} />}
+          />
+        </div>
+      ))}
+      <button
+        disabled={!selectedAid}
+        onClick={createSigninWithIdentifiers}
+        className={`fixed bottom-0 right-4 text-white ${
+          selectedAid ? "bg-green" : " bg-gray"
+        } focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2`}
+      >
+        Select
+      </button>
+    </>
+  );
+}