From 0544b8358af68df87dbc472221d8c0842c2b2db0 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 19 May 2023 13:26:47 -0300 Subject: accounts and notifications --- packages/exchange-backoffice-ui/src/Dashboard.tsx | 217 +++++++++++--- packages/exchange-backoffice-ui/src/NiceForm.tsx | 1 + packages/exchange-backoffice-ui/src/account.ts | 243 ++++++++++++++++ .../src/handlers/FormProvider.tsx | 12 +- .../src/handlers/InputLine.tsx | 8 +- .../src/handlers/InputText.tsx | 2 +- .../exchange-backoffice-ui/src/handlers/forms.ts | 13 + .../exchange-backoffice-ui/src/pages/Officer.tsx | 313 +++++++++++++++------ 8 files changed, 679 insertions(+), 130 deletions(-) create mode 100644 packages/exchange-backoffice-ui/src/account.ts (limited to 'packages/exchange-backoffice-ui') diff --git a/packages/exchange-backoffice-ui/src/Dashboard.tsx b/packages/exchange-backoffice-ui/src/Dashboard.tsx index 9a0ba41d5..9be86c533 100644 --- a/packages/exchange-backoffice-ui/src/Dashboard.tsx +++ b/packages/exchange-backoffice-ui/src/Dashboard.tsx @@ -3,19 +3,26 @@ import { ChevronDownIcon, MagnifyingGlassIcon, UserIcon, + XCircleIcon, } from "@heroicons/react/20/solid"; import { Bars3Icon, BellIcon, + CheckCircleIcon, Cog6ToothIcon, XMarkIcon, } from "@heroicons/react/24/outline"; import { ComponentChildren, Fragment, VNode, h } from "preact"; import { ForwardedRef, forwardRef } from "preact/compat"; -import { useRef, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { Pages } from "./pages.js"; import { Router, useCurrentLocation } from "./route.js"; import { InformationCircleIcon } from "@heroicons/react/24/solid"; +import { + useLocalStorage, + useMemoryStorage, + useNotifications, +} from "@gnu-taler/web-util/browser"; /** * references between forms @@ -259,6 +266,7 @@ export function Dashboard({ setSidebarOpen(true); }} /> +
void }) { + const password = useMemoryStorage("password"); + const officer = useLocalStorage("officer"); + return (
@@ -473,3 +490,115 @@ function Footer() { ); } + +function Notifications() { + const ns = useNotifications(); + + // useEffect(() => { + // if (ns.length) { + // // remove notifications after some timeout + // } + // }, []); + { + /* */ + } + console.log("render", ns.length); + return ( +
+
+ {/* */} + {ns.map(({ message, remove }) => { + switch (message.type) { + case "error": { + return ( +
+
+
+
+ +
+
+

+ {message.title} +

+ {message.description && ( +

+ {message.description} +

+ )} +
+
+ +
+
+
+
+ ); + } + case "info": { + return ( +
+
+
+
+ +
+
+

+ {message.title} +

+
+
+ +
+
+
+
+ ); + } + } + })} +
+
+ ); +} diff --git a/packages/exchange-backoffice-ui/src/NiceForm.tsx b/packages/exchange-backoffice-ui/src/NiceForm.tsx index b7790bbec..593a373c1 100644 --- a/packages/exchange-backoffice-ui/src/NiceForm.tsx +++ b/packages/exchange-backoffice-ui/src/NiceForm.tsx @@ -18,6 +18,7 @@ export function NiceForm({ {}} computeFormState={form.behavior} >
diff --git a/packages/exchange-backoffice-ui/src/account.ts b/packages/exchange-backoffice-ui/src/account.ts new file mode 100644 index 000000000..1e770794a --- /dev/null +++ b/packages/exchange-backoffice-ui/src/account.ts @@ -0,0 +1,243 @@ +import { decodeCrock, encodeCrock } from "@gnu-taler/taler-util"; + +/** + * Create a new session id from which it will + * be derive the crypto parameters from + * securing the private key + * + * @returns session id as string + */ +export function createNewSessionId(): string { + const salt = crypto.getRandomValues(new Uint8Array(8)); + const iv = crypto.getRandomValues(new Uint8Array(12)); + return encodeCrock(salt.buffer) + "-" + encodeCrock(iv.buffer); +} + +/** + * Restore previous session and unlock account + * + * @param sessionId string from which crypto params will be derived + * @param accountId secured private key + * @param password password for the private key + * @returns + */ +export async function unlockAccount( + sessionId: string, + accountId: string, + password: string, +) { + const key = str2ab(window.atob(accountId)); + + const privateKey = await recoverWithPassword(key, sessionId, password); + + const publicKey = await getPublicFromPrivate(privateKey); + + const pubRaw = await crypto.subtle.exportKey("spki", publicKey).catch((e) => { + throw new Error(String(e)); + }); + + const pub = btoa(ab2str(pubRaw)); + + return { accountId, pub }; +} + +/** + * Create new account (secured private key) under session + * secured with the given password + * + * @param sessionId + * @param password + * @returns + */ +export async function createNewAccount(sessionId: string, password: string) { + const { privateKey, publicKey } = await createPair(); + + const protectedPrivKey = await protectWithPassword( + privateKey, + sessionId, + password, + ); + + // const privRaw = await crypto.subtle + // .exportKey("pkcs8", privateKey) + // .catch((e) => { + // throw new Error(String(e)); + // }); + + const pubRaw = await crypto.subtle.exportKey("spki", publicKey).catch((e) => { + throw new Error(String(e)); + }); + + const pub = btoa(ab2str(pubRaw)); + const protectedPriv = btoa(ab2str(protectedPrivKey)); + + return { accountId: protectedPriv, pub }; +} + +const rsaAlgorithm: RsaHashedKeyGenParams = { + name: "RSA-OAEP", + modulusLength: 2048, + publicExponent: new Uint8Array([0x01, 0x00, 0x01]), + hash: "SHA-256", +}; + +async function createPair(): Promise { + const key = await crypto.subtle + .generateKey(rsaAlgorithm, true, ["encrypt", "decrypt"]) + .catch((e) => { + throw new Error(String(e)); + }); + return key; +} + +const textEncoder = new TextEncoder(); + +async function protectWithPassword( + privateKey: CryptoKey, + sessionId: string, + password: string, +): Promise { + const { salt, initVector: iv } = getCryptoPArameters(sessionId); + const passwordAsKey = await crypto.subtle + .importKey("raw", textEncoder.encode(password), { name: "PBKDF2" }, false, [ + "deriveBits", + "deriveKey", + ]) + .catch((e) => { + throw new Error(String(e)); + }); + const wrappingKey = await crypto.subtle + .deriveKey( + { + name: "PBKDF2", + salt, + iterations: 100000, + hash: "SHA-256", + }, + passwordAsKey, + { name: "AES-GCM", length: 256 }, + true, + ["wrapKey", "unwrapKey"], + ) + .catch((e) => { + throw new Error(String(e)); + }); + + const protectedPrivKey = await crypto.subtle + .wrapKey("pkcs8", privateKey, wrappingKey, { + name: "AES-GCM", + iv, + }) + .catch((e) => { + throw new Error(String(e)); + }); + return protectedPrivKey; +} + +async function recoverWithPassword( + value: ArrayBuffer, + sessionId: string, + password: string, +): Promise { + const { salt, initVector: iv } = getCryptoPArameters(sessionId); + + const master = await crypto.subtle + .importKey("raw", textEncoder.encode(password), { name: "PBKDF2" }, false, [ + "deriveBits", + "deriveKey", + ]) + .catch((e) => { + throw new UnwrapKeyError("starting", String(e)); + }); + + const unwrappingKey = await crypto.subtle + .deriveKey( + { + name: "PBKDF2", + salt, + iterations: 100000, + hash: "SHA-256", + }, + master, + { name: "AES-GCM", length: 256 }, + true, + ["wrapKey", "unwrapKey"], + ) + .catch((e) => { + throw new UnwrapKeyError("deriving", String(e)); + }); + + const privKey = await crypto.subtle + .unwrapKey( + "pkcs8", + value, + unwrappingKey, + { + name: "AES-GCM", + iv, + }, + rsaAlgorithm, + true, + ["decrypt"], + ) + .catch((e) => { + throw new UnwrapKeyError("unwrapping", String(e)); + }); + return privKey; +} + +type Steps = "starting" | "deriving" | "unwrapping"; +export class UnwrapKeyError extends Error { + public step: Steps; + public cause: string; + constructor(step: Steps, cause: string) { + super(`Recovering private key failed on "${step}": ${cause}`); + this.step = step; + this.cause = cause; + } +} + +/** + * Looks like there is no easy way to do it with the Web Crypto API + */ +async function getPublicFromPrivate(key: CryptoKey): Promise { + const jwk = await crypto.subtle.exportKey("jwk", key).catch((e) => { + throw new Error(String(e)); + }); + + delete jwk.d; + delete jwk.dp; + delete jwk.dq; + delete jwk.q; + delete jwk.qi; + jwk.key_ops = ["encrypt"]; + + return crypto.subtle + .importKey("jwk", jwk, rsaAlgorithm, true, ["encrypt"]) + .catch((e) => { + throw new Error(String(e)); + }); +} + +function ab2str(buf: ArrayBuffer) { + return String.fromCharCode.apply(null, Array.from(new Uint8Array(buf))); +} +function str2ab(str: string) { + const buf = new ArrayBuffer(str.length); + const bufView = new Uint8Array(buf); + for (let i = 0, strLen = str.length; i < strLen; i++) { + bufView[i] = str.charCodeAt(i); + } + return buf; +} + +function getCryptoPArameters(sessionId: string): { + salt: Uint8Array; + initVector: Uint8Array; +} { + const [saltId, vectorId] = sessionId.split("-"); + return { + salt: decodeCrock(saltId), + initVector: decodeCrock(vectorId), + }; +} diff --git a/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx index d8877333c..87c4c43fb 100644 --- a/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx +++ b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx @@ -41,10 +41,12 @@ export function FormProvider({ children, initialValue, onUpdate, + onSubmit, computeFormState, }: { initialValue?: Partial; onUpdate?: (v: Partial) => void; + onSubmit: (v: T) => void; computeFormState?: (v: T) => FormState; children: ComponentChildren; }): VNode { @@ -58,7 +60,15 @@ export function FormProvider({ -
{children}
+
{ + e.preventDefault(); + //@ts-ignore + onSubmit(value.current); + }} + > + {children} +
); } diff --git a/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx b/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx index 255654949..32b16313d 100644 --- a/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx +++ b/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx @@ -23,7 +23,7 @@ interface StringConverter { } export interface UIFormProps { - name: string; + name: keyof T; label: TranslatedString; placeholder?: TranslatedString; tooltip?: TranslatedString; @@ -181,7 +181,11 @@ function defaultFromString(v: string) { return v; } -export function InputLine(props: { type: string } & UIFormProps): VNode { +type InputType = "text" | "text-area" | "password" | "email"; + +export function InputLine( + props: { type: InputType } & UIFormProps, +): VNode { const { name, placeholder, before, after, converter, type } = props; const { value, onChange, state, isDirty } = useField(name); diff --git a/packages/exchange-backoffice-ui/src/handlers/InputText.tsx b/packages/exchange-backoffice-ui/src/handlers/InputText.tsx index 107d87860..014730d92 100644 --- a/packages/exchange-backoffice-ui/src/handlers/InputText.tsx +++ b/packages/exchange-backoffice-ui/src/handlers/InputText.tsx @@ -1,6 +1,6 @@ import { VNode, h } from "preact"; import { InputLine, UIFormProps } from "./InputLine.js"; -export function InputText(props: UIFormProps): VNode { +export function InputText(props: UIFormProps): VNode { return ; } diff --git a/packages/exchange-backoffice-ui/src/handlers/forms.ts b/packages/exchange-backoffice-ui/src/handlers/forms.ts index 1d6a7daa4..a97b8561d 100644 --- a/packages/exchange-backoffice-ui/src/handlers/forms.ts +++ b/packages/exchange-backoffice-ui/src/handlers/forms.ts @@ -11,6 +11,8 @@ import { InputFile } from "./InputFile.js"; import { Caption } from "./Caption.js"; import { Group } from "./Group.js"; import { InputSelectOne } from "./InputSelectOne.js"; +import { FormProvider } from "./FormProvider.js"; +import { InputLine } from "./InputLine.js"; export type DoubleColumnForm = DoubleColumnFormSection[]; @@ -94,3 +96,14 @@ export function RenderAllFieldsByUiConfig({ }), ); } + +type FormSet = { + Provider: typeof FormProvider; + InputLine: typeof InputLine; +}; +export function createNewForm(): FormSet { + return { + Provider: FormProvider, + InputLine: InputLine, + }; +} diff --git a/packages/exchange-backoffice-ui/src/pages/Officer.tsx b/packages/exchange-backoffice-ui/src/pages/Officer.tsx index c72ca0720..4d8b90228 100644 --- a/packages/exchange-backoffice-ui/src/pages/Officer.tsx +++ b/packages/exchange-backoffice-ui/src/pages/Officer.tsx @@ -1,116 +1,265 @@ -import { useLocalStorage } from "@gnu-taler/web-util/browser"; -import { h } from "preact"; +import { TranslatedString } from "@gnu-taler/taler-util"; +import { + notifyError, + notifyInfo, + useLocalStorage, + useMemoryStorage, +} from "@gnu-taler/web-util/browser"; +import { VNode, h } from "preact"; import { useEffect, useState } from "preact/hooks"; +import { + UnwrapKeyError, + createNewAccount, + createNewSessionId, + unlockAccount, +} from "../account.js"; +import { createNewForm } from "../handlers/forms.js"; -const oldKey = - "MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDPQVq8F0Ce6kTXKQ5Ea2fZRoap6poFYs0FOln8o8+ehGI8rDdMBzNU3pLIlOMKs/vKvhDNMG4m4xxb92wDbvefDxkxaEkbRSZnRiJd4MIbh8Lx8zvFbLp03rkXu9KPN8IprKOXxgN7xbxm0KKcu03rtqLiOvC1gMqja2LMIPCi32nyNneduszHZ57d+CqIKZdVnaqAcXOSMAQsVoEq2joBOeIaSAnIJHg+T8HQ+VcLV8Y722jhX/bH84IyEMup9e7mhgVFnHgINc77c6TONH8H+dHlXCQ+hMPGw9wM+wgpJgIDzrhIN+QSjn283EOXD6z6dpiWBdEYfJRLHwEWk8wNAgMBAAECggEAB/anZrMasQsoXP9qBG1Uvq+r4fXZODFtK5vBNGi+RAWAhCX2iU3SMPB3wbby0wj1DlESR91qBhrTjqG+/TzIzUxLuARyoVZysiTVkjeIzdJVcRgwU5bTbUUs5da6MaA/WNGWMZvoALFUMBEpMQ4uDCC8OSbG8/prDtoZSuWjHrxBhsqSyIoJ3Q0iPQxPT0ShC9d5T56QuhsRQeRIWhQVtFlytXl1lqEbqljhIEOzkvS5QOcXcS3OBo/Nvdit+vi9kkLuiP8z2p6WAiVZCgCXfffNH3EEbQG/BEpIOynkchiDy1L31mFRFk1oYJRs9xD8+oF/N75GhlmYO7IbxeHw0wKBgQDnYZWjGlRM2oHpeiPSII5m9rC7qohO0ImxqifYZPp47vdRMbBWrdbxX68SqdzGfSzXcDPLfBAObG4QR8Xol1LMNJUT9og9pERZHgob+yWkTd68lLSdxfCJEKRJaDmD8dHgSrBYe86ADUeAj+fC4dycYXH//fwed1gt/G8iXtdU9wKBgQDlTp9752+tEh9fMlUdINbZXmGbjHBrZMTnAYJI509iJLIvJvYroU5TvRMsp+rACDc2Zy2nbsaCM5Xzd5wUxRBvF+PiBCFoi7c/EBaLCtb9+vyXtHAIHtzHeYUP/1cq7MOdTwrWvZqzIoW6xm7L9HRX/5i+n+rVUSxnzYIxgTlaGwKBgQC0INgpXbn7CrDQXnG8h/PUXIBB2QS8tsQ7N8hFQndr5j1LTG+HS1ZmGqNk2DAzpgdewM7RvweQ8wDMU9PSutuOdfEI1YhC1LsQ1b3xApfPTX/1N59UpGAZlIcRTr5X5c4J2ptmhxu/vJbJkz5ODR997q6dJ9E6tpZDVp3+F+9zCQKBgQCrp+OzuVjcUoixltgoagDrz7951fQCMPlFhNenA6FlctsAeUYm+yXLgersrvcIsh3C2BJRGJf5t+w0ygFJewwGXff1pensfUq8Jqr5gy/WCSE135lOOuxDVzDI/Pif5YW6KQWQI3e/ScSaQRmIDINbrLcHXGdLMOzw9+LSdE4eqQKBgQDe86MfzwMLPoDH07WC09dCcoIUSYMThYrFwUK3qgEiYaJMZJvdAIwr12szVwVRYIX4wHBObFsQZLTaY5+O/REnze6Q1AQa2H6eH1TalC1r6jBS5/LhIrVWl/0VSdsUIe41tc8xPDWrm9hmLeJLZk+xb5/hAm3REsDM1Iif9O7zzg=="; export function Officer() { - const storage = useLocalStorage("officer"); - const [keys, setKeys] = useState({ priv: "", pub: "" }); + const password = useMemoryStorage("password"); + const session = useLocalStorage("session"); + const officer = useLocalStorage("officer"); + const [keys, setKeys] = useState({ accountId: "", pub: "" }); + useEffect(() => { - loadPreviousSession(oldKey).then((keys) => - setKeys(keys ?? { priv: "", pub: "" }), - ); - // generateNewId().then((keys) => setKeys(keys)); + if ( + officer.value === undefined || + session.value === undefined || + password.value === undefined + ) { + return; + } + unlockAccount(session.value, officer.value, password.value) + .then((keys) => setKeys(keys ?? { accountId: "", pub: "" })) + .catch((e) => { + if (e instanceof UnwrapKeyError) { + console.log(e); + } + }); + }, [officer.value, session.value, password.value]); + + useEffect(() => { + if (!session.value) { + session.update(createNewSessionId()); + } }, []); - console.log(keys.pub); - console.log(keys.priv); + const { value: sessionId } = session; + if (!sessionId) { + return
loading...
; + } + + if (officer.value === undefined) { + return ( + { + password.reset(); + officer.update(id); + }} + /> + ); + } + + console.log("pwd", password.value); + if (password.value === undefined) { + return ( + { + password.update(pwd); + }} + /> + ); + } + return (
Officer
+

{sessionId}

Public key

- -----BEGIN PUBLIC KEY----- -

{keys.pub}

- -----END PUBLIC KEY----- +

+ -----BEGIN PUBLIC KEY----- +

{keys.pub}
+ -----END PUBLIC KEY----- +

Private key

- -----BEGIN PRIVATE KEY----- -

{keys.priv}

- -----END PRIVATE KEY----- +

+ -----BEGIN PRIVATE KEY----- +

{keys.accountId}
+ -----END PRIVATE KEY----- +

); } -const rsaAlgorithm: RsaHashedKeyGenParams = { - name: "RSA-OAEP", - modulusLength: 2048, - publicExponent: new Uint8Array([0x01, 0x00, 0x01]), - hash: "SHA-256", -}; - -async function generateNewId() { - const key = await crypto.subtle.generateKey(rsaAlgorithm, true, [ - "encrypt", - "decrypt", - ]); - - if (key instanceof CryptoKey) { - throw Error("unexpected key without pair"); - } - const { privateKey, publicKey } = key; - const privRaw = await crypto.subtle.exportKey("pkcs8", privateKey); - - const pubRaw = await crypto.subtle.exportKey("spki", publicKey); +function CreateAccount({ + sessionId, + onNewAccount, +}: { + sessionId: string; + onNewAccount: (accountId: string) => void; +}): VNode { + const Form = createNewForm<{ + email: string; + password: string; + }>(); - const priv = btoa(ab2str(privRaw)); - - const pub = btoa(ab2str(pubRaw)); - return { priv, pub }; -} + return ( +
+
+

+ Create account +

+
-async function loadPreviousSession(priv: string) { - const key = str2ab(window.atob(priv)); - const privateKey = await window.crypto.subtle - .importKey("pkcs8", key, rsaAlgorithm, true, ["decrypt"]) - .catch(throwErrorWithStack); +
+
+ { + const keys = await createNewAccount(sessionId, v.password); + onNewAccount(keys.accountId); + }} + > +
+ +
- if (!privateKey) return undefined; +
+ +
- // export private key to JWK - const jwk = await crypto.subtle - .exportKey("jwk", privateKey) - .catch(throwErrorWithStack); +
+ +
+ +
+
+
+ ); +} - // remove private data from JWK - delete jwk.d; - delete jwk.dp; - delete jwk.dq; - delete jwk.q; - delete jwk.qi; - jwk.key_ops = ["encrypt"]; +function UnlockAccount({ + sessionId, + accountId, + onAccountUnlocked, +}: { + sessionId: string; + accountId: string; + onAccountUnlocked: (password: string) => void; +}): VNode { + const Form = createNewForm<{ + sessionId: string; + accountId: string; + password: string; + }>(); - const publicKey = await crypto.subtle - .importKey("jwk", jwk, rsaAlgorithm, true, ["encrypt"]) - .catch(throwErrorWithStack); + return ( +
+
+

+ Unlock account +

+
- const pubRaw = await crypto.subtle - .exportKey("spki", publicKey) - .catch(throwErrorWithStack); +
+
+ { + return { + accountId: { + disabled: true, + }, + sessionId: { + disabled: true, + }, + }; + }} + onSubmit={async (v) => { + try { + // test login + await unlockAccount(sessionId, accountId, v.password); - const pub = btoa(ab2str(pubRaw)); + onAccountUnlocked(v.password ?? ""); + notifyInfo("Account unlocked" as TranslatedString); + } catch (e) { + if (e instanceof UnwrapKeyError) { + notifyError( + "Could not unlock account" as any, + e.message as any, + ); + } else { + throw e; + } + } + }} + > +
+ +
+
+ +
- return { priv, pub }; -} +
+ +
-function ab2str(buf: ArrayBuffer) { - return String.fromCharCode.apply(null, Array.from(new Uint8Array(buf))); -} -function str2ab(str: string) { - const buf = new ArrayBuffer(str.length); - const bufView = new Uint8Array(buf); - for (let i = 0, strLen = str.length; i < strLen; i++) { - bufView[i] = str.charCodeAt(i); - } - return buf; -} -function throwErrorWithStack(e: Error): never { - throw new Error(e.message); +
+ +
+ +
+
+
+ ); } -- cgit v1.2.3