1 files changed, 82 insertions, 0 deletions
diff --git a/packages/challenger-ui/src/pages/Setup.tsx b/packages/challenger-ui/src/pages/Setup.tsx
new file mode 100644
index 000000000..f431835aa
--- /dev/null
+++ b/packages/challenger-ui/src/pages/Setup.tsx
@@ -0,0 +1,82 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { AccessToken, HttpStatusCode, encodeCrock, randomBytes } from "@gnu-taler/taler-util";
+import {
+  Button,
+  LocalNotificationBanner,
+  useChallengerApiContext,
+  useLocalNotificationHandler,
+  useTranslationContext,
+} from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
+import { useSessionState } from "../hooks/session.js";
+
+type Props = {
+  clientId: string;
+  onCreated: (nonce:string) => void;
+};
+export function Setup({ clientId, onCreated }: Props): VNode {
+  const { i18n } = useTranslationContext();
+  const [notification, withErrorHandler] = useLocalNotificationHandler();
+  const { lib } = useChallengerApiContext();
+  const { start } = useSessionState();
+
+  const onStart = withErrorHandler(
+    async () => {
+      return lib.challenger.setup(clientId, "secret-token:chal-secret" as AccessToken);
+    },
+    (ok) => {
+      start({
+        clientId,
+        redirectURL: "http://exchange.taler.test:1180/kyc-proof/kyc-provider-wallet",
+        state: encodeCrock(randomBytes(32)),
+      });
+
+      onCreated(ok.body.nonce);
+    },
+    (fail) => {
+      switch (fail.case) {
+        case HttpStatusCode.NotFound:
+          return i18n.str`Client doesn't exist.`;
+      }
+    },
+  );
+
+  return (
+    <Fragment>
+      <LocalNotificationBanner notification={notification} />
+
+      <div class="isolate bg-white px-6 py-12">
+        <div class="mx-auto max-w-2xl text-center">
+          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            <i18n.Translate>
+              Setup new challenge with client ID: &quot;{clientId}&quot;
+            </i18n.Translate>
+          </h2>
+        </div>
+          <div class="mt-10">
+            <Button
+              type="submit"
+              class="block w-full disabled:bg-gray-300 rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              handler={onStart}
+            >
+              <i18n.Translate>Start</i18n.Translate>
+            </Button>
+          </div>
+      </div>
+    </Fragment>
+  );
+}