diff options
Diffstat (limited to 'packages/bank/src/pages/home/index.tsx')
| -rw-r--r-- | packages/bank/src/pages/home/index.tsx | 210 |
1 files changed, 107 insertions, 103 deletions
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx index ca090a4..1563022 100644 --- a/packages/bank/src/pages/home/index.tsx +++ b/packages/bank/src/pages/home/index.tsx @@ -918,7 +918,6 @@ const BankFrame = (Props: any): VNode => { </section> <section id="footer" class="footer"> <div class="footer"> - <hr /> <div> <p>You can learn more about GNU Taler on our <a href="https://taler.net">main website</a>.</p> </div> @@ -1470,14 +1469,19 @@ const LoginForm = (Props: any): VNode => { console.log('username or password is the empty string', submitData); return; } - loginCall( + // add an animation class to the body, as a form of mini transition + document.body.classList.add('transition-login') + setTimeout(() => { + document.body.classList.remove('transition-login') + loginCall( // Deep copy, to avoid the cleanup // below make data disappear. - { ...submitData }, - backendStateSetter, - pageStateSetter - ); - submitDataSetter(undefined); + { ...submitData }, + backendStateSetter, + pageStateSetter + ); + submitDataSetter(undefined); + }, 500); }}>{i18n`Login`} </button> {RegistrationButton(Props)} @@ -1619,15 +1623,15 @@ function Transactions(Props: any): VNode { if (typeof error !== 'undefined') { console.log('transactions not found error', error); switch (error.status) { - case 404: { - return <p>Transactions page {pageNumber} was not found.</p> - } - case 401: { - return <p>Wrong credentials given.</p> - } - default: { - return <p>Transaction page {pageNumber} could not be retrieved.</p> - } + case 404: { + return <p>Transactions page {pageNumber} was not found.</p> + } + case 401: { + return <p>Wrong credentials given.</p> + } + default: { + return <p>Transaction page {pageNumber} could not be retrieved.</p> + } } } if (!data) { @@ -1703,48 +1707,48 @@ function Account(Props: any): VNode { * message in the case-branch. */ switch (error.status) { - case 404: { - pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - isLoggedIn: false, - error: i18n`Username or account label '${accountLabel}' not found. Won't login.` - })); - - /** - * 404 should never stick to the cache, because they - * taint successful future registrations. How? After - * registering, the user gets navigated to this page, - * therefore a previous 404 on this SWR key (the requested - * resource) would still appear as valid and cause this - * page not to be shown! A typical case is an attempted - * login of a unregistered user X, and then a registration - * attempt of the same user X: in this case, the failed - * login would cache a 404 error to X's profile, resulting - * in the legitimate request after the registration to still - * be flagged as 404. Clearing the cache should prevent - * this. */ - (cache as any).clear(); - return <p>Profile not found...</p>; - } - case 401: { - pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - isLoggedIn: false, - error: i18n`Wrong credentials given.` - })); - return <p>Wrong credentials...</p>; - } - default: { - pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - isLoggedIn: false, - error: i18n`Account information could not be retrieved.` - })); - return <p>Unknown problem...</p>; - } + case 404: { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + isLoggedIn: false, + error: i18n`Username or account label '${accountLabel}' not found. Won't login.` + })); + + /** + * 404 should never stick to the cache, because they + * taint successful future registrations. How? After + * registering, the user gets navigated to this page, + * therefore a previous 404 on this SWR key (the requested + * resource) would still appear as valid and cause this + * page not to be shown! A typical case is an attempted + * login of a unregistered user X, and then a registration + * attempt of the same user X: in this case, the failed + * login would cache a 404 error to X's profile, resulting + * in the legitimate request after the registration to still + * be flagged as 404. Clearing the cache should prevent + * this. */ + (cache as any).clear(); + return <p>Profile not found...</p>; + } + case 401: { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + isLoggedIn: false, + error: i18n`Wrong credentials given.` + })); + return <p>Wrong credentials...</p>; + } + default: { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + isLoggedIn: false, + error: i18n`Account information could not be retrieved.` + })); + return <p>Unknown problem...</p>; + } } } if (!data) return <p>Retrieving the profile page...</p>; @@ -1782,31 +1786,33 @@ function Account(Props: any): VNode { <Translate>Welcome, {accountLabel} ({getIbanFromPayto(data.paytoUri)})!</Translate> </h1> </div> - <section id="assets"> - <div class="asset-summary"> - <h2>{i18n`Bank account balance`}</h2> - {data.balance.credit_debit_indicator == 'debit' ? (<b>-</b>) : null} - <div class="large-amount amount"><span class="value">{`${balance.value}`}</span> <span class="currency">{`${balance.currency}`}</span></div> - </div> - </section> - <section id="payments"> - <div class="payments"> - <h2>{i18n`Payments`}</h2> - {/* FIXME: turn into button! */} - <CurrencyContext.Provider value={balance.currency}> - {Props.children} - <PaymentOptions - backendState={backendState} - pageStateSetter={pageStateSetter} /> - </CurrencyContext.Provider> - </div> - </section> - <section id="main"> - <article> - <h2>{i18n`Latest transactions:`}</h2> - <Transactions pageNumber="0" accountLabel={accountLabel} /> - </article> - </section> + <div className="sections"> + <section id="assets"> + <div class="asset-summary"> + <h2>{i18n`Bank account balance`}</h2> + {data.balance.credit_debit_indicator == 'debit' ? (<b>-</b>) : null} + <div class="large-amount amount"><span class="value">{`${balance.value}`}</span> <span class="currency">{`${balance.currency}`}</span></div> + </div> + </section> + <section id="payments"> + <div class="payments"> + <h2>{i18n`Payments`}</h2> + {/* FIXME: turn into button! */} + <CurrencyContext.Provider value={balance.currency}> + {Props.children} + <PaymentOptions + backendState={backendState} + pageStateSetter={pageStateSetter} /> + </CurrencyContext.Provider> + </div> + </section> + <section id="main"> + <article> + <h2>{i18n`Latest transactions:`}</h2> + <Transactions pageNumber="0" accountLabel={accountLabel} /> + </article> + </section> + </div> </BankFrame>); } @@ -1867,24 +1873,24 @@ function PublicHistories(Props: any): VNode { if (typeof error !== 'undefined') { console.log('account error', error); switch (error.status) { - case 404: - console.log('public accounts: 404', error); - Props.pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - showPublicHistories: false, - error: i18n`List of public accounts was not found.` - })); - break; - default: - console.log('public accounts: non-404 error', error); - Props.pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - showPublicHistories: false, - error: i18n`List of public accounts could not be retrieved.` - })); - break; + case 404: + console.log('public accounts: 404', error); + Props.pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + showPublicHistories: false, + error: i18n`List of public accounts was not found.` + })); + break; + default: + console.log('public accounts: non-404 error', error); + Props.pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + showPublicHistories: false, + error: i18n`List of public accounts could not be retrieved.` + })); + break; } } if (!data) @@ -1935,8 +1941,6 @@ function PublicHistories(Props: any): VNode { export function BankHome(): VNode { const [backendState, backendStateSetter] = useBackendState(); const [pageState, pageStateSetter] = usePageState(); - const [accountState, accountStateSetter] = useAccountState(); - const setTxPageNumber = useTransactionPageNumber()[1]; const i18n = useTranslator(); if (pageState.showPublicHistories) |