on master help sign in
feat: insert ticket dashes for formatting patq
commitbd2be652861e93d03fc556644e21fdfe5439dbad authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateMon 12 Aug 2019, 19:17 (7 years ago) parentaed1af0
4 files changed+51−6
src/form/Inputs.js+9−2 src/form/formatters.js+32−2 src/indigo-react/components/Input.js+7−2 src/lib/lib.js+3
src/form/Inputs.js+9−2
@@ -7,6 +7,7 @@ import {
77 convertToNumber,
88 buildFormatter,
99 downcase,
10+ ensurePatQDashes,
1011} from 'form/formatters';
1112import { DEFAULT_HD_PATH } from 'lib/wallet';
1213import InputSigil from 'components/InputSigil';
@@ -21,7 +22,12 @@ const PLACEHOLDER_PRIVATE_KEY =
2122 '0x12345abcdee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';
2223const PLACEHOLDER_EMAIL = 'Email Address';
2324
24−const formatPat = buildFormatter([downcase, prependSig]);
25+const TICKET_MAX_BYTE_LEN = 32; // tickets can be as large as 32 bytes
26+const formatPat = buildFormatter([
27+ downcase,
28+ prependSig,
29+ ensurePatQDashes(TICKET_MAX_BYTE_LEN),
30+]);
2531
2632export function TicketInput({ name, ...rest }) {
2733 const {
@@ -38,8 +44,9 @@ export function TicketInput({ name, ...rest }) {
3844
3945 return (
4046 <Input
41− type="password"
47+ type="text"
4248 name={name}
49+ obscure={value => value.replace(/[^~-]+/g, '••••••')}
4350 placeholder={PLACEHOLDER_TICKET}
4451 autoCapitalize="none"
4552 autoCorrect="off"
src/form/formatters.js+32−2
@@ -1,6 +1,7 @@
1−import { compose } from 'lib/lib';
1+import { compose, strSplice } from 'lib/lib';
22
3−export const buildFormatter = (formatters = []) => compose(...formatters);
3+export const buildFormatter = (formatters = []) =>
4+ compose(...formatters.reverse());
45
56export const prependSig = s => {
67 if (!s || s.length === 0) {
@@ -10,6 +11,35 @@ export const prependSig = s => {
1011 return s.charAt(0) === '~' ? s : `~${s}`;
1112};
1213
14+/**
15+ * inserts a - every 7 characters
16+ * (must be preceeded by prependSig to work correctly)
17+ * @param {number} maxByteLength the maximum number of patq blocks to have in a string
18+ */
19+export const ensurePatQDashes = maxByteLength => s => {
20+ if (!s || s.length === 0) {
21+ return s || '';
22+ }
23+
24+ // ensure there's a dash every 6 + 1 characters
25+ const dashAt = i => i * (6 + 1);
26+ const maxBlocks = maxByteLength / 2;
27+
28+ for (let i = 1; i !== maxBlocks; i++) {
29+ const dashIndex = dashAt(i);
30+
31+ if (s.length - 1 < dashIndex) {
32+ return s;
33+ }
34+
35+ if (s.charAt(dashIndex) !== '-') {
36+ s = strSplice(s, dashIndex, '-');
37+ }
38+ }
39+
40+ return s;
41+};
42+
1343export const convertToNumber = s => {
1444 try {
1545 return parseInt(s, 10);
src/indigo-react/components/Input.js+7−2
@@ -1,7 +1,6 @@
11import React from 'react';
22import cn from 'classnames';
33import { useField } from 'react-final-form';
4−
54import Flex from './Flex';
65import { ErrorText } from './Typography';
76
@@ -15,6 +14,7 @@ export default function Input({
1514 disabled = false,
1615 mono = false,
1716 warning,
17+ obscure,
1818
1919 // callbacks
2020 onEnter,
@@ -32,6 +32,9 @@ export default function Input({
3232
3333 disabled = disabled || submitting;
3434
35+ // choose the base dom component
36+ const BaseComponent = type === 'textarea' ? 'textarea' : 'input';
37+
3538 // notify parent of enter keypress iff not disabled and passing
3639 // TODO: integrate this into react-final-form submission
3740 // const onKeyPress = useCallback(
@@ -39,6 +42,8 @@ export default function Input({
3942 // [disabled, valid] // eslint-disable-line react-hooks/exhaustive-deps
4043 // );
4144
45+ // console.log(input);
46+
4247 return (
4348 <Flex
4449 col
@@ -61,7 +66,7 @@ export default function Input({
6166 <Flex.Item as={Flex} row className="rel">
6267 <Flex.Item
6368 flex
64− as={type === 'textarea' ? 'textarea' : 'input'}
69+ as={BaseComponent}
6570 {...rest}
6671 // NOTE: 24px = 12px * 2 (from p3 styling)
6772 style={type === 'textarea' ? { minHeight: 'calc(1rem + 24px)' } : {}}
src/lib/lib.js+3
@@ -16,6 +16,8 @@ const seq = n => Array.from(Array(n), (_, i) => i);
1616
1717const fill = (n, v) => Array.from(Array(n), () => v);
1818
19+const strSplice = (arr, i, val) => `${arr.slice(0, i)}${val}${arr.slice(i)}`;
20+
1921const isValidGalaxy = name => {
2022 let point;
2123 try {
@@ -48,6 +50,7 @@ export {
4850 defaultTo,
4951 seq,
5052 fill,
53+ strSplice,
5154 isValidGalaxy,
5255 randomPatq,
5356 patpStringLength,