@@ -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';
@@ -116,6 +116,7 @@ export default function Ticket({ className, goHome }) {
116116 () =>
117117 composeValidator(
118118 {
119+ useAdvanced: buildCheckboxValidator(),
119120 usePassphrase: buildCheckboxValidator(),
120121 useShards: buildCheckboxValidator(),
121122 point: buildPointValidator(4),
@@ -123,6 +124,7 @@ export default function Ticket({ className, goHome }) {
123124 shard1: buildPatqValidator(),
124125 shard2: buildPatqValidator(),
125126 shard3: buildPatqValidator(),
127+ showTicket: buildCheckboxValidator(),
126128 passphrase: buildPassphraseValidator(),
127129 },
128130 validateForm
@@ -135,6 +137,8 @@ export default function Ticket({ className, goHome }) {
135137 point: impliedPoint || '',
136138 usePasshrase: false,
137139 useShards: false,
140+ showTicket: true,
141+ useAdvanced: false,
138142 }),
139143 [impliedPoint]
140144 );
@@ -146,7 +150,7 @@ export default function Ticket({ className, goHome }) {
146150 onSubmit={onSubmit}
147151 afterSubmit={goHome}
148152 initialValues={initialValues}>
149− {({ handleSubmit, submitting }) => (
153+ {({ handleSubmit, values, submitting }) => (
150154 <>
151155 <Grid.Item full as={PointInput} name="point" />
152156
@@ -154,17 +158,38 @@ export default function Ticket({ className, goHome }) {
154158 <Grid.Item
155159 full
156160 as={TicketInput}
161+ type={values.showTicket ? 'text' : 'password'}
157162 name="ticket"
158163 label="Master Ticket"
159164 />
160165 </Condition>
161166
162167 <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" />
168+ <Grid.Item
169+ full
170+ as={TicketInput}
171+ type={values.showTicket ? 'text' : 'password'}
172+ name="shard1"
173+ label="Shard 1"
174+ />
175+ <Grid.Item
176+ full
177+ as={TicketInput}
178+ type={values.showTicket ? 'text' : 'password'}
179+ name="shard2"
180+ label="Shard 2"
181+ />
182+ <Grid.Item
183+ full
184+ as={TicketInput}
185+ type={values.showTicket ? 'text' : 'password'}
186+ name="shard3"
187+ label="Shard 3"
188+ />
166189 </Condition>
167190
191+ <Grid.Item full as={CheckboxInput} name="showTicket" label="Show" />
192+
168193 <Condition when="usePassphrase" is={true}>
169194 <Grid.Item
170195 full
@@ -174,19 +199,6 @@ export default function Ticket({ className, goHome }) {
174199 />
175200 </Condition>
176201
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−
190202 <Grid.Item full as={FormError} />
191203
192204 <Grid.Item full as={SubmitButton} handleSubmit={handleSubmit}>
@@ -198,6 +210,29 @@ export default function Ticket({ className, goHome }) {
198210 : 'Continue'
199211 }
200212 </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>
201236 </>
202237 )}
203238 </BridgeForm>