3d8aeb6 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

Merge pull request #224 from urbit/feat/block-activation

3d8aeb6Matt Condon7 years ago

src/components/FooterButton.js+1−1

compare with master

unifiedsplit

@@ -6,7 +6,7 @@ import Footer from './Footer';

6export default function FooterButton({ as: As = Button, ...props }) {

7 return (

8 <Footer>

9− <Grid className="pt2">

9+ <Grid className="pt4">

10 <Grid.Divider />

11 <Grid.Item full>

12 <As {...props} />

src/views/Activate/ActivateCode.js+20−2

@@ -23,6 +23,8 @@ import { useActivateFlow } from './ActivateFlow';

23import { useLocalRouter } from 'lib/LocalRouter';

24import useImpliedTicket from 'lib/useImpliedTicket';

25import useHasDisclaimed from 'lib/useHasDisclaimed';

26+import useBreakpoints from 'lib/useBreakpoints';

27+import WarningBox from 'components/WarningBox';

27export default function ActivateCode() {

29export default function ActivateCode() {

28 const history = useHistory();

30 const history = useHistory();

@@ -39,12 +41,19 @@ export default function ActivateCode() {

39 derivedPoint,

41 derivedPoint,

40 setDerivedPoint,

42 setDerivedPoint,

41 } = useActivateFlow();

43 } = useActivateFlow();

44+ // this is a pretty naive way to detect if we're on a mobile device

45+ // (i.e. we're checking the width of the screen)

46+ // but it will suffice for the 99% case and if someone wants to get around it

47+ // well by golly they're allowed to turn their phone into landscape mode

48+ // for this screen

49+ const activationAllowed = useBreakpoints([false, true, true]);

43 const [ticketInput, { pass: validTicket, data: ticket }] = useTicketInput({

51 const [ticketInput, { pass: validTicket, data: ticket }] = useTicketInput({

44 name: 'ticket',

52 name: 'ticket',

45 label: 'Activation Code',

53 label: 'Activation Code',

46 initialValue: impliedTicket || '',

54 initialValue: impliedTicket || '',

47 autoFocus: true,

55 autoFocus: true,

56+ disabled: !activationAllowed,

48 });

57 });

50 const goToLogin = useCallback(() => history.popAndPush(ROUTE_NAMES.LOGIN), [

59 const goToLogin = useCallback(() => history.popAndPush(ROUTE_NAMES.LOGIN), [

@@ -135,16 +144,19 @@ export default function ActivateCode() {

135 <Grid.Item as={H4} className="mt3 mb2" full>

144 <Grid.Item as={H4} className="mt3 mb2" full>

136 Activate

145 Activate

137 </Grid.Item>

146 </Grid.Item>

147+

138 <Grid.Item as={Input} {...ticketInput} full />

148 <Grid.Item as={Input} {...ticketInput} full />

149+

139 {generalError && (

150 {generalError && (

140 <Grid.Item full>

151 <Grid.Item full>

141− <ErrorText>{generalError}</ErrorText>{' '}

152+ <ErrorText>{generalError}</ErrorText>

142 </Grid.Item>

153 </Grid.Item>

143 )}

154 )}

155+

144 <Grid.Item

156 <Grid.Item

145 as={ForwardButton}

157 as={ForwardButton}

146 className="mt4"

158 className="mt4"

147− disabled={!pass || deriving}

159+ disabled={!pass || deriving || !activationAllowed}

148 accessory={blinkIf(deriving)}

160 accessory={blinkIf(deriving)}

149 onClick={goToPassport}

161 onClick={goToPassport}

150 solid

162 solid

@@ -152,6 +164,12 @@ export default function ActivateCode() {

152 {deriving && 'Deriving...'}

164 {deriving && 'Deriving...'}

153 {!deriving && 'Go'}

165 {!deriving && 'Go'}

154 </Grid.Item>

166 </Grid.Item>

167+

168+ {!activationAllowed && (

169+ <Grid.Item full as={WarningBox} className="mt4">

170+ For your security, please access Bridge on a desktop device.

171+ </Grid.Item>

172+ )}

155 </Grid>

173 </Grid>

156 <FooterButton as={ForwardButton} onClick={goToLogin}>

174 <FooterButton as={ForwardButton} onClick={goToLogin}>

157 Login

175 Login