diff options
Diffstat (limited to 'packages/demobank-ui/src/pages')
3 files changed, 63 insertions, 49 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> - <input - type="text" - readonly - class="currency-indicator" - size={currency?.length} - maxLength={currency?.length} - tabIndex={-1} - value={currency} - /> - - <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} + /> + + <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> - <input - type="text" - readonly - class="currency-indicator" - size={currency?.length ?? 5} - maxLength={currency?.length} - tabIndex={-1} - value={currency} - /> - - <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} + /> + + <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> |