diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx | 123 |
1 files changed, 63 insertions, 60 deletions
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 20c5d6cf7..d8c1644b1 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -100,75 +100,78 @@ export function PaytoWireTransferForm({ autoCapitalize="none" autoCorrect="off" > - <p> - <label for="iban">{i18n.str`Receiver IBAN:`}</label> + <label for="iban">{i18n.str`Receiver IBAN:`}</label> + <input + ref={ref} + type="text" + id="iban" + name="iban" + value={iban ?? ""} + placeholder="CC0123456789" + required + pattern={ibanRegex} + onInput={(e): void => { + setIban(e.currentTarget.value); + }} + /> + <ShowInputErrorLabel + message={errorsWire?.iban} + isDirty={iban !== undefined} + /> + <label for="subject">{i18n.str`Transfer subject:`}</label> + <input + type="text" + name="subject" + id="subject" + placeholder="subject" + value={subject ?? ""} + required + onInput={(e): void => { + setSubject(e.currentTarget.value); + }} + /> + <ShowInputErrorLabel + message={errorsWire?.subject} + isDirty={subject !== undefined} + /> + <label for="amount">{i18n.str`Amount:`}</label> + <div style={{ width: "max-content", display: "flex" }}> <input - ref={ref} type="text" - id="iban" - name="iban" - value={iban ?? ""} - placeholder="CC0123456789" - required - pattern={ibanRegex} - onInput={(e): void => { - setIban(e.currentTarget.value); + readonly + class="currency-indicator" + size={limit.currency.length} + maxLength={limit.currency.length} + tabIndex={-1} + style={{ + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + borderRight: 0, }} + value={limit.currency} /> - <br /> - <ShowInputErrorLabel - message={errorsWire?.iban} - isDirty={iban !== undefined} - /> - <br /> - <label for="subject">{i18n.str`Transfer subject:`}</label> <input - type="text" - name="subject" - id="subject" - placeholder="subject" - value={subject ?? ""} + type="number" + name="amount" + id="amount" + placeholder="amount" required + style={{ + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + borderLeft: 0, + width: 150, + }} + value={amount ?? ""} onInput={(e): void => { - setSubject(e.currentTarget.value); + setAmount(e.currentTarget.value); }} /> - <br /> - <ShowInputErrorLabel - message={errorsWire?.subject} - isDirty={subject !== undefined} - /> - <br /> - <label for="amount">{i18n.str`Amount:`}</label> - <div style={{ width: "max-content" }}> - <input - type="text" - readonly - class="currency-indicator" - size={limit.currency.length} - maxLength={limit.currency.length} - tabIndex={-1} - value={limit.currency} - /> - - <input - type="number" - name="amount" - id="amount" - placeholder="amount" - required - value={amount ?? ""} - onInput={(e): void => { - setAmount(e.currentTarget.value); - }} - /> - </div> - <ShowInputErrorLabel - message={errorsWire?.amount} - isDirty={amount !== undefined} - /> - </p> - + </div> + <ShowInputErrorLabel + message={errorsWire?.amount} + isDirty={amount !== undefined} + /> <p style={{ display: "flex", justifyContent: "space-between" }}> <input type="submit" |