@@ -3,7 +3,7 @@ import { Just } from 'folktale/maybe';
33import cn from 'classnames';
44import * as azimuth from 'azimuth-js';
55import * as kg from 'urbit-key-generation/dist/index';
6−import { Grid, CheckboxInput } from 'indigo-react';
6+import { Grid, CheckboxInput, Flex, ToggleInput } from 'indigo-react';
77import { FORM_ERROR } from 'final-form';
88
99import { useNetwork } from 'store/network';
@@ -135,6 +135,8 @@ export default function Ticket({ className, goHome }) {
135135 point: impliedPoint || '',
136136 usePasshrase: false,
137137 useShards: false,
138+ showTicket: true,
139+ useAdvanced: false,
138140 }),
139141 [impliedPoint]
140142 );
@@ -146,7 +148,7 @@ export default function Ticket({ className, goHome }) {
146148 onSubmit={onSubmit}
147149 afterSubmit={goHome}
148150 initialValues={initialValues}>
149− {({ handleSubmit, submitting }) => (
151+ {({ handleSubmit, values, submitting }) => (
150152 <>
151153 <Grid.Item full as={PointInput} name="point" />
152154
@@ -156,15 +158,36 @@ export default function Ticket({ className, goHome }) {
156158 as={TicketInput}
157159 name="ticket"
158160 label="Master Ticket"
161+ type={values.showTicket ? 'text' : 'password'}
159162 />
160163 </Condition>
161164
162165 <Condition when="useShards" is={true}>
163− <Grid.Item full as={TicketInput} name="shard1" label="Shard 1" />
164− <Grid.Item full as={TicketInput} name="shard2" label="Shard 2" />
165− <Grid.Item full as={TicketInput} name="shard3" label="Shard 3" />
166+ <Grid.Item
167+ full
168+ as={TicketInput}
169+ name="shard1"
170+ label="Shard 1"
171+ type={values.showTicket ? 'text' : 'password'}
172+ />
173+ <Grid.Item
174+ full
175+ as={TicketInput}
176+ name="shard2"
177+ label="Shard 2"
178+ type={values.showTicket ? 'text' : 'password'}
179+ />
180+ <Grid.Item
181+ full
182+ as={TicketInput}
183+ name="shard3"
184+ label="Shard 3"
185+ type={values.showTicket ? 'text' : 'password'}
186+ />
166187 </Condition>
167188
189+ <Grid.Item full as={CheckboxInput} name="showTicket" label="Show" />
190+
168191 <Condition when="usePassphrase" is={true}>
169192 <Grid.Item
170193 full
@@ -174,19 +197,6 @@ export default function Ticket({ className, goHome }) {
174197 />
175198 </Condition>
176199
177− <Grid.Item
178− full
179− as={CheckboxInput}
180− name="usePassphrase"
181− label="Passphrase"
182− />
183− <Grid.Item
184− full
185− as={CheckboxInput}
186− name="useShards"
187− label="Shards"
188− />
189−
190200 <Grid.Item full as={FormError} />
191201
192202 <Grid.Item full as={SubmitButton} handleSubmit={handleSubmit}>
@@ -198,6 +208,29 @@ export default function Ticket({ className, goHome }) {
198208 : 'Continue'
199209 }
200210 </Grid.Item>
211+
212+ <Grid.Item full as={Flex} justify="between">
213+ <Flex.Item
214+ as={ToggleInput}
215+ name="useAdvanced"
216+ label="Advanced"
217+ inverseLabel="Hide"
218+ />
219+ <Condition when="useAdvanced" is={true}>
220+ <Flex.Item as={Flex}>
221+ <Flex.Item
222+ as={CheckboxInput}
223+ name="usePassphrase"
224+ label="Passphrase"
225+ />
226+ <Flex.Item
227+ as={CheckboxInput}
228+ name="useShards"
229+ label="Shards"
230+ />
231+ </Flex.Item>
232+ </Condition>
233+ </Grid.Item>
201234 </>
202235 )}
203236 </BridgeForm>