diff options
author | Sebastian <sebasjm@gmail.com> | 2022-12-07 18:46:30 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-12-07 18:46:30 -0300 |
commit | c54476c40e76645b5ffb507558d6a83f0e697dc7 (patch) | |
tree | 10ff016d0a8bc34226b841928a5208153b6eac0d /packages | |
parent | 4fbc22b94a4a72f37faa3beff68f85ce4fdcd2ea (diff) |
fix: username regex and error message word-break
Diffstat (limited to 'packages')
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> - <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> 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; } |