From 733489a71a87804e34c68f79e634e6fa48d906e2 Mon Sep 17 00:00:00 2001
From: Anastasia POUPENEY <amintz@admins-MacBook-Pro.local>
Date: Mon, 30 Apr 2018 10:19:24 +0200
Subject: [PATCH 1/3] lock screen design implementation

---
 src/components/IsUnlocked.js | 60 ++++++++++++++++++++++++++++++------
 src/icons/LockScreen.js      | 42 +++++++++++++++++++++++++
 static/i18n/en/common.yml    |  5 +++
 3 files changed, 97 insertions(+), 10 deletions(-)
 create mode 100644 src/icons/LockScreen.js

diff --git a/src/components/IsUnlocked.js b/src/components/IsUnlocked.js
index 113f55e7..39c68eb2 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: '152px',
+  height: '27px',
+  fontFamily: 'MuseoSans',
+  fontSize: '22px',
+  color: '#1d2028',
+})``
+
+export const LockScreenDesc = styled(Box).attrs({
+  width: '340px',
+  height: '36px',
+  fontFamily: 'OpenSans',
+  fontSize: '13px',
+  textAlign: 'center',
+  color: '#666',
+})`
+  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: '230px' }}>
+                <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>
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 }) => (
+  <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>
+)
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

From a21f8151fa66ebba1e25ecf95987f18ca6e28d69 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasia.poupeney@ledger.fr>
Date: Mon, 30 Apr 2018 12:23:40 +0200
Subject: [PATCH 2/3] minor fixes

---
 src/components/IsUnlocked.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/IsUnlocked.js b/src/components/IsUnlocked.js
index 39c68eb2..7b38f8a4 100644
--- a/src/components/IsUnlocked.js
+++ b/src/components/IsUnlocked.js
@@ -70,20 +70,20 @@ const defaultState = {
 }
 
 export const PageTitle = styled(Box).attrs({
-  width: '152px',
-  height: '27px',
-  fontFamily: 'MuseoSans',
-  fontSize: '22px',
-  color: '#1d2028',
+  width: 152,
+  height: 27,
+  ff: 'Museo Sans|Regular',
+  fontSize: 22,
+  color: 'dark',
 })``
 
 export const LockScreenDesc = styled(Box).attrs({
-  width: '340px',
-  height: '36px',
-  fontFamily: 'OpenSans',
-  fontSize: '13px',
+  width: 340,
+  height: 36,
+  ff: 'Open Sans|Regular',
+  fontSize: 13,
   textAlign: 'center',
-  color: '#666',
+  color: 'smoke',
 })`
   margin: 10px auto 25px;
 `
@@ -174,7 +174,7 @@ class IsUnlocked extends Component<Props, State> {
                 <br />
                 {t('common:lockScreen.description')}
               </LockScreenDesc>
-              <Box style={{ minWidth: '230px' }}>
+              <Box style={{ minWidth: 230 }}>
                 <InputPassword
                   autoFocus
                   innerRef={(n: any) => (this._input = n)}

From 64ee3ed28c5a5912668525d7401cd3e0643caf42 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasia.poupeney@ledger.fr>
Date: Mon, 30 Apr 2018 12:30:41 +0200
Subject: [PATCH 3/3] font size adjustms

---
 src/components/IsUnlocked.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/IsUnlocked.js b/src/components/IsUnlocked.js
index 7b38f8a4..95ffec9b 100644
--- a/src/components/IsUnlocked.js
+++ b/src/components/IsUnlocked.js
@@ -73,7 +73,7 @@ export const PageTitle = styled(Box).attrs({
   width: 152,
   height: 27,
   ff: 'Museo Sans|Regular',
-  fontSize: 22,
+  fontSize: 7,
   color: 'dark',
 })``
 
@@ -81,7 +81,7 @@ export const LockScreenDesc = styled(Box).attrs({
   width: 340,
   height: 36,
   ff: 'Open Sans|Regular',
-  fontSize: 13,
+  fontSize: 4,
   textAlign: 'center',
   color: 'smoke',
 })`