git.iko.soy/bridge
on master help sign in
activate-ux: show form error for incorrect Ticket
776b805tomholford
src/form/BridgeForm.js → src/form/BridgeForm.tsxrenamed
compare with master
unifiedsplit

The content is the same.

src/views/Activate/MasterKeyConfirm.tsx+30−5
@@ -1,4 +1,4 @@
1−import React, { useCallback, useMemo } from 'react';
1+import React, { useCallback, useMemo, useState } from 'react';
2import * as need from 'lib/need';
2import * as need from 'lib/need';
3
3
4import ActivateView from './ActivateView';
4import ActivateView from './ActivateView';
@@ -29,14 +29,16 @@ const MasterKeyConfirm = () => {
29 const { push, names } = useLocalRouter();
29 const { push, names } = useLocalRouter();
30 const STUB_VERIFY_TICKET = isDevelopment;
30 const STUB_VERIFY_TICKET = isDevelopment;
31 const ticketSegments = useMemo(() => ticketToSegments(ticket), [ticket]);
31 const ticketSegments = useMemo(() => ticketToSegments(ticket), [ticket]);
32+ const [showError, setShowError] = useState<boolean>(false);
32
33
33 const onValues = useCallback(({ valid, values, form }) => {
34 const onValues = useCallback(({ valid, values, form }) => {
34 const { ticket0, ticket1, ticket2, ticket3 } = values;
35 const { ticket0, ticket1, ticket2, ticket3 } = values;
36+ const tickets = [ticket0, ticket1, ticket2, ticket3];
37+ const allTicketsPopulated = tickets.every(t => t?.length === 6);
35
38
36− form.change(
39+ setShowError(!valid && allTicketsPopulated);
37− 'ticket',
40+
38− ticketFromSegments([ticket0, ticket1, ticket2, ticket3])
41+ form.change('ticket', ticketFromSegments(tickets));
39− );
40 }, []);
42 }, []);
41
43
42 const validate = useMemo(
44 const validate = useMemo(
@@ -139,11 +141,17 @@ const MasterKeyConfirm = () => {
139 height={'100%'}
141 height={'100%'}
140 alignItems={'center'}
142 alignItems={'center'}
141 justifyContent={'center'}>
143 justifyContent={'center'}>
144+ {showError && (
145+ <Box height={'24px'}>
146+ {/* this is a flexbox placeholder to balance the error message below*/}
147+ </Box>
148+ )}
142 <Box
149 <Box
143 display={'flex'}
150 display={'flex'}
144 flexDirection={'row'}
151 flexDirection={'row'}
145 width={'80%'}
152 width={'80%'}
146 height={'min-content'}
153 height={'min-content'}
154+ marginY={'16px'}
147 flexWrap={'nowrap'}
155 flexWrap={'nowrap'}
148 justifyContent={'center'}>
156 justifyContent={'center'}>
149 {ticketSegments.map((segment, i) => {
157 {ticketSegments.map((segment, i) => {
@@ -161,6 +169,11 @@ const MasterKeyConfirm = () => {
161 fontFamily={'Source Code Pro'}
169 fontFamily={'Source Code Pro'}
162 borderRadius={'5px'}
170 borderRadius={'5px'}
163 border={'solid 1px rgba(0,0,0,0.25)'}
171 border={'solid 1px rgba(0,0,0,0.25)'}
172+ borderColor={
173+ showError ? '#FF4136' : 'rgba(0,0,0,0.25)'
174+ }
175+ color={showError ? '#FF4136' : 'rgba(0,0,0,0.95)'}
176+ backgroundColor={showError ? '#FF41360D' : '#FFF'}
164 name={`ticket${i}`}
177 name={`ticket${i}`}
165 autoFocus={i === 0}
178 autoFocus={i === 0}
166 />
179 />
@@ -177,6 +190,18 @@ const MasterKeyConfirm = () => {
177 );
190 );
178 })}
191 })}
179 </Box>
192 </Box>
193+ {showError && (
194+ <Box>
195+ <Text
196+ color={'#FF4136'}
197+ fontFamily={'Inter'}
198+ fontSize={'14px'}
199+ fontWeight={'600'}
200+ lineHeight={'24px'}>
201+ The Master Ticket you entered is incorrect
202+ </Text>
203+ </Box>
204+ )}
180 </Box>
205 </Box>
181
206
182 <Box
207 <Box