commit ee783479c710257e74a39bbee3dad5da26b7a63a
parent f612aa4f00a8054dfa923bda0bf76d7b53ecf5d4
Author: Christian Grothoff <christian@grothoff.org>
Date: Fri, 21 Oct 2022 19:34:51 +0200
-try to improve bank UX
Diffstat:
2 files changed, 66 insertions(+), 43 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -112,7 +112,6 @@ interface PageStateType {
error?: string;
info?: string;
talerWithdrawUri?: string;
- withdrawalOutcome?: string;
/**
* Not strictly a presentational value, could
* be moved in a future "withdrawal state" object.
@@ -490,7 +489,7 @@ async function abortWithdrawalCall(
const { talerWithdrawUri, withdrawalId, ...rest } = prevState;
return {
...rest,
- withdrawalOutcome: 'Withdrawal aborted!'
+ info: 'Withdrawal aborted!'
}
})
@@ -569,7 +568,7 @@ async function confirmWithdrawalCall(
const { talerWithdrawUri, ...rest } = prevState;
return {
...rest,
- withdrawalOutcome: 'Withdrawal confirmed!'
+ info: 'Withdrawal confirmed!'
}
})
@@ -844,7 +843,6 @@ function BankFrame(Props: any): VNode {
pageStateSetter((prevState: PageStateType) => {
const {
talerWithdrawUri,
- withdrawalOutcome,
withdrawalId, ...rest } = prevState;
return {
...rest,
@@ -959,6 +957,7 @@ function PaytoWireTransfer(Props: any): VNode {
id="iban"
name="iban"
placeholder="CC0123456789"
+ autofocus
required
pattern={ibanRegex}
onInput={(e): void => {
@@ -1122,22 +1121,28 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode {
return (<Fragment>
<h1 class="nav">{i18n`Confirm Withdrawal`}</h1>
- <p><Translate>
- Please, authorize this operation by answering the following question.
- </Translate></p>
- <div>
- <label for="answer">What is <em>{captchaNumbers.a} + {captchaNumbers.b}</em> ? </label>
+ <article>
+ <div class="challenge-div">
+ <form class="challenge-form">
+ <div class="pure-form"
+ id="captcha"
+ name="capcha-form">
+ <h2>{i18n`Authorize withdrawal by solving challenge`}</h2>
+ <p>
+ <label for="answer">{i18n`What is`} <em>{captchaNumbers.a} + {captchaNumbers.b}</em>? </label>
<input
name="answer"
id="answer"
type="text"
+ autofocus
required
onInput={(e): void => {
captchaAnswer = e.currentTarget.value;
}} />
- <input
- type="submit"
- value="confirm"
+ </p>
+ <p>
+ <button
+ class="pure-button pure-button-primary btn-confirm"
onClick={() => {
if (captchaAnswer == (captchaNumbers.a + captchaNumbers.b).toString()) {
confirmWithdrawalCall(
@@ -1148,22 +1153,32 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode {
}
pageStateSetter((prevState: PageStateType) =>
({ ...prevState, hasError: true, error: 'Answer is wrong.' }))
- }} />
- <input
- type="submit"
- value="abort"
+ }}>
+ {i18n`Confirm`}
+ </button>
+
+ <button
+ class="pure-button pure-button-secondary btn-cancel"
onClick={() =>
abortWithdrawalCall(
backendState,
pageState.withdrawalId,
pageStateSetter
- )} />
+ )}>
+ {i18n`Cancel`}
+ </button>
+ </p>
</div>
+ </form>
+ <div class="hint">
<p><Translate>
A this point, a <b>real</b> bank would ask for an additional
authentication proof (PIN/TAN, one time password, ..), instead
of a simple calculation.
</Translate></p>
+ </div>
+ </div>
+ </article>
</Fragment>);
}
@@ -1202,7 +1217,7 @@ function TalerWithdrawalQRCode(Props: any): VNode {
const i18n = useTranslator();
const abortButton = <a class="pure-button" onClick={() => {
pageStateSetter((prevState: PageStateType) => {
- const { withdrawalOutcome, withdrawalId, talerWithdrawUri, ...rest } = prevState;
+ const { withdrawalId, talerWithdrawUri, ...rest } = prevState;
return { ...rest, withdrawalInProgress: false };
})
}}>{i18n`Abort`}</a>
@@ -1234,7 +1249,6 @@ function TalerWithdrawalQRCode(Props: any): VNode {
if (data.aborted)
pageStateSetter((prevState: PageStateType) => {
const {
- withdrawalOutcome,
withdrawalId,
talerWithdrawUri,
...rest } = prevState;
@@ -1514,7 +1528,6 @@ function RegistrationForm(Props: any): VNode {
placeholder="Password"
value={submitData && submitData.password}
required
- autofocus
onInput={(e): void => {
submitDataSetter((submitData: any) => ({
...submitData,
@@ -1541,7 +1554,6 @@ function RegistrationForm(Props: any): VNode {
<br />
*/}
<button
- autofocus
class="pure-button pure-button-primary btn-register"
onClick={() => {
console.log('maybe submitting the registration..');
@@ -1580,7 +1592,6 @@ function RegistrationForm(Props: any): VNode {
</button>
{/* FIXME: should use a different color */}
<button
- autofocus
class="pure-button pure-button-secondary btn-cancel"
onClick={() => {
pageStateSetter((prevState: PageStateType) => ({ ...prevState, tryRegister: false }))
@@ -1670,7 +1681,6 @@ function Account(Props: any): VNode {
const [pageState, pageStateSetter] = useContext(PageContext);
const {
withdrawalInProgress,
- withdrawalOutcome,
withdrawalId,
isLoggedIn,
talerWithdrawUri } = pageState;
@@ -1739,26 +1749,6 @@ function Account(Props: any): VNode {
if (!data) return <p>Retrieving the profile page...</p>;
/**
- * Withdrawal reached a final state: show it.
- */
- if (withdrawalOutcome)
- return <BankFrame>
- <p>{withdrawalOutcome}</p>
- <button onClick={() => {
- pageStateSetter((prevState: PageStateType) => {
- const { withdrawalOutcome, withdrawalId, ...rest } = prevState;
- return {
- ...rest,
- withdrawalInProgress: false
- };
- })
- }}>
- {i18n`Close Taler withdrawal`}
- </button>
- </BankFrame>
-
-
- /**
* This block shows the withdrawal QR code.
*
* A withdrawal operation replaces everything in the page and
diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
@@ -191,6 +191,39 @@ input {
}
+.challenge-form > .pure-form {
+ background: #4a4a4a;
+ color: #ffffff;
+ display: inline-block;
+ text-align: left;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 16px 16px;
+ border-radius: 8px;
+ width: max-content;
+ .formFieldLabel {
+ margin: 2px 2px;
+ }
+ input[type="text"] {
+ border: none;
+ border-radius: 4px;
+ background: #6a6a6a;
+ color: #fefefe;
+ box-shadow: none;
+ }
+ .btn-confirm {
+ float: left;
+ }
+ .btn-cancel {
+ float: right;
+ }
+ h2 {
+ margin-top: 0;
+ margin-bottom: 10px;
+ }
+}
+
+
.wire-transfer-form > .pure-form,
.payto-form > .pure-form,
.reserve-form > .pure-form {
