Merge branch 'master' into feature-send

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<Props, State> {
   state = {
     ...defaultState,
@@ -121,6 +145,8 @@ class IsUnlocked extends Component<Props, State> {
       this.setState({
         ...defaultState,
       })
+    } else {
+      this.setState({ incorrectPassword: true })
     }
   }
 
@@ -133,22 +159,36 @@ class IsUnlocked extends Component<Props, State> {
   _input: ?HTMLInputElement
 
   render() {
-    const { inputValue } = this.state
+    const { inputValue, incorrectPassword } = this.state
     const { isLocked, t } = this.props
 
     if (isLocked) {
       return (
         <Box sticky alignItems="center" justifyContent="center" onClick={this.handleFocusInput}>
           <form onSubmit={this.handleSubmit}>
-            <Box>
-              <InputPassword
-                autoFocus
-                innerRef={(n: any) => (this._input = n)}
-                placeholder={t('common:password')}
-                type="password"
-                onChange={this.handleChangeInput('password')}
-                value={inputValue.password}
-              />
+            <Box align="center">
+              <IconLockScreen size={136} />
+              <PageTitle>{t('common:lockScreen.title')}</PageTitle>
+              <LockScreenDesc>
+                {t('common:lockScreen.subTitle')}
+                <br />
+                {t('common:lockScreen.description')}
+              </LockScreenDesc>
+              <Box style={{ minWidth: 230 }}>
+                <InputPassword
+                  autoFocus
+                  innerRef={(n: any) => (this._input = n)}
+                  placeholder={t('common:lockScreen.inputPlaceholder')}
+                  type="password"
+                  onChange={this.handleChangeInput('password')}
+                  value={inputValue.password}
+                />
+                {incorrectPassword && (
+                  <ErrorMessageInput>
+                    {t('password:errorMessageIncorrectPassword')}
+                  </ErrorMessageInput>
+                )}
+              </Box>
             </Box>
           </form>
         </Box>

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 }) => (
+  <svg width={size} height={size} {...p}>
+    <defs>
+      <filter
+        id="a"
+        width="178.9%"
+        height="178.9%"
+        x="-39.4%"
+        y="-37.2%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="11.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          result="shadowMatrixOuter1"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0787760417 0"
+        />
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+    </defs>
+    <g fill="none" fillRule="evenodd" filter="url(#a)" transform="translate(23 21)">
+      <rect width="90" height="90" fill="#FFF" rx="20" />
+      <path fill="#6490F1" d="M45 13.36c-17.475 0-31.64 14.165-31.64 31.64S27.524 76.64 45 76.64" />
+      <path fill="#142533" fillOpacity=".1" d="M13.36 45c0 17.475 14.165 31.64 31.64 31.64V45" />
+      <path
+        fill="#142533"
+        fillOpacity=".1"
+        d="M22.845 67.59c5.708 5.598 13.528 9.05 22.155 9.05V45"
+      />
+    </g>
+  </svg>
+)

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