towards new core bank api

1 files changed, 27 insertions, 20 deletions

diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx
index f972e0380..8221457bf 100644
--- a/packages/demobank-ui/src/pages/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx
@@ -53,6 +53,7 @@ export const USERNAME_REGEX = /^[a-z][a-zA-Z0-9-]*$/;
 function RegistrationForm({ onComplete }: { onComplete: () => void }): VNode {
   const backend = useBackendContext();
   const [username, setUsername] = useState<string | undefined>();
+  const [name, setName] = useState<string | undefined>();
   const [password, setPassword] = useState<string | undefined>();
   const [repeatPassword, setRepeatPassword] = useState<string | undefined>();
 
@@ -60,6 +61,9 @@ function RegistrationForm({ onComplete }: { onComplete: () => void }): VNode {
   const { i18n } = useTranslationContext();
 
   const errors = undefinedIfEmpty({
+    name: !name
+      ? i18n.str`Missing name`
+      : undefined,
     username: !username
       ? i18n.str`Missing username`
       : !USERNAME_REGEX.test(username)
@@ -74,9 +78,9 @@ function RegistrationForm({ onComplete }: { onComplete: () => void }): VNode {
   });
 
   async function doRegistrationStep() {
-    if (!username || !password) return;
+    if (!username || !password || !name) return;
     try {
-      await register({ username, password });
+      await register({ name, username, password });
       setUsername(undefined);
       backend.logIn({ username, password });
       onComplete();
@@ -97,13 +101,13 @@ function RegistrationForm({ onComplete }: { onComplete: () => void }): VNode {
             ? error.message
             : JSON.stringify(error)) as TranslatedString
         )
-}
+      }
     }
     setPassword(undefined);
     setRepeatPassword(undefined);
-}
+  }
 
-  async function delay(ms: number):Promise<void> {
+  async function delay(ms: number): Promise<void> {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(undefined);
@@ -117,14 +121,15 @@ function RegistrationForm({ onComplete }: { onComplete: () => void }): VNode {
       setUsername(undefined);
       setPassword(undefined);
       setRepeatPassword(undefined);
-      await register({ username: user, password: pass });
-      backend.logIn({ username: user, password: pass });
+      const username = `_${user.first}-${user.second}_`
+      await register({ username, name: `${user.first} ${user.second}`, password: pass });
+      backend.logIn({ username, password: pass });
       onComplete();
     } catch (error) {
       if (error instanceof RequestError) {
         if (tries > 0) {
           await delay(200)
-          await doRandomRegistration(tries-1)
+          await doRandomRegistration(tries - 1)
         } else {
           notify(
             buildRequestErrorMessage(i18n, error.cause, {
@@ -142,7 +147,7 @@ function RegistrationForm({ onComplete }: { onComplete: () => void }): VNode {
             ? error.message
             : JSON.stringify(error)) as TranslatedString
         )
-}
+      }
     }
   }
 
@@ -257,17 +262,19 @@ function RegistrationForm({ onComplete }: { onComplete: () => void }): VNode {
 
           </form>
 
-          <p class="mt-10 text-center text-sm text-gray-500 border-t">
-            <button type="submit"
-              class="flex mt-4 w-full justify-center rounded-md bg-green-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
-              onClick={(e) => {
-                e.preventDefault()
-                doRandomRegistration()
-              }}
-            >
-              <i18n.Translate>Create a random user</i18n.Translate>
-            </button>
-          </p>
+          {bankUiSettings.allowRandomAccountCreation &&
+            <p class="mt-10 text-center text-sm text-gray-500 border-t">
+              <button type="submit"
+                class="flex mt-4 w-full justify-center rounded-md bg-green-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+                onClick={(e) => {
+                  e.preventDefault()
+                  doRandomRegistration()
+                }}
+              >
+                <i18n.Translate>Create a random user</i18n.Translate>
+              </button>
+            </p>
+          }
         </div>
       </div>