diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/AdminPage.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/AdminPage.tsx | 214 |
1 files changed, 118 insertions, 96 deletions
diff --git a/packages/demobank-ui/src/pages/AdminPage.tsx b/packages/demobank-ui/src/pages/AdminPage.tsx index 2a5701a95..3d0c09cbf 100644 --- a/packages/demobank-ui/src/pages/AdminPage.tsx +++ b/packages/demobank-ui/src/pages/AdminPage.tsx @@ -40,6 +40,7 @@ import { PartialButDefined, RecursivePartial, undefinedIfEmpty, + validateIBAN, WithIntermediate, } from "../utils.js"; import { ErrorBannerFloat } from "./BankFrame.js"; @@ -230,74 +231,78 @@ export function AdminPage({ onLoadNotOk }: Props): VNode { </p> <section id="main"> - <article> - <h2>{i18n.str`Accounts:`}</h2> - <div class="results"> - <table class="pure-table pure-table-striped"> - <thead> - <tr> - <th>{i18n.str`Username`}</th> - <th>{i18n.str`Name`}</th> - <th></th> - <th></th> - </tr> - </thead> - <tbody> - {customers.map((item, idx) => { - return ( - <tr key={idx}> - <td> - <a - href="#" - onClick={(e) => { - e.preventDefault(); - setShowDetails(item.username); - }} - > - {item.username} - </a> - </td> - <td>{item.name}</td> - <td> - <a - href="#" - onClick={(e) => { - e.preventDefault(); - setUpdatePassword(item.username); - }} - > - change password - </a> - </td> - <td> - <a - href="#" - onClick={(e) => { - e.preventDefault(); - setShowCashouts(item.username); - }} - > - cashouts - </a> - </td> - <td> - <a - href="#" - onClick={(e) => { - e.preventDefault(); - setRemoveAccount(item.username); - }} - > - remove - </a> - </td> - </tr> - ); - })} - </tbody> - </table> - </div> - </article> + {!customers.length ? ( + <div></div> + ) : ( + <article> + <h2>{i18n.str`Accounts:`}</h2> + <div class="results"> + <table class="pure-table pure-table-striped"> + <thead> + <tr> + <th>{i18n.str`Username`}</th> + <th>{i18n.str`Name`}</th> + <th></th> + <th></th> + </tr> + </thead> + <tbody> + {customers.map((item, idx) => { + return ( + <tr key={idx}> + <td> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + setShowDetails(item.username); + }} + > + {item.username} + </a> + </td> + <td>{item.name}</td> + <td> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + setUpdatePassword(item.username); + }} + > + change password + </a> + </td> + <td> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + setShowCashouts(item.username); + }} + > + cashouts + </a> + </td> + <td> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + setRemoveAccount(item.username); + }} + > + remove + </a> + </td> + </tr> + ); + })} + </tbody> + </table> + </div> + </article> + )} </section> </Fragment> ); @@ -835,15 +840,15 @@ function AccountForm({ ? i18n.str`only "IBAN" target are supported` : !IBAN_REGEX.test(parsed.iban) ? i18n.str`IBAN should have just uppercased letters and numbers` - : undefined, + : validateIBAN(parsed.iban, i18n), contact_data: undefinedIfEmpty({ email: !newForm.contact_data?.email - ? undefined + ? i18n.str`required` : !EMAIL_REGEX.test(newForm.contact_data.email) ? i18n.str`it should be an email` : undefined, phone: !newForm.contact_data?.phone - ? undefined + ? i18n.str`required` : !newForm.contact_data.phone.startsWith("+") ? i18n.str`should start with +` : !REGEX_JUST_NUMBERS_REGEX.test(newForm.contact_data.phone) @@ -851,10 +856,10 @@ function AccountForm({ : undefined, }), iban: !newForm.iban - ? i18n.str`required` + ? undefined //optional field : !IBAN_REGEX.test(newForm.iban) ? i18n.str`IBAN should have just uppercased letters and numbers` - : undefined, + : validateIBAN(newForm.iban, i18n), name: !newForm.name ? i18n.str`required` : undefined, username: !newForm.username ? i18n.str`required` : undefined, }); @@ -866,7 +871,10 @@ function AccountForm({ return ( <form class="pure-form"> <fieldset> - <label for="username">{i18n.str`Username`}</label> + <label for="username"> + {i18n.str`Username`} + {purpose === "create" && <b style={{ color: "red" }}>*</b>} + </label> <input name="username" type="text" @@ -876,14 +884,17 @@ function AccountForm({ form.username = e.currentTarget.value; updateForm(structuredClone(form)); }} - /> + />{" "} <ShowInputErrorLabel message={errors?.username} isDirty={form.username !== undefined} /> </fieldset> <fieldset> - <label>{i18n.str`Name`}</label> + <label> + {i18n.str`Name`} + {purpose === "create" && <b style={{ color: "red" }}>*</b>} + </label> <input disabled={purpose !== "create"} value={form.name ?? ""} @@ -897,23 +908,28 @@ function AccountForm({ isDirty={form.name !== undefined} /> </fieldset> + {purpose !== "create" && ( + <fieldset> + <label>{i18n.str`Internal IBAN`}</label> + <input + disabled={true} + value={form.iban ?? ""} + onChange={(e) => { + form.iban = e.currentTarget.value; + updateForm(structuredClone(form)); + }} + /> + <ShowInputErrorLabel + message={errors?.iban} + isDirty={form.iban !== undefined} + /> + </fieldset> + )} <fieldset> - <label>{i18n.str`Internal IBAN`}</label> - <input - disabled={purpose !== "create"} - value={form.iban ?? ""} - onChange={(e) => { - form.iban = e.currentTarget.value; - updateForm(structuredClone(form)); - }} - /> - <ShowInputErrorLabel - message={errors?.iban} - isDirty={form.iban !== undefined} - /> - </fieldset> - <fieldset> - <label>{i18n.str`Email`}</label> + <label> + {i18n.str`Email`} + {purpose !== "show" && <b style={{ color: "red" }}>*</b>} + </label> <input disabled={purpose === "show"} value={form.contact_data.email ?? ""} @@ -928,7 +944,10 @@ function AccountForm({ /> </fieldset> <fieldset> - <label>{i18n.str`Phone`}</label> + <label> + {i18n.str`Phone`} + {purpose !== "show" && <b style={{ color: "red" }}>*</b>} + </label> <input disabled={purpose === "show"} value={form.contact_data.phone ?? ""} @@ -943,12 +962,15 @@ function AccountForm({ /> </fieldset> <fieldset> - <label>{i18n.str`Cashout address`}</label> + <label> + {i18n.str`Cashout address`} + {purpose !== "show" && <b style={{ color: "red" }}>*</b>} + </label> <input disabled={purpose === "show"} - value={form.cashout_address ?? ""} + value={(form.cashout_address ?? "").substring("payto://iban/".length)} onChange={(e) => { - form.cashout_address = e.currentTarget.value; + form.cashout_address = "payto://iban/" + e.currentTarget.value; updateForm(structuredClone(form)); }} /> |