Meriadec Pillet
7 years ago
committed by
GitHub
GitHub
14 changed files with 399 additions and 271 deletions
@ -1,93 +1,154 @@ |
|||
// UNTIL IS NEEDED SET PASSWORD STEP IS COMMENTED OUT
|
|||
|
|||
// // @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
|
|||
// @flow
|
|||
|
|||
import React, { PureComponent, Fragment } from 'react' |
|||
import bcrypt from 'bcryptjs' |
|||
import { colors, radii } from 'styles/theme' |
|||
import styled from 'styled-components' |
|||
|
|||
import { setEncryptionKey } from 'helpers/db' |
|||
|
|||
import Box from 'components/base/Box' |
|||
import Button from 'components/base/Button' |
|||
|
|||
import IconChevronRight from 'icons/ChevronRight' |
|||
|
|||
import PasswordForm from '../../SettingsPage/PasswordForm' |
|||
import type { StepProps } from '..' |
|||
|
|||
import { Title, Description, DisclaimerBox } from '../helperComponents' |
|||
|
|||
type State = { |
|||
currentPassword: string, |
|||
newPassword: string, |
|||
confirmPassword: string, |
|||
incorrectPassword: boolean, |
|||
} |
|||
|
|||
const INITIAL_STATE = { |
|||
currentPassword: '', |
|||
newPassword: '', |
|||
confirmPassword: '', |
|||
incorrectPassword: false, |
|||
} |
|||
|
|||
class SetPassword extends PureComponent<StepProps, State> { |
|||
state = INITIAL_STATE |
|||
|
|||
handleSave = (e: SyntheticEvent<HTMLFormElement>) => { |
|||
if (e) { |
|||
e.preventDefault() |
|||
} |
|||
if (!this.isValid()) { |
|||
return |
|||
} |
|||
const { newPassword } = this.state |
|||
const { nextStep, savePassword } = this.props |
|||
|
|||
setEncryptionKey('accounts', newPassword) |
|||
const hash = newPassword ? bcrypt.hashSync(newPassword, 8) : undefined |
|||
savePassword(hash) |
|||
this.handleReset() |
|||
nextStep() |
|||
} |
|||
|
|||
handleInputChange = (key: string) => (value: string) => { |
|||
if (this.state.incorrectPassword) { |
|||
this.setState({ incorrectPassword: false }) |
|||
} |
|||
this.setState({ [key]: value }) |
|||
} |
|||
|
|||
handleReset = () => this.setState(INITIAL_STATE) |
|||
|
|||
isValid = () => { |
|||
const { newPassword, confirmPassword } = this.state |
|||
return newPassword === confirmPassword |
|||
} |
|||
|
|||
render() { |
|||
const { nextStep, prevStep, t, settings } = this.props |
|||
const { newPassword, currentPassword, incorrectPassword, confirmPassword } = this.state |
|||
|
|||
const isPasswordEnabled = settings.password.isEnabled === true |
|||
|
|||
const disclaimerNotes = [ |
|||
{ |
|||
key: 'note1', |
|||
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />, |
|||
desc: t('onboarding:setPassword.disclaimer.note1'), |
|||
}, |
|||
{ |
|||
key: 'note2', |
|||
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />, |
|||
desc: t('onboarding:setPassword.disclaimer.note2'), |
|||
}, |
|||
{ |
|||
key: 'note3', |
|||
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />, |
|||
desc: t('onboarding:setPassword.disclaimer.note3'), |
|||
}, |
|||
] |
|||
|
|||
return ( |
|||
<Box sticky pt={50}> |
|||
<Box grow alignItems="center" justify="center"> |
|||
<Fragment> |
|||
<Box mb={3} alignItems="center"> |
|||
<Title>{t('onboarding:setPassword.title')}</Title> |
|||
<Description style={{ maxWidth: 620 }}> |
|||
{t('onboarding:setPassword.desc')} |
|||
</Description> |
|||
</Box> |
|||
<Box align="center" mt={2}> |
|||
<PasswordForm |
|||
onSubmit={this.handleSave} |
|||
isPasswordEnabled={isPasswordEnabled} |
|||
newPassword={newPassword} |
|||
currentPassword={currentPassword} |
|||
confirmPassword={confirmPassword} |
|||
incorrectPassword={incorrectPassword} |
|||
isValid={this.isValid} |
|||
onChange={this.handleInputChange} |
|||
t={t} |
|||
/> |
|||
|
|||
<DisclaimerBox mt={7} disclaimerNotes={disclaimerNotes} /> |
|||
</Box> |
|||
</Fragment> |
|||
</Box> |
|||
|
|||
<CustomFooter> |
|||
<Button padded outlineGrey onClick={() => prevStep()}> |
|||
{t('common:back')} |
|||
</Button> |
|||
<Box horizontal ml="auto"> |
|||
<Button padded disabled={false} onClick={() => nextStep()} mx={2}> |
|||
{t('common:skipThisStep')} |
|||
</Button> |
|||
<Button |
|||
padded |
|||
onClick={this.handleSave} |
|||
disabled={!this.isValid() || !newPassword.length || !confirmPassword.length} |
|||
primary |
|||
> |
|||
{t('common:continue')} |
|||
</Button> |
|||
</Box> |
|||
</CustomFooter> |
|||
</Box> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default SetPassword |
|||
|
|||
const CustomFooter = styled(Box).attrs({ |
|||
px: 5, |
|||
py: 3, |
|||
horizontal: true, |
|||
align: 'center', |
|||
})` |
|||
border-top: 1px solid ${p => p.theme.colors.lightFog}; |
|||
border-bottom-left-radius: ${radii[1]}px; |
|||
border-bottom-right-radius: ${radii[1]}px; |
|||
` |
|||
|
|||
@ -0,0 +1,89 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent } from 'react' |
|||
|
|||
import Box from 'components/base/Box' |
|||
import InputPassword from 'components/base/InputPassword' |
|||
import Label from 'components/base/Label' |
|||
|
|||
import type { T } from 'types/common' |
|||
|
|||
type Props = { |
|||
t: T, |
|||
isPasswordEnabled: boolean, |
|||
currentPassword: string, |
|||
newPassword: string, |
|||
confirmPassword: string, |
|||
incorrectPassword: boolean, |
|||
onSubmit: Function, |
|||
isValid: () => boolean, |
|||
onChange: Function, |
|||
} |
|||
|
|||
class PasswordForm extends PureComponent<Props> { |
|||
render() { |
|||
const { |
|||
t, |
|||
isPasswordEnabled, |
|||
currentPassword, |
|||
newPassword, |
|||
incorrectPassword, |
|||
confirmPassword, |
|||
isValid, |
|||
onChange, |
|||
onSubmit, |
|||
} = this.props |
|||
// TODO: adjust design to separate 3 fields
|
|||
return ( |
|||
<form onSubmit={onSubmit}> |
|||
<Box px={7} mt={4} flow={3}> |
|||
{isPasswordEnabled && ( |
|||
<Box flow={1} mb={5}> |
|||
<Label htmlFor="currentPassword"> |
|||
{t('password:inputFields.currentPassword.label')} |
|||
</Label> |
|||
<InputPassword |
|||
autoFocus |
|||
placeholder={t('password:inputFields.currentPassword.placeholder')} |
|||
id="currentPassword" |
|||
onChange={onChange('currentPassword')} |
|||
value={currentPassword} |
|||
error={incorrectPassword && t('password:errorMessageIncorrectPassword')} |
|||
/> |
|||
</Box> |
|||
)} |
|||
<Box flow={1}> |
|||
<Label htmlFor="newPassword">{t('password:inputFields.newPassword.label')}</Label> |
|||
<InputPassword |
|||
style={{ mt: 4, width: 240 }} |
|||
autoFocus={!isPasswordEnabled} |
|||
placeholder={t('password:inputFields.newPassword.placeholder')} |
|||
id="newPassword" |
|||
onChange={onChange('newPassword')} |
|||
value={newPassword} |
|||
/> |
|||
</Box> |
|||
<Box flow={1}> |
|||
<Label htmlFor="confirmPassword"> |
|||
{t('password:inputFields.confirmPassword.label')} |
|||
</Label> |
|||
<InputPassword |
|||
style={{ width: 240 }} |
|||
placeholder={t('password:inputFields.confirmPassword.placeholder')} |
|||
id="confirmPassword" |
|||
onChange={onChange('confirmPassword')} |
|||
value={confirmPassword} |
|||
error={ |
|||
!isValid() && |
|||
confirmPassword.length > 0 && |
|||
t('password:errorMessageNotMatchingPassword') |
|||
} |
|||
/> |
|||
</Box> |
|||
</Box> |
|||
</form> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default PasswordForm |
|||
Loading…
Reference in new issue