NastiaS
7 years ago
13 changed files with 293 additions and 113 deletions
@ -0,0 +1,15 @@ |
|||
// @flow
|
|||
|
|||
import styled from 'styled-components' |
|||
import { radii } from 'styles/theme' |
|||
|
|||
import Box from 'components/base/Box' |
|||
|
|||
export const OnboardingFooter = styled(Box).attrs({ |
|||
px: 5, |
|||
py: 3, |
|||
})` |
|||
border-top: 2px solid ${p => p.theme.colors.lightGrey}; |
|||
border-bottom-left-radius: ${radii[1]}px; |
|||
border-bottom-right-radius: ${radii[1]}px; |
|||
` |
|||
@ -1,37 +1,85 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import React, { PureComponent } from 'react' |
|||
|
|||
import Box from 'components/base/Box' |
|||
import Button from 'components/base/Button' |
|||
import { ModalFooter } from 'components/base/Modal/index' |
|||
import { Title, Description } from '../helperComponents' |
|||
|
|||
import { Title, Description, OnboardingFooter } from '../helperComponents' |
|||
|
|||
import type { StepProps } from '..' |
|||
|
|||
export default (props: StepProps) => { |
|||
const { nextStep, prevStep, jumpStep } = props |
|||
return ( |
|||
<Box sticky alignItems="center" justifyContent="center"> |
|||
<Box align="center"> |
|||
<Title>This is CHOOSE PIN screen. 1 line is the maximum</Title> |
|||
<Description> |
|||
This is a long text, please replace it with the final wording once it’s done. |
|||
<br /> |
|||
Lorem ipsum dolor amet ledger lorem dolor ipsum amet |
|||
</Description> |
|||
</Box> |
|||
<ModalFooter horizontal align="center" justify="flex-end" flow={2}> |
|||
<Button small outline onClick={() => prevStep()}> |
|||
Go Back |
|||
</Button> |
|||
<Button big danger onClick={() => jumpStep('init')}> |
|||
Test JUMP! |
|||
</Button> |
|||
<Button small primary onClick={() => nextStep()}> |
|||
Continue |
|||
type State = { |
|||
currentDevice: { |
|||
manufacturer: string, |
|||
release: number, |
|||
}, |
|||
showDeviceInfo: boolean, |
|||
showError: boolean, |
|||
} |
|||
|
|||
// temp checking the release version of the device if connected
|
|||
|
|||
class GenuineCheck extends PureComponent<StepProps, State> { |
|||
state = { |
|||
showDeviceInfo: false, |
|||
currentDevice: { manufacturer: 'Unknown', release: 0 }, |
|||
showError: false, |
|||
} |
|||
|
|||
handleCheckDevice = () => { |
|||
const currentDeviceInfo = this.props.getDeviceInfo() |
|||
if (currentDeviceInfo) { |
|||
this.setState({ showError: false, currentDevice: currentDeviceInfo, showDeviceInfo: true }) |
|||
} else { |
|||
this.setState({ showError: true }) |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
const { nextStep, prevStep, jumpStep } = this.props |
|||
const { showDeviceInfo, currentDevice, showError } = this.state |
|||
|
|||
return ( |
|||
<Box sticky alignItems="center" justifyContent="center"> |
|||
<Box align="center"> |
|||
<Title>This is GENUINE CHECK screen. 1 line is the maximum</Title> |
|||
<Description> |
|||
This is a long text, please replace it with the final wording once it’s done. |
|||
<br /> |
|||
Lorem ipsum dolor amet ledger lorem dolor ipsum amet |
|||
</Description> |
|||
</Box> |
|||
<Button big primary onClick={() => this.handleCheckDevice()}> |
|||
Check your device! |
|||
</Button> |
|||
</ModalFooter> |
|||
</Box> |
|||
) |
|||
{showDeviceInfo && ( |
|||
<Box> |
|||
<Description> |
|||
The manufacturer is <b>{currentDevice.manufacturer}</b> |
|||
The release number is <b>{currentDevice.release}</b> |
|||
</Description> |
|||
</Box> |
|||
)} |
|||
{showError && ( |
|||
<Box> |
|||
<Description color="red">Connect your device please</Description> |
|||
</Box> |
|||
)} |
|||
<OnboardingFooter horizontal align="center" justify="flex-end" flow={2}> |
|||
<Button small outline onClick={() => prevStep()}> |
|||
Go Back |
|||
</Button> |
|||
<Button big danger onClick={() => jumpStep('init')}> |
|||
Test JUMP! |
|||
</Button> |
|||
<Button small primary onClick={() => nextStep()}> |
|||
Continue |
|||
</Button> |
|||
</OnboardingFooter> |
|||
</Box> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default GenuineCheck |
|||
|
|||
@ -1,47 +1,93 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
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 { ModalFooter } from 'components/base/Modal/index' |
|||
import Text from 'components/base/Text' |
|||
|
|||
import IconLock from 'icons/Lock' |
|||
import IconSetPassword from 'icons/LockScreen' |
|||
import PasswordModal from 'components/SettingsPage/PasswordModal' |
|||
|
|||
import type { StepProps } from '..' |
|||
import { Title, Description } from '../helperComponents' |
|||
|
|||
export default (props: StepProps) => { |
|||
const handleSetPassword = () => { |
|||
console.warn('SET PASSWORD TRIGGER') // eslint-disable-line
|
|||
import { Title, Description, OnboardingFooter } from '../helperComponents' |
|||
|
|||
type State = { |
|||
isPasswordModalOpened: boolean, |
|||
isPasswordEnabled: boolean, |
|||
} |
|||
|
|||
class SetPassword extends PureComponent<StepProps, State> { |
|||
state = { |
|||
isPasswordModalOpened: false, |
|||
isPasswordEnabled: false, |
|||
} |
|||
|
|||
handleOpenPasswordModal = () => { |
|||
this.setState({ isPasswordModalOpened: true }) |
|||
} |
|||
handleClosePasswordModal = () => { |
|||
this.setState({ isPasswordModalOpened: false }) |
|||
} |
|||
const { nextStep, prevStep } = props |
|||
return ( |
|||
<Box sticky alignItems="center" justifyContent="center"> |
|||
<Box align="center"> |
|||
<Title>This is SET PASSWORD screen. 1 line is the maximum</Title> |
|||
<Description> |
|||
This is a long text, please replace it with the final wording once it’s done. |
|||
<br /> |
|||
Lorem ipsum dolor amet ledger lorem dolor ipsum amet |
|||
</Description> |
|||
<IconLock size={30} /> |
|||
<Button small primary onClick={() => handleSetPassword()}> |
|||
Set Password |
|||
</Button> |
|||
<Box onClick={() => nextStep()} style={{ padding: 15 }}> |
|||
<Text color="smoke">I do not want to set it up</Text> |
|||
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 ( |
|||
<Box sticky alignItems="center" justifyContent="center"> |
|||
<Box align="center"> |
|||
<Title>This is SET PASSWORD screen. 1 line is the maximum</Title> |
|||
<Description> |
|||
This is a long text, please replace it with the final wording once it’s done. |
|||
<br /> |
|||
Lorem ipsum dolor amet ledger lorem dolor ipsum amet |
|||
</Description> |
|||
<IconSetPassword size={136} /> |
|||
<Button small primary onClick={() => this.handleOpenPasswordModal()}> |
|||
Set Password |
|||
</Button> |
|||
{/* 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 && ( |
|||
<PasswordModal |
|||
t={t} |
|||
isOpened={isPasswordModalOpened} |
|||
onClose={this.handleClosePasswordModal} |
|||
onChangePassword={this.handleChangePassword} |
|||
isPasswordEnabled={isPasswordEnabled} |
|||
currentPasswordHash="" |
|||
/> |
|||
)} |
|||
<Box onClick={() => nextStep()} style={{ padding: 15 }}> |
|||
<Text color="smoke">I do not want to set it up</Text> |
|||
</Box> |
|||
</Box> |
|||
<OnboardingFooter horizontal flow={2}> |
|||
<Button small outline onClick={() => prevStep()}> |
|||
Go Back |
|||
</Button> |
|||
<Button small primary onClick={() => nextStep()}> |
|||
Continue |
|||
</Button> |
|||
</OnboardingFooter> |
|||
</Box> |
|||
|
|||
<ModalFooter horizontal align="center" justify="flex-end" flow={2}> |
|||
<Button small outline onClick={() => prevStep()}> |
|||
Go Back |
|||
</Button> |
|||
<Button small primary onClick={() => nextStep()}> |
|||
Continue |
|||
</Button> |
|||
</ModalFooter> |
|||
</Box> |
|||
) |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default SetPassword |
|||
|
|||
@ -0,0 +1,27 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
|
|||
import Box from 'components/base/Box' |
|||
import Button from 'components/base/Button' |
|||
|
|||
import LedgerLogo from 'icons/LockScreen' |
|||
import type { StepProps } from '..' |
|||
import { Title, Description } from '../helperComponents' |
|||
|
|||
export default (props: StepProps) => { |
|||
const { jumpStep } = props |
|||
return ( |
|||
<Box sticky alignItems="center" justifyContent="center"> |
|||
<Box align="center" alignItems="center"> |
|||
<LedgerLogo size={136} /> |
|||
<Title>Ledger Live</Title> |
|||
<Title>Welcome to the new Ledger Live Desktop app.</Title> |
|||
<Description>Let’s get started!</Description> |
|||
<Button small primary onClick={() => jumpStep('init')}> |
|||
Get Started |
|||
</Button> |
|||
</Box> |
|||
</Box> |
|||
) |
|||
} |
|||
Loading…
Reference in new issue