git.iko.soy/bridge
on master help sign in
Make /views/Login/Ticket functional/stateless
57d42dbFang
src/components/Inputs.js+14−5
compare with master
unifiedsplit
@@ -7,6 +7,7 @@ import {
7 validateNotEmpty,
7 validateNotEmpty,
8 validateMnemonic,
8 validateMnemonic,
9 validatePoint,
9 validatePoint,
10+ validateTicket,
10} from 'lib/validators';
11} from 'lib/validators';
11import { prependSig } from 'lib/transformers';
12import { prependSig } from 'lib/transformers';
12
13
@@ -87,8 +88,16 @@ export function PointInput(props) {
87 );
88 );
88}
89}
89
90
90−// const TicketInput = advancedInput({
91+//TODO needs to be fancier, displaying sig and dashes instead of •ing all
91−// WrappedComponent: Input,
92+export function TicketInput(props) {
93+ return (
94+ <Input
95+ type="password"
96+ placeholder="~master-ticket"
92−// validators: [validateTicket, validateNotEmpty],
97+ validators={[validateTicket, validateNotEmpty]}
93−// transformers: [prependSig],
98+ transformers={[prependSig]}
99+ mono
100+ {...props}
101+ />
94−// });
102+ );
103+}
src/views/Login/Ticket.js+110−162
@@ -1,26 +1,23 @@
1import { Just, Nothing } from 'folktale/maybe';
1import { Just, Nothing } from 'folktale/maybe';
2−import React from 'react';
2+import React, { useState, useEffect } from 'react';
3import * as azimuth from 'azimuth-js';
3import * as azimuth from 'azimuth-js';
4import * as ob from 'urbit-ob';
4import * as ob from 'urbit-ob';
5
5
6+import View from '../../components/View';
6import {
7import {
7− Button,
8− Row,
9− Col,
10− Input,
11− InnerLabel,
12− ValidatedSigil,
13 PointInput,
8 PointInput,
14 TicketInput,
9 TicketInput,
10+ PassphraseInput,
15−} from '../../components/old/Base';
11+} from '../../components/Inputs';
12+import { ForwardButton } from '../../components/Buttons';
16
13
17import * as need from '../../lib/need';
14import * as need from '../../lib/need';
18import { compose } from '../../lib/lib';
15import { compose } from '../../lib/lib';
19import { WALLET_TYPES, urbitWalletFromTicket } from '../../lib/wallet';
16import { WALLET_TYPES, urbitWalletFromTicket } from '../../lib/wallet';
20
17
18+import { useNetwork } from '../../store/network';
21−import { withWallet } from '../../store/wallet';
19+import { useWallet } from '../../store/wallet';
22−import { withNetwork } from '../../store/network';
23−import { withPointCursor } from '../../store/pointCursor';
20+import { usePointCursor } from '../../store/pointCursor';
24
21
25//TODO should be part of InputWithStatus component
22//TODO should be part of InputWithStatus component
26const INPUT_STATUS = {
23const INPUT_STATUS = {
@@ -29,174 +26,125 @@ const INPUT_STATUS = {
29 FAIL: Symbol('FAIL'),
26 FAIL: Symbol('FAIL'),
30};
27};
31
28
32−class Ticket extends React.Component {
29+export default function Ticket({ advanced, loginCompleted }) {
33− constructor(props) {
30+ // globals
34− super(props);
31+ const { contracts } = useNetwork();
35−
32+ const { wallet, setWalletType, setUrbitWallet } = useWallet();
36− this.state = {
33+ const { setPointCursor } = usePointCursor();
37− pointName: '',
34+
38− ticket: '',
35+ // inputs
39− ticketStatus: Nothing(),
40− passphrase: '',
41− };
42−
43− this.handlePointNameInput = this.handlePointNameInput.bind(this);
44− this.handleTicketInput = this.handleTicketInput.bind(this);
45− this.handlePassphraseInput = this.handlePassphraseInput.bind(this);
46− this.verifyTicket = this.verifyTicket.bind(this);
47− this.continue = this.continue.bind(this);
48− }
49−
50− componentDidMount() {
51− //TODO deduce point name from URL if we can, prefill input if we found it
36+ //TODO deduce point name from URL if we can, prefill input if we found it
52− }
37+ const [pointName, setPointName] = useState('');
53−
38+ const [ticket, setTicket] = useState('');
54− handlePointNameInput(pointName) {
39+ const [passphrase, setPassphrase] = useState('');
55− if (pointName.length < 15) {
56− this.setState({ pointName });
57− this.verifyTicket(pointName, this.state.ticket, this.state.passphrase);
58− }
59− }
60
40
61− handleTicketInput(ticket) {
41+ // display state
62− this.setState({ ticket });
42+ const [ticketStatus, setTicketStatus] = useState(Nothing());
63− this.verifyTicket(this.state.pointName, ticket, this.state.passphrase);
64− }
65
43
66− handlePassphraseInput(passphrase) {
44+ useEffect(() => {
67− this.setState({ passphrase });
45+ console.log('something changed?');
68− this.verifyTicket(this.state.pointName, this.state.ticket, passphrase);
46+ verifyTicket(pointName, ticket, passphrase);
69− }
47+ return () => {};
48+ }, [pointName, ticket, passphrase]);
70
49
71 //TODO maybe want to do this only on-go, because wallet derivation is slow...
50 //TODO maybe want to do this only on-go, because wallet derivation is slow...
72− async verifyTicket(pointName, ticket, passphrase) {
51+ const verifyTicket = async (pointName, ticket, passphrase) => {
52+ setUrbitWallet(Nothing());
73 if (!ob.isValidPatq(ticket) || !ob.isValidPatp(pointName)) {
53 if (!ob.isValidPatq(ticket) || !ob.isValidPatp(pointName)) {
74− this.props.setUrbitWallet(Nothing());
54+ setTicketStatus(Nothing());
75− this.setState({ ticketStatus: Nothing() });
76 return;
55 return;
77 }
56 }
78− this.setState({ ticketStatus: Just(INPUT_STATUS.SPIN) });
57+ setTicketStatus(Just(INPUT_STATUS.SPIN));
79− const contracts = need.contracts(this.props);
58+ const realContracts = need.contracts(contracts);
80 const pointNumber = ob.patp2dec(pointName);
59 const pointNumber = ob.patp2dec(pointName);
81 const uhdw = await urbitWalletFromTicket(ticket, pointName, passphrase);
60 const uhdw = await urbitWalletFromTicket(ticket, pointName, passphrase);
82 const isOwner = azimuth.azimuth.isOwner(
61 const isOwner = azimuth.azimuth.isOwner(
83− contracts,
62+ realContracts,
84 pointNumber,
63 pointNumber,
85 uhdw.ownership.keys.address
64 uhdw.ownership.keys.address
86 );
65 );
87 const isTransferProxy = azimuth.azimuth.isTransferProxy(
66 const isTransferProxy = azimuth.azimuth.isTransferProxy(
88− contracts,
67+ realContracts,
89 pointNumber,
68 pointNumber,
90 uhdw.ownership.keys.address
69 uhdw.ownership.keys.address
91 );
70 );
92− this.props.setUrbitWallet(Just(uhdw));
71+ setUrbitWallet(Just(uhdw));
93− this.setState({
72+ const newStatus =
94− ticketStatus:
95− (await isOwner) || (await isTransferProxy)
73+ (await isOwner) || (await isTransferProxy)
96− ? Just(INPUT_STATUS.GOOD)
74+ ? INPUT_STATUS.GOOD
97− : Just(INPUT_STATUS.FAIL),
75+ : INPUT_STATUS.FAIL;
98− });
76+ setTicketStatus(Just(newStatus));
99− }
77+ };
100−
78+
101− canContinue() {
79+ const canContinue = () => {
102 // this is our only requirement, since we still want people with
80 // this is our only requirement, since we still want people with
103 // non-standard wallet setups to be able to log in
81 // non-standard wallet setups to be able to log in
104− return Just.hasInstance(this.props.wallet);
82+ return Just.hasInstance(wallet);
105− }
83+ };
106−
84+
107− continue() {
85+ const doContinue = () => {
108− //TODO maybe do on-mount?
109− this.props.setWalletType(WALLET_TYPES.TICKET);
86+ setWalletType(WALLET_TYPES.TICKET);
110− this.props.setPointCursor(Just(ob.patp2dec(this.state.pointName)));
87+ setPointCursor(Just(ob.patp2dec(pointName)));
111− this.props.loginCompleted();
88+ loginCompleted();
112− }
89+ };
113−
90+
114− render() {
115− const pointInput = (
91+ const pointInput = (
116− <PointInput
92+ <PointInput
117− className="mono mt-8"
93+ name="point"
118− prop-size="lg"
94+ label="Point"
119− prop-format="innerLabel"
95+ initialValue={pointName}
120− type="text"
96+ onValue={setPointName}
121− autoFocus
97+ autoFocus
122− value={this.state.pointName}
98+ />
123− onChange={this.handlePointNameInput}>
99+ );
124− <InnerLabel>{'Point name'}</InnerLabel>
100+
125− <ValidatedSigil
101+ //TODO integrate into TicketInput?
126− className={'tr-0 mt-05 mr-0 abs'}
127− patp={this.state.pointName}
128− size={68}
129− margin={8}
130− />
131− </PointInput>
132− );
133−
134− const ticketStatus = this.state.ticketStatus.matchWith({
102+ const displayTicketStatus = ticketStatus.matchWith({
135− Nothing: () => <span />,
103+ Nothing: () => <span />,
136− Just: status => {
104+ Just: status => {
137− switch (status.value) {
105+ switch (status.value) {
138− case INPUT_STATUS.SPIN:
106+ case INPUT_STATUS.SPIN:
139− return <span>⋯</span>;
107+ return <span>⋯</span>;
140− case INPUT_STATUS.GOOD:
108+ case INPUT_STATUS.GOOD:
141− return <span>✓</span>;
109+ return <span>✓</span>;
142− case INPUT_STATUS.FAIL:
110+ case INPUT_STATUS.FAIL:
143− return <span>𐄂</span>;
111+ return <span>𐄂</span>;
144− default:
112+ default:
145− throw new Error('weird input status ' + status.value);
113+ throw new Error('weird input status ' + status.value);
146− }
114+ }
147− },
115+ },
148− });
116+ });
149−
117+
150− const ticketInput = (
118+ const ticketInput = (
151− //TODO NewTicketInput component, that does dashes etc
152− <TicketInput
119+ <TicketInput
153− className="mono mt-8"
154− prop-size="lg"
155− prop-format="innerLabel"
156− type="password"
157− name="ticket"
120+ name="ticket"
158− value={this.state.ticket}
159− onChange={this.handleTicketInput}>
160− <InnerLabel>{'Master ticket'}</InnerLabel>
121+ label="Master ticket"
161− {ticketStatus}
122+ initialValue={ticket}
162− </TicketInput>
123+ onValue={setTicket}
124+ />
163− );
125+ );
164−
126+
165− const passphraseInput = !this.props.advanced ? null : (
127+ const passphraseInput = !advanced ? null : (
166− <Input
128+ <PassphraseInput
167− className="mt-8"
168− prop-size="md"
169− prop-format="innerLabel"
170− name="passphrase"
129+ name="passphrase"
171− type="password"
130+ label="(Optional) Wallet Passphrase"
172− value={this.state.passphrase}
131+ initialValue={passphrase}
173− autocomplete="off"
132+ onValue={setPassphrase}
174− onChange={this.handlePassphraseInput}>
133+ />
175− <InnerLabel>{'Passphrase'}</InnerLabel>
176− </Input>
177− );
134+ );
178−
135+
179− return (
136+ return (
180− <Row>
137+ <View>
181− <Col>
182− {pointInput}
138+ {pointInput}
183− {ticketInput}
139+ {ticketInput}
184− {passphraseInput}
140+ {passphraseInput}
185−
141+
186− <Button
142+ <ForwardButton
187− className={'mt-10'}
143+ className={'mt3'}
188− disabled={!this.canContinue()}
144+ disabled={!canContinue()}
189− onClick={this.continue}>
145+ onClick={doContinue}>
190− {'Go →'}
146+ Continue
191− </Button>
147+ </ForwardButton>
192− </Col>
148+ </View>
193− </Row>
194− );
149+ );
195− }
196}
150}
197−
198−export default compose(
199− withWallet,
200− withNetwork,
201− withPointCursor
202−)(Ticket);