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
|
||||
|
|
||||
// // @flow
|
import React, { PureComponent, Fragment } from 'react' |
||||
//
|
import bcrypt from 'bcryptjs' |
||||
// import React, { PureComponent } from 'react'
|
import { colors, radii } from 'styles/theme' |
||||
// import bcrypt from 'bcryptjs'
|
import styled from 'styled-components' |
||||
//
|
|
||||
// import { setEncryptionKey } from 'helpers/db'
|
import { setEncryptionKey } from 'helpers/db' |
||||
//
|
|
||||
// import Box from 'components/base/Box'
|
import Box from 'components/base/Box' |
||||
// import Button from 'components/base/Button'
|
import Button from 'components/base/Button' |
||||
//
|
|
||||
// import IconSetPassword from 'icons/onboarding/SetPassword'
|
import IconChevronRight from 'icons/ChevronRight' |
||||
// import PasswordModal from 'components/SettingsPage/PasswordModal'
|
|
||||
// import OnboardingFooter from '../OnboardingFooter'
|
import PasswordForm from '../../SettingsPage/PasswordForm' |
||||
//
|
import type { StepProps } from '..' |
||||
// import type { StepProps } from '..'
|
|
||||
//
|
import { Title, Description, DisclaimerBox } from '../helperComponents' |
||||
// import { Title, Description } from '../helperComponents'
|
|
||||
//
|
type State = { |
||||
// type State = {
|
currentPassword: string, |
||||
// isPasswordModalOpened: boolean,
|
newPassword: string, |
||||
// isPasswordEnabled: boolean,
|
confirmPassword: string, |
||||
// }
|
incorrectPassword: boolean, |
||||
//
|
} |
||||
// class SetPassword extends PureComponent<StepProps, State> {
|
|
||||
// state = {
|
const INITIAL_STATE = { |
||||
// isPasswordModalOpened: false,
|
currentPassword: '', |
||||
// isPasswordEnabled: false,
|
newPassword: '', |
||||
// }
|
confirmPassword: '', |
||||
//
|
incorrectPassword: false, |
||||
// handleOpenPasswordModal = () => {
|
} |
||||
// this.setState({ isPasswordModalOpened: true })
|
|
||||
// }
|
class SetPassword extends PureComponent<StepProps, State> { |
||||
// handleClosePasswordModal = () => {
|
state = INITIAL_STATE |
||||
// this.setState({ isPasswordModalOpened: false })
|
|
||||
// }
|
handleSave = (e: SyntheticEvent<HTMLFormElement>) => { |
||||
// handleChangePassword = (password: string) => {
|
if (e) { |
||||
// window.requestIdleCallback(() => {
|
e.preventDefault() |
||||
// setEncryptionKey('accounts', password)
|
} |
||||
// const hash = password ? bcrypt.hashSync(password, 8) : undefined
|
if (!this.isValid()) { |
||||
// this.props.savePassword(hash)
|
return |
||||
// })
|
} |
||||
// }
|
const { newPassword } = this.state |
||||
//
|
const { nextStep, savePassword } = this.props |
||||
// handleInputChange = (key: string) => (value: string) => {
|
|
||||
// this.setState({ [key]: value })
|
setEncryptionKey('accounts', newPassword) |
||||
// }
|
const hash = newPassword ? bcrypt.hashSync(newPassword, 8) : undefined |
||||
//
|
savePassword(hash) |
||||
// render() {
|
this.handleReset() |
||||
// const { nextStep, prevStep, t } = this.props
|
nextStep() |
||||
// const { isPasswordModalOpened, isPasswordEnabled } = this.state
|
} |
||||
// return (
|
|
||||
// <Box sticky pt={150}>
|
handleInputChange = (key: string) => (value: string) => { |
||||
// <Box grow alignItems="center">
|
if (this.state.incorrectPassword) { |
||||
// <Title>{t('onboarding:setPassword.title')}</Title>
|
this.setState({ incorrectPassword: false }) |
||||
// <Description>{t('onboarding:setPassword.desc')}</Description>
|
} |
||||
// <IconSetPassword />
|
this.setState({ [key]: value }) |
||||
// <Box style={{ paddingTop: 35 }}>
|
} |
||||
// <Button small primary onClick={() => this.handleOpenPasswordModal()}>
|
|
||||
// Set Password
|
handleReset = () => this.setState(INITIAL_STATE) |
||||
// </Button>
|
|
||||
// </Box>
|
isValid = () => { |
||||
// {/* we might not be able to re-use what we have currently without modifications
|
const { newPassword, confirmPassword } = this.state |
||||
// the title and descriptions are not dynamic, we might need deffirent size as well */}
|
return newPassword === confirmPassword |
||||
// {isPasswordModalOpened && (
|
} |
||||
// <PasswordModal
|
|
||||
// t={t}
|
render() { |
||||
// isOpened={isPasswordModalOpened}
|
const { nextStep, prevStep, t, settings } = this.props |
||||
// onClose={this.handleClosePasswordModal}
|
const { newPassword, currentPassword, incorrectPassword, confirmPassword } = this.state |
||||
// onChangePassword={this.handleChangePassword}
|
|
||||
// isPasswordEnabled={isPasswordEnabled}
|
const isPasswordEnabled = settings.password.isEnabled === true |
||||
// currentPasswordHash=""
|
|
||||
// />
|
const disclaimerNotes = [ |
||||
// )}
|
{ |
||||
// <Box onClick={() => nextStep()} style={{ padding: 15 }}>
|
key: 'note1', |
||||
// <Button>Skip this step</Button>
|
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />, |
||||
// </Box>
|
desc: t('onboarding:setPassword.disclaimer.note1'), |
||||
// </Box>
|
}, |
||||
// <OnboardingFooter
|
{ |
||||
// horizontal
|
key: 'note2', |
||||
// align="center"
|
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />, |
||||
// flow={2}
|
desc: t('onboarding:setPassword.disclaimer.note2'), |
||||
// t={t}
|
}, |
||||
// nextStep={nextStep}
|
{ |
||||
// prevStep={prevStep}
|
key: 'note3', |
||||
// />
|
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />, |
||||
// </Box>
|
desc: t('onboarding:setPassword.disclaimer.note3'), |
||||
// )
|
}, |
||||
// }
|
] |
||||
// }
|
|
||||
//
|
return ( |
||||
// export default SetPassword
|
<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