Gaëtan Renaudeau
7 years ago
committed by
GitHub
GitHub
21 changed files with 797 additions and 530 deletions
@ -0,0 +1,71 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent } from 'react' |
|||
import { compose } from 'redux' |
|||
import { connect } from 'react-redux' |
|||
import { translate } from 'react-i18next' |
|||
|
|||
import type { T, Device } from 'types/common' |
|||
|
|||
import { getCurrentDevice } from 'reducers/devices' |
|||
|
|||
import DeviceConnect from 'components/DeviceConnect' |
|||
import EnsureDeviceApp from 'components/EnsureDeviceApp' |
|||
import Modal, { ModalBody, ModalTitle, ModalContent } from 'components/base/Modal' |
|||
|
|||
const mapStateToProps = state => ({ |
|||
currentDevice: getCurrentDevice(state), |
|||
}) |
|||
|
|||
type Props = { |
|||
t: T, |
|||
currentDevice: ?Device, |
|||
onGenuineCheck: (isGenuine: boolean) => void, |
|||
} |
|||
|
|||
type State = {} |
|||
|
|||
class GenuineCheck extends PureComponent<Props, State> { |
|||
renderBody = ({ onClose }) => { |
|||
const { t, currentDevice, onGenuineCheck } = this.props |
|||
|
|||
// TODO: use the real devices list. for now we force choosing only
|
|||
// the current device because we don't handle multi device in MVP
|
|||
const reducedDevicesList = currentDevice ? [currentDevice] : [] |
|||
|
|||
return ( |
|||
<ModalBody onClose={onClose}> |
|||
<ModalTitle>{t('genuinecheck:modal.title')}</ModalTitle> |
|||
<ModalContent> |
|||
<EnsureDeviceApp |
|||
deviceSelected={currentDevice} |
|||
withGenuineCheck |
|||
onGenuineCheck={onGenuineCheck} |
|||
onStatusChange={status => { |
|||
console.log(`status changed to ${status}`) |
|||
}} |
|||
render={({ appStatus, genuineCheckStatus, deviceSelected, errorMessage }) => ( |
|||
<DeviceConnect |
|||
appOpened={ |
|||
appStatus === 'success' ? 'success' : appStatus === 'fail' ? 'fail' : null |
|||
} |
|||
withGenuineCheck |
|||
genuineCheckStatus={genuineCheckStatus} |
|||
devices={reducedDevicesList} |
|||
deviceSelected={deviceSelected} |
|||
errorMessage={errorMessage} |
|||
/> |
|||
)} |
|||
/> |
|||
</ModalContent> |
|||
</ModalBody> |
|||
) |
|||
} |
|||
|
|||
render() { |
|||
const { ...props } = this.props |
|||
return <Modal {...props} render={({ onClose }) => this.renderBody({ onClose })} /> |
|||
} |
|||
} |
|||
|
|||
export default compose(connect(mapStateToProps), translate())(GenuineCheck) |
|||
@ -1,91 +1,93 @@ |
|||
// @flow
|
|||
// UNTIL IS NEEDED SET PASSWORD STEP IS COMMENTED OUT
|
|||
|
|||
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<StepProps, State> { |
|||
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 ( |
|||
<Box sticky pt={150}> |
|||
<Box grow alignItems="center"> |
|||
<Title>{t('onboarding:setPassword.title')}</Title> |
|||
<Description style={{ maxWidth: 714 }}>{t('onboarding:setPassword.desc')}</Description> |
|||
<IconSetPassword /> |
|||
<Box style={{ paddingTop: 35 }}> |
|||
<Button small primary onClick={() => this.handleOpenPasswordModal()}> |
|||
Set Password |
|||
</Button> |
|||
</Box> |
|||
{/* 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 }}> |
|||
<Button>Skip this step</Button> |
|||
</Box> |
|||
</Box> |
|||
<OnboardingFooter |
|||
horizontal |
|||
align="center" |
|||
flow={2} |
|||
t={t} |
|||
nextStep={nextStep} |
|||
prevStep={prevStep} |
|||
/> |
|||
</Box> |
|||
) |
|||
} |
|||
} |
|||
|
|||
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<StepProps, State> {
|
|||
// 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 (
|
|||
// <Box sticky pt={150}>
|
|||
// <Box grow alignItems="center">
|
|||
// <Title>{t('onboarding:setPassword.title')}</Title>
|
|||
// <Description>{t('onboarding:setPassword.desc')}</Description>
|
|||
// <IconSetPassword />
|
|||
// <Box style={{ paddingTop: 35 }}>
|
|||
// <Button small primary onClick={() => this.handleOpenPasswordModal()}>
|
|||
// Set Password
|
|||
// </Button>
|
|||
// </Box>
|
|||
// {/* 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 }}>
|
|||
// <Button>Skip this step</Button>
|
|||
// </Box>
|
|||
// </Box>
|
|||
// <OnboardingFooter
|
|||
// horizontal
|
|||
// align="center"
|
|||
// flow={2}
|
|||
// t={t}
|
|||
// nextStep={nextStep}
|
|||
// prevStep={prevStep}
|
|||
// />
|
|||
// </Box>
|
|||
// )
|
|||
// }
|
|||
// }
|
|||
//
|
|||
// export default SetPassword
|
|||
|
|||
@ -0,0 +1,13 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
|
|||
const path = ( |
|||
<path d="m8.261 2.252a1.11 1.11 0 0 0-1.408 0l-6.772 5.545a0.224 0.224 0 0 0-0.03 0.313l0.563 0.69a0.224 0.224 0 0 0 0.314 0.03l0.408-0.333v5.502c0 0.245 0.2 0.445 0.445 0.445h4.667c0.122 0 0.222-0.1 0.222-0.222v-3.556h1.778v3.556c0 0.122 0.1 0.222 0.222 0.222h4.666c0.245 0 0.445-0.2 0.445-0.445v-5.505l0.408 0.333a0.224 0.224 0 0 0 0.314-0.03l0.564-0.69a0.227 0.227 0 0 0-0.036-0.31l-6.771-5.545zm4.184 10.858h-2.667v-3.555c0-0.122-0.1-0.222-0.222-0.222h-4c-0.122 0-0.222 0.1-0.222 0.222v3.555h-2.667v-5.708l4.747-3.889c0.08-0.066 0.2-0.066 0.28 0l4.748 3.89v5.707z"/> |
|||
) |
|||
|
|||
export default ({ size, ...p }: { size: number }) => ( |
|||
<svg viewBox="0 0 15.111 12.444" height={size} width={size} {...p}> |
|||
{path} |
|||
</svg> |
|||
) |
|||
@ -0,0 +1,47 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
|
|||
export default () => ( |
|||
<svg width="92" height="188"> |
|||
<defs> |
|||
<linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"> |
|||
<stop offset="0%" /> |
|||
<stop offset="100%" stopColor="#FFF" /> |
|||
</linearGradient> |
|||
</defs> |
|||
<g fill="none" fillRule="evenodd"> |
|||
<path |
|||
stroke="#1D2027" |
|||
strokeWidth="2" |
|||
d="M37 120.644a1 1 0 0 0-1 1v26.225a5 5 0 0 0 5 5h8.486a5 5 0 0 0 5-5v-26.225a1 1 0 0 0-1-1H37z" |
|||
/> |
|||
<path stroke="#142533" strokeWidth="2" d="M42.208 153.253v10.929h6.436v-10.93h-6.436z" /> |
|||
<path |
|||
stroke="#1D2027" |
|||
strokeWidth="2" |
|||
d="M39.713 120.577h11.255l-.082-6.977a1 1 0 0 0-1-.988h-9.267a1 1 0 0 0-.988 1.012l.082 6.953z" |
|||
/> |
|||
<path |
|||
fill="url(#a)" |
|||
d="M6.836 53.925h1.616v22.65H6.836v-22.65zm5.657 0h1.616v22.65h-1.616v-22.65z" |
|||
transform="translate(35 111)" |
|||
/> |
|||
<path |
|||
fill="#1D2028" |
|||
d="M88.556 17.556c0-1.105.671-2 1.5-2 .828 0 1.5.895 1.5 2v6c0 1.104-.672 2-1.5 2-.829 0-1.5-.896-1.5-2" |
|||
/> |
|||
<rect |
|||
width="88" |
|||
height="118.635" |
|||
x="1" |
|||
y="1" |
|||
fill="#FCEAEC" |
|||
stroke="#1D2027" |
|||
strokeWidth="2" |
|||
rx="5.44" |
|||
/> |
|||
<rect width="59" height="88.615" x="15.5" y="16.5" fill="#FFF" stroke="#EA2E49" rx="4.08" /> |
|||
</g> |
|||
</svg> |
|||
) |
|||
@ -0,0 +1,47 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
|
|||
export default () => ( |
|||
<svg width="92" height="188"> |
|||
<defs> |
|||
<linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"> |
|||
<stop offset="0%" /> |
|||
<stop offset="100%" stopColor="#FFF" /> |
|||
</linearGradient> |
|||
</defs> |
|||
<g fill="none" fillRule="evenodd"> |
|||
<path |
|||
stroke="#1D2027" |
|||
strokeWidth="2" |
|||
d="M37 120.644a1 1 0 0 0-1 1v26.225a5 5 0 0 0 5 5h8.486a5 5 0 0 0 5-5v-26.225a1 1 0 0 0-1-1H37z" |
|||
/> |
|||
<path stroke="#142533" strokeWidth="2" d="M42.208 153.253v10.929h6.436v-10.93h-6.436z" /> |
|||
<path |
|||
stroke="#1D2027" |
|||
strokeWidth="2" |
|||
d="M39.713 120.577h11.255l-.082-6.977a1 1 0 0 0-1-.988h-9.267a1 1 0 0 0-.988 1.012l.082 6.953z" |
|||
/> |
|||
<path |
|||
fill="url(#a)" |
|||
d="M6.836 53.925h1.616v22.65H6.836v-22.65zm5.657 0h1.616v22.65h-1.616v-22.65z" |
|||
transform="translate(35 111)" |
|||
/> |
|||
<path |
|||
fill="#1D2028" |
|||
d="M88.556 17.556c0-1.105.671-2 1.5-2 .828 0 1.5.895 1.5 2v6c0 1.104-.672 2-1.5 2-.829 0-1.5-.896-1.5-2" |
|||
/> |
|||
<rect |
|||
width="88" |
|||
height="118.635" |
|||
x="1" |
|||
y="1" |
|||
fill="#EFF3FD" |
|||
stroke="#1D2027" |
|||
strokeWidth="2" |
|||
rx="5.44" |
|||
/> |
|||
<rect width="59" height="88.615" x="15.5" y="16.5" fill="#FFF" stroke="#6490F1" rx="4.08" /> |
|||
</g> |
|||
</svg> |
|||
) |
|||
@ -0,0 +1,2 @@ |
|||
modal: |
|||
title: Genuine check, bro |
|||
Loading…
Reference in new issue