some ui fixes

1 files changed, 63 insertions, 100 deletions

diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx
index fda2d904d..ce38a9fb8 100644
--- a/packages/demobank-ui/src/pages/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx
@@ -24,7 +24,7 @@ import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { useBackendContext } from "../context/backend.js";
 import { bankUiSettings } from "../settings.js";
-import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
+import { buildRequestErrorMessage, undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
 import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
 import { getRandomPassword, getRandomUsername } from "./rnd.js";
 import { useBankCoreApiContext } from "../context/config.js";
@@ -95,118 +95,80 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
   });
 
   async function doRegistrationAndLogin(name: string | undefined, username: string, password: string) {
-    const creationResponse = await api.createAccount("" as AccessToken, { name: name ?? "", username, password });
-    if (creationResponse.type === "fail") {
-      switch (creationResponse.case) {
-        case "invalid-input": return notify({
-          type: "error",
-          title: i18n.str`Some of the input fields are invalid.`,
-          description: creationResponse.detail.hint as TranslatedString,
-          debug: creationResponse.detail,
-        })
-        case "unable-to-create": return notify({
-          type: "error",
-          title: i18n.str`Unable to create that account.`,
-          description: creationResponse.detail.hint as TranslatedString,
-          debug: creationResponse.detail,
-        })
-        case "unauthorized": return notify({
-          type: "error",
-          title: i18n.str`No enough permission to create that account.`,
-          description: creationResponse.detail.hint as TranslatedString,
-          debug: creationResponse.detail,
-        })
-        case "already-exist": return notify({
-          type: "error",
-          title: i18n.str`That username is already taken`,
-          description: creationResponse.detail.hint as TranslatedString,
-          debug: creationResponse.detail,
-        })
-        default: assertUnreachable(creationResponse)
+    await withRuntimeErrorHandling(i18n, async () => {
+      const creationResponse = await api.createAccount("" as AccessToken, { name: name ?? "", username, password });
+      if (creationResponse.type === "fail") {
+        switch (creationResponse.case) {
+          case "invalid-input": return notify({
+            type: "error",
+            title: i18n.str`Some of the input fields are invalid.`,
+            description: creationResponse.detail.hint as TranslatedString,
+            debug: creationResponse.detail,
+          })
+          case "unable-to-create": return notify({
+            type: "error",
+            title: i18n.str`Unable to create that account.`,
+            description: creationResponse.detail.hint as TranslatedString,
+            debug: creationResponse.detail,
+          })
+          case "unauthorized": return notify({
+            type: "error",
+            title: i18n.str`No enough permission to create that account.`,
+            description: creationResponse.detail.hint as TranslatedString,
+            debug: creationResponse.detail,
+          })
+          case "already-exist": return notify({
+            type: "error",
+            title: i18n.str`That username is already taken`,
+            description: creationResponse.detail.hint as TranslatedString,
+            debug: creationResponse.detail,
+          })
+          default: assertUnreachable(creationResponse)
+        }
       }
-    }
-    const resp = await api.getAuthenticationAPI(username).createAccessToken(password, {
-      // scope: "readwrite" as "write", //FIX: different than merchant
-      scope: "readwrite",
-      duration: {
-        d_us: "forever" //FIX: should return shortest
-        // d_us: 60 * 60 * 24 * 7 * 1000 * 1000
-      },
-      refreshable: true,
-    })
+      const resp = await api.getAuthenticationAPI(username).createAccessToken(password, {
+        scope: "readwrite",
+        duration: { d_us: "forever" },
+        refreshable: true,
+      })
 
-    if (resp.type === "ok") {
-      backend.logIn({ username, token: resp.body.access_token });
-    } else {
-      switch (resp.case) {
-        case "wrong-credentials": return notify({
-          type: "error",
-          title: i18n.str`Wrong credentials for "${username}"`,
-          description: resp.detail.hint as TranslatedString,
-          debug: resp.detail,
-        })
-        case "not-found": return notify({
-          type: "error",
-          title: i18n.str`Account not found`,
-          description: resp.detail.hint as TranslatedString,
-          debug: resp.detail,
-        })
-        default: assertUnreachable(resp)
+      if (resp.type === "ok") {
+        backend.logIn({ username, token: resp.body.access_token });
+      } else {
+        switch (resp.case) {
+          case "wrong-credentials": return notify({
+            type: "error",
+            title: i18n.str`Wrong credentials for "${username}"`,
+            description: resp.detail.hint as TranslatedString,
+            debug: resp.detail,
+          })
+          case "not-found": return notify({
+            type: "error",
+            title: i18n.str`Account not found`,
+            description: resp.detail.hint as TranslatedString,
+            debug: resp.detail,
+          })
+          default: assertUnreachable(resp)
+        }
       }
-    }
+    })
   }
 
   async function doRegistrationStep() {
     if (!username || !password) return;
-    try {
-      await doRegistrationAndLogin(name, username, password)
-      setUsername(undefined);
-      onComplete();
-    } catch (error) {
-      if (error instanceof TalerError) {
-        notify(buildRequestErrorMessage(i18n, error))
-      } else {
-        notifyError(
-          i18n.str`Operation failed, please report`,
-          (error instanceof Error
-            ? error.message
-            : JSON.stringify(error)) as TranslatedString
-        )
-      }
-    }
+    await doRegistrationAndLogin(name, username, password)
+    setUsername(undefined);
     setPassword(undefined);
     setRepeatPassword(undefined);
+    onComplete();
   }
 
-  async function delay(ms: number): Promise<void> {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(undefined);
-      }, ms)
-    })
-  }
   async function doRandomRegistration(tries: number = 3) {
     const user = getRandomUsername();
     const pass = getRandomPassword();
-    try {
-      setUsername(undefined);
-      setPassword(undefined);
-      setRepeatPassword(undefined);
-      const username = `_${user.first}-${user.second}_`
-      await doRegistrationAndLogin(name, username, pass)
-      onComplete();
-    } catch (error) {
-      if (error instanceof TalerError) {
-        notify(buildRequestErrorMessage(i18n, error))
-      } else {
-        notifyError(
-          i18n.str`Operation failed, please report`,
-          (error instanceof Error
-            ? error.message
-            : JSON.stringify(error)) as TranslatedString
-        )
-      }
-    }
+    const username = `_${user.first}-${user.second}_`
+    await doRegistrationAndLogin(name, username, pass)
+    onComplete();
   }
 
   return (
@@ -403,8 +365,9 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
               <button type="submit"
                 class=" rounded-md bg-indigo-600 disabled:bg-gray-300 px-3 py-1.5 text-sm font-semibold leading-6 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"
                 disabled={!!errors}
-                onClick={(e) => {
+                onClick={async (e) => {
                   e.preventDefault()
+
                   doRegistrationStep()
                 }}
               >