Merge pull request #66 from HunnySajid/feat/auto-signin

feat: add auto signin functionality
WebOfTrust · Jan 16, 2024 · 381c0f7 · 381c0f7
2 parents 92761d4 + 7110736
commit 381c0f7
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 19 deletions.
diff --git a/src/components/customSwitch.tsx b/src/components/customSwitch.tsx
@@ -0,0 +1,50 @@
+const icon = (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M20 12C20 7.58172 16.4183 4 12 4M12 20C14.5264 20 16.7792 18.8289 18.2454 17"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M4 12H14M14 12L11 9M14 12L11 15"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export function CustomSwitch({ handleToggle, isChecked }): JSX.Element {
+  // const [isChecked, setIsChecked] = useState(false);
+  // const [selectedIcon, setSelectedIcon] = useState(icon);
+
+  // const handleToggle = () => {
+  //   const updateChecked = !isChecked;
+  //   setIsChecked(updateChecked);
+  //   // setTimeout(() => {
+  //   //   setSelectedIcon(updateChecked ? icon : icon);
+  //   // }, 250);
+  // };
+
+  return (
+    <button
+      className={`w-12 h-6 rounded-full flex items-center transition duration-300 focus:outline-none shadow bg-gray-light ${
+        isChecked ? "border border-green" : " "
+      }`}
+      onClick={handleToggle}
+    >
+      <div
+        id="switch-toggle"
+        className={` w-6 h-6 relative rounded-full transition duration-500 transform p-1 text-white ${
+          isChecked
+            ? "bg-green translate-x-full"
+            : " bg-gray-light -translate-x-1"
+        }`}
+      >
+        {icon}
+      </div>
+    </button>
+  );
+}
diff --git a/src/components/signinCard.tsx b/src/components/signinCard.tsx
@@ -1,4 +1,10 @@
-export function SigninCard({ signin, handleDelete }): JSX.Element {
+import { CustomSwitch } from "@components/customSwitch";
+
+export function SigninCard({
+  signin,
+  handleDelete,
+  handleAutoSignin,
+}): JSX.Element {
   return (
     <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">
@@ -22,21 +28,30 @@ export function SigninCard({ signin, handleDelete }): JSX.Element {
         </svg>
       </div>
 
-      <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="flex flex-row justify-between">
+        <div>
+          <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>
           <p className="font-bold text-gray-dark">Last Used</p>
           <p className="font-normal text-md text-gray">
             {new Date(signin?.updatedAt).toDateString()}
           </p>
         </div>
+      </div>
+      <div className="flex flex-row justify-between">
+        <div>
+          <p className="font-bold text-gray-dark">Auto Sign in</p>
+          <CustomSwitch
+            isChecked={signin.autoSignin}
+            handleToggle={handleAutoSignin}
+          />
+        </div>
         <div className="flex items-end">
           <button
             type="button"

diff --git a/src/components/signinList.tsx b/src/components/signinList.tsx
@@ -37,6 +37,28 @@ export function SigninList(): JSX.Element {
     }
   };
 
+  const updateAutoSignin = async (index: number, signin) => {
+    console.log("signin", signin, index);
+    const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+      type: "update-resource",
+      subtype: "auto-signin",
+      data: {
+        index,
+        signin,
+      },
+    });
+    if (data?.signins) {
+      setSignins(data?.signins);
+      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id!, {
+          type: "tab",
+          subtype: "reload-state",
+          eventType: "init-req-identifier",
+        });
+      });
+    }
+  };
+
   useEffect(() => {
     fetchSignins();
   }, []);
@@ -53,6 +75,7 @@ export function SigninList(): JSX.Element {
           <SigninCard
             signin={signin}
             handleDelete={() => deleteSignin(index)}
+            handleAutoSignin={() => updateAutoSignin(index, signin)}
           />
         </div>
       ))}

diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts
@@ -5,7 +5,7 @@ import { signifyService } from "@pages/background/services/signify";
 import { IMessage } from "@pages/background/types";
 import { senderIsPopup } from "@pages/background/utils";
 import { getCurrentDomain } from "@pages/background/utils";
-import { deleteSigninByIndex } from "@pages/background/signins-utils";
+import { updateDomainAutoSigninByIndex, deleteSigninByIndex } from "@pages/background/signins-utils";
 
 console.log("Background script loaded");
 
@@ -148,6 +148,15 @@ chrome.runtime.onMessage.addListener(function (
       });
     }
 
+    if (message.type === "update-resource" && message.subtype === "auto-signin") {
+      const resp = await updateDomainAutoSigninByIndex(message?.data?.index, message?.data?.signin);
+      sendResponse({
+        data: {
+          ...resp,
+        },
+      });
+    }
+
     if (message.type === "delete-resource" && message.subtype === "signins") {
       const resp = await deleteSigninByIndex(message?.data?.index);
       sendResponse({

diff --git a/src/pages/background/signins-utils.ts b/src/pages/background/signins-utils.ts
@@ -1,5 +1,23 @@
 import { browserStorageService } from "@pages/background/services/browser-storage";
 
+export const updateDomainAutoSigninByIndex = async (index: number, signin) => {
+  let signins = await browserStorageService.getValue("signins");
+  if (signins?.length) {
+    const newSignins = signins.map((_ele, idx) => {
+      if (idx !== index && _ele.domain !== signin.domain) return _ele;
+
+      if (idx !== index && _ele.domain === signin.domain)
+        return { ..._ele, autoSignin: false };
+
+      return { ..._ele, autoSignin: true };
+    });
+    await browserStorageService.setValue("signins", newSignins);
+  }
+  signins = await browserStorageService.getValue("signins");
+
+  return { signins };
+};
+
 export const deleteSigninByIndex = async (index: number) => {
   let signins = await browserStorageService.getValue("signins");
   let deleted = false;

diff --git a/src/pages/dialog/signin.tsx b/src/pages/dialog/signin.tsx
@@ -1,7 +1,6 @@
 import { TAB_STATE } from "@pages/popup/constants";
 import { setTabState } from "@pages/content/index";
 
-
 // TODO do not pass the full signins stored object (only AID name, schema name, web url)
 export const SigninItem = ({ signin }: { signin: any }): JSX.Element => {
   const handleClick = async () => {
@@ -21,7 +20,7 @@ export const SigninItem = ({ signin }: { signin: any }): JSX.Element => {
 
   return (
     <div className="flex m-2 flex-row justify-between p-2 items-start border border-black rounded">
-      <div>
+      <div className="max-w-[200px] break-words">
         <p className=" text-start text-sm font-bold">URL: {signin.domain}</p>
         {signin?.identifier ? (
           <p className=" text-start text-sm">
@@ -41,13 +40,35 @@ export const SigninItem = ({ signin }: { signin: any }): JSX.Element => {
           Last used: {new Date(signin.updatedAt).toDateString()}
         </p>
       </div>
-      <button
-        type="button"
-        onClick={handleClick}
-        className="text-white self-end bg-green font-medium rounded-full text-sm px-2 py-1 text-center"
-      >
-        Sign in
-      </button>
+      <div className="flex flex-col gap-y-2">
+        <div className={`${signin?.autoSignin ? "visible" : "invisible"}`}>
+          <p className=" text-end text-[8px] font-bold">Auto Sign in</p>
+          <div className="text-green float-right">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              className="w-6 h-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          onClick={handleClick}
+          className="text-white self-end bg-green font-medium rounded-full text-sm px-2 py-1 text-center"
+        >
+          Sign in
+        </button>
+      </div>
     </div>
   );
 };