@@ -3,7 +3,13 @@ import { Just } from 'folktale/maybe';
33import cn from 'classnames';
44import * as azimuth from 'azimuth-js';
55import * as kg from 'urbit-key-generation';
6−import { Grid, CheckboxInput, Flex, ToggleInput } from 'indigo-react';
6+import {
7+ Grid,
8+ CheckboxInput,
9+ Flex,
10+ ToggleInput,
11+ AccessoryIcon,
12+} from 'indigo-react';
713import { FORM_ERROR } from 'final-form';
814
915import { useNetwork } from 'store/network';
@@ -31,6 +37,56 @@ import FormError from 'form/FormError';
3137import SubmitButton from 'form/SubmitButton';
3238import { WARNING } from 'form/helpers';
3339
40+import { ReactComponent as SecretShowIcon } from 'assets/secret-show.svg';
41+import { ReactComponent as SecretHideIcon } from 'assets/secret-hidden.svg';
42+
43+function AdvancedOptions() {
44+ return (
45+ <Flex.Item as={Flex}>
46+ <Condition when="useAdvanced" is={true}>
47+ <Flex.Item
48+ as={CheckboxInput}
49+ inline
50+ white
51+ className="mr4"
52+ name="usePassphrase"
53+ label="Passphrase"
54+ style={{ boxSizing: 'border-box' }}
55+ />
56+ <Flex.Item
57+ as={CheckboxInput}
58+ inline
59+ white
60+ className="mr4"
61+ name="useShards"
62+ label="Shards"
63+ style={{ boxSizing: 'border-box' }}
64+ />
65+ </Condition>
66+ <Flex.Item
67+ as={ToggleInput}
68+ name="useAdvanced"
69+ label="Settings"
70+ small
71+ inverseLabel="Close"
72+ />
73+ </Flex.Item>
74+ );
75+}
76+
77+function TicketInputAccessory({ name }) {
78+ return (
79+ <AccessoryIcon>
80+ <ToggleInput
81+ name={name}
82+ className="mt1"
83+ inverseLabel={<SecretHideIcon />}
84+ label={<SecretShowIcon />}
85+ />
86+ </AccessoryIcon>
87+ );
88+}
89+
3490export default function Ticket({ className, goHome }) {
3591 useLoginView(WALLET_TYPES.TICKET);
3692
@@ -124,7 +180,7 @@ export default function Ticket({ className, goHome }) {
124180 shard1: buildPatqValidator(),
125181 shard2: buildPatqValidator(),
126182 shard3: buildPatqValidator(),
127− showTicket: buildCheckboxValidator(),
183+ ticketHidden: buildCheckboxValidator(),
128184 passphrase: buildPassphraseValidator(),
129185 },
130186 validateForm
@@ -137,14 +193,14 @@ export default function Ticket({ className, goHome }) {
137193 point: impliedPoint || '',
138194 usePasshrase: false,
139195 useShards: false,
140− showTicket: true,
196+ ticketHidden: false,
141197 useAdvanced: false,
142198 }),
143199 [impliedPoint]
144200 );
145201
146202 return (
147− <Grid className={cn('mt4', className)}>
203+ <Grid className={className}>
148204 <BridgeForm
149205 validate={validate}
150206 onSubmit={onSubmit}
@@ -158,7 +214,10 @@ export default function Ticket({ className, goHome }) {
158214 <Grid.Item
159215 full
160216 as={TicketInput}
161− type={values.showTicket ? 'text' : 'password'}
217+ hidden={values.ticketHidden}
218+ labelAccessory={<AdvancedOptions />}
219+ accessory={<TicketInputAccessory name="ticketHidden" />}
220+ className="mt3"
162221 name="ticket"
163222 label="Master Ticket"
164223 />
@@ -168,32 +227,38 @@ export default function Ticket({ className, goHome }) {
168227 <Grid.Item
169228 full
170229 as={TicketInput}
171− type={values.showTicket ? 'text' : 'password'}
230+ accessory={<TicketInputAccessory name="ticketHidden" />}
231+ hidden={values.ticketHidden}
232+ labelAccessory={<AdvancedOptions />}
233+ className="mt3"
172234 name="shard1"
173235 label="Shard 1"
174236 />
175237 <Grid.Item
176238 full
177239 as={TicketInput}
178− type={values.showTicket ? 'text' : 'password'}
240+ accessory={<TicketInputAccessory name="ticketHidden" />}
241+ hidden={values.ticketHidden}
242+ className="mt3"
179243 name="shard2"
180244 label="Shard 2"
181245 />
182246 <Grid.Item
183247 full
184248 as={TicketInput}
185− type={values.showTicket ? 'text' : 'password'}
249+ className="mt3"
250+ accessory={<TicketInputAccessory name="ticketHidden" />}
251+ hidden={values.ticketHidden}
186252 name="shard3"
187253 label="Shard 3"
188254 />
189255 </Condition>
190256
191− <Grid.Item full as={CheckboxInput} name="showTicket" label="Show" />
192−
193257 <Condition when="usePassphrase" is={true}>
194258 <Grid.Item
195259 full
196260 as={PassphraseInput}
261+ className="mt3"
197262 name="passphrase"
198263 label="Wallet Passphrase"
199264 />
@@ -201,7 +266,11 @@ export default function Ticket({ className, goHome }) {
201266
202267 <Grid.Item full as={FormError} />
203268
204− <Grid.Item full as={SubmitButton} handleSubmit={handleSubmit}>
269+ <Grid.Item
270+ full
271+ as={SubmitButton}
272+ center
273+ handleSubmit={handleSubmit}>
205274 {isWarning =>
206275 submitting
207276 ? 'Logging in...'
@@ -210,29 +279,6 @@ export default function Ticket({ className, goHome }) {
210279 : 'Continue'
211280 }
212281 </Grid.Item>
213−
214− <Grid.Item full as={Flex} justify="between">
215− <Flex.Item
216− as={ToggleInput}
217− name="useAdvanced"
218− label="Advanced"
219− inverseLabel="Hide"
220− />
221− <Condition when="useAdvanced" is={true}>
222− <Flex.Item as={Flex}>
223− <Flex.Item
224− as={CheckboxInput}
225− name="usePassphrase"
226− label="Passphrase"
227− />
228− <Flex.Item
229− as={CheckboxInput}
230− name="useShards"
231− label="Shards"
232− />
233− </Flex.Item>
234− </Condition>
235− </Grid.Item>
236282 </>
237283 )}
238284 </BridgeForm>