fix: username regex and error message word-break

packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx

@@ -118,6 +118,7 @@ export function PaytoWireTransferForm({
             />
             <br />
             <label for="amount">{i18n.str`Amount:`}</label>&nbsp;
+            <div style={{ width: "max-content" }}>
               <input
                 type="text"
                 readonly
@@ -142,6 +143,7 @@ export function PaytoWireTransferForm({
                   }));
                 }}
               />
+            </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,
-    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

packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx

@@ -46,6 +46,7 @@ export function WalletWithdrawForm({
       <p>
         <label for="withdraw-amount">{i18n.str`Amount to withdraw:`}</label>
         &nbsp;
+        <div style={{ width: "max-content" }}>
           <input
             type="text"
             readonly
@@ -69,6 +70,7 @@ export function WalletWithdrawForm({
               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;
   }