summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-12-07 18:46:30 -0300
committerSebastian <sebasjm@gmail.com>2022-12-07 18:46:30 -0300
commitc54476c40e76645b5ffb507558d6a83f0e697dc7 (patch)
tree10ff016d0a8bc34226b841928a5208153b6eac0d
parent4fbc22b94a4a72f37faa3beff68f85ce4fdcd2ea (diff)
downloadwallet-core-master.tar.gz
wallet-core-master.tar.bz2
wallet-core-master.zip
fix: username regex and error message word-breakHEADmaster
-rw-r--r--packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx50
-rw-r--r--packages/demobank-ui/src/pages/home/RegistrationPage.tsx14
-rw-r--r--packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx48
-rw-r--r--packages/demobank-ui/src/scss/bank.scss8
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>&nbsp;
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={currency?.length}
- maxLength={currency?.length}
- tabIndex={-1}
- value={currency}
- />
- &nbsp;
- <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}
+ />
+ &nbsp;
+ <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>
&nbsp;
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={currency?.length ?? 5}
- maxLength={currency?.length}
- tabIndex={-1}
- value={currency}
- />
- &nbsp;
- <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}
+ />
+ &nbsp;
+ <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;
}