diff options
Diffstat (limited to 'packages/bank/src/pages/home/index.tsx')
-rw-r--r-- | packages/bank/src/pages/home/index.tsx | 90 |
1 files changed, 44 insertions, 46 deletions
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx index 4e7582d..42ea47e 100644 --- a/packages/bank/src/pages/home/index.tsx +++ b/packages/bank/src/pages/home/index.tsx @@ -107,11 +107,12 @@ interface PageStateType { tryRegister: boolean; showPublicHistories: boolean; hasError: boolean; + hasInfo: boolean; withdrawalInProgress: boolean; error?: string; + info?: string; talerWithdrawUri?: string; withdrawalOutcome?: string; - transferOutcome?: string; /** * Not strictly a presentational value, could * be moved in a future "withdrawal state" object. @@ -396,6 +397,7 @@ function usePageState( tryRegister: false, showPublicHistories: false, hasError: false, + hasInfo: false, withdrawalInProgress: false, } ): [PageStateType, StateUpdater<PageStateType>] { @@ -620,7 +622,8 @@ async function createTransactionCall( console.log('Wire transfer created!'); pageStateSetter((prevState) => ({ ...prevState, - transferOutcome: 'Wire transfer created!' + hasInfo: true, + info: 'Wire transfer created!' })) // Only at this point the input data can // be discarded. @@ -806,17 +809,26 @@ function ErrorBanner(Props: any): VNode | null { const [pageState, pageStateSetter] = Props.pageState; const i18n = useTranslator(); if (!pageState.hasError) return null; - return ( + + const rval = ( <p class="informational informational-fail">{pageState.error} - <a href="#" onClick={() => { - pageStateSetter((prevState: PageStateType) => { - delete prevState.error; // delete error message - return { ...prevState, hasError: false } // delete error state - }) - }}> - {i18n`Clear`} - </a> </p>); + delete pageState.error; + pageState.hasError = false; + return rval; +} + +function StatusBanner(Props: any): VNode | null { + const [pageState, pageStateSetter] = Props.pageState; + const i18n = useTranslator(); + if (!pageState.hasInfo) return null; + + const rval = ( + <p class="informational">{pageState.error} + </p>); + delete pageState.info_msg; + pageState.hasInfo = false; + return rval; } function BankFrame(Props: any): VNode { @@ -833,12 +845,13 @@ function BankFrame(Props: any): VNode { const { talerWithdrawUri, withdrawalOutcome, - transferOutcome, withdrawalId, ...rest } = prevState; return { ...rest, isLoggedIn: false, withdrawalInProgress: false, + hasInfo: false, + hasError: false, isRawPayto: false }; }); @@ -895,8 +908,11 @@ function BankFrame(Props: any): VNode { </div> <section id="main" class="content"> <ErrorBanner pageState={[pageState, pageStateSetter]} /> + <StatusBanner pageState={[pageState, pageStateSetter]} /> {pageState.isLoggedIn ? logOut : null} {Props.children} + </section> + <section id="footer" class="footer"> <div class="footer"> <hr /> <div> @@ -1243,21 +1259,24 @@ function WalletWithdraw(Props: any): VNode { name="tform"> <p> {i18n`Amount to withdraw:`} + <div class="dropdown"> <input type="text" id="reserve-amount" name="withdraw-amount" - list="amountList" class="amount" autofocus onChange={(e): void => { submitAmount = e.currentTarget.value; }} /> - <datalist id="amountList"> + <select onChange={(e): void => { + // @ts-ignore + this.previousElementSibling.value=this.value; this.previousElementSibling.focus() + }}> <option value="5.00">5.00</option> <option value="10.00">10.00</option> <option value="15.00">15.00</option> <option value="20.00">20.00</option> - </datalist> + </select> <input type="text" @@ -1265,8 +1284,7 @@ function WalletWithdraw(Props: any): VNode { class="currency-indicator" size={currency.length} tabIndex={-1} value={currency} /> - </p> - <p> + </div> <input id="select-exchange" class="pure-button pure-button-primary" @@ -1358,8 +1376,8 @@ function LoginForm(Props: any): VNode { const { backendStateSetter, pageStateSetter } = Props; const [submitData, submitDataSetter] = useCredentialsRequestType(); const i18n = useTranslator(); - // FIXME: try removing the outer Fragment. - return (<form action="javascript:void(0);" class="login-form"> + 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">{i18n`Username:`}</p> @@ -1413,7 +1431,8 @@ function LoginForm(Props: any): VNode { </button> {RegistrationButton(Props)} </div> - </form>); + </form> + </div>); } /** @@ -1432,10 +1451,10 @@ function RegistrationForm(Props: any): VNode { i18n`Welcome to ${UI_BANK_NAME}!` } </h1> - <aside class="sidebar" id="left" /> <article> - <div class="register-form"> - <form action="javascript:void(0);" class="pure-form"> + <div class="register-div"> + <form action="javascript:void(0);" class="register-form"> + <div class="pure-form"> <h2>{i18n`Please register!`}</h2> <p class="unameFieldLabel registerFieldLabel formFieldLabel">{i18n`Username:`}</p> <input @@ -1528,6 +1547,7 @@ function RegistrationForm(Props: any): VNode { }}> {i18n`Cancel`} </button> + </div> </form> </div> </article> @@ -1611,7 +1631,6 @@ function Account(Props: any): VNode { const { withdrawalInProgress, withdrawalOutcome, - transferOutcome, withdrawalId, isLoggedIn, talerWithdrawUri } = pageState; @@ -1641,7 +1660,7 @@ function Account(Props: any): VNode { 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, @@ -1680,27 +1699,6 @@ function Account(Props: any): VNode { if (!data) return <p>Retrieving the profile page...</p>; /** - * Wire transfer reached a final state: show it. Note: - * such state is usually successful, as errors should - * have been reported earlier. - */ - if (transferOutcome) - return <BankFrame> - <p>{transferOutcome}</p> - <button onClick={() => { - pageStateSetter((prevState: PageStateType) => { - const { - transferOutcome, - ...rest } = prevState; - return { ...rest }; - }) - }}> - {i18n`Close wire transfer`} - </button> - </BankFrame> - - - /** * Withdrawal reached a final state: show it. */ if (withdrawalOutcome) |