+
+ );
+}
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
+ {/* */}
+ {ns.map(({ message, remove }) => {
+ switch (message.type) {
+ case "error": {
+ return (
+
+
+
+ );
+ }
+ case "info": {
+ return (
+
+
+
+
+
+
+
+
+ + {message.title} +
+ {message.description && ( ++ {message.description} +
+ )} +
+
+
+
+
+ );
+ }
+ }
+ })}
+
+
+
+
+
+
+
+
+ + {message.title} +
+
+
+
+
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({
-
+
);
}
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 = {
+ 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 {
+ password.reset();
+ officer.update(id);
+ }}
+ />
+ );
+ }
+
+ console.log("pwd", password.value);
+ if (password.value === undefined) {
+ return (
+ {
+ password.update(pwd);
+ }}
+ />
+ );
+ }
+
return (
);
}
-const rsaAlgorithm: RsaHashedKeyGenParams = {
- name: "RSA-OAEP",
- modulusLength: 2048,
- publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
- hash: "SHA-256",
-};
+function CreateAccount({
+ sessionId,
+ onNewAccount,
+}: {
+ sessionId: string;
+ onNewAccount: (accountId: string) => void;
+}): VNode {
+ const Form = createNewForm<{
+ email: string;
+ password: string;
+ }>();
-async function generateNewId() {
- const key = await crypto.subtle.generateKey(rsaAlgorithm, true, [
- "encrypt",
- "decrypt",
- ]);
+ return (
+
loading...
;
+ }
+
+ if (officer.value === undefined) {
+ 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-----
+
+
+ );
}
-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);
+function UnlockAccount({
+ sessionId,
+ accountId,
+ onAccountUnlocked,
+}: {
+ sessionId: string;
+ accountId: string;
+ onAccountUnlocked: (password: string) => void;
+}): VNode {
+ const Form = createNewForm<{
+ sessionId: string;
+ accountId: string;
+ password: string;
+ }>();
- if (!privateKey) return undefined;
+ return (
+
+
- if (key instanceof CryptoKey) {
- throw Error("unexpected key without pair");
- }
- const { privateKey, publicKey } = key;
- const privRaw = await crypto.subtle.exportKey("pkcs8", privateKey);
+ + Create account +
+
+
+
+ {
+ const keys = await createNewAccount(sessionId, v.password);
+ onNewAccount(keys.accountId);
+ }}
+ >
+
+
+
+
- const pubRaw = await crypto.subtle.exportKey("spki", publicKey);
+
+
- const priv = btoa(ab2str(privRaw));
-
- const pub = btoa(ab2str(pubRaw));
- return { priv, pub };
+
+
+
+
+
+ );
}
+
- // export private key to JWK
- const jwk = await crypto.subtle
- .exportKey("jwk", privateKey)
- .catch(throwErrorWithStack);
+ + Unlock account +
+
+
+
+ {
+ return {
+ accountId: {
+ disabled: true,
+ },
+ sessionId: {
+ disabled: true,
+ },
+ };
+ }}
+ onSubmit={async (v) => {
+ try {
+ // test login
+ await unlockAccount(sessionId, accountId, v.password);
- // remove private data from JWK
- delete jwk.d;
- delete jwk.dp;
- delete jwk.dq;
- delete jwk.q;
- delete jwk.qi;
- jwk.key_ops = ["encrypt"];
+ 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;
+ }
+ }
+ }}
+ >
+
+
+
+
+
+
- const publicKey = await crypto.subtle
- .importKey("jwk", jwk, rsaAlgorithm, true, ["encrypt"])
- .catch(throwErrorWithStack);
+
+
- const pubRaw = await crypto.subtle
- .exportKey("spki", publicKey)
- .catch(throwErrorWithStack);
-
- const pub = btoa(ab2str(pubRaw));
-
- 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);
+
+
+
+