diff --git a/src/components/IsUnlocked.js b/src/components/IsUnlocked.js index 113f55e7..95ffec9b 100644 --- a/src/components/IsUnlocked.js +++ b/src/components/IsUnlocked.js @@ -4,10 +4,14 @@ import bcrypt from 'bcryptjs' import React, { Component } from 'react' import { connect } from 'react-redux' import { compose } from 'redux' +import styled from 'styled-components' import { translate } from 'react-i18next' import type { Account } from '@ledgerhq/wallet-common/lib/types' import type { Settings, T } from 'types/common' +import IconLockScreen from 'icons/LockScreen' + +import { ErrorMessageInput } from 'components/base/Input' import get from 'lodash/get' @@ -43,6 +47,7 @@ type Props = { } type State = { inputValue: InputValue, + incorrectPassword: boolean, } const mapStateToProps = state => ({ @@ -61,8 +66,27 @@ const defaultState = { inputValue: { password: '', }, + incorrectPassword: false, } +export const PageTitle = styled(Box).attrs({ + width: 152, + height: 27, + ff: 'Museo Sans|Regular', + fontSize: 7, + color: 'dark', +})`` + +export const LockScreenDesc = styled(Box).attrs({ + width: 340, + height: 36, + ff: 'Open Sans|Regular', + fontSize: 4, + textAlign: 'center', + color: 'smoke', +})` + margin: 10px auto 25px; +` class IsUnlocked extends Component { state = { ...defaultState, @@ -121,6 +145,8 @@ class IsUnlocked extends Component { this.setState({ ...defaultState, }) + } else { + this.setState({ incorrectPassword: true }) } } @@ -133,22 +159,36 @@ class IsUnlocked extends Component { _input: ?HTMLInputElement render() { - const { inputValue } = this.state + const { inputValue, incorrectPassword } = this.state const { isLocked, t } = this.props if (isLocked) { return (
- - (this._input = n)} - placeholder={t('common:password')} - type="password" - onChange={this.handleChangeInput('password')} - value={inputValue.password} - /> + + + {t('common:lockScreen.title')} + + {t('common:lockScreen.subTitle')} +
+ {t('common:lockScreen.description')} +
+ + (this._input = n)} + placeholder={t('common:lockScreen.inputPlaceholder')} + type="password" + onChange={this.handleChangeInput('password')} + value={inputValue.password} + /> + {incorrectPassword && ( + + {t('password:errorMessageIncorrectPassword')} + + )} +
diff --git a/src/icons/LockScreen.js b/src/icons/LockScreen.js new file mode 100644 index 00000000..3d3d3ebb --- /dev/null +++ b/src/icons/LockScreen.js @@ -0,0 +1,42 @@ +// @flow + +/* this icon is a placeholder for now */ + +import React from 'react' + +export default ({ size, ...p }: { size: number }) => ( + + + + + + + + + + + + + + + + + + + +) diff --git a/static/i18n/en/common.yml b/static/i18n/en/common.yml index fc1c8766..c9b90494 100644 --- a/static/i18n/en/common.yml +++ b/static/i18n/en/common.yml @@ -18,3 +18,8 @@ retry: Retry close: Close eastern: Eastern western: Western +lockScreen: + title: Welcome Back + subTitle: Your application is locked + description: Please enter your password to continue + inputPlaceholder: Type your password