From d7f57c9fd922834e5b6c0ca23a355d5d2a4fcac3 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Thu, 24 May 2018 16:14:23 +0200 Subject: [PATCH 1/4] adding device type distinguishing, reusing radio group for buttons, updating icons, wording --- src/components/Onboarding/index.js | 10 +- .../Onboarding/steps/GenuineCheck.js | 154 ++++++------- .../Onboarding/steps/SelectDevice.js | 98 ++++++--- src/components/Onboarding/steps/SelectPIN.js | 74 +++++-- src/icons/onboarding/LedgerBlueError.js | 47 ++++ src/icons/onboarding/LedgerBlueSelectPIN.js | 47 ++++ src/icons/onboarding/LedgerNano.js | 30 ++- .../{SelectPIN.js => LedgerNanoSelectPIN.js} | 0 src/icons/onboarding/WriteSeed.js | 206 +++--------------- src/reducers/onboarding.js | 7 + static/i18n/en/onboarding.yml | 29 ++- 11 files changed, 373 insertions(+), 329 deletions(-) create mode 100644 src/icons/onboarding/LedgerBlueError.js create mode 100644 src/icons/onboarding/LedgerBlueSelectPIN.js rename src/icons/onboarding/{SelectPIN.js => LedgerNanoSelectPIN.js} (100%) diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index a3b5e1c5..5b6ccb3e 100644 --- a/src/components/Onboarding/index.js +++ b/src/components/Onboarding/index.js @@ -10,7 +10,13 @@ import type { T } from 'types/common' import type { OnboardingState } from 'reducers/onboarding' import { saveSettings } from 'actions/settings' -import { nextStep, prevStep, jumpStep, setGenuineCheckFail } from 'reducers/onboarding' +import { + nextStep, + prevStep, + jumpStep, + setGenuineCheckFail, + isLedgerNano, +} from 'reducers/onboarding' import { getCurrentDevice } from 'reducers/devices' // TODO: re-write it without auto lock, fixed width of the password modal, not dynamic titles @@ -77,6 +83,7 @@ export type StepProps = { savePassword: Function, getDeviceInfo: Function, setGenuineCheckFail: Function, + isLedgerNano: Function, } class Onboarding extends PureComponent { @@ -110,6 +117,7 @@ class Onboarding extends PureComponent { t, onboarding, setGenuineCheckFail, + isLedgerNano, prevStep, nextStep, jumpStep, diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js index fa7f061a..f2ca39e2 100644 --- a/src/components/Onboarding/steps/GenuineCheck.js +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -1,9 +1,9 @@ // @flow -import React, { PureComponent } from 'react' +import React, { PureComponent, Fragment } from 'react' import { connect } from 'react-redux' import styled from 'styled-components' -import { radii, colors } from 'styles/theme' +import { radii } from 'styles/theme' import type { T } from 'types/common' @@ -11,8 +11,9 @@ import { setGenuineCheckFail } from 'reducers/onboarding' import Box, { Card } from 'components/base/Box' import Button from 'components/base/Button' -import IconCheck from 'icons/Check' +import RadioGroup from 'components/base/RadioGroup' import IconLedgerNanoError from 'icons/onboarding/LedgerNanoError' +import IconLedgerBlueError from 'icons/onboarding/LedgerBlueError' import { Title, Description, IconOptionRow } from '../helperComponents' @@ -24,18 +25,43 @@ const mapDispatchToProps = { setGenuineCheckFail } type State = { pinStepPass: boolean | null, phraseStepPass: boolean | null, + cachedPinStepButton: string, + cachedPhraseStepButton: string, } class GenuineCheck extends PureComponent { state = { pinStepPass: null, phraseStepPass: null, + cachedPinStepButton: '', + cachedPhraseStepButton: '', } - handleStepPass = (step: string, pass: boolean | null) => { - this.setState({ [`${step}`]: pass }) + getButtonLabel() { + const { t } = this.props + return [ + { + label: t('common:yes'), + key: 'yes', + pass: true, + }, + { + label: t('common:no'), + key: 'no', + pass: false, + }, + ] + } + + handleButtonPass = (item: Object, step: string) => { + this.setState({ [`${step}`]: item.pass }) + if (step === 'pinStepPass') { + this.setState({ cachedPinStepButton: item.key }) + } else { + this.setState({ cachedPhraseStepButton: item.key }) + } - if (typeof pass === 'boolean' && !pass) { + if (!item.pass) { this.props.setGenuineCheckFail(true) } } @@ -51,12 +77,13 @@ class GenuineCheck extends PureComponent { redoGenuineCheck={this.redoGenuineCheck} contactSupport={this.contactSupport} t={this.props.t} + isLedgerNano={this.props.onboarding.isLedgerNano} /> ) render() { const { nextStep, prevStep, t, onboarding } = this.props - const { pinStepPass, phraseStepPass } = this.state + const { pinStepPass, phraseStepPass, cachedPinStepButton, cachedPhraseStepButton } = this.state if (onboarding.isGenuineFail) { return this.renderGenuineFail() @@ -66,7 +93,7 @@ class GenuineCheck extends PureComponent { {t('onboarding:genuineCheck.title')} - {t('onboarding:genuineCheck.desc')} + {t('onboarding:genuineCheck.desc')} @@ -76,22 +103,16 @@ class GenuineCheck extends PureComponent { {t('onboarding:genuineCheck.steps.step2.desc')} - {!pinStepPass ? ( - - ) : ( - - - - )} + this.handleButtonPass(item, 'pinStepPass')} + /> - + 2. @@ -99,22 +120,16 @@ class GenuineCheck extends PureComponent { {t('onboarding:genuineCheck.steps.step2.desc')} - {!phraseStepPass ? ( - - ) : ( - - - - )} + this.handleButtonPass(item, 'phraseStepPass')} + /> - + 3. @@ -145,58 +160,42 @@ class GenuineCheck extends PureComponent { export default connect(null, mapDispatchToProps)(GenuineCheck) -export function ButtonCombo({ - handleStepPass, - step, - disabled, - t, -}: { - handleStepPass: any, - step: string, - disabled: boolean, - t: T, -}) { - return ( - - - - - ) -} // TODO extract to a separate file export function GenuineCheckFail({ redoGenuineCheck, contactSupport, + isLedgerNano, t, }: { redoGenuineCheck: () => void, contactSupport: () => void, + isLedgerNano: boolean, t: T, }) { return ( - + - {t('onboarding:genuineCheck.errorPage.ledgerNano.title')} - - {t('onboarding:genuineCheck.errorPage.ledgerNano.desc')} - - - - + {isLedgerNano ? ( + + {t('onboarding:genuineCheck.errorPage.ledgerNano.title')} + + {t('onboarding:genuineCheck.errorPage.ledgerNano.desc')} + + + + + + ) : ( + + {t('onboarding:genuineCheck.errorPage.ledgerBlue.title')} + + {t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')} + + + + + + )} @@ -153,6 +190,11 @@ class GenuineCheck extends PureComponent { nextStep={nextStep} prevStep={prevStep} /> + ) } diff --git a/src/icons/Home.js b/src/icons/Home.js new file mode 100644 index 00000000..72768838 --- /dev/null +++ b/src/icons/Home.js @@ -0,0 +1,13 @@ +// @flow + +import React from 'react' + +const path = ( + +) + +export default ({ size, ...p }: { size: number }) => ( + + {path} + +) diff --git a/static/i18n/en/genuinecheck.yml b/static/i18n/en/genuinecheck.yml new file mode 100644 index 00000000..b6ecfcf5 --- /dev/null +++ b/static/i18n/en/genuinecheck.yml @@ -0,0 +1,2 @@ +modal: + title: Genuine check, bro diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index b4fabb67..ea52a172 100644 --- a/static/i18n/en/onboarding.yml +++ b/static/i18n/en/onboarding.yml @@ -67,6 +67,7 @@ genuineCheck: desc: This is a long text, please replace it with the final wording once it’s done. Lorem ipsum dolor amet ledger lorem dolor buttons: genuineCheck: Genuine check + tryAgain: Check again contactSupport: Contact Support errorPage: ledgerNano: From ebca76829e518a1ae96922b84a413e642631f676 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Fri, 25 May 2018 17:12:54 +0200 Subject: [PATCH 4/4] comment out password step, genuine check wip --- src/components/EnsureDeviceApp/index.js | 17 +- src/components/Onboarding/helperComponents.js | 3 +- src/components/Onboarding/index.js | 32 +-- src/components/Onboarding/steps/Analytics.js | 67 ++++--- .../Onboarding/steps/GenuineCheck.js | 4 +- .../Onboarding/steps/SelectDevice.js | 2 +- .../Onboarding/steps/SetPassword.js | 182 +++++++++--------- src/components/Onboarding/steps/WriteSeed.js | 2 +- src/components/base/InputPassword/index.js | 2 +- src/reducers/onboarding.js | 19 +- static/i18n/en/onboarding.yml | 12 +- 11 files changed, 183 insertions(+), 159 deletions(-) diff --git a/src/components/EnsureDeviceApp/index.js b/src/components/EnsureDeviceApp/index.js index f765f392..9c8e7920 100644 --- a/src/components/EnsureDeviceApp/index.js +++ b/src/components/EnsureDeviceApp/index.js @@ -11,16 +11,17 @@ import type { State as StoreState } from 'reducers/index' import getAddress from 'commands/getAddress' type OwnProps = { - currency: ?CryptoCurrency, + currency?: ?CryptoCurrency, deviceSelected: ?Device, - withGenuineCheck: boolean, - account: ?Account, + withGenuineCheck?: boolean, + account?: ?Account, onStatusChange?: (DeviceStatus, AppStatus, ?string) => void, - onGenuineCheck: (isGenuine: boolean) => void, + onGenuineCheck?: (isGenuine: boolean) => void, // TODO prefer children function render?: ({ appStatus: AppStatus, - currency: CryptoCurrency, + genuineCheckStatus: GenuineCheckStatus, + currency: ?CryptoCurrency, devices: Device[], deviceSelected: ?Device, deviceStatus: DeviceStatus, @@ -36,10 +37,13 @@ type DeviceStatus = 'unconnected' | 'connected' type AppStatus = 'success' | 'fail' | 'progress' +type GenuineCheckStatus = 'success' | 'fail' | 'progress' + type State = { deviceStatus: DeviceStatus, appStatus: AppStatus, errorMessage: ?string, + genuineCheckStatus: GenuineCheckStatus, } const mapStateToProps = (state: StoreState) => ({ @@ -51,6 +55,7 @@ class EnsureDeviceApp extends PureComponent { appStatus: 'progress', deviceStatus: this.props.deviceSelected ? 'connected' : 'unconnected', errorMessage: null, + genuineCheckStatus: 'progress', } componentDidMount() { @@ -159,7 +164,7 @@ class EnsureDeviceApp extends PureComponent { await sleep(1) if (!this._unmounted) { this.setState({ genuineCheckStatus: 'success' }) - this.props.onGenuineCheck(true) + this.props.onGenuineCheck && this.props.onGenuineCheck(true) } } diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index f7d8c312..689358d3 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -16,8 +16,6 @@ export const Title = styled(Box).attrs({ })`` export const Description = styled(Box).attrs({ - width: 714, - height: 48, ff: 'Museo Sans|Light', fontSize: 5, lineHeight: 1.5, @@ -25,6 +23,7 @@ export const Description = styled(Box).attrs({ color: 'grey', })` margin: 10px auto 25px; + max-width: 550px; ` export const Inner = styled(Box).attrs({ horizontal: true, diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index 5b6ccb3e..1efdff9d 100644 --- a/src/components/Onboarding/index.js +++ b/src/components/Onboarding/index.js @@ -19,8 +19,7 @@ import { } from 'reducers/onboarding' import { getCurrentDevice } from 'reducers/devices' -// TODO: re-write it without auto lock, fixed width of the password modal, not dynamic titles -import { unlock } from 'reducers/application' +// import { unlock } from 'reducers/application' import Box from 'components/base/Box' @@ -31,7 +30,8 @@ import SelectDevice from './steps/SelectDevice' import SelectPIN from './steps/SelectPIN' import WriteSeed from './steps/WriteSeed' import GenuineCheck from './steps/GenuineCheck' -import SetPassword from './steps/SetPassword' +// UNTIL IS NEEDED SET PASSWORD IS COMMENTED OUT +// import SetPassword from './steps/SetPassword' import Analytics from './steps/Analytics' import Finish from './steps/Finish' @@ -41,7 +41,7 @@ const STEPS = { selectPIN: SelectPIN, writeSeed: WriteSeed, genuineCheck: GenuineCheck, - setPassword: SetPassword, + // setPassword: SetPassword, analytics: Analytics, finish: Finish, start: Start, @@ -58,7 +58,7 @@ const mapDispatchToProps = { nextStep, prevStep, jumpStep, - unlock, + // unlock, } type Props = { @@ -80,7 +80,7 @@ export type StepProps = { nextStep: Function, jumpStep: Function, finish: Function, - savePassword: Function, + // savePassword: Function, getDeviceInfo: Function, setGenuineCheckFail: Function, isLedgerNano: Function, @@ -89,15 +89,15 @@ export type StepProps = { class Onboarding extends PureComponent { getDeviceInfo = () => this.props.getCurrentDevice finish = () => this.props.saveSettings({ hasCompletedOnboarding: true }) - savePassword = hash => { - this.props.saveSettings({ - password: { - isEnabled: hash !== undefined, - value: hash, - }, - }) - this.props.unlock() - } + // savePassword = hash => { + // this.props.saveSettings({ + // password: { + // isEnabled: hash !== undefined, + // value: hash, + // }, + // }) + // this.props.unlock() + // } render() { const { hasCompletedOnboarding, onboarding, prevStep, nextStep, jumpStep, t } = this.props @@ -122,7 +122,7 @@ class Onboarding extends PureComponent { nextStep, jumpStep, finish: this.finish, - savePassword: this.savePassword, + // savePassword: this.savePassword, getDeviceInfo: this.getDeviceInfo, } diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js index 32ed6d1a..f46e1c76 100644 --- a/src/components/Onboarding/steps/Analytics.js +++ b/src/components/Onboarding/steps/Analytics.js @@ -4,7 +4,6 @@ import React from 'react' import styled from 'styled-components' import Box from 'components/base/Box' -import IconAnalytics from 'icons/onboarding/Analytics' import CheckBox from 'components/base/CheckBox' import { Title, Description } from '../helperComponents' import OnboardingFooter from '../OnboardingFooter' @@ -17,25 +16,31 @@ export default (props: StepProps) => { {t('onboarding:analytics.title')} - {t('onboarding:analytics.desc')} - - - - - - - This is a long text, please replace it with the final wording once it’s done. -
- Lorem ipsum dolor amet ledger lorem dolor ipsum amet - - - - - - This is a long text, please replace it with the final wording once it’s done. -
- Lorem ipsum dolor amet ledger lorem dolor ipsum amet - + {t('onboarding:analytics.desc')} + + + + + + {t('onboarding:analytics.shareDiagnostics.title')} + + {t('onboarding:analytics.shareDiagnostics.desc')} + + + + + + + + + {t('onboarding:analytics.shareDiagnostics.title')} + + {t('onboarding:analytics.shareDiagnostics.desc')} + + + + + { export const AnalyticsText = styled(Box).attrs({ ff: 'Open Sans|Regular', - fontSize: 4, + fontSize: 3, textAlign: 'left', color: 'smoke', })` - margin: 10px auto 25px; - padding-left: 10px; + max-width: 450px; +` +export const AnalyticsTitle = styled(Box).attrs({ + ff: 'Open Sans|SemiBold', + fontSize: 4, + textAlign: 'left', +})` + margin-bottom: 5px; ` -const DeviceIcon = styled(Box).attrs({ - alignItems: 'center', - justifyContent: 'center', - color: 'graphite', +const Container = styled(Box).attrs({ + horizontal: true, + p: 5, })` - width: 55px; + max-height: 90px; + width: 620px; ` diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js index 907470d6..4ed6fcb5 100644 --- a/src/components/Onboarding/steps/GenuineCheck.js +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -118,7 +118,7 @@ class GenuineCheck extends PureComponent { {t('onboarding:genuineCheck.title')} - {t('onboarding:genuineCheck.desc')} + {t('onboarding:genuineCheck.desc')} @@ -291,7 +291,7 @@ const CardWrapper = styled(Card).attrs({ p: 5, })` max-height: 97px; - min-width: 620px; + width: 620px; border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`}; pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')}; background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)}; diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js index 067ddfb9..9d1012e2 100644 --- a/src/components/Onboarding/steps/SelectDevice.js +++ b/src/components/Onboarding/steps/SelectDevice.js @@ -28,7 +28,7 @@ class SelectDevice extends PureComponent { {t('onboarding:selectDevice.title')} - {t('onboarding:selectDevice.desc')} + {t('onboarding:selectDevice.desc')} { - state = { - isPasswordModalOpened: false, - isPasswordEnabled: false, - } - - handleOpenPasswordModal = () => { - this.setState({ isPasswordModalOpened: true }) - } - handleClosePasswordModal = () => { - this.setState({ isPasswordModalOpened: false }) - } - handleChangePassword = (password: string) => { - window.requestIdleCallback(() => { - setEncryptionKey('accounts', password) - const hash = password ? bcrypt.hashSync(password, 8) : undefined - this.props.savePassword(hash) - }) - } - - handleInputChange = (key: string) => (value: string) => { - this.setState({ [key]: value }) - } - - render() { - const { nextStep, prevStep, t } = this.props - const { isPasswordModalOpened, isPasswordEnabled } = this.state - return ( - - - {t('onboarding:setPassword.title')} - {t('onboarding:setPassword.desc')} - - - - - {/* we might not be able to re-use what we have currently without modifications - the title and descriptions are not dynamic, we might need deffirent size as well */} - {isPasswordModalOpened && ( - - )} - nextStep()} style={{ padding: 15 }}> - - - - - - ) - } -} - -export default SetPassword +// // @flow +// +// import React, { PureComponent } from 'react' +// import bcrypt from 'bcryptjs' +// +// import { setEncryptionKey } from 'helpers/db' +// +// import Box from 'components/base/Box' +// import Button from 'components/base/Button' +// +// import IconSetPassword from 'icons/onboarding/SetPassword' +// import PasswordModal from 'components/SettingsPage/PasswordModal' +// import OnboardingFooter from '../OnboardingFooter' +// +// import type { StepProps } from '..' +// +// import { Title, Description } from '../helperComponents' +// +// type State = { +// isPasswordModalOpened: boolean, +// isPasswordEnabled: boolean, +// } +// +// class SetPassword extends PureComponent { +// state = { +// isPasswordModalOpened: false, +// isPasswordEnabled: false, +// } +// +// handleOpenPasswordModal = () => { +// this.setState({ isPasswordModalOpened: true }) +// } +// handleClosePasswordModal = () => { +// this.setState({ isPasswordModalOpened: false }) +// } +// handleChangePassword = (password: string) => { +// window.requestIdleCallback(() => { +// setEncryptionKey('accounts', password) +// const hash = password ? bcrypt.hashSync(password, 8) : undefined +// this.props.savePassword(hash) +// }) +// } +// +// handleInputChange = (key: string) => (value: string) => { +// this.setState({ [key]: value }) +// } +// +// render() { +// const { nextStep, prevStep, t } = this.props +// const { isPasswordModalOpened, isPasswordEnabled } = this.state +// return ( +// +// +// {t('onboarding:setPassword.title')} +// {t('onboarding:setPassword.desc')} +// +// +// +// +// {/* we might not be able to re-use what we have currently without modifications +// the title and descriptions are not dynamic, we might need deffirent size as well */} +// {isPasswordModalOpened && ( +// +// )} +// nextStep()} style={{ padding: 15 }}> +// +// +// +// +// +// ) +// } +// } +// +// export default SetPassword diff --git a/src/components/Onboarding/steps/WriteSeed.js b/src/components/Onboarding/steps/WriteSeed.js index d7378458..21828931 100644 --- a/src/components/Onboarding/steps/WriteSeed.js +++ b/src/components/Onboarding/steps/WriteSeed.js @@ -60,7 +60,7 @@ export default (props: StepProps) => { {t('onboarding:writeSeed.title')} - {t('onboarding:writeSeed.desc')} + {t('onboarding:writeSeed.desc')} diff --git a/src/components/base/InputPassword/index.js b/src/components/base/InputPassword/index.js index 84bc6656..f7c83865 100644 --- a/src/components/base/InputPassword/index.js +++ b/src/components/base/InputPassword/index.js @@ -106,7 +106,7 @@ class InputPassword extends PureComponent { {withStrength && ( - {[0, 1, 2, 3, 4].map(v => ( + {[0, 1, 2].map(v => (