fix: username regex and error message word-break

4 files changed, 67 insertions, 53 deletions

diff --git a/packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx
index bfb2f2fef..6abcebcd8 100644
--- a/packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx
@@ -118,30 +118,32 @@ export function PaytoWireTransferForm({
             />
             <br />
             <label for="amount">{i18n.str`Amount:`}</label>&nbsp;
-            <input
-              type="text"
-              readonly
-              class="currency-indicator"
-              size={currency?.length}
-              maxLength={currency?.length}
-              tabIndex={-1}
-              value={currency}
-            />
-            &nbsp;
-            <input
-              type="number"
-              name="amount"
-              id="amount"
-              placeholder="amount"
-              required
-              value={submitData?.amount ?? ""}
-              onInput={(e): void => {
-                submitDataSetter((submitData) => ({
-                  ...submitData,
-                  amount: e.currentTarget.value,
-                }));
-              }}
-            />
+            <div style={{ width: "max-content" }}>
+              <input
+                type="text"
+                readonly
+                class="currency-indicator"
+                size={currency?.length}
+                maxLength={currency?.length}
+                tabIndex={-1}
+                value={currency}
+              />
+              &nbsp;
+              <input
+                type="number"
+                name="amount"
+                id="amount"
+                placeholder="amount"
+                required
+                value={submitData?.amount ?? ""}
+                onInput={(e): void => {
+                  submitDataSetter((submitData) => ({
+                    ...submitData,
+                    amount: e.currentTarget.value,
+                  }));
+                }}
+              />
+            </div>
             <ShowInputErrorLabel
               message={errorsWire?.amount}
               isDirty={submitData?.amount !== undefined}
diff --git a/packages/demobank-ui/src/pages/home/RegistrationPage.tsx b/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
index c91eef7a0..ecec5793c 100644
--- a/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
@@ -44,6 +44,8 @@ export function RegistrationPage(): VNode {
   );
 }
 
+const usernameRegex = /^[a-z][a-zA-Z0-9]+$/;
+
 /**
  * Collect and submit registration data.
  */
@@ -57,8 +59,16 @@ function RegistrationForm(): VNode {
   const { i18n } = useTranslationContext();
 
   const errors = undefinedIfEmpty({
-    username: !username ? i18n.str`Missing username` : undefined,
-    password: !password ? i18n.str`Missing password` : undefined,
+    username: !username
+      ? i18n.str`Missing username`
+      : !usernameRegex.test(username)
+      ? i18n.str`Use only letter and numbers starting with a lower case letter`
+      : undefined,
+    password: !password
+      ? i18n.str`Missing password`
+      : !usernameRegex.test(password)
+      ? i18n.str`Use only letter and numbers starting with a lower case letter`
+      : undefined,
     repeatPassword: !repeatPassword
       ? i18n.str`Missing password`
       : repeatPassword !== password
diff --git a/packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx
index 29fc1eb6a..bc3880ee2 100644
--- a/packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx
@@ -46,29 +46,31 @@ export function WalletWithdrawForm({
       <p>
         <label for="withdraw-amount">{i18n.str`Amount to withdraw:`}</label>
         &nbsp;
-        <input
-          type="text"
-          readonly
-          class="currency-indicator"
-          size={currency?.length ?? 5}
-          maxLength={currency?.length}
-          tabIndex={-1}
-          value={currency}
-        />
-        &nbsp;
-        <input
-          type="number"
-          ref={ref}
-          id="withdraw-amount"
-          name="withdraw-amount"
-          value={submitAmount}
-          onChange={(e): void => {
-            // FIXME: validate using 'parseAmount()',
-            // deactivate submit button as long as
-            // amount is not valid
-            submitAmount = e.currentTarget.value;
-          }}
-        />
+        <div style={{ width: "max-content" }}>
+          <input
+            type="text"
+            readonly
+            class="currency-indicator"
+            size={currency?.length ?? 5}
+            maxLength={currency?.length}
+            tabIndex={-1}
+            value={currency}
+          />
+          &nbsp;
+          <input
+            type="number"
+            ref={ref}
+            id="withdraw-amount"
+            name="withdraw-amount"
+            value={submitAmount}
+            onChange={(e): void => {
+              // FIXME: validate using 'parseAmount()',
+              // deactivate submit button as long as
+              // amount is not valid
+              submitAmount = e.currentTarget.value;
+            }}
+          />
+        </div>
       </p>
       <p>
         <div>
diff --git a/packages/demobank-ui/src/scss/bank.scss b/packages/demobank-ui/src/scss/bank.scss
index dba2ee3d3..e8a4d664c 100644
--- a/packages/demobank-ui/src/scss/bank.scss
+++ b/packages/demobank-ui/src/scss/bank.scss
@@ -88,7 +88,7 @@ input[type="number"]::-webkit-inner-spin-button {
   display: none;
   padding: 8px 16px;
   border: 2px solid #c1c1c1;
-  width: max-content;
+  width: min-content;
 }
 
 .tabcontent.active {
@@ -168,7 +168,7 @@ input {
   margin-right: auto;
   padding: 16px 16px;
   border-radius: 8px;
-  width: max-content;
+  width: min-content;
   .formFieldLabel {
     margin: 2px 2px;
   }
@@ -210,7 +210,7 @@ input {
   margin-right: auto;
   padding: 16px 16px;
   border-radius: 8px;
-  width: max-content;
+  width: min-content;
   .formFieldLabel {
     margin: 2px 2px;
   }
@@ -244,7 +244,7 @@ input {
   margin-right: auto;
   padding: 16px 16px;
   border-radius: 8px;
-  width: max-content;
+  width: min-content;
   .formFieldLabel {
     margin: 2px 2px;
   }