From c5a3d476448250d8168378ef6d137aa85babcad9 Mon Sep 17 00:00:00 2001 From: Hunain Bin Sajid Date: Wed, 21 Feb 2024 19:54:54 +0500 Subject: [PATCH 1/2] fix: make vendor data optional and use default --- src/_locales/en.json | 1 + src/_locales/es-419.json | 1 + src/_locales/es.json | 1 + src/config/vendor.json | 17 ++++----- src/pages/background/services/config.ts | 19 ++++++++-- src/pages/background/utils.ts | 20 +++++++--- src/pages/dialog/Dialog.tsx | 49 ++++++++++++++++++++++--- src/pages/dialog/popupPrompt.tsx | 2 +- src/pages/popup/Popup.tsx | 11 +++--- src/screens/config/config.tsx | 44 +++++++++++----------- 10 files changed, 112 insertions(+), 53 deletions(-) diff --git a/src/_locales/en.json b/src/_locales/en.json index 1bc0fffb..9cd58256 100644 --- a/src/_locales/en.json +++ b/src/_locales/en.json @@ -11,6 +11,7 @@ "action.createNew": "Create New", "action.delete": "Delete", "action.disconnect": "Disconnect", + "action.load": "Load", "action.open": "Open", "action.save": "Save", "action.select": "Select", diff --git a/src/_locales/es-419.json b/src/_locales/es-419.json index 72330d93..c287d891 100644 --- a/src/_locales/es-419.json +++ b/src/_locales/es-419.json @@ -11,6 +11,7 @@ "action.createNew": "Crear nuevo", "action.delete": "Borrar", "action.disconnect": "Desconectar", + "action.load": "Carga", "action.open": "Abrir", "action.save": "Guardar", "action.select": "Seleccionar", diff --git a/src/_locales/es.json b/src/_locales/es.json index 72330d93..c287d891 100644 --- a/src/_locales/es.json +++ b/src/_locales/es.json @@ -11,6 +11,7 @@ "action.createNew": "Crear nuevo", "action.delete": "Borrar", "action.disconnect": "Desconectar", + "action.load": "Carga", "action.open": "Abrir", "action.save": "Guardar", "action.select": "Seleccionar", diff --git a/src/config/vendor.json b/src/config/vendor.json index 38be8e0b..32678e8a 100644 --- a/src/config/vendor.json +++ b/src/config/vendor.json @@ -1,26 +1,23 @@ { "title": "Keria", - "logo": "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png", - "icon": "https://cdn-icons-png.flaticon.com/128/3291/3291695.png", - "agentUrl": "https://keria-dev.rootsid.cloud/admin", - "onboardingUrl": "https://github.com/signup", - "docsUrl": "https://docs.github.com", - "supportUrl": "https://support.github.com", + "onboardingUrl": "https://github.com/WebOfTrust/signify-browser-extension", + "docsUrl": "https://github.com/WebOfTrust/signify-browser-extension", + "supportUrl": "https://github.com/WebOfTrust/signify-browser-extension", "theme": { "colors": { "primary": "#078007", - "secondary": "#0b5c6d", - "error": "red", + "secondary": "#04323b", + "error": "#e60d0d", "heading": "#5e2b8f", "text": "grey", - "subtext": "#fae8e8", + "subtext": "#ffffff", "white": "#ffffff", "black": "#373e49", "bodyBg": "#ffffff", "bodyBorder": "#9A6C2E", "bodyColor": "#9A6C2E", "cardColor": "#249624", - "cardBg": "#ebebf5" + "cardBg": "#ffffff" } } } diff --git a/src/pages/background/services/config.ts b/src/pages/background/services/config.ts index e19ca5d3..24ab6352 100644 --- a/src/pages/background/services/config.ts +++ b/src/pages/background/services/config.ts @@ -1,10 +1,12 @@ import { browserStorageService } from "@pages/background/services/browser-storage"; +import { default as defaultVendor } from "@src/config/vendor.json"; const CONFIG_ENUMS = { VENDOR_URL: "vendor-url", VENDOR_DATA: "vendor-data", VENDOR_LANG: "vendor-lang", AGENT_URL: "agent-url", + HAS_ONBOARDED: "has-onboarded", }; const Config = () => { @@ -23,9 +25,11 @@ const Config = () => { }; const getData = async (): Promise => { - return (await browserStorageService.getValue( + const _vendor = await browserStorageService.getValue( CONFIG_ENUMS.VENDOR_DATA - )) as any; + ); + + return _vendor ?? defaultVendor; }; const removeData = async () => { @@ -56,16 +60,22 @@ const Config = () => { await browserStorageService.setValue(CONFIG_ENUMS.AGENT_URL, token); }; + const setHasOnboarded = async (value: boolean) => { + await browserStorageService.setValue(CONFIG_ENUMS.HAS_ONBOARDED, value); + }; + const getAgentAndVendorInfo = async (): Promise => { const resp = await browserStorageService.getValues([ CONFIG_ENUMS.AGENT_URL, CONFIG_ENUMS.VENDOR_URL, - CONFIG_ENUMS.VENDOR_DATA + CONFIG_ENUMS.VENDOR_DATA, + CONFIG_ENUMS.HAS_ONBOARDED ]); return { vendorUrl: resp[CONFIG_ENUMS.VENDOR_URL], agentUrl: resp[CONFIG_ENUMS.AGENT_URL], - vendorData: resp[CONFIG_ENUMS.VENDOR_DATA] + vendorData: resp[CONFIG_ENUMS.VENDOR_DATA], + hasOnboarded: resp[CONFIG_ENUMS.HAS_ONBOARDED] }; }; @@ -80,6 +90,7 @@ const Config = () => { setLanguage, getAgentUrl, setAgentUrl, + setHasOnboarded, getAgentAndVendorInfo }; }; diff --git a/src/pages/background/utils.ts b/src/pages/background/utils.ts index ebdab7c2..73020865 100644 --- a/src/pages/background/utils.ts +++ b/src/pages/background/utils.ts @@ -41,14 +41,24 @@ export const obfuscateString = (inputString: string) => { return `${prefix}...${suffix}`; }; -export const removeSlash = (site:string) => { +export const removeSlash = (site: string) => { return site.replace(/\/$/, ""); }; export const hasWhiteSpace = (s: string) => { - return s.indexOf(' ') >= 0; -} + return s.indexOf(" ") >= 0; +}; -export const removeWhiteSpace = (s: string, replace="") => { +export const removeWhiteSpace = (s: string, replace = "") => { return s.replace(/\s/g, replace); -} +}; + +export const setActionIcon = async (iconUrl: string) => { + const imageBlob = await fetch(iconUrl).then((r) => r.blob()); + const bitmap = await createImageBitmap(imageBlob); + const canvas = new OffscreenCanvas(bitmap.width, bitmap.height); + const context = canvas.getContext("2d"); + context?.drawImage(bitmap, 0, 0); + const imageData = context?.getImageData(0, 0, bitmap.width, bitmap.height); + chrome.action.setIcon({ imageData: imageData }); +}; diff --git a/src/pages/dialog/Dialog.tsx b/src/pages/dialog/Dialog.tsx index 8c971eb1..858cca05 100644 --- a/src/pages/dialog/Dialog.tsx +++ b/src/pages/dialog/Dialog.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { ThemeProvider, styled } from "styled-components"; import { useIntl } from "react-intl"; -import { default as defaultVendor } from "@src/config/vendor.json"; +// import { default as defaultVendor } from "@src/config/vendor.json"; import { Text, Subtext } from "@components/ui"; import { TAB_STATE } from "@pages/popup/constants"; import { PopupPrompt } from "./popupPrompt"; @@ -76,12 +76,14 @@ export default function Dialog({ }; return ( - + + {" "} + // ?? defaultVendor.theme
{showPopupPrompt ? ( + {formatMessage({ id: "action.open" })}{" "} logo @@ -98,7 +100,44 @@ export default function Dialog({ > {"x"} - {vendorData ? ( + +
+ logo + + {formatMessage({ id: "signin.with" })} {vendorData?.title} + +
+ {showRequestAuthPrompt ? ( + + + {tabUrl} + {" "} + {formatMessage({ id: "signin.requestAuth" })}{" "} + {formatMessage({ id: getTextKeyByEventType() })} + + ) : ( + <> + {signins?.map((signin) => ( + + ))} +
+ {formatMessage({ id: "action.open" })}{" "} + + logo + {" "} + {formatMessage({ id: "action.toSelectOther" })}{" "} + {formatMessage({ id: getTextKeyByEventType() })} +
+ + )} + + {/* {vendorData ? (
logo @@ -145,7 +184,7 @@ export default function Dialog({

- )} + )} */} ); diff --git a/src/pages/dialog/popupPrompt.tsx b/src/pages/dialog/popupPrompt.tsx index 9d99d69b..1486a472 100644 --- a/src/pages/dialog/popupPrompt.tsx +++ b/src/pages/dialog/popupPrompt.tsx @@ -6,7 +6,7 @@ interface IPopupPrompt { const StyledContainer = styled.div` background-color: ${({ theme }) => theme?.colors?.secondary}; - color: ${({ theme }) => theme?.colors?.bodyColor}; + color: ${({ theme }) => theme?.colors?.subtext}; `; export const PopupPrompt = ({ message }: IPopupPrompt): JSX.Element => { diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx index b63eed4e..ed7bcc64 100644 --- a/src/pages/popup/Popup.tsx +++ b/src/pages/popup/Popup.tsx @@ -29,7 +29,7 @@ const StyledLoader = styled.div` `; export default function Popup(): JSX.Element { - const [vendorData, setVendorData] = useState(); + const [vendorData, setVendorData] = useState(defaultVendor); const [showConfig, setShowConfig] = useState(false); const [isConnected, setIsConnected] = useState(false); @@ -44,7 +44,7 @@ export default function Popup(): JSX.Element { setVendorData(resp.vendorData); } - if (!resp.agentUrl || !resp.vendorData) { + if (!resp.agentUrl || !resp.hasOnboarded) { setShowConfig(true); } }; @@ -118,9 +118,10 @@ export default function Popup(): JSX.Element { checkConnection(); }; + const logo = vendorData?.logo ?? "/128_keri_logo.png"; return ( - +
{isCheckingInitialConnection ? ( @@ -134,7 +135,7 @@ export default function Popup(): JSX.Element { {isConnected ? (
) : ( @@ -143,7 +144,7 @@ export default function Popup(): JSX.Element { signinError={connectError} handleConnect={handleConnect} isLoading={isLoading} - logo={vendorData?.logo} + logo={logo} title={vendorData?.title} afterSetUrl={checkIfVendorDataExists} vendorData={vendorData} diff --git a/src/screens/config/config.tsx b/src/screens/config/config.tsx index 3f1153a6..dd753d23 100644 --- a/src/screens/config/config.tsx +++ b/src/screens/config/config.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from "react"; import { useIntl } from "react-intl"; import { configService } from "@pages/background/services/config"; import { useLocale, languageCodeMap } from "@src/_locales"; -import { isValidUrl } from "@pages/background/utils"; +import { isValidUrl, setActionIcon } from "@pages/background/utils"; import { Button, Dropdown } from "@components/ui"; const langMap = Object.entries(languageCodeMap).map((s) => ({ @@ -16,7 +16,7 @@ export function Config(props): JSX.Element { const [agentUrl, setAgentUrl] = useState(""); const [agentUrlError, setAgentUrlError] = useState(""); - const [vendorData, setVendorData] = useState(); + const [hasOnboarded, setHasOnboarded] = useState(); const { formatMessage } = useIntl(); const { changeLocale, currentLocale } = useLocale(); @@ -29,7 +29,7 @@ export function Config(props): JSX.Element { const response = await configService.getAgentAndVendorInfo(); setVendorUrl(response.vendorUrl); setAgentUrl(response.agentUrl); - setVendorData(response.vendorData); + setHasOnboarded(response.hasOnboarded); }; useEffect(() => { @@ -55,10 +55,15 @@ export function Config(props): JSX.Element { const handleSetAgentUrl = async (_url) => { const hasError = checkErrorAgentUrl(_url); - if (!hasError) { - await configService.setAgentUrl(_url); - setAgentUrl(_url); - setAgentUrlError(""); + if (hasError) return; + + await configService.setAgentUrl(_url); + setAgentUrl(_url); + setAgentUrlError(""); + + if (!hasOnboarded) { + await configService.setHasOnboarded(true); + props.handleBack(); } }; @@ -66,20 +71,13 @@ export function Config(props): JSX.Element { let hasError = checkErrorVendorUrl(); try { const resp = await (await fetch(vendorUrl)).json(); - handleSetAgentUrl(resp?.agentUrl); + if (resp?.agentUrl) { + await handleSetAgentUrl(resp?.agentUrl); + } await configService.setData(resp); - const imageBlob = await fetch(resp?.icon).then((r) => r.blob()); - const bitmap = await createImageBitmap(imageBlob); - const canvas = new OffscreenCanvas(bitmap.width, bitmap.height); - const context = canvas.getContext("2d"); - context?.drawImage(bitmap, 0, 0); - const imageData = context?.getImageData( - 0, - 0, - bitmap.width, - bitmap.height - ); - chrome.action.setIcon({ imageData: imageData }); + if (resp?.icon) { + await setActionIcon(resp?.icon); + } } catch (error) { setVendorUrlError(invalidVendorUrlError); hasError = true; @@ -104,7 +102,7 @@ export function Config(props): JSX.Element { return ( <> - {vendorData ? ( + {hasOnboarded ? (

- {formatMessage({ id: "config.agentUrl.label" })} + {formatMessage({ id: "config.agentUrl.label" })} *

Date: Wed, 21 Feb 2024 23:23:06 +0500 Subject: [PATCH 2/2] add example video for extension download --- example-web/my-app/src/App.css | 25 +++++++++++++++++++++++++ example-web/my-app/src/App.js | 31 +++++++++++++++++++++++++------ 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/example-web/my-app/src/App.css b/example-web/my-app/src/App.css index f43b409b..1438b7bc 100644 --- a/example-web/my-app/src/App.css +++ b/example-web/my-app/src/App.css @@ -32,6 +32,31 @@ color: #61dafb; } +.auth-btn-container { + display: flex; + flex-direction: column; + row-gap: 0.5rem; + margin-top: 0.5rem; +} + +.auth-heading { + font-size: 1.125rem/* 18px */; + line-height: 1.75rem/* 28px */; + font-weight: 700; +} + +.signify-data { + width: 100%; + display: block; + padding: 0.625rem; + color: black; + font-size: 0.875rem; + line-height: 1.25rem; + border-radius: 0.5rem; + border-width: 1px; + +} + @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/example-web/my-app/src/App.js b/example-web/my-app/src/App.js index 88f6ba35..1bb01462 100644 --- a/example-web/my-app/src/App.js +++ b/example-web/my-app/src/App.js @@ -50,9 +50,9 @@ function App() {
{signifyData ? (
-
+

Welcome!

-
@@ -70,9 +70,28 @@ function App() {
) : ( <> - logo -
-

Authenticate with

+ {/* logo */} +
+ + +
+
+

Authenticate with