fix: username regex and error message word-break

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
+            <div style={{ width: "max-content" }}>
-              type="text"
+              <input
-              readonly
+                type="text"
-              class="currency-indicator"
+                readonly
-              size={currency?.length}
+                class="currency-indicator"
-              maxLength={currency?.length}
+                size={currency?.length}
-              tabIndex={-1}
+                maxLength={currency?.length}
-              value={currency}
+                tabIndex={-1}
-            />
+                value={currency}
-            &nbsp;
+              />
-            <input
+              &nbsp;
-              type="number"
+              <input
-              name="amount"
+                type="number"
-              id="amount"
+                name="amount"
-              placeholder="amount"
+                id="amount"
-              required
+                placeholder="amount"
-              value={submitData?.amount ?? ""}
+                required
-              onInput={(e): void => {
+                value={submitData?.amount ?? ""}
-                submitDataSetter((submitData) => ({
+                onInput={(e): void => {
-                  ...submitData,
+                  submitDataSetter((submitData) => ({
-                  amount: e.currentTarget.value,
+                    ...submitData,
-                }));
+                    amount: e.currentTarget.value,
-              }}
+                  }));
-            />
+                }}
+              />
+            </div>
             <ShowInputErrorLabel
               message={errorsWire?.amount}
               isDirty={submitData?.amount !== undefined}

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,
+    username: !username
-    password: !password ? i18n.str`Missing password` : undefined,
+      ? 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

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
+        <div style={{ width: "max-content" }}>
-          type="text"
+          <input
-          readonly
+            type="text"
-          class="currency-indicator"
+            readonly
-          size={currency?.length ?? 5}
+            class="currency-indicator"
-          maxLength={currency?.length}
+            size={currency?.length ?? 5}
-          tabIndex={-1}
+            maxLength={currency?.length}
-          value={currency}
+            tabIndex={-1}
-        />
+            value={currency}
-        &nbsp;
+          />
-        <input
+          &nbsp;
-          type="number"
+          <input
-          ref={ref}
+            type="number"
-          id="withdraw-amount"
+            ref={ref}
-          name="withdraw-amount"
+            id="withdraw-amount"
-          value={submitAmount}
+            name="withdraw-amount"
-          onChange={(e): void => {
+            value={submitAmount}
-            // FIXME: validate using 'parseAmount()',
+            onChange={(e): void => {
-            // deactivate submit button as long as
+              // FIXME: validate using 'parseAmount()',
-            // amount is not valid
+              // deactivate submit button as long as
-            submitAmount = e.currentTarget.value;
+              // amount is not valid
-          }}
+              submitAmount = e.currentTarget.value;
-        />
+            }}
+          />
+        </div>
       </p>
       <p>
         <div>

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;
   }