feat: rebase with signify header work

WebOfTrust · Jan 10, 2024 · 1a5f9fa · 1a5f9fa
1 parent 1e3346c
commit 1a5f9fa
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 82 deletions.
diff --git a/src/components/credentialCard.tsx b/src/components/credentialCard.tsx
@@ -4,12 +4,10 @@ interface ICredential {
 
 export function CredentialCard({ credential }: ICredential): JSX.Element {
   return (
-    <div className="m-auto max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow text-gray-900">
-      <div className="mb-2 flex flex-row justify-between">
+    <div className="m-auto max-w-sm px-4 py-2 bg-white border border-gray-200 rounded-lg shadow text-gray-900">
+      <div className="flex flex-row justify-between">
         <div>
-          <p className="font-bold text-lg text-gray-dark">
-            {credential.schema.title}
-          </p>
+          <p className="font-bold text-gray-dark">{credential.schema.title}</p>
           <p className="font-normal text-md text-gray">
             {credential.schema.credentialType}
           </p>
@@ -29,16 +27,15 @@ export function CredentialCard({ credential }: ICredential): JSX.Element {
           />
         </svg>
       </div>
-
-      <div className="mb-2">
-        {/* <p className="font-bold text-lg text-gray-dark">Name</p> */}
+      <div className="">
         <p className="font-normal text-md text-gray">
           {credential.schema.description}
         </p>
       </div>
-      <div className="mb-2 flex flex-row justify-between">
+      <div className="flex flex-row justify-between">
         <div className="">
-          <p className="font-bold text-gray text-lg">November 08, 2023</p>
+          <p className="font-bold text-gray-dark">Last Used: </p>
+          <p className="font-normal text-gray">November 08, 2023</p>
         </div>
         {credential.status?.et === "iss" ? (
           <div className="flex flex-col items-center text-green">

diff --git a/src/components/credentialList.tsx b/src/components/credentialList.tsx
@@ -33,6 +33,11 @@ export function CredentialList(): JSX.Element {
           <CredentialCard credential={credential} />
         </div>
       ))}
+      {!isLoading && !credentials?.length ? (
+        <p className="">No items to show</p>
+      ) : (
+        <></>
+      )}
     </>
   );
 }
diff --git a/src/components/identifierCard.tsx b/src/components/identifierCard.tsx
@@ -2,11 +2,13 @@ interface IIdentifier {}
 
 export function IdentifierCard({ aid }): JSX.Element {
   return (
-    <div className="m-auto max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow text-gray-900">
-      <div className="mb-3 flex flex-row justify-between">
+    <div className="m-auto max-w-sm px-4 py-2 bg-white border border-gray-200 rounded-lg shadow text-gray-900">
+      <div className="flex flex-row justify-between">
         <div>
-          <p className=" mb-1 font-bold text-gray-dark">Alias:</p>
-          <p className="font-normal text-gray">{aid.name}</p>
+          <p className="font-bold text-gray-dark">
+            Alias:{" "}
+            <span className="font-normal text-gray max-w">{aid.name}</span>
+          </p>
         </div>
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -23,20 +25,19 @@ export function IdentifierCard({ aid }): JSX.Element {
           />
         </svg>
       </div>
-
-      <div className="mb-3">
-        <p className=" mb-1 font-bold text-gray-dark">ID:</p>
-        <p className="font-normal text-gray">{aid.prefix}</p>
+      <div className="">
+        <p className="font-bold text-gray-dark">ID:</p>
+        <p className="font-normal text-gray max-w-[200px] break-words">
+          {aid.prefix}
+        </p>
       </div>
-      <div className="mb-3 flex flex-row justify-between">
+      <div className="flex flex-row justify-between">
         <div className="">
-          <p className=" mb-1 font-bold text-gray-dark">
-            Credentials Received:
-          </p>
+          <p className="font-bold text-gray-dark">Credentials Received: </p>
           <p className="font-normal text-gray">13</p>
         </div>
         <div className="">
-          <p className=" mb-1 font-bold text-gray-dark">Last Used:</p>
+          <p className="font-bold text-gray-dark">Last Used: </p>
           <p className="font-normal text-gray">November 08, 2023</p>
         </div>
       </div>

diff --git a/src/components/identifierList.tsx b/src/components/identifierList.tsx
@@ -33,6 +33,11 @@ export function IdentifierList(): JSX.Element {
           <IdentifierCard aid={aid} />
         </div>
       ))}
+      {!isLoading && !aids?.length ? (
+        <p className="">No items to show</p>
+      ) : (
+        <></>
+      )}
     </>
   );
 }
diff --git a/src/components/main.tsx b/src/components/main.tsx
@@ -67,7 +67,7 @@ export function Main(props: IMain): JSX.Element {
   };
 
   return (
-    <main className="">
+    <main className="w-[640px]">
       <Sidebar
         active={activeSidebar}
         onClickLink={setActiveSidebar}

diff --git a/src/components/signinCard.tsx b/src/components/signinCard.tsx
@@ -1,9 +1,9 @@
 export function SigninCard({ signin }): JSX.Element {
   return (
-    <div className="m-auto max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow text-gray-900">
-      <div className="mb-2 flex flex-row justify-between">
+    <div className="m-auto max-w-sm px-4 py-2 bg-white border border-gray-200 rounded-lg shadow text-gray-900">
+      <div className="flex flex-row justify-between">
         <div>
-          <p className="font-bold text-lg text-gray-dark">Website</p>
+          <p className="font-bold text-gray-dark">Website</p>
           <p className="font-normal text-md text-gray">{signin?.domain}</p>
         </div>
         <svg
@@ -22,16 +22,16 @@ export function SigninCard({ signin }): JSX.Element {
         </svg>
       </div>
 
-      <div className="mb-2">
-        <p className="font-bold text-lg text-gray-dark">
+      <div className="">
+        <p className="font-bold text-gray-dark">
           {signin?.identifier ? "Identifier Alias" : "Credential"}
         </p>
         <p className="font-normal text-md text-gray">
           {signin?.identifier?.name}
         </p>
       </div>
-      <div className="mb-1">
-        <p className="font-bold text-lg text-gray-dark">Last Used</p>
+      <div className="">
+        <p className="font-bold text-gray-dark">Last Used</p>
         <p className="font-normal text-md text-gray">
           {new Date(signin?.updatedAt).toDateString()}
         </p>

diff --git a/src/components/signinList.tsx b/src/components/signinList.tsx
@@ -33,6 +33,11 @@ export function SigninList(): JSX.Element {
           <SigninCard signin={signin} />
         </div>
       ))}
+      {!isLoading && !signins?.length ? (
+        <p className="">No items to show</p>
+      ) : (
+        <></>
+      )}
     </>
   );
 }
diff --git a/src/pages/content/index.tsx b/src/pages/content/index.tsx
@@ -45,29 +45,35 @@ window.addEventListener(
 );
 
 // Handle messages from background script
-chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
+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: " + message.type+" "+message.subtype);
+    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({
+      const tabSigninResp = await chrome.runtime.sendMessage<IMessage<void>>({
+        type: "fetch-resource",
+        subtype: "tab-signin",
+      });
+      insertDialog({
         ...data,
         signins: tabSigninResp?.data?.signins,
+        eventType: "init-req-identifier",
       });
-
     }
-
   }
 });
 

diff --git a/src/pages/dialog/Dialog.tsx b/src/pages/dialog/Dialog.tsx
@@ -35,26 +35,25 @@ export default function Dialog({
   }, []);
 
   return (
-    <div className="absolute top-10 right-10 w-[320px] max-h-[540px] overflow-auto rounded text-center p-3 bg-white">
-      <header className="items-center justify-center">
+    <div className="absolute top-10 right-10 w-[320px] max-h-[540px] overflow-auto pt-7 ">
+      {showPopupPrompt ? (
+        <PopupPrompt
+          message={
+            <p className="text-sm text-white">
+              Open{" "}
+              <span className="inline-block">
+                <img src={logo} className="h-4" alt="logo" />
+              </span>{" "}
+              to proceed
+            </p>
+          }
+        />
+      ) : null}
+      <div className="items-center justify-center rounded text-center p-3 bg-white">
         <div className="flex flex-row gap-x-2 mb-2">
           <img src={logo} className="h-8" alt="logo" />
           <p className="text-2xl font-bold text-green">Sign in with KERI</p>
         </div>
-
-        {showPopupPrompt ? (
-          <PopupPrompt
-            message={
-              <p className="text-sm text-white">
-                Open{" "}
-                <span className="inline-block">
-                  <img src={logo} className="h-4" alt="logo" />
-                </span>{" "}
-                to proceed
-              </p>
-            }
-          />
-        ) : null}
         {!signins?.length && isConnected ? (
           <p className="mt-2 text-sm text-green max-w-[280px] font-bold">
             <span className="">{tab?.url}</span> is requesting an{" "}
@@ -79,7 +78,7 @@ export default function Dialog({
             </div>
           </>
         ) : null}
-      </header>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/dialog/popupPrompt.tsx b/src/pages/dialog/popupPrompt.tsx
@@ -4,7 +4,7 @@ interface IPopupPrompt {
 
 export const PopupPrompt = ({ message }: IPopupPrompt): JSX.Element => {
   return (
-    <div className="flex justify-center max-w-[280px] flex-row border  p-2 bg-gray-dark rounded">
+    <div className="absolute top-0 right-0 flex justify-center max-w-[280px] flex-row border  p-2 bg-gray-dark rounded">
       {message}
       <svg
         className="ml-2 h-4 w-4 rounded border-green animate-bounce"

diff --git a/src/pages/dialog/signin.tsx b/src/pages/dialog/signin.tsx
@@ -20,15 +20,15 @@ export const SigninItem = ({ signin }): JSX.Element => {
       <div>
         <p className=" text-start text-sm font-bold">URL: {signin.domain}</p>
         {signin?.identifier ? (
-          <p className=" text-start text-sm font-bold">
-            AID: {signin?.identifier?.name}
+          <p className=" text-start text-sm">
+            <strong>AID: </strong> {signin?.identifier?.name}
           </p>
         ) : (
           <></>
         )}
         {signin?.credential ? (
           <p className=" text-sm text-start font-normal text-gray">
-            <strong>{signin?.credential?.schema?.title}</strong>
+            <strong>Cred: </strong> {signin?.credential?.schema?.title}
           </p>
         ) : (
           <></>

diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
@@ -7,7 +7,7 @@ import { Main } from "@components/main";
 
 const url = "https://keria-dev.rootsid.cloud/admin";
 const boot_url = "https://keria-dev.rootsid.cloud";
-const password = "Cp6n5zxYRmnE4iTyCUM0gR";
+const password = "j2H9kCTbGybPkrTs9cGQA";
 
 interface IConnect {
   passcode?: string;
@@ -39,18 +39,15 @@ export default function Popup(): JSX.Element {
       subtype: "check-agent-connection",
     });
 
-    if (data.isConnected) {
-      document.body.style.width = "640px";
-    } else {
-      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){
-
-        });
-    });
+      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        chrome.tabs.sendMessage(
+          tabs[0].id,
+          { type: "tab", subtype: "reload-state" },
+          function (response) {}
+        );
+      });
     }
   };
 
@@ -84,8 +81,10 @@ export default function Popup(): JSX.Element {
 
   if (isCheckingInitialConnection) {
     return (
-      <div className=" w-16 h-16 m-auto text-green">
-        <Loader size={12} />
+      <div className="w-[300px]">
+        <div className=" w-16 h-16 m-auto text-green">
+          <Loader size={12} />
+        </div>
       </div>
     );
   }
@@ -95,11 +94,13 @@ export default function Popup(): JSX.Element {
       {isConnected ? (
         <Main handleDisconnect={handleDisconnect} />
       ) : (
-        <Signin
-          vendorUrl={vendorUrl}
-          handleConnect={handleConnect}
-          isLoading={isLoading}
-        />
+        <div className="w-[300px]">
+          <Signin
+            vendorUrl={vendorUrl}
+            handleConnect={handleConnect}
+            isLoading={isLoading}
+          />
+        </div>
       )}
     </div>
   );

diff --git a/src/pages/popup/index.css b/src/pages/popup/index.css
@@ -1,5 +1,4 @@
 body {
-  width: 300px;
   height: 386px;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',