aboutsummaryrefslogtreecommitdiff
path: root/packages/demobank-ui
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-12-30 10:42:15 -0300
committerSebastian <sebasjm@gmail.com>2022-12-30 10:42:15 -0300
commit26d94c4ba7dd12cfa433d0c037f3bba8f73995f4 (patch)
tree647cdb4c2facda296fd5109ffb4709345b411626 /packages/demobank-ui
parent7d0990fe896247467c3b72c965f78279a86e6f64 (diff)
add login username validation & prevent safari to capitalize
Diffstat (limited to 'packages/demobank-ui')
-rw-r--r--packages/demobank-ui/src/pages/LoginForm.tsx10
-rw-r--r--packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx18
-rw-r--r--packages/demobank-ui/src/pages/RegistrationPage.tsx6
3 files changed, 27 insertions, 7 deletions
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index dd0364d6e..1fbba357b 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/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>
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 1922eeed3..021da51ed 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/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>
);
}
diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx
index 183fa993e..12b3b6978 100644
--- a/packages/demobank-ui/src/pages/RegistrationPage.tsx
+++ b/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