[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] branch master updated: autofocus
|
From: |
gnunet |
|
Subject: |
[taler-merchant-backoffice] branch master updated: autofocus |
|
Date: |
Fri, 21 Oct 2022 20:14:21 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository merchant-backoffice.
The following commit(s) were added to refs/heads/master by this push:
new d7071b3 autofocus
d7071b3 is described below
commit d7071b300778b233f150b58c6005d402ede8bad1
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Fri Oct 21 15:14:13 2022 -0300
autofocus
---
packages/bank/src/pages/home/index.tsx | 201 ++++++++++++++++-----------------
1 file changed, 98 insertions(+), 103 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx
b/packages/bank/src/pages/home/index.tsx
index 6bda5c2..0a2a5a5 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -932,17 +932,17 @@ function PaytoWireTransfer(Props: any): VNode {
const [submitData, submitDataSetter] = useWireTransferRequestType();
const [rawPaytoInput, rawPaytoInputSetter] = useRawPaytoInputType();
const i18n = useTranslator();
+ const { focus, backendState } = Props
const amountRegex = '^[0-9]+(\.[0-9]+)?$';
const ibanRegex = '^[A-Z][A-Z][0-9]+$';
const receiverInput = '';
const subjectInput = '';
let transactionData: TransactionRequestType;
- const focusInput = useRef(null);
+ const ref = useRef<HTMLInputElement>(null)
useEffect(() => {
- console.log('Now focus', focusInput);
- if (focusInput.current)
- (focusInput.current as any).focus();
- }, []);
+ if (focus) ref.current?.focus();
+ },[]);
+
if (!pageState.isRawPayto) {
console.log('wire transfer form');
return (
@@ -952,12 +952,11 @@ function PaytoWireTransfer(Props: any): VNode {
<p>
<label for="iban">{i18n`Receiver IBAN:`}</label>
<input
- ref={focusInput}
+ ref={ref}
type="text"
id="iban"
name="iban"
placeholder="CC0123456789"
- autofocus
required
pattern={ibanRegex}
onInput={(e): void => {
@@ -981,7 +980,7 @@ function PaytoWireTransfer(Props: any): VNode {
}} /><br /><br />
<label for="amount">{i18n`Amount:`}</label>
<input
- type="text"
+ type="number"
name="amount"
id="amount"
placeholder="amount"
@@ -1028,7 +1027,7 @@ function PaytoWireTransfer(Props: any): VNode {
};
createTransactionCall(
transactionData,
- Props.backendState,
+ backendState,
pageStateSetter,
submitDataSetter // need here only to be cleaned.
);
@@ -1089,7 +1088,7 @@ function PaytoWireTransfer(Props: any): VNode {
transactionData.paytoUri.length === 0) return;
createTransactionCall(
transactionData,
- Props.backendState,
+ backendState,
pageStateSetter,
rawPaytoInputSetter);
}} />
@@ -1134,7 +1133,6 @@ function TalerWithdrawalConfirmationQuestion(Props: any):
VNode {
name="answer"
id="answer"
type="text"
- autofocus
required
onInput={(e): void => {
captchaAnswer = e.currentTarget.value;
@@ -1274,84 +1272,70 @@ function TalerWithdrawalQRCode(Props: any): VNode {
-/* FIXME: find a way to get rid of the @ts-ignore here! Sebastian: fix my evil
DOM modification */
-function OpenPayTab(evt: MouseEvent, tabName: string) {
- let tabcontent = document.getElementsByClassName("tabcontent");
- for (let i = 0; i < tabcontent.length; i++) {
- // @ts-ignore
- tabcontent[i].style.display = "none";
- }
- let tablinks = document.getElementsByClassName("tablinks");
- for (let i = 0; i < tablinks.length; i++) {
- tablinks[i].className
- = tablinks[i].className.replace(" active", "");
- }
- // @ts-ignore
- document.getElementById(tabName).style.display = "block";
- // @ts-ignore
- evt.currentTarget.className += " active";
-}
-
-
function WalletWithdraw(Props: any): VNode {
- const { backendState, pageStateSetter } = Props;
+ const { backendState, pageStateSetter, focus } = Props;
const currency = useContext(CurrencyContext);
const i18n = useTranslator();
let submitAmount = '5.00';
const amountRegex = '^[0-9]+(\.[0-9]+)?$';
+ const ref = useRef<HTMLInputElement>(null)
+ useEffect(() => {
+ if (focus) ref.current?.focus();
+ },[]);
return (
- <div id="reserve-form"
- class="pure-form"
- name="tform">
- <p>
- <label for="withdraw-amount">{i18n`Amount to
withdraw:`}</label>
- <input
- type="text"
- id="withdraw-amount"
- name="withdraw-amount"
- value={submitAmount}
- pattern={amountRegex}
- class="amount" autofocus
- onChange={(e): void => {
- // FIXME: validate using 'parseAmount()',
- // deactivate submit button as long as
- // amount is not valid
- submitAmount = e.currentTarget.value;
- }} />
-
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={currency.length}
- maxLength={currency.length}
- tabIndex={-1} value={currency} />
- </p>
- <p>
- <div>
- <input
- id="select-exchange"
- class="pure-button pure-button-primary"
- type="submit"
- value={i18n`Withdraw`}
- onClick={() => {
- submitAmount = validateAmount(submitAmount);
- /**
- * By invalid amounts, the validator prints error messages
- * on the console, and the browser colourizes the amount input
- * box to indicate a error.
- */
- if (!submitAmount) return;
- createWithdrawalCall(
- `${currency}:${submitAmount}`,
- backendState,
- pageStateSetter
- )
- }} />
- </div>
- </p>
- </div>
+ <div id="reserve-form"
+ class="pure-form"
+ name="tform">
+ <p>
+ <label for="withdraw-amount">{i18n`Amount to withdraw:`}</label>
+ <input
+ type="number"
+ ref={ref}
+ id="withdraw-amount"
+ name="withdraw-amount"
+ value={submitAmount}
+ pattern={amountRegex}
+ class="amount"
+ onChange={(e): void => {
+ // FIXME: validate using 'parseAmount()',
+ // deactivate submit button as long as
+ // amount is not valid
+ submitAmount = e.currentTarget.value;
+ }} />
+
+ <input
+ type="text"
+ readonly
+ class="currency-indicator"
+ size={currency.length}
+ maxLength={currency.length}
+ tabIndex={-1} value={currency} />
+ </p>
+ <p>
+ <div>
+ <input
+ id="select-exchange"
+ class="pure-button pure-button-primary"
+ type="submit"
+ value={i18n`Withdraw`}
+ onClick={() => {
+ submitAmount = validateAmount(submitAmount);
+ /**
+ * By invalid amounts, the validator prints error messages
+ * on the console, and the browser colourizes the amount input
+ * box to indicate a error.
+ */
+ if (!submitAmount) return;
+ createWithdrawalCall(
+ `${currency}:${submitAmount}`,
+ backendState,
+ pageStateSetter
+ )
+ }} />
+ </div>
+ </p>
+ </div>
)
}
@@ -1361,34 +1345,43 @@ function WalletWithdraw(Props: any): VNode {
* then specify the details trigger the action.
*/
function PaymentOptions(Props: any): VNode {
- const { backendState, pageStateSetter } = Props;
+ const { backendState, pageStateSetter, focus } = Props;
const currency = useContext(CurrencyContext);
const i18n = useTranslator();
+ const [tab, setTab] =
useState<"charge-wallet"|"wire-transfer">("charge-wallet")
+
+
return (<article>
<div class="payments">
<div class="tab">
- <button class="tablinks active"
- onClick={(e: MouseEvent): void => {OpenPayTab(e, 'charge-wallet')}}>
+ <button class={tab === "charge-wallet" ? "tablinks active" :
"tablinks"}
+ onClick={(e: MouseEvent): void => {setTab('charge-wallet')}}>
{i18n`Charge Taler wallet`}
</button>
- <button class="tablinks"
- onClick={(e: MouseEvent): void => {OpenPayTab(e, 'wire-transfer')}}>
+ <button class={tab === "wire-transfer" ? "tablinks active" :
"tablinks"}
+ onClick={(e: MouseEvent): void => {setTab("wire-transfer")}}>
{i18n`Wire to bank account`}
</button>
</div>
- <div id='charge-wallet' class='tabcontent active'>
- <h3>{i18n`Charge Taler wallet`}</h3>
- <WalletWithdraw
- backendState={backendState}
- pageStateSetter={pageStateSetter} />
- </div>
- <div id='wire-transfer' class='tabcontent'>
- <h3>{i18n`Wire to bank account`}</h3>
- <PaytoWireTransfer
- backendState={backendState}
- pageStateSetter={pageStateSetter} />
- </div>
+ { tab === "charge-wallet" &&
+ <div id='charge-wallet' class='tabcontent active'>
+ <h3>{i18n`Charge Taler wallet`}</h3>
+ <WalletWithdraw
+ backendState={backendState}
+ focus
+ pageStateSetter={pageStateSetter} />
+ </div>
+ }
+ { tab === "wire-transfer" &&
+ <div id='wire-transfer' class='tabcontent active'>
+ <h3>{i18n`Wire to bank account`}</h3>
+ <PaytoWireTransfer
+ backendState={backendState}
+ focus
+ pageStateSetter={pageStateSetter} />
+ </div>
+ }
</div>
</article>);
}
@@ -1399,7 +1392,6 @@ function RegistrationButton(Props: any): VNode {
if (UI_ALLOW_REGISTRATIONS)
{
return (<button
- autofocus
class="pure-button pure-button-secondary btn-cancel"
onClick={() => {
pageStateSetter((prevState: PageStateType) => ({ ...prevState,
tryRegister: true }))
@@ -1420,12 +1412,18 @@ function LoginForm(Props: any): VNode {
const { backendStateSetter, pageStateSetter } = Props;
const [submitData, submitDataSetter] = useCredentialsRequestType();
const i18n = useTranslator();
+ const ref = useRef<HTMLInputElement>(null)
+ useEffect(() => {
+ ref.current?.focus();
+ },[]);
return (<div class="login-div">
<form action="javascript:void(0);" class="login-form">
<div class="pure-form">
<h2>{i18n`Please login!`}</h2>
<p class="unameFieldLabel loginFieldLabel formFieldLabel"><label
for="username">{i18n`Username:`}</label></p>
<input
+ ref={ref}
+ autoFocus
type="text"
name="username"
id="username"
@@ -1455,7 +1453,6 @@ function LoginForm(Props: any): VNode {
}} />
<br />
<button
- autofocus
type="submit"
class="pure-button pure-button-primary"
onClick={() => {
@@ -1512,7 +1509,6 @@ function RegistrationForm(Props: any): VNode {
placeholder="Username"
value={submitData && submitData.username}
required
- autofocus
onInput={(e): void => {
submitDataSetter((submitData: any) => ({
...submitData,
@@ -1545,7 +1541,6 @@ function RegistrationForm(Props: any): VNode {
placeholder="+CC-123456789"
value={submitData && submitData.phone}
required
- autofocus
onInput={(e): void => {
submitDataSetter((submitData: any) => ({
...submitData,
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-merchant-backoffice] branch master updated: autofocus,
gnunet <=