Feat/create aid

src/components/createIdentifierCard.tsx

@@ -0,0 +1,84 @@
+import { isValidElement, useState, useEffect } from "react";
+import { hasWhiteSpace, removeWhiteSpace } from "@pages/background/utils";
+import { Loader } from "@components/loader";
+
+export function CreateIdentifierCard(props): JSX.Element {
+  const [name, setName] = useState("");
+  const [nameError, setNameError] = useState("");
+
+  useEffect(() => {
+    setNameError(props.error);
+  }, [props.error]);
+  const onBlurName = () => {
+    if (!name) {
+      setNameError("Name can not be empty");
+    } else {
+      setNameError("");
+    }
+  };
+
+  const handleRemoveWhiteSpace = () => {
+    setName(removeWhiteSpace(name));
+    setNameError("");
+  };
+  const onCreateIdentifier = async () => {
+    let hasError = false;
+    if (!name) {
+      setNameError("Name can not be empty");
+      hasError = true;
+    } else if (hasWhiteSpace(name)) {
+      setNameError(
+        <div className="text-red mt-1">
+          No white spaces allowed.{" "}
+          <button
+            className=" underline cursor-pointer"
+            onClick={handleRemoveWhiteSpace}
+          >
+            click to remove
+          </button>
+        </div>
+      );
+      hasError = true;
+    }
+
+    if (!hasError) props.handleCreateIdentifier(name);
+  };
+
+  return (
+    <>
+      <div className=" max-w-xs m-4 flex flex-col gap-y-4">
+        <div>
+          <input
+            type="text"
+            id="vendor_url"
+            className={`bg-gray-50 border text-black border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ${
+              nameError ? " text-red border-red" : ""
+            } `}
+            placeholder="Enter unique name for identifier"
+            required
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onBlur={onBlurName}
+          />
+          {nameError ? (
+            isValidElement(nameError) ? (
+              nameError
+            ) : (
+              <p className="text-red mt-1">{nameError}</p>
+            )
+          ) : null}
+        </div>
+        <div className=" flex flex-row justify-center mt-2">
+          <button
+            type="button"
+            onClick={onCreateIdentifier}
+            className="text-white bg-green flex flex-row gap-x-1 font-medium rounded-full text-sm px-5 py-2 text-center"
+          >
+            {props.isLoading ? <Loader size={4} /> : null}
+            <p className="font-medium text-md">Create</p>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/drawer.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export const Drawer = ({ children, isOpen, handleClose, header }) => {
+  return (
+    <div
+      className={
+        " fixed overflow-hidden z-50 bg-gray-dark bg-opacity-25 inset-0 transform ease-in-out " +
+        (isOpen
+          ? " transition-opacity opacity-100 duration-500 translate-x-0  "
+          : " transition-all delay-500 opacity-0 translate-x-full  ")
+      }
+    >
+      <section
+        className={
+          "rounded-bl-2xl rounded-tl-2xl border-t border-l border-b border-t-white border-b-white border-l-white w-screen max-w-xs right-0 absolute bg-gray-dark h-full shadow-xl delay-400 duration-500 ease-in-out transition-all transform  " +
+          (isOpen ? " translate-x-0 " : " translate-x-full ")
+        }
+      >
+        <article className="relative w-screen max-w-xs pb-10 flex flex-col space-y-6 overflow-y-scroll h-full">
+          <header className="p-4 font-bold text-lg ">{header}</header>
+          {children}
+        </article>
+      </section>
+      <section
+        className=" w-screen h-full cursor-pointer "
+        onClick={handleClose}
+      ></section>
+    </div>
+  );
+};

src/components/identifierList.tsx

@@ -1,33 +1,83 @@
 import { useState, useEffect } from "react";
 import { IdentifierCard } from "@components/identifierCard";
+import { Drawer } from "@components/drawer";
 import { Loader } from "@components/loader";
 import { IMessage } from "@pages/background/types";
+import { CreateIdentifierCard } from "@components/createIdentifierCard";
 
 export function IdentifierList(): JSX.Element {
   const [aids, setAids] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [showDrawer, setShowDrawer] = useState(false);
+  const [errCreate, setErrCreate] = useState("");
+
   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);
+  };
+
+  const initialFetchIdentifiers = async () => {
+    setIsLoading(true);
+    fetchIdentifiers();
     setIsLoading(false);
   };
 
+  const refetchIdentifiers = async () => {
+    await fetchIdentifiers();
+    setShowDrawer(false);
+  };
+
   useEffect(() => {
-    fetchIdentifiers();
+    initialFetchIdentifiers();
   }, []);
 
+  const handleCreateIdentifier = async (name) => {
+    setIsCreating(true);
+    const { data, error } = await chrome.runtime.sendMessage<IMessage<void>>({
+      type: "create-resource",
+      subtype: "identifier",
+      data: { name },
+    });
+    if (error) {
+      setErrCreate(error?.message);
+    } else {
+      await refetchIdentifiers();
+      setErrCreate("");
+    }
+    setIsCreating(false);
+  };
+
   return (
     <>
       {isLoading ? (
         <div className="flex flex-row justify-center items-center">
           <Loader size={6} />
         </div>
       ) : null}
+      <div className=" flex flex-row-reverse">
+        <button
+          type="button"
+          onClick={() => setShowDrawer(true)}
+          className="text-white bg-green font-medium rounded-full text-xs px-2 py-1 text-center"
+        >
+          {"+ Create New"}
+        </button>
+      </div>
+      <Drawer
+        isOpen={showDrawer}
+        handleClose={() => setShowDrawer(false)}
+        header="Create Identifier"
+      >
+        <CreateIdentifierCard
+          isLoading={isCreating}
+          handleCreateIdentifier={handleCreateIdentifier}
+          error={errCreate}
+        />
+      </Drawer>
       {aids.map((aid, index) => (
         <div key={index} className="my-2 mx-4">
           <IdentifierCard aid={aid} />

src/components/selectCredential.tsx

@@ -1,15 +1,19 @@
 import { useState, useEffect } from "react";
 import { CredentialCard } from "@components/credentialCard";
+import { Loader } from "@components/loader";
 import { IMessage } from "@pages/background/types";
 
 export function SelectCredential(): 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",
     });
     setCredentials(data.credentials);
+    setIsLoading(false);
   };
 
   const createSigninWithCredential = async (credential: any) => {
@@ -21,9 +25,10 @@ export function SelectCredential(): JSX.Element {
       },
     });
     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(
-        tabs[0].id!,
-        { type: "tab", subtype: "reload-state" });
+      chrome.tabs.sendMessage(tabs[0].id!, {
+        type: "tab",
+        subtype: "reload-state",
+      });
     });
     window.close();
   };
@@ -34,6 +39,11 @@ export function SelectCredential(): 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">
           <div className=" relative opacity-80 hover:opacity-100">

src/components/selectIdentifier.tsx

@@ -1,9 +1,17 @@
 import { useState, useEffect } from "react";
 import { IdentifierCard } from "@components/identifierCard";
+import { Loader } from "@components/loader";
 import { IMessage } from "@pages/background/types";
+import { Drawer } from "@components/drawer";
+import { CreateIdentifierCard } from "@components/createIdentifierCard";
 
 export function SelectIdentifier(): JSX.Element {
   const [aids, setAids] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [showDrawer, setShowDrawer] = useState(false);
+  const [errCreate, setErrCreate] = useState("");
+
   const fetchIdentifiers = async () => {
     const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
       type: "fetch-resource",
@@ -23,9 +31,10 @@ export function SelectIdentifier(): JSX.Element {
     });
 
     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(
-        tabs[0].id!,
-        { type: "tab", subtype: "reload-state" });
+      chrome.tabs.sendMessage(tabs[0].id!, {
+        type: "tab",
+        subtype: "reload-state",
+      });
     });
     window.close();
   };
@@ -34,8 +43,52 @@ export function SelectIdentifier(): JSX.Element {
     fetchIdentifiers();
   }, []);
 
+  const handleCreateIdentifier = async (name) => {
+    setIsCreating(true);
+    const { data, error } = await chrome.runtime.sendMessage<IMessage<void>>({
+      type: "create-resource",
+      subtype: "identifier",
+      data: { name },
+    });
+    if (error) {
+      setErrCreate(error?.message);
+    } else {
+      if (data.done) {
+        const prefix = data?.name?.split(".")?.[1];
+        await createSigninWithIdentifiers({ prefix, name });
+      }
+      setErrCreate("");
+    }
+    setIsCreating(false);
+  };
+
   return (
     <>
+      {isLoading ? (
+        <div className="flex flex-row justify-center items-center">
+          <Loader size={6} />
+        </div>
+      ) : null}
+      <div className=" flex flex-row-reverse">
+        <button
+          type="button"
+          onClick={() => setShowDrawer(true)}
+          className="text-white bg-green font-medium rounded-full text-xs px-2 py-1 text-center"
+        >
+          {"+ Create New"}
+        </button>
+      </div>
+      <Drawer
+        isOpen={showDrawer}
+        handleClose={() => setShowDrawer(false)}
+        header="Create Identifier"
+      >
+        <CreateIdentifierCard
+          isLoading={isCreating}
+          handleCreateIdentifier={handleCreateIdentifier}
+          error={errCreate}
+        />
+      </Drawer>
       {aids.map((aid, index) => (
         <div key={index} className="my-2 mx-4">
           <div className=" relative opacity-80 hover:opacity-100">

src/pages/background/index.ts

@@ -141,6 +141,20 @@ chrome.runtime.onMessage.addListener(function (
       const storageSignins = await browserStorageService.getValue("signins");
       sendResponse({ data: { signins: storageSignins } });
     }
+    if (
+      message.type === "create-resource" &&
+      message.subtype === "identifier"
+    ) {
+      try {
+        const resp = await signifyService.createAID(message.data.name);
+        sendResponse({ data: { ...(resp ?? {}) } });
+      } catch (error) {
+        const errorMsg = JSON.parse(error?.message ?? "");
+        sendResponse({
+          error: { code: 404, message: errorMsg?.title },
+        });
+      }
+    }
     if (
       message.type === "fetch-resource" &&
       message.subtype === "identifiers"