Browse Source

comment out password step, genuine check wip

master
NastiaS 7 years ago
committed by Gaëtan Renaudeau
parent
commit
ebca76829e
  1. 17
      src/components/EnsureDeviceApp/index.js
  2. 3
      src/components/Onboarding/helperComponents.js
  3. 32
      src/components/Onboarding/index.js
  4. 67
      src/components/Onboarding/steps/Analytics.js
  5. 4
      src/components/Onboarding/steps/GenuineCheck.js
  6. 2
      src/components/Onboarding/steps/SelectDevice.js
  7. 182
      src/components/Onboarding/steps/SetPassword.js
  8. 2
      src/components/Onboarding/steps/WriteSeed.js
  9. 2
      src/components/base/InputPassword/index.js
  10. 19
      src/reducers/onboarding.js
  11. 12
      static/i18n/en/onboarding.yml

17
src/components/EnsureDeviceApp/index.js

@ -11,16 +11,17 @@ import type { State as StoreState } from 'reducers/index'
import getAddress from 'commands/getAddress' import getAddress from 'commands/getAddress'
type OwnProps = { type OwnProps = {
currency: ?CryptoCurrency, currency?: ?CryptoCurrency,
deviceSelected: ?Device, deviceSelected: ?Device,
withGenuineCheck: boolean, withGenuineCheck?: boolean,
account: ?Account, account?: ?Account,
onStatusChange?: (DeviceStatus, AppStatus, ?string) => void, onStatusChange?: (DeviceStatus, AppStatus, ?string) => void,
onGenuineCheck: (isGenuine: boolean) => void, onGenuineCheck?: (isGenuine: boolean) => void,
// TODO prefer children function // TODO prefer children function
render?: ({ render?: ({
appStatus: AppStatus, appStatus: AppStatus,
currency: CryptoCurrency, genuineCheckStatus: GenuineCheckStatus,
currency: ?CryptoCurrency,
devices: Device[], devices: Device[],
deviceSelected: ?Device, deviceSelected: ?Device,
deviceStatus: DeviceStatus, deviceStatus: DeviceStatus,
@ -36,10 +37,13 @@ type DeviceStatus = 'unconnected' | 'connected'
type AppStatus = 'success' | 'fail' | 'progress' type AppStatus = 'success' | 'fail' | 'progress'
type GenuineCheckStatus = 'success' | 'fail' | 'progress'
type State = { type State = {
deviceStatus: DeviceStatus, deviceStatus: DeviceStatus,
appStatus: AppStatus, appStatus: AppStatus,
errorMessage: ?string, errorMessage: ?string,
genuineCheckStatus: GenuineCheckStatus,
} }
const mapStateToProps = (state: StoreState) => ({ const mapStateToProps = (state: StoreState) => ({
@ -51,6 +55,7 @@ class EnsureDeviceApp extends PureComponent<Props, State> {
appStatus: 'progress', appStatus: 'progress',
deviceStatus: this.props.deviceSelected ? 'connected' : 'unconnected', deviceStatus: this.props.deviceSelected ? 'connected' : 'unconnected',
errorMessage: null, errorMessage: null,
genuineCheckStatus: 'progress',
} }
componentDidMount() { componentDidMount() {
@ -159,7 +164,7 @@ class EnsureDeviceApp extends PureComponent<Props, State> {
await sleep(1) await sleep(1)
if (!this._unmounted) { if (!this._unmounted) {
this.setState({ genuineCheckStatus: 'success' }) this.setState({ genuineCheckStatus: 'success' })
this.props.onGenuineCheck(true) this.props.onGenuineCheck && this.props.onGenuineCheck(true)
} }
} }

3
src/components/Onboarding/helperComponents.js

@ -16,8 +16,6 @@ export const Title = styled(Box).attrs({
})`` })``
export const Description = styled(Box).attrs({ export const Description = styled(Box).attrs({
width: 714,
height: 48,
ff: 'Museo Sans|Light', ff: 'Museo Sans|Light',
fontSize: 5, fontSize: 5,
lineHeight: 1.5, lineHeight: 1.5,
@ -25,6 +23,7 @@ export const Description = styled(Box).attrs({
color: 'grey', color: 'grey',
})` })`
margin: 10px auto 25px; margin: 10px auto 25px;
max-width: 550px;
` `
export const Inner = styled(Box).attrs({ export const Inner = styled(Box).attrs({
horizontal: true, horizontal: true,

32
src/components/Onboarding/index.js

@ -19,8 +19,7 @@ import {
} from 'reducers/onboarding' } from 'reducers/onboarding'
import { getCurrentDevice } from 'reducers/devices' 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' import Box from 'components/base/Box'
@ -31,7 +30,8 @@ import SelectDevice from './steps/SelectDevice'
import SelectPIN from './steps/SelectPIN' import SelectPIN from './steps/SelectPIN'
import WriteSeed from './steps/WriteSeed' import WriteSeed from './steps/WriteSeed'
import GenuineCheck from './steps/GenuineCheck' 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 Analytics from './steps/Analytics'
import Finish from './steps/Finish' import Finish from './steps/Finish'
@ -41,7 +41,7 @@ const STEPS = {
selectPIN: SelectPIN, selectPIN: SelectPIN,
writeSeed: WriteSeed, writeSeed: WriteSeed,
genuineCheck: GenuineCheck, genuineCheck: GenuineCheck,
setPassword: SetPassword, // setPassword: SetPassword,
analytics: Analytics, analytics: Analytics,
finish: Finish, finish: Finish,
start: Start, start: Start,
@ -58,7 +58,7 @@ const mapDispatchToProps = {
nextStep, nextStep,
prevStep, prevStep,
jumpStep, jumpStep,
unlock, // unlock,
} }
type Props = { type Props = {
@ -80,7 +80,7 @@ export type StepProps = {
nextStep: Function, nextStep: Function,
jumpStep: Function, jumpStep: Function,
finish: Function, finish: Function,
savePassword: Function, // savePassword: Function,
getDeviceInfo: Function, getDeviceInfo: Function,
setGenuineCheckFail: Function, setGenuineCheckFail: Function,
isLedgerNano: Function, isLedgerNano: Function,
@ -89,15 +89,15 @@ export type StepProps = {
class Onboarding extends PureComponent<Props> { class Onboarding extends PureComponent<Props> {
getDeviceInfo = () => this.props.getCurrentDevice getDeviceInfo = () => this.props.getCurrentDevice
finish = () => this.props.saveSettings({ hasCompletedOnboarding: true }) finish = () => this.props.saveSettings({ hasCompletedOnboarding: true })
savePassword = hash => { // savePassword = hash => {
this.props.saveSettings({ // this.props.saveSettings({
password: { // password: {
isEnabled: hash !== undefined, // isEnabled: hash !== undefined,
value: hash, // value: hash,
}, // },
}) // })
this.props.unlock() // this.props.unlock()
} // }
render() { render() {
const { hasCompletedOnboarding, onboarding, prevStep, nextStep, jumpStep, t } = this.props const { hasCompletedOnboarding, onboarding, prevStep, nextStep, jumpStep, t } = this.props
@ -122,7 +122,7 @@ class Onboarding extends PureComponent<Props> {
nextStep, nextStep,
jumpStep, jumpStep,
finish: this.finish, finish: this.finish,
savePassword: this.savePassword, // savePassword: this.savePassword,
getDeviceInfo: this.getDeviceInfo, getDeviceInfo: this.getDeviceInfo,
} }

67
src/components/Onboarding/steps/Analytics.js

@ -4,7 +4,6 @@ import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import Box from 'components/base/Box' import Box from 'components/base/Box'
import IconAnalytics from 'icons/onboarding/Analytics'
import CheckBox from 'components/base/CheckBox' import CheckBox from 'components/base/CheckBox'
import { Title, Description } from '../helperComponents' import { Title, Description } from '../helperComponents'
import OnboardingFooter from '../OnboardingFooter' import OnboardingFooter from '../OnboardingFooter'
@ -17,25 +16,31 @@ export default (props: StepProps) => {
<Box sticky pt={150}> <Box sticky pt={150}>
<Box grow alignItems="center"> <Box grow alignItems="center">
<Title>{t('onboarding:analytics.title')}</Title> <Title>{t('onboarding:analytics.title')}</Title>
<Description style={{ maxWidth: 714 }}>{t('onboarding:analytics.desc')}</Description> <Description>{t('onboarding:analytics.desc')}</Description>
<DeviceIcon style={{ padding: 15 }}>
<IconAnalytics /> <Box mt={5}>
</DeviceIcon> <Container>
<Box horizontal flow={2} align="center"> <Box justify="center">
<CheckBox isChecked={false} /> <Box horizontal>
<AnalyticsText> <AnalyticsTitle>{t('onboarding:analytics.shareDiagnostics.title')}</AnalyticsTitle>
This is a long text, please replace it with the final wording once its done. </Box>
<br /> <AnalyticsText>{t('onboarding:analytics.shareDiagnostics.desc')}</AnalyticsText>
Lorem ipsum dolor amet ledger lorem dolor ipsum amet </Box>
</AnalyticsText> <Box alignItems="center" horizontal mx={5}>
</Box> <CheckBox isChecked={false} />
<Box horizontal flow={2} align="center"> </Box>
<CheckBox isChecked={false} /> </Container>
<AnalyticsText> <Container>
This is a long text, please replace it with the final wording once its done. <Box justify="center">
<br /> <Box horizontal>
Lorem ipsum dolor amet ledger lorem dolor ipsum amet <AnalyticsTitle>{t('onboarding:analytics.shareDiagnostics.title')}</AnalyticsTitle>
</AnalyticsText> </Box>
<AnalyticsText>{t('onboarding:analytics.shareDiagnostics.desc')}</AnalyticsText>
</Box>
<Box alignItems="center" horizontal mx={5}>
<CheckBox isChecked={false} />
</Box>
</Container>
</Box> </Box>
</Box> </Box>
<OnboardingFooter <OnboardingFooter
@ -52,17 +57,23 @@ export default (props: StepProps) => {
export const AnalyticsText = styled(Box).attrs({ export const AnalyticsText = styled(Box).attrs({
ff: 'Open Sans|Regular', ff: 'Open Sans|Regular',
fontSize: 4, fontSize: 3,
textAlign: 'left', textAlign: 'left',
color: 'smoke', color: 'smoke',
})` })`
margin: 10px auto 25px; max-width: 450px;
padding-left: 10px; `
export const AnalyticsTitle = styled(Box).attrs({
ff: 'Open Sans|SemiBold',
fontSize: 4,
textAlign: 'left',
})`
margin-bottom: 5px;
` `
const DeviceIcon = styled(Box).attrs({ const Container = styled(Box).attrs({
alignItems: 'center', horizontal: true,
justifyContent: 'center', p: 5,
color: 'graphite',
})` })`
width: 55px; max-height: 90px;
width: 620px;
` `

4
src/components/Onboarding/steps/GenuineCheck.js

@ -118,7 +118,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
<Box sticky pt={150}> <Box sticky pt={150}>
<Box grow alignItems="center"> <Box grow alignItems="center">
<Title>{t('onboarding:genuineCheck.title')}</Title> <Title>{t('onboarding:genuineCheck.title')}</Title>
<Description style={{ maxWidth: 536 }}>{t('onboarding:genuineCheck.desc')}</Description> <Description>{t('onboarding:genuineCheck.desc')}</Description>
<Box mt={5}> <Box mt={5}>
<CardWrapper> <CardWrapper>
<Box justify="center"> <Box justify="center">
@ -291,7 +291,7 @@ const CardWrapper = styled(Card).attrs({
p: 5, p: 5,
})` })`
max-height: 97px; max-height: 97px;
min-width: 620px; width: 620px;
border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`}; border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`};
pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')}; pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')};
background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)}; background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)};

2
src/components/Onboarding/steps/SelectDevice.js

@ -28,7 +28,7 @@ class SelectDevice extends PureComponent<StepProps, {}> {
<Box sticky pt={150}> <Box sticky pt={150}>
<Box grow alignItems="center"> <Box grow alignItems="center">
<Title>{t('onboarding:selectDevice.title')}</Title> <Title>{t('onboarding:selectDevice.title')}</Title>
<Description style={{ maxWidth: 536 }}>{t('onboarding:selectDevice.desc')}</Description> <Description>{t('onboarding:selectDevice.desc')}</Description>
<Box> <Box>
<Inner> <Inner>
<DeviceContainer <DeviceContainer

182
src/components/Onboarding/steps/SetPassword.js

@ -1,91 +1,93 @@
// @flow // UNTIL IS NEEDED SET PASSWORD STEP IS COMMENTED OUT
import React, { PureComponent } from 'react' // // @flow
import bcrypt from 'bcryptjs' //
// import React, { PureComponent } from 'react'
import { setEncryptionKey } from 'helpers/db' // import bcrypt from 'bcryptjs'
//
import Box from 'components/base/Box' // import { setEncryptionKey } from 'helpers/db'
import Button from 'components/base/Button' //
// import Box from 'components/base/Box'
import IconSetPassword from 'icons/onboarding/SetPassword' // import Button from 'components/base/Button'
import PasswordModal from 'components/SettingsPage/PasswordModal' //
import OnboardingFooter from '../OnboardingFooter' // import IconSetPassword from 'icons/onboarding/SetPassword'
// import PasswordModal from 'components/SettingsPage/PasswordModal'
import type { StepProps } from '..' // import OnboardingFooter from '../OnboardingFooter'
//
import { Title, Description } from '../helperComponents' // import type { StepProps } from '..'
//
type State = { // import { Title, Description } from '../helperComponents'
isPasswordModalOpened: boolean, //
isPasswordEnabled: boolean, // type State = {
} // isPasswordModalOpened: boolean,
// isPasswordEnabled: boolean,
class SetPassword extends PureComponent<StepProps, State> { // }
state = { //
isPasswordModalOpened: false, // class SetPassword extends PureComponent<StepProps, State> {
isPasswordEnabled: false, // state = {
} // isPasswordModalOpened: false,
// isPasswordEnabled: false,
handleOpenPasswordModal = () => { // }
this.setState({ isPasswordModalOpened: true }) //
} // handleOpenPasswordModal = () => {
handleClosePasswordModal = () => { // this.setState({ isPasswordModalOpened: true })
this.setState({ isPasswordModalOpened: false }) // }
} // handleClosePasswordModal = () => {
handleChangePassword = (password: string) => { // this.setState({ isPasswordModalOpened: false })
window.requestIdleCallback(() => { // }
setEncryptionKey('accounts', password) // handleChangePassword = (password: string) => {
const hash = password ? bcrypt.hashSync(password, 8) : undefined // window.requestIdleCallback(() => {
this.props.savePassword(hash) // setEncryptionKey('accounts', password)
}) // const hash = password ? bcrypt.hashSync(password, 8) : undefined
} // this.props.savePassword(hash)
// })
handleInputChange = (key: string) => (value: string) => { // }
this.setState({ [key]: value }) //
} // handleInputChange = (key: string) => (value: string) => {
// this.setState({ [key]: value })
render() { // }
const { nextStep, prevStep, t } = this.props //
const { isPasswordModalOpened, isPasswordEnabled } = this.state // render() {
return ( // const { nextStep, prevStep, t } = this.props
<Box sticky pt={150}> // const { isPasswordModalOpened, isPasswordEnabled } = this.state
<Box grow alignItems="center"> // return (
<Title>{t('onboarding:setPassword.title')}</Title> // <Box sticky pt={150}>
<Description style={{ maxWidth: 714 }}>{t('onboarding:setPassword.desc')}</Description> // <Box grow alignItems="center">
<IconSetPassword /> // <Title>{t('onboarding:setPassword.title')}</Title>
<Box style={{ paddingTop: 35 }}> // <Description>{t('onboarding:setPassword.desc')}</Description>
<Button small primary onClick={() => this.handleOpenPasswordModal()}> // <IconSetPassword />
Set Password // <Box style={{ paddingTop: 35 }}>
</Button> // <Button small primary onClick={() => this.handleOpenPasswordModal()}>
</Box> // Set Password
{/* we might not be able to re-use what we have currently without modifications // </Button>
the title and descriptions are not dynamic, we might need deffirent size as well */} // </Box>
{isPasswordModalOpened && ( // {/* we might not be able to re-use what we have currently without modifications
<PasswordModal // the title and descriptions are not dynamic, we might need deffirent size as well */}
t={t} // {isPasswordModalOpened && (
isOpened={isPasswordModalOpened} // <PasswordModal
onClose={this.handleClosePasswordModal} // t={t}
onChangePassword={this.handleChangePassword} // isOpened={isPasswordModalOpened}
isPasswordEnabled={isPasswordEnabled} // onClose={this.handleClosePasswordModal}
currentPasswordHash="" // onChangePassword={this.handleChangePassword}
/> // isPasswordEnabled={isPasswordEnabled}
)} // currentPasswordHash=""
<Box onClick={() => nextStep()} style={{ padding: 15 }}> // />
<Button>Skip this step</Button> // )}
</Box> // <Box onClick={() => nextStep()} style={{ padding: 15 }}>
</Box> // <Button>Skip this step</Button>
<OnboardingFooter // </Box>
horizontal // </Box>
align="center" // <OnboardingFooter
flow={2} // horizontal
t={t} // align="center"
nextStep={nextStep} // flow={2}
prevStep={prevStep} // t={t}
/> // nextStep={nextStep}
</Box> // prevStep={prevStep}
) // />
} // </Box>
} // )
// }
export default SetPassword // }
//
// export default SetPassword

2
src/components/Onboarding/steps/WriteSeed.js

@ -60,7 +60,7 @@ export default (props: StepProps) => {
<Box grow alignItems="center"> <Box grow alignItems="center">
<Box align="center" mb={5}> <Box align="center" mb={5}>
<Title>{t('onboarding:writeSeed.title')}</Title> <Title>{t('onboarding:writeSeed.title')}</Title>
<Description style={{ maxWidth: 714 }}>{t('onboarding:writeSeed.desc')}</Description> <Description>{t('onboarding:writeSeed.desc')}</Description>
</Box> </Box>
<Box align="center"> <Box align="center">
<Inner style={{ width: 760 }}> <Inner style={{ width: 760 }}>

2
src/components/base/InputPassword/index.js

@ -106,7 +106,7 @@ class InputPassword extends PureComponent<Props, State> {
{withStrength && ( {withStrength && (
<Fragment> <Fragment>
<Box flow={1} horizontal> <Box flow={1} horizontal>
{[0, 1, 2, 3, 4].map(v => ( {[0, 1, 2].map(v => (
<Strength <Strength
key={v} key={v}
warning={passwordStrength <= 1} warning={passwordStrength <= 1}

19
src/reducers/onboarding.js

@ -81,15 +81,16 @@ const state: OnboardingState = {
showBreadcrumb: true, showBreadcrumb: true,
}, },
}, },
{ // UNTIL IS NEEDED SET PASSWORD IS COMMENTED OUT
name: 'setPassword', // {
label: 'Set Password', // name: 'setPassword',
options: { // label: 'Set Password',
showFooter: false, // options: {
showBackground: true, // showFooter: false,
showBreadcrumb: true, // showBackground: true,
}, // showBreadcrumb: true,
}, // },
// },
{ {
name: 'analytics', name: 'analytics',
label: 'Analytics & Bug report', label: 'Analytics & Bug report',

12
static/i18n/en/onboarding.yml

@ -77,11 +77,17 @@ genuineCheck:
title: Something is wrong with your Ledger Blue title: Something is wrong with your Ledger Blue
desc: A problem occurred with your Ledger Blue. Contact Ledger Support to get assistance or go back to the security check. desc: A problem occurred with your Ledger Blue. Contact Ledger Support to get assistance or go back to the security check.
setPassword: setPassword:
title: This is the title of the screen. 1 line is the maximum title: Choose a password to securely access Ledger Live
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 desc: Use uppercase, lowercase, special characters (#, @, !, ?) and numbers for a stronger password.
analytics: analytics:
title: This is the title of the screen. 1 line is the maximum title: Help Ledger to improve its products and services
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 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
shareDiagnostics:
title: Share analytics
desc: Help Ledger improve its products and services by automatically sending diagnostics and usage data.
shareData:
title: Share analytics
desc: Help Ledger improve its products and services by automatically sending diagnostics and usage data.
finish: finish:
title: This is the title of the screen. 1 line is the maximum title: This is the title of the screen. 1 line is the maximum
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 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

Loading…
Cancel
Save