on master help sign in
login: fixing validation for shards, removing debugging helpers
2b42591Hunter Miller
src/form/SubmitButton.js−12
@@ -15,8 +15,6 @@ export default function SubmitButton({
15 ...rest
15 ...rest
16}) {
16}) {
17 const {
17 const {
18− values,
19− errors,
20 valid,
18 valid,
21 validating,
19 validating,
22 submitting,
20 submitting,
@@ -27,16 +25,6 @@ export default function SubmitButton({
27 submitSucceeded,
25 submitSucceeded,
28 } = useFormState();
26 } = useFormState();
29
27
30− console.log({
31− values,
32− valid,
33− validating,
34− submitting,
35− hasValidationErrors,
36− errors,
37− submitErrors,
38− });
39−
40 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);
28 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);
41
29
42 // can submit if:
30 // can submit if:
src/form/validators.js−1
@@ -168,7 +168,6 @@ export const composeValidator = (
168 // that means our `validating` state flickers the UI and it looks pretty bad.
168 // that means our `validating` state flickers the UI and it looks pretty bad.
169 // The solution is to conditionally return a promise only when necessary.
169 // The solution is to conditionally return a promise only when necessary.
170 return values => {
170 return values => {
171− debugger;
172 // ask for field-level errors
171 // ask for field-level errors
173 const errorsOrPromise = fieldLevelValidator(values);
172 const errorsOrPromise = fieldLevelValidator(values);
174
173
src/views/Login/Ticket.tsx+34−40
@@ -17,7 +17,6 @@ import { timeout } from 'lib/timeout';
17import useRoller from 'lib/useRoller';
17import useRoller from 'lib/useRoller';
18
18
19import BridgeForm from 'form/BridgeForm';
19import BridgeForm from 'form/BridgeForm';
20−import Condition from 'form/Condition';
21import { TicketInput, PassphraseInput, PointInput } from 'form/Inputs';
20import { TicketInput, PassphraseInput, PointInput } from 'form/Inputs';
22import {
21import {
23 composeValidator,
22 composeValidator,
@@ -53,39 +52,38 @@ export default function Ticket({ className, goHome }: TicketProps) {
53 const [usePassphrase, setUsePassphrase] = useState(false);
52 const [usePassphrase, setUsePassphrase] = useState(false);
54 const [useShards, setUseShards] = useState(false);
53 const [useShards, setUseShards] = useState(false);
55
54
56− const validateForm = useCallback((values, errors) => {
55+ const validateForm = useCallback(
56+ (values, errors) => {
57− didWarn.current = false;
57+ didWarn.current = false;
58
58
59− if (errors.point) {
59+ if (errors.point) {
60− return errors;
61− }
62−
63− if (values.useShards) {
64− errors.ticket = undefined;
65−
66− if (errors.shard1 || errors.shard2 || errors.shard3) {
67− console.log(errors);
68− return errors;
69− }
70− const empty = ['shard1', 'shard2', 'shard3'].filter(s => !values[s]);
71− if (empty.length > 1) {
72− let errors: Record<string, string> = {};
73− empty.forEach(s => {
74− errors[s] = 'Please provide at least two out of three shards.';
75− });
76− console.log(errors);
77 return errors;
60 return errors;
78 }
61 }
62+
63+ if (useShards) {
64+ if (errors.shard1 || errors.shard2 || errors.shard3) {
65+ return errors;
66+ }
67+ const empty = ['shard1', 'shard2', 'shard3'].filter(s => !values[s]);
68+ if (empty.length > 1) {
69+ let errors: Record<string, string> = {};
70+ empty.forEach(s => {
71+ errors[s] = 'Please provide at least two out of three shards.';
72+ });
73+ return errors;
74+ }
79− } else {
75+ } else {
80− if (errors.ticket) {
76+ if (errors.ticket) {
81− return errors;
77+ return errors;
78+ }
82 }
79 }
83− }
80+ },
81+ [useShards]
84− }, []);
82+ );
85
83
86 const onSubmit = useCallback(
84 const onSubmit = useCallback(
87 async values => {
85 async values => {
88− const ticket = values.useShards
86+ const ticket = useShards
89 ? kg.combine(
87 ? kg.combine(
90 [values.shard1, values.shard2, values.shard3].map(v =>
88 [values.shard1, values.shard2, values.shard3].map(v =>
91 v === '' ? undefined : v
89 v === '' ? undefined : v
@@ -126,41 +124,37 @@ export default function Ticket({ className, goHome }: TicketProps) {
126 console.error(error);
124 console.error(error);
127 return {
125 return {
128 [FORM_ERROR]: `Unable to derive wallet from ${
126 [FORM_ERROR]: `Unable to derive wallet from ${
129− values.useShards ? 'shards' : 'ticket'
127+ useShards ? 'shards' : 'ticket'
130 }.`,
128 }.`,
131 };
129 };
132 }
130 }
133 },
131 },
134− [setPointCursor, setUrbitWallet, getPoints]
132+ [setPointCursor, setUrbitWallet, getPoints, useShards]
135 );
133 );
136
134
135+ const emptyValidator = () => undefined;
136+
137 const validate = useMemo(
137 const validate = useMemo(
138 () =>
138 () =>
139 composeValidator(
139 composeValidator(
140 {
140 {
141− useAdvanced: buildCheckboxValidator(),
142− usePassphrase: buildCheckboxValidator(),
143− useShards: buildCheckboxValidator(),
144 point: buildPointValidator(4),
141 point: buildPointValidator(4),
145− ticket: buildPatqValidator(),
142+ ticket: useShards ? emptyValidator : buildPatqValidator(),
146− shard1: buildShardValidator(),
143+ shard1: useShards ? buildShardValidator() : emptyValidator,
147− shard2: buildShardValidator(),
144+ shard2: useShards ? buildShardValidator() : emptyValidator,
148− shard3: buildShardValidator(),
145+ shard3: useShards ? buildShardValidator() : emptyValidator,
149 ticketHidden: buildCheckboxValidator(),
146 ticketHidden: buildCheckboxValidator(),
150 passphrase: buildPassphraseValidator(),
147 passphrase: buildPassphraseValidator(),
151 },
148 },
152 validateForm
149 validateForm
153 ),
150 ),
154− [validateForm]
151+ [validateForm, useShards]
155 );
152 );
156
153
157 const initialValues = useMemo(
154 const initialValues = useMemo(
158 () => ({
155 () => ({
159 point: impliedPoint || '',
156 point: impliedPoint || '',
160− usePassphrase: false,
161− useShards: false,
162 ticketHidden: true,
157 ticketHidden: true,
163− useAdvanced: false,
164 }),
158 }),
165 [impliedPoint]
159 [impliedPoint]
166 );
160 );
src/views/Points.tsx−2
@@ -133,8 +133,6 @@ export default function Points() {
133 [pointList, rejectedPoints]
133 [pointList, rejectedPoints]
134 );
134 );
135
135
136− console.log(allPoints, pointList);
137−
138 // if we can only interact with a single point, jump to the point page.
136 // if we can only interact with a single point, jump to the point page.
139 // if there are any pending transfers, incoming or outgoing, stay on this
137 // if there are any pending transfers, incoming or outgoing, stay on this
140 // page, because those can only be completed/cancelled here.
138 // page, because those can only be completed/cancelled here.
src/views/UrbitOS/NetworkKeys.scss+1−1
@@ -24,7 +24,7 @@
24 }
24 }
25
25
26 .contents {
26 .contents {
27− height: 448px;
27+ height: 100%;
28 width: 100%;
28 width: 100%;
29 display: flex;
29 display: flex;
30 flex-direction: column;
30 flex-direction: column;