1 files changed, 107 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx b/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx
new file mode 100644
index 000000000..90835d52b
--- /dev/null
+++ b/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx
@@ -0,0 +1,107 @@
+import { RequestError, notify, notifyError, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { VNode, h, Fragment } from "preact";
+import { useAdminAccountAPI } from "../../hooks/circuit.js";
+import { useState } from "preact/hooks";
+import { buildRequestErrorMessage } from "../../utils.js";
+import { HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util";
+import { getRandomPassword } from "../rnd.js";
+import { AccountForm } from "./AccountForm.js";
+
+export function CreateNewAccount({
+    onClose,
+    onCreateSuccess,
+}: {
+    onClose: () => void;
+    onCreateSuccess: (password: string) => void;
+}): VNode {
+    const { i18n } = useTranslationContext();
+    const { createAccount } = useAdminAccountAPI();
+    const [submitAccount, setSubmitAccount] = useState<
+        SandboxBackend.Circuit.CircuitAccountData | undefined
+    >();
+    return (
+        <div>
+            <div>
+                <h1 class="nav welcome-text">
+                    <i18n.Translate>New account</i18n.Translate>
+                </h1>
+            </div>
+
+            <div style={{ maxWidth: 600, overflowX: "hidden", margin: "auto" }}>
+                <AccountForm
+                    template={undefined}
+                    purpose="create"
+                    onChange={(a) => {
+                        setSubmitAccount(a);
+                    }}
+                />
+
+                <p>
+                    <div style={{ display: "flex", justifyContent: "space-between" }}>
+                        <div>
+                            <input
+                                class="pure-button"
+                                type="submit"
+                                value={i18n.str`Close`}
+                                onClick={async (e) => {
+                                    e.preventDefault();
+                                    onClose();
+                                }}
+                            />
+                        </div>
+                        <div>
+                            <input
+                                id="select-exchange"
+                                class="pure-button pure-button-primary content"
+                                disabled={!submitAccount}
+                                type="submit"
+                                value={i18n.str`Confirm`}
+                                onClick={async (e) => {
+                                    e.preventDefault();
+
+                                    if (!submitAccount) return;
+                                    try {
+                                        const account: SandboxBackend.Circuit.CircuitAccountRequest =
+                                        {
+                                            cashout_address: submitAccount.cashout_address,
+                                            contact_data: submitAccount.contact_data,
+                                            internal_iban: submitAccount.iban,
+                                            name: submitAccount.name,
+                                            username: submitAccount.username,
+                                            password: getRandomPassword(),
+                                        };
+
+                                        await createAccount(account);
+                                        onCreateSuccess(account.password);
+                                    } catch (error) {
+                                        if (error instanceof RequestError) {
+                                            notify(
+                                                buildRequestErrorMessage(i18n, error.cause, {
+                                                    onClientError: (status) =>
+                                                        status === HttpStatusCode.Forbidden
+                                                            ? i18n.str`The rights to perform the operation are not sufficient`
+                                                            : status === HttpStatusCode.BadRequest
+                                                                ? i18n.str`Input data was invalid`
+                                                                : status === HttpStatusCode.Conflict
+                                                                    ? i18n.str`At least one registration detail was not available`
+                                                                    : undefined,
+                                                }),
+                                            );
+                                        } else {
+                                            notifyError(
+                                                i18n.str`Operation failed, please report`,
+                                                (error instanceof Error
+                                                    ? error.message
+                                                    : JSON.stringify(error)) as TranslatedString
+                                            )
+                                        }
+                                    }
+                                }}
+                            />
+                        </div>
+                    </div>
+                </p>
+            </div>
+        </div>
+    );
+}