diff --git a/src/components/signinCard.tsx b/src/components/signinCard.tsx index 032cdfdc..edbabde0 100644 --- a/src/components/signinCard.tsx +++ b/src/components/signinCard.tsx @@ -1,4 +1,4 @@ -export function SigninCard({ signin }): JSX.Element { +export function SigninCard({ signin, handleDelete }): JSX.Element { return (
@@ -30,11 +30,22 @@ export function SigninCard({ signin }): JSX.Element { {signin?.identifier?.name}

-
-

Last Used

-

- {new Date(signin?.updatedAt).toDateString()} -

+
+
+

Last Used

+

+ {new Date(signin?.updatedAt).toDateString()} +

+
+
+ +
); diff --git a/src/components/signinList.tsx b/src/components/signinList.tsx index d9041e61..3f2c6693 100644 --- a/src/components/signinList.tsx +++ b/src/components/signinList.tsx @@ -17,6 +17,26 @@ export function SigninList(): JSX.Element { setIsLoading(false); }; + const deleteSignin = async (index: number) => { + const { data } = await chrome.runtime.sendMessage>({ + type: "delete-resource", + subtype: "signins", + data: { + index, + }, + }); + if (data?.isDeleted) { + 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(); }, []); @@ -30,7 +50,10 @@ export function SigninList(): JSX.Element { ) : null} {signins.map((signin, index) => (
- + deleteSignin(index)} + />
))} {!isLoading && !signins?.length ? ( diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts index c075e58f..7ce29234 100644 --- a/src/pages/background/index.ts +++ b/src/pages/background/index.ts @@ -5,6 +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"; console.log("Background script loaded"); @@ -21,14 +22,14 @@ chrome.runtime.onMessage.addListener(function ( sendResponse ) { (async () => { - // Handle mesages from content script on active tab if (sender.tab && sender.tab.active) { - console.log( "Message received from content script at " + - sender.tab.url + " " + - message.type + ":" + + sender.tab.url + + " " + + message.type + + ":" + message.subtype ); @@ -45,8 +46,11 @@ chrome.runtime.onMessage.addListener(function ( message.subtype === "get-signed-headers" ) { const origin = sender.tab.url!; - const signedHeaders = await signifyService.signHeaders(message.data.signin.identifier.name, origin); - let jsonHeaders: { [key: string]: string; } = {}; + const signedHeaders = await signifyService.signHeaders( + message.data.signin.identifier.name, + origin + ); + let jsonHeaders: { [key: string]: string } = {}; for (const pair of signedHeaders.entries()) { jsonHeaders[pair[0]] = pair[1]; } @@ -60,10 +64,15 @@ chrome.runtime.onMessage.addListener(function ( const signins = await browserStorageService.getValue("signins"); sendResponse({ data: { signins: signins ?? [] } }); } - - // Handle messages from Popup + + // Handle messages from Popup } else if (senderIsPopup(sender)) { - 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 === "authentication" && @@ -98,7 +107,9 @@ chrome.runtime.onMessage.addListener(function ( } if (message.type === "create-resource" && message.subtype === "signin") { - const signins = await browserStorageService.getValue("signins") as any[]; + const signins = (await browserStorageService.getValue( + "signins" + )) as any[]; const currentDomain = await getCurrentDomain(); const { identifier, credential } = message.data; @@ -137,6 +148,15 @@ chrome.runtime.onMessage.addListener(function ( }); } + if (message.type === "delete-resource" && message.subtype === "signins") { + const resp = await deleteSigninByIndex(message?.data?.index); + sendResponse({ + data: { + ...resp, + }, + }); + } + if ( message.type === "fetch-resource" && message.subtype === "credentials" @@ -144,32 +164,35 @@ chrome.runtime.onMessage.addListener(function ( const credentials = await signifyService.listCredentials(); sendResponse({ data: { credentials: credentials ?? [] } }); } - })(); // return true to indicate chrome api to send a response asynchronously return true; }); -chrome.runtime.onMessageExternal.addListener( - async function(request, sender, sendResponse) { - console.log("Message received from external source: " + sender.url); - // if (sender.url === blocklistedWebsite) - // return; // don't allow this web page access - // if (request.openUrlInEditor) - // openUrl(request.openUrlInEditor); - // sendResponse({data: "received"}) - const origin = sender.url!; - const signins = await browserStorageService.getValue("signins") as any; - // Validate that message comes from a page that has a signin - if (origin.startsWith(signins[0].domain)) { - const signedHeaders = await signifyService.signHeaders(signins[0].identifier.name, origin); - let jsonHeaders: { [key: string]: string; } = {}; - for (const pair of signedHeaders.entries()) { - jsonHeaders[pair[0]] = pair[1]; - } - sendResponse({ data: { headers: jsonHeaders } }); - +chrome.runtime.onMessageExternal.addListener(async function ( + request, + sender, + sendResponse +) { + console.log("Message received from external source: " + sender.url); + // if (sender.url === blocklistedWebsite) + // return; // don't allow this web page access + // if (request.openUrlInEditor) + // openUrl(request.openUrlInEditor); + // sendResponse({data: "received"}) + const origin = sender.url!; + const signins = (await browserStorageService.getValue("signins")) as any; + // Validate that message comes from a page that has a signin + if (origin.startsWith(signins[0].domain)) { + const signedHeaders = await signifyService.signHeaders( + signins[0].identifier.name, + origin + ); + let jsonHeaders: { [key: string]: string } = {}; + for (const pair of signedHeaders.entries()) { + jsonHeaders[pair[0]] = pair[1]; } - - }); + sendResponse({ data: { headers: jsonHeaders } }); + } +}); diff --git a/src/pages/background/signins-utils.ts b/src/pages/background/signins-utils.ts new file mode 100644 index 00000000..a8c056b2 --- /dev/null +++ b/src/pages/background/signins-utils.ts @@ -0,0 +1,14 @@ +import { browserStorageService } from "@pages/background/services/browser-storage"; + +export const deleteSigninByIndex = async (index: number) => { + let signins = await browserStorageService.getValue("signins"); + let deleted = false; + if (signins?.length) { + const newSignins = signins.filter((_ele, idx) => idx !== index); + await browserStorageService.setValue("signins", newSignins); + deleted = newSignins.length !== signins?.length; + } + signins = await browserStorageService.getValue("signins"); + + return { isDeleted: deleted, signins }; +}; diff --git a/src/pages/content/index.tsx b/src/pages/content/index.tsx index 99a54e1f..5f5381f9 100644 --- a/src/pages/content/index.tsx +++ b/src/pages/content/index.tsx @@ -19,7 +19,7 @@ window.addEventListener( switch (event.data.type) { case "init-req-identifier": case "init-req-credential": - setTabState(TAB_STATE.DEFAULT) + setTabState(TAB_STATE.DEFAULT); const { data } = await chrome.runtime.sendMessage>({ type: "authentication", subtype: "check-agent-connection", @@ -73,24 +73,27 @@ chrome.runtime.onMessage.addListener(async function ( data.isConnected, data.tabUrl, tabSigninResp?.data?.signins, - "" + message.eventType ?? "" ); } - } if (message.type === "tab" && message.subtype === "get-tab-state") { - sendResponse({data: {appState:getTabState()}}); - } + sendResponse({ data: { appState: getTabState() } }); + } if (message.type === "tab" && message.subtype === "set-tab-state") { setTabState(message.data.appState); - } + } } - }); -function insertDialog(isConnected: boolean, tabUrl: string, signins: any, eventType: string) { +function insertDialog( + isConnected: boolean, + tabUrl: string, + signins: any, + eventType: string +) { const div = document.createElement("div"); div.id = "__root"; document.body.appendChild(div); @@ -103,6 +106,7 @@ function insertDialog(isConnected: boolean, tabUrl: string, signins: any, eventT tabUrl={tabUrl} signins={signins} eventType={eventType} + removeDialog={removeDialog} /> ); } @@ -113,11 +117,11 @@ function removeDialog() { } export function setTabState(state: string) { - console.log("setTabState: " + state) + console.log("setTabState: " + state); tabState = state; } export function getTabState() { - console.log("getTabState: " + tabState) + console.log("getTabState: " + tabState); return tabState; -} \ No newline at end of file +} diff --git a/src/pages/dialog/Dialog.tsx b/src/pages/dialog/Dialog.tsx index 27910cc7..17423d4b 100644 --- a/src/pages/dialog/Dialog.tsx +++ b/src/pages/dialog/Dialog.tsx @@ -9,6 +9,7 @@ export default function Dialog({ tabUrl = "", signins = [], eventType = "", + removeDialog, }): JSX.Element { const logo = chrome.runtime.getURL("src/assets/img/128_keri_logo.png"); const [showPopupPrompt, setShowPopupPrompt] = useState(false); @@ -36,6 +37,10 @@ export default function Dialog({ } }, []); + const handleRemove = () => { + removeDialog(); + }; + return (
{showPopupPrompt ? ( @@ -51,6 +56,13 @@ export default function Dialog({ } /> ) : null} +
logo @@ -77,9 +89,7 @@ export default function Dialog({ logo {" "} to select other{" "} - {eventType === "init-req-identifier" - ? "identifier" - : "credential"}{" "} + {eventType === "init-req-identifier" ? "AID" : "credential"}{" "} ) : null}