diff options
author | Christian Grothoff <christian@grothoff.org> | 2022-10-16 23:16:45 +0200 |
---|---|---|
committer | Christian Grothoff <christian@grothoff.org> | 2022-10-16 23:16:45 +0200 |
commit | 9592f9b537f6e399423e7222e852387445b25e25 (patch) | |
tree | fa7c68578a0cafeb6d0f8fce181c0ee972dce161 /packages | |
parent | 553c9f21f594bb6de396fa83a9a71e2edb4f4d48 (diff) | |
download | merchant-backoffice-9592f9b537f6e399423e7222e852387445b25e25.tar.gz merchant-backoffice-9592f9b537f6e399423e7222e852387445b25e25.tar.bz2 merchant-backoffice-9592f9b537f6e399423e7222e852387445b25e25.zip |
-clean up login/register forms
Diffstat (limited to 'packages')
-rw-r--r-- | packages/bank/src/pages/home/index.tsx | 90 | ||||
-rw-r--r-- | packages/bank/src/scss/bank.scss | 41 |
2 files changed, 77 insertions, 54 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) diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss index 6fee0f1..f6d32d6 100644 --- a/packages/bank/src/scss/bank.scss +++ b/packages/bank/src/scss/bank.scss @@ -15,6 +15,12 @@ div.pages-list { margin-top: 15px; } +.login-div, +.register-div { + display: block; + text-align: center; +} + a.page-number { color: blue; } @@ -42,6 +48,8 @@ input[type="number"]::-webkit-inner-spin-button { .logout { float: right; border: 20px; + margin-right: 15px; + margin-top: 15px; } .tab button { @@ -70,7 +78,9 @@ input[type="number"]::-webkit-inner-spin-button { } input[type="number"] { - -moz-appearance: textfield; + -moz-appearance: textfield; + color: white; + text: black; } #transfer-fields { @@ -121,14 +131,15 @@ input[type="number"] { .register-form > .pure-form, .login-form > .pure-form { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%,-50%); 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; } @@ -161,7 +172,21 @@ html { color: #ffffff; } -.footer { - position: fixed; - bottom: 0; +.dropdown { + position: relative; + width: 200px; +} + +.dropdown select { + width: 100%; +} + +.dropdown > * { + box-sizing: border-box; + height: 1.5em; +} + +.dropdown input { + position: absolute; + width: calc(100% - 20px); } |