From 5b15bcb251f460857affcdc3ebcfb8d7a57b68a8 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Fri, 1 Sep 2017 14:23:08 +0200
Subject: [PATCH 1/2] Make secondPassphraseInput type='password'

---
 src/components/secondPassphraseInput/secondPassphraseInput.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/secondPassphraseInput/secondPassphraseInput.js b/src/components/secondPassphraseInput/secondPassphraseInput.js
index 63b23c892..a85e73972 100644
--- a/src/components/secondPassphraseInput/secondPassphraseInput.js
+++ b/src/components/secondPassphraseInput/secondPassphraseInput.js
@@ -22,6 +22,7 @@ class SecondPassphraseInput extends React.Component {
   render() {
     return (this.props.hasSecondPassphrase ?
       <Input label='Second Passphrase' required={true}
+        type='password'
         className='second-passphrase'
         error={this.props.error}
         value={this.props.value}

From a75c3c3af8ca4252146f4f33c014230878d1ebeb Mon Sep 17 00:00:00 2001
From: reyraa <ali@lightcurve.io>
Date: Mon, 4 Sep 2017 11:27:26 +0200
Subject: [PATCH 2/2] Add view pass functionlity

---
 .../secondPassphraseInput.css                 | 18 ++++++++++
 .../secondPassphraseInput.js                  | 35 +++++++++++++++----
 2 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/components/secondPassphraseInput/secondPassphraseInput.css

diff --git a/src/components/secondPassphraseInput/secondPassphraseInput.css b/src/components/secondPassphraseInput/secondPassphraseInput.css
new file mode 100644
index 000000000..34b5e3138
--- /dev/null
+++ b/src/components/secondPassphraseInput/secondPassphraseInput.css
@@ -0,0 +1,18 @@
+.wrapper {
+  position: relative;
+}
+
+.checkbox {
+  visibility: hidden;
+  position: hidden;
+}
+
+.label {
+  position: absolute;
+  right: 0;
+  bottom: 50%;
+  transform: translateY(50%);
+  line-height: 24px;
+  height: 24px;
+  cursor: pointer;
+}
diff --git a/src/components/secondPassphraseInput/secondPassphraseInput.js b/src/components/secondPassphraseInput/secondPassphraseInput.js
index a85e73972..47855a517 100644
--- a/src/components/secondPassphraseInput/secondPassphraseInput.js
+++ b/src/components/secondPassphraseInput/secondPassphraseInput.js
@@ -1,8 +1,15 @@
 import React from 'react';
+import FontIcon from 'react-toolbox/lib/font_icon';
 import Input from 'react-toolbox/lib/input';
 import { isValidPassphrase } from '../../utils/passphrase';
+import styles from './secondPassphraseInput.css';
 
 class SecondPassphraseInput extends React.Component {
+  constructor() {
+    super();
+    this.state = { inputType: 'password' };
+  }
+
   componentDidMount() {
     if (this.props.hasSecondPassphrase) {
       this.props.onChange('');
@@ -19,14 +26,30 @@ class SecondPassphraseInput extends React.Component {
     this.props.onChange(value, error);
   }
 
+  setInputType(event) {
+    this.setState({ inputType: event.target.checked ? 'text' : 'password' });
+  }
+
   render() {
     return (this.props.hasSecondPassphrase ?
-      <Input label='Second Passphrase' required={true}
-        type='password'
-        className='second-passphrase'
-        error={this.props.error}
-        value={this.props.value}
-        onChange={this.handleValueChange.bind(this)} /> :
+      <div className={styles.wrapper}>
+        <Input
+          label='Second Passphrase'
+          required={true}
+          type={this.state.inputType}
+          className='second-passphrase'
+          error={this.props.error}
+          value={this.props.value}
+          onChange={this.handleValueChange.bind(this)} />
+        <label htmlFor='input-type' className={styles.label}>
+          <FontIcon value='remove_red_eye' />
+          <input
+            id='input-type'
+            className={styles.checkbox}
+            type={'checkbox'}
+            onChange={this.setInputType.bind(this)} />
+        </label>
+      </div> :
       null);
   }
 }