commit e18176ff974f29ee9602b3e8e32c8c7232987dc2
parent 9e38e057c53c1411922f4897756d3f977c3119a8
Author: Christian Grothoff <christian@grothoff.org>
Date: Sun, 25 Sep 2022 15:31:31 +0200
-work a bit on registration page
Diffstat:
3 files changed, 42 insertions(+), 49 deletions(-)
diff --git a/packages/bank/src/components/menu/NavigationBar.tsx b/packages/bank/src/components/menu/NavigationBar.tsx
@@ -39,32 +39,6 @@ export function NavigationBar({ onMobileMenu, title }: Props): VNode {
<span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 }}>
{title}
</span>
- {/* <a
- href="mailto:contact@anastasis.lu"
- style={{ alignSelf: "center", padding: "0.5em" }}
- >
- Contact us
- </a>
- <a
- href="https://bugs.anastasis.li/"
- style={{ alignSelf: "center", padding: "0.5em" }}
- >
- Report a bug
- </a> */}
- {/* <a
- role="button"
- class="navbar-burger"
- aria-label="menu"
- aria-expanded="false"
- onClick={(e) => {
- onMobileMenu();
- e.stopPropagation();
- }}
- >
- <span aria-hidden="true" />
- <span aria-hidden="true" />
- <span aria-hidden="true" />
- </a> */}
</div>
<div class="navbar-menu ">
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -22,7 +22,7 @@ import { LangSelectorLikePy as LangSelector} from "../../components/menu/LangSel
*
* - the page needs a "home" button that either redirects to
* the profile page (when the user is logged in), or to
- * the very initial home page.
+ * the very initial home page.
*
* - histories 'pages' are grouped in UL elements that cause
* the rendering to visually separate each UL. History elements
@@ -509,7 +509,7 @@ async function confirmWithdrawalCall(
pageStateSetter((prevState) => ({...prevState, hasError: true, error: "No withdrawal ID found."}))
return;
}
-
+
try {
const { username, password } = backendState;
let headers = prepareHeaders(username, password);
@@ -580,7 +580,7 @@ async function createTransactionCall(
`access-api/accounts/${getUsername(backendState)}/transactions`,
backendState,
JSON.stringify(req)
- )
+ )
}
catch (error) {
console.log("Could not POST transaction request to the bank", error);
@@ -661,7 +661,7 @@ async function createWithdrawalCall(
hasError: true,
error: `Withdrawal creation gave response error: ${responseText} (${res.status})`}))
return;
- }
+ }
console.log("Withdrawal operation created!");
let resp = await res.json();
@@ -834,7 +834,7 @@ function BankFrame(Props: any): VNode {
];
let demo_sites = [];
for (const i in DEMO_SITES) {
- demo_sites.push(<a href={DEMO_SITES[i][1]}>{DEMO_SITES[i][0]}</a>)
+ demo_sites.push(<a href={DEMO_SITES[i][1]}>{DEMO_SITES[i][0]}</a>)
}
return (
<Fragment>
@@ -910,11 +910,11 @@ function PaytoWireTransfer(Props: any): VNode {
() => {
pageStateSetter((prevState: PageStateType) => ({...prevState, tryManualTransfer: false}))
submitDataSetter(undefined)
- }
+ }
}>{i18n`Go back`}</a>;
const goBackRawPayto = <a href="#" onClick={
() => {
- pageStateSetter((prevState: PageStateType) => ({...prevState, isRawPayto: false}))
+ pageStateSetter((prevState: PageStateType) => ({...prevState, isRawPayto: false}))
rawPaytoInputSetter(undefined)
}
@@ -987,7 +987,7 @@ function PaytoWireTransfer(Props: any): VNode {
Props.backendState,
pageStateSetter,
submitDataSetter // need here only to be cleaned.
- );
+ );
}} />
</div>
<p><a
@@ -1036,7 +1036,7 @@ function PaytoWireTransfer(Props: any): VNode {
transactionData,
Props.backendState,
pageStateSetter,
- rawPaytoInputSetter);
+ rawPaytoInputSetter);
}} />
</div>
</div>
@@ -1107,7 +1107,7 @@ function QrCodeSection({talerWithdrawUri, abortButton}:{talerWithdrawUri:string,
const i18n = useTranslator();
useEffect(() => {
//Taler Wallet WebExtension is listening to headers response and tab updates.
- //In the SPA there is no header response with the Taler URI so
+ //In the SPA there is no header response with the Taler URI so
//this hack manually triggers the tab update after the QR is in the DOM.
window.location.href = window.location.href.split("#")[0] + "#"
},[])
@@ -1146,7 +1146,7 @@ function TalerWithdrawalQRCode(Props: any): VNode {
// waiting for the wallet:
const { data, error, mutate } = useSWR(`integration-api/withdrawal-operation/${withdrawalId}`);
-
+
if (typeof error !== "undefined") {
console.log(`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, error);
pageStateSetter((prevState: PageStateType) => ({
@@ -1318,18 +1318,12 @@ function RegistrationForm(Props: any): VNode {
// https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs
return (
<Fragment>
- <h1 class="nav">{i18n`Register to the euFin bank!`}</h1>
+ <h1 class="nav">{i18n`Registration form`}</h1>
<aside class="sidebar" id="left"></aside>
<article>
- <a href="#" onClick={() => {
- pageStateSetter((prevState: PageStateType) =>({...prevState, tryRegister: false}))}}>
- {i18n`Go back`}
- </a>
- </article>
- <article>
<div class="register-form">
- <h1>{i18n`Registration form`}</h1>
<form action="javascript:void(0);" class="pure-form">
+ {i18n`Username:`}
<input
type="text"
placeholder="username"
@@ -1341,6 +1335,8 @@ function RegistrationForm(Props: any): VNode {
...submitData,
username: e.currentTarget.value,
}))}} />
+ <br>
+ {i18n`Password:`}
<input
type="password"
placeholder="password"
@@ -1352,6 +1348,21 @@ function RegistrationForm(Props: any): VNode {
...submitData,
password: e.currentTarget.value,
}))}} />
+ <br>
+ {i18n`Phone number:`}
+ <!-- FIXME: add input validation (must start with +, otherwise only numbers) -->
+ <input
+ type="phone"
+ placeholder="+CC-123456789"
+ value={submitData && submitData.phone}
+ required
+ autofocus
+ onInput={(e): void => {
+ submitDataSetter((submitData: any) => ({
+ ...submitData,
+ phone: e.currentTarget.value,
+ }))}} />
+ <br>
<button
autofocus
class="pure-button pure-button-primary"
@@ -1387,6 +1398,14 @@ function RegistrationForm(Props: any): VNode {
* after setting to undefined.
*/
submitDataSetter({username: "", password: ""})}}>{i18n`Register`}</button>
+ <!-- FIXME: should use a different color -->
+ <button
+ autofocus
+ class="pure-button pure-button-primary"
+ onClick={() => {
+ pageStateSetter((prevState: PageStateType) =>({...prevState, tryRegister: false}))}}>
+ {i18n`cancel`}</button>
+
</form>
</div>
</article>
@@ -1852,7 +1871,7 @@ export function BankHome(): VNode {
<LoginForm
pageStateSetter={pageStateSetter}
backendStateSetter={backendStateSetter} />
- {regMsg()}
+ {regMsg()}
{maybeDemoContent(<p><Translate>
To view transactions of public accounts, please <a href="#"
onClick={goPublicAccounts(pageStateSetter)}>click here</a>.
diff --git a/packages/bank/src/template.html b/packages/bank/src/template.html
@@ -1,6 +1,6 @@
<!--
- This file is part of GNU Taler
- (C) 2021 Taler Systems S.A.
+ This file is part of GNU Taler
+ (C) 2021--2022 Taler Systems S.A.
GNU Taler is free software; you can redistribute it and/or modify it under the
terms of the GNU General Public License as published by the Free Software
@@ -37,7 +37,7 @@
<%= compilation.assets[file.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
</style>
<% } %>
-
+
</head>
<body>
