add login username validation & prevent safari to capitalize

packages/demobank-ui/src/pages/LoginForm.tsx

@@ -23,6 +23,7 @@ import { BackendStateHandler } from "../hooks/backend.js";
 import { bankUiSettings } from "../settings.js";
 import { getBankBackendBaseUrl, undefinedIfEmpty } from "../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
+import { USERNAME_REGEX } from "./RegistrationPage.js";
 
 /**
  * Collect and submit login data.
@@ -38,7 +39,11 @@ export function LoginForm(): VNode {
   }, []);
 
   const errors = undefinedIfEmpty({
-    username: !username ? i18n.str`Missing username` : undefined,
+    username: !username
+      ? i18n.str`Missing username`
+      : !USERNAME_REGEX.test(username)
+      ? i18n.str`Use only letter and numbers starting with a lower case letter`
+      : undefined,
     password: !password ? i18n.str`Missing password` : undefined,
   });
 
@@ -50,6 +55,9 @@ export function LoginForm(): VNode {
         onSubmit={(e) => {
           e.preventDefault();
         }}
+        autoCapitalize="none"
+        autoCorrect="off"
+        autoComplete="off"
       >
         <div class="pure-form">
           <h2>{i18n.str`Please login!`}</h2>

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

@@ -80,6 +80,9 @@ export function PaytoWireTransferForm({
           onSubmit={(e) => {
             e.preventDefault();
           }}
+          autoCapitalize="none"
+          autoCorrect="off"
+          autoComplete="off"
         >
           <p>
             <label for="iban">{i18n.str`Receiver IBAN:`}</label>&nbsp;
@@ -249,7 +252,16 @@ export function PaytoWireTransferForm({
   return (
     <div>
       <p>{i18n.str`Transfer money to account identified by payto:// URI:`}</p>
-      <div class="pure-form" name="payto-form">
+      <form
+        class="pure-form"
+        name="payto-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        autoCapitalize="none"
+        autoCorrect="off"
+        autoComplete="off"
+      >
         <p>
           <label for="address">{i18n.str`payto URI:`}</label>&nbsp;
           <input
@@ -271,7 +283,7 @@ export function PaytoWireTransferForm({
             isDirty={rawPaytoInput !== undefined}
           />
           <br />
-          <div class="hint">
+          <div style={{ fontSize: "small", marginTop: 4 }}>
             Hint:
             <code>
               payto://iban/[receiver-iban]?message=[subject]&amount=[{currency}
@@ -322,7 +334,7 @@ export function PaytoWireTransferForm({
             {i18n.str`Use wire-transfer form?`}
           </a>
         </p>
-      </div>
+      </form>
     </div>
   );
 }

packages/demobank-ui/src/pages/RegistrationPage.tsx

@@ -47,7 +47,7 @@ export function RegistrationPage(): VNode {
   );
 }
 
-const usernameRegex = /^[a-z][a-zA-Z0-9]+$/;
+export const USERNAME_REGEX = /^[a-z][a-zA-Z0-9]+$/;
 
 /**
  * Collect and submit registration data.
@@ -64,12 +64,12 @@ function RegistrationForm(): VNode {
   const errors = undefinedIfEmpty({
     username: !username
       ? i18n.str`Missing username`
-      : !usernameRegex.test(username)
+      : !USERNAME_REGEX.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)
+      : !USERNAME_REGEX.test(password)
       ? i18n.str`Use only letter and numbers starting with a lower case letter`
       : undefined,
     repeatPassword: !repeatPassword