diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2020-12-08 08:11:18 +0100 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2020-12-10 13:29:26 +0100 |
| commit | 6cb7b3d380f72731f431783a656431ef71d9b0ff (patch) | |
| tree | 93edd7cf9ad9fa4c5c96dc9d781cda2472adf00c | |
| parent | dbf60a64c3a0925f39dae497260d05a263aff126 (diff) | |
| download | mullvadvpn-6cb7b3d380f72731f431783a656431ef71d9b0ff.tar.xz mullvadvpn-6cb7b3d380f72731f431783a656431ef71d9b0ff.zip | |
Use formattable text input for voucher code field
| -rw-r--r-- | gui/src/renderer/components/RedeemVoucher.tsx | 14 | ||||
| -rw-r--r-- | gui/src/renderer/components/RedeemVoucherStyles.tsx | 3 |
2 files changed, 12 insertions, 5 deletions
diff --git a/gui/src/renderer/components/RedeemVoucher.tsx b/gui/src/renderer/components/RedeemVoucher.tsx index 29a84f868c..290506309e 100644 --- a/gui/src/renderer/components/RedeemVoucher.tsx +++ b/gui/src/renderer/components/RedeemVoucher.tsx @@ -106,9 +106,9 @@ export function RedeemVoucherInput() { const { value, setValue, onSubmit, submitting, response } = useContext(RedeemVoucherContext); const disabled = submitting || response?.type === 'success'; - const onChange = useCallback( - (event: React.ChangeEvent<HTMLInputElement>) => { - setValue(event.target.value); + const handleChange = useCallback( + (value: string) => { + setValue(value); }, [setValue], ); @@ -124,10 +124,16 @@ export function RedeemVoucherInput() { return ( <StyledInput + allowedCharacters="[A-Z0-9]" + separator="-" + uppercaseOnly + groupLength={4} + maxLength={16} + addTrailingSeparator disabled={disabled} value={value} placeholder={'XXXX-XXXX-XXXX-XXXX'} - onChange={onChange} + handleChange={handleChange} onKeyPress={onKeyPress} /> ); diff --git a/gui/src/renderer/components/RedeemVoucherStyles.tsx b/gui/src/renderer/components/RedeemVoucherStyles.tsx index cd7d0cc7eb..e710bfe5bf 100644 --- a/gui/src/renderer/components/RedeemVoucherStyles.tsx +++ b/gui/src/renderer/components/RedeemVoucherStyles.tsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { colors } from '../../config.json'; +import FormattableTextInput from './FormattableTextInput'; import ImageView from './ImageView'; export const StyledLabel = styled.span({ @@ -11,7 +12,7 @@ export const StyledLabel = styled.span({ marginBottom: '9px', }); -export const StyledInput = styled.input({ +export const StyledInput = styled(FormattableTextInput)({ flex: 1, overflow: 'hidden', padding: '14px', |