fix: username regex and error message word-break

This commit is contained in:
Sebastian 2022-12-07 18:46:30 -03:00
parent 4fbc22b94a
commit c54476c40e
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
4 changed files with 67 additions and 53 deletions

View File

@ -118,6 +118,7 @@ export function PaytoWireTransferForm({
/> />
<br /> <br />
<label for="amount">{i18n.str`Amount:`}</label>&nbsp; <label for="amount">{i18n.str`Amount:`}</label>&nbsp;
<div style={{ width: "max-content" }}>
<input <input
type="text" type="text"
readonly readonly
@ -142,6 +143,7 @@ export function PaytoWireTransferForm({
})); }));
}} }}
/> />
</div>
<ShowInputErrorLabel <ShowInputErrorLabel
message={errorsWire?.amount} message={errorsWire?.amount}
isDirty={submitData?.amount !== undefined} isDirty={submitData?.amount !== undefined}

View File

@ -44,6 +44,8 @@ export function RegistrationPage(): VNode {
); );
} }
const usernameRegex = /^[a-z][a-zA-Z0-9]+$/;
/** /**
* Collect and submit registration data. * Collect and submit registration data.
*/ */
@ -57,8 +59,16 @@ function RegistrationForm(): VNode {
const { i18n } = useTranslationContext(); const { i18n } = useTranslationContext();
const errors = undefinedIfEmpty({ const errors = undefinedIfEmpty({
username: !username ? i18n.str`Missing username` : undefined, username: !username
password: !password ? i18n.str`Missing password` : undefined, ? 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 repeatPassword: !repeatPassword
? i18n.str`Missing password` ? i18n.str`Missing password`
: repeatPassword !== password : repeatPassword !== password

View File

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

View File

@ -88,7 +88,7 @@ input[type="number"]::-webkit-inner-spin-button {
display: none; display: none;
padding: 8px 16px; padding: 8px 16px;
border: 2px solid #c1c1c1; border: 2px solid #c1c1c1;
width: max-content; width: min-content;
} }
.tabcontent.active { .tabcontent.active {
@ -168,7 +168,7 @@ input {
margin-right: auto; margin-right: auto;
padding: 16px 16px; padding: 16px 16px;
border-radius: 8px; border-radius: 8px;
width: max-content; width: min-content;
.formFieldLabel { .formFieldLabel {
margin: 2px 2px; margin: 2px 2px;
} }
@ -210,7 +210,7 @@ input {
margin-right: auto; margin-right: auto;
padding: 16px 16px; padding: 16px 16px;
border-radius: 8px; border-radius: 8px;
width: max-content; width: min-content;
.formFieldLabel { .formFieldLabel {
margin: 2px 2px; margin: 2px 2px;
} }
@ -244,7 +244,7 @@ input {
margin-right: auto; margin-right: auto;
padding: 16px 16px; padding: 16px 16px;
border-radius: 8px; border-radius: 8px;
width: max-content; width: min-content;
.formFieldLabel { .formFieldLabel {
margin: 2px 2px; margin: 2px 2px;
} }