commit db407fd1c2f14fa95c7008e8d2286779f6855699
parent a5ca0af4bfa4585d82725ae667e2bcfc44498e2b
Author: ms <ms@taler.net>
Date: Wed, 9 Feb 2022 11:53:30 +0100
bank: move registration to dedicate page
Diffstat:
2 files changed, 105 insertions(+), 55 deletions(-)
diff --git a/packages/bank/src/hooks/index.ts b/packages/bank/src/hooks/index.ts
@@ -115,7 +115,6 @@ export function useNotNullLocalStorage(
key: string,
initialValue: string,
): [string, StateUpdater<string>] {
-
const [storedValue, setStoredValue] = useState<string>((): string => {
return typeof window !== "undefined"
? window.localStorage.getItem(key) || initialValue
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -58,6 +58,7 @@ interface CredentialsRequestType {
*/
interface PageStateType {
isLoggedIn: boolean;
+ tryRegister: boolean;
hasError: boolean;
withdrawalInProgress: boolean;
error?: string;
@@ -216,6 +217,7 @@ function useAccountState(
function usePageState(
state: PageStateType = {
isLoggedIn: false,
+ tryRegister: false,
hasError: false,
withdrawalInProgress: false,
}
@@ -597,7 +599,11 @@ async function registrationCall(
}));
} else {
console.log("Credentials are valid");
- pageStateSetter((prevState) => ({ ...prevState, isLoggedIn: true }));
+ pageStateSetter((prevState) => ({
+ ...prevState,
+ isLoggedIn: true,
+ tryRegister: false
+ }));
backendStateSetter((prevState) => ({
...prevState,
url: baseUrl,
@@ -612,6 +618,82 @@ async function registrationCall(
*************************/
/**
+ * Collect and submit login data.
+ */
+function LoginForm(Props: any): VNode {
+ const {backendStateSetter, pageStateSetter} = Props;
+ var submitData: CredentialsRequestType;
+ const i18n = useTranslator();
+ return <Fragment>
+ <input
+ type="text"
+ placeholder="username"
+ required
+ onInput={(e): void => {
+ submitData = {
+ ...submitData,
+ username: e.currentTarget.value,
+ };}} />
+ <input
+ type="text"
+ placeholder="password"
+ required
+ onInput={(e): void => {
+ submitData = {
+ ...submitData,
+ password: e.currentTarget.value,
+ };}} />
+ <button
+ onClick={() => {
+ loginCall(
+ submitData,
+ backendStateSetter,
+ pageStateSetter
+ );
+ }}>{i18n`Login`}</button>
+ </Fragment>
+}
+
+/**
+ * Collect and submit registration data.
+ */
+function RegistrationForm(Props: any): VNode {
+ var {pageState, pageStateSetter} = Props;
+ var submitData: CredentialsRequestType;
+ const i18n = useTranslator();
+ return (<Fragment>
+ <h2>Register!</h2>
+ <input
+ type="text"
+ placeholder="username"
+ required
+ onInput={(e): void => {
+ submitData = {
+ ...submitData,
+ username: e.currentTarget.value,
+ };}} />
+ <input
+ type="text"
+ placeholder="password"
+ required
+ onInput={(e): void => {
+ submitData = {
+ ...submitData,
+ password: e.currentTarget.value,
+ };}} />
+ <button
+ onClick={() => {
+ registrationCall(
+ submitData,
+ Props.backendStateSetter,
+ pageStateSetter
+ );}}>{i18n`Register`}</button>
+ <a onClick={() => {
+ pageStateSetter((prevState) => ({...prevState, tryRegister: false}))}}>Go back</a>
+ </Fragment>);
+}
+
+/**
* Show one page of transactions.
*/
function Transactions(Props: any): VNode {
@@ -830,7 +912,6 @@ export function BankHome(): VNode {
var [pageState, pageStateSetter] = usePageState();
var [accountState, accountStateSetter] = useAccountState();
const setTxPageNumber = useTransactionPageNumber()[1];
-
var i18n = useTranslator();
if (pageState.hasError) {
@@ -842,6 +923,12 @@ export function BankHome(): VNode {
</Fragment>;
}
+ if (pageState.tryRegister) {
+ return (<RegistrationForm
+ pageState={pageState}
+ pageStateSetter={pageStateSetter}
+ backendStateSetter={backendStateSetter} />);
+ }
/**
* Credentials were correct, now render the bank account page,
* with balance, transactions history, and a Taler withdrawal
@@ -871,7 +958,8 @@ export function BankHome(): VNode {
accountLabel={backendState.username}>
{ /**
- * No withdrawal is happening: offer to start one.
+ * No action is currently being performed (page is 'pristine'):
+ * offer the Taler withdrawal button.
*/
!pageState.withdrawalInProgress && !pageState.transferOutcome && <button onClick={() => {
createWithdrawalCall(
@@ -898,7 +986,11 @@ export function BankHome(): VNode {
pageState.withdrawalOutcome && <button onClick={() => {
pageStateSetter((prevState) => {
const { withdrawalOutcome, withdrawalId, ...rest } = prevState;
- return {...rest, withdrawalInProgress: false};})}}>{i18n`Close Taler withdrawal`}</button>
+ return {
+ ...rest,
+ withdrawalInProgress: false
+ };}
+ )}}>{i18n`Close Taler withdrawal`}</button>
}
{ /**
@@ -919,7 +1011,7 @@ export function BankHome(): VNode {
}
{ /**
- * Offer wire transfer, if no withdrawal is in progress.
+ * Profile page is pristine: offer the wire transfer form.
*/
!pageState.withdrawalInProgress && !pageState.transferOutcome && <Fragment>
<p>Please, include the 'amount' query parameter.</p>
@@ -957,58 +1049,17 @@ export function BankHome(): VNode {
</Fragment>
</SWRWithCredentials>
);
- }
-
- var submitData: CredentialsRequestType;
+ } // end of logged-in state.
return (
<Fragment>
<p>{i18n`Welcome to euFin bank: Taler+IBAN now possible!`}</p>
- <input
- type="text"
- placeholder="username"
- required
- onInput={(e): void => {
- submitData = {
- ...submitData,
- username: e.currentTarget.value,
- };
- }}
- />
- <input
- type="text"
- placeholder="password"
- required
- onInput={(e): void => {
- submitData = {
- ...submitData,
- password: e.currentTarget.value,
- };
- }}
- />
-
- <button
- onClick={() => {
- registrationCall(
- submitData,
- backendStateSetter,
- pageStateSetter
- );
- }}>
- Sign up
- </button>
- <button
- onClick={() => {
- loginCall(
- submitData,
- backendStateSetter,
- pageStateSetter
- );
- }}>{i18n`Sign in`}</button>
- <div>
- <SWRWithoutCredentials baseUrl={getRootPath()}>
- <PublicHistories />
- </SWRWithoutCredentials>
- </div>
+ <SWRWithoutCredentials baseUrl={getRootPath()}>
+ <LoginForm
+ pageStateSetter={pageStateSetter}
+ backendStateSetter={backendStateSetter} />
+ <p>Not a customer yet? <a onClick={() => {
+ pageStateSetter((prevState) => ({...prevState, tryRegister: true}))}}>Register!</a></p>
+ </SWRWithoutCredentials>
</Fragment>
);
}
