pin visual improvements

react/src/components/login/login.js

@@ -45,8 +45,9 @@ class Login extends React.Component {
       trimPassphraseTimer: null,
       displayLoginSettingsDropdown: false,
       displayLoginSettingsDropdownSection: null,
-      shouldEncryptPassword: false,
+      shouldEncryptSeed: false,
       encryptKey: '',
+      pubKey: '',
       decryptKey: '',
       selectedPin: ''
     };
@@ -63,6 +64,7 @@ class Login extends React.Component {
     this.resizeLoginTextarea = this.resizeLoginTextarea.bind(this);
     this.toggleLoginSettingsDropdown = this.toggleLoginSettingsDropdown.bind(this);
     this.updateEncryptKey = this.updateEncryptKey.bind(this);
+    this.updatePubKey = this.updatePubKey.bind(this);
     this.updateDecryptKey = this.updateDecryptKey.bind(this);
     this.loadPinList = this.loadPinList.bind(this);
   }
@@ -104,13 +106,13 @@ class Login extends React.Component {
     });
   }
 
-  shouldEncryptPassword() {
-    return this.state.shouldEncryptPassword;
+  shouldEncryptSeed() {
+    return this.state.shouldEncryptSeed;
   }
 
-  toggleShouldEncryptPassword() {
+  toggleShouldEncryptSeed() {
     this.setState({
-      shouldEncryptPassword: !this.state.shouldEncryptPassword
+      shouldEncryptSeed: !this.state.shouldEncryptSeed
     });
   }
 
@@ -120,6 +122,13 @@ class Login extends React.Component {
     });
   }
 
+  updatePubKey(e) {
+    this.setState({
+      pubKey: e.target.value
+    });
+  }
+
+
   updateDecryptKey(e) {
     this.setState({
       decryptKey: e.target.value
@@ -173,6 +182,9 @@ class Login extends React.Component {
   }
 
   componentWillReceiveProps(props) {
+    if (props.login.pinList === "no pins") {
+      props.login.pinList = [];
+    }
     if (props &&
         props.Main &&
         props.Main.isLoggedIn) {
@@ -275,15 +287,12 @@ class Login extends React.Component {
       loginPassPhraseSeedType: null,
     });
 
-    console.log('LOGIN SEED', this.state.shouldEncryptPassword, this.state.encryptKey);
-
-    if (this.state.shouldEncryptPassword) {
-      Store.dispatch(encryptPassphrase(this.state.loginPassphrase, this.state.encryptKey, 'blabla'));
+    if (this.state.shouldEncryptSeed) {
+      Store.dispatch(encryptPassphrase(this.state.loginPassphrase, this.state.encryptKey, this.state.pubKey));
     }
 
-    console.log('selected pin', this.state.selectedPin);
     if (this.state.selectedPin) {
-      Store.dispatch(loginWithPin(this.state.decryptKey, 'blabla'));
+      Store.dispatch(loginWithPin(this.state.decryptKey, this.state.selectedPin));
     } else {
       Store.dispatch(
         iguanaWalletPassphrase(this.state.loginPassphrase)

react/src/components/login/login.render.js

@@ -89,44 +89,67 @@ const LoginRender = function () {
 
             { this.state.loginPassphrase &&
             <div className="row">
-              <div className="toggle-box vertical-padding-20 col-sm-3">
+              <div className="toggle-box padding-top-30 col-sm-3">
                     <span className="pointer">
                       <label className="switch">
                         <input
                           type="checkbox"
-                          checked={ this.shouldEncryptPassword() } />
+                          checked={ this.shouldEncryptSeed() } />
                         <div
                           className="slider"
-                          onClick={ () => this.toggleShouldEncryptPassword() }></div>
+                          onClick={ () => this.toggleShouldEncryptSeed() }></div>
                       </label>
                       <div
                         className="toggle-label white"
-                        onClick={ () => this.toggleShouldEncryptPassword() }>
-                          { translate('LOGIN.ENCRYPT_PASSWORD') }
+                        onClick={ () => this.toggleShouldEncryptSeed() }>
+                          { translate('LOGIN.ENCRYPT_SEED') }
                       </div>
                     </span>
               </div>
 
-              <div className="form-group form-material floating col-sm-8 horizontal-padding-0">
-                <input
-                  type="text"
-                  className="form-control"
-                  name="encryptKey"
-                  placeholder={ translate('LOGIN.ENCRYPT_KEY') }
-                  disabled={ !this.shouldEncryptPassword() }
-                  onChange={ this.updateEncryptKey }
-                  value={ this.state.encryptKey } />
+              <div className="col-sm-9">
+                <div className="form-group form-material floating horizontal-padding-0 margin-5 margin-right-0">
+                  <input
+                    type="text"
+                    className="form-control"
+                    name="encryptKey"
+                    placeholder={ translate('LOGIN.ENCRYPT_KEY') }
+                    onChange={ this.updateEncryptKey }
+                    value={ this.state.encryptKey }
+                    disabled={ !this.shouldEncryptSeed() } />
+                </div>
+
+                <div className="form-group form-material floating horizontal-padding-0 margin-5 margin-right">
+                  <input
+                    type="text"
+                    className="form-control"
+                    name="pubKey"
+                    placeholder={ translate('LOGIN.PUBKEY') }
+                    onChange={ this.updatePubKey }
+                    value={ this.state.pubKey }
+                    disabled={ !this.shouldEncryptSeed() } />
+                </div>
               </div>
             </div>
             }
 
-            <hr />
-
+            { this.props.login.pinList.length > 0 &&
+            <div className="row margin-top-30">
+              <div className="col-xs-12">
+                <div style={{width: "10%", float: "left", marginLeft: "38%"}}>
+                  <hr/>
+                </div>
+                <div style={{width: "4%", float: "left", marginTop: "10px"}}><span>OR</span></div>
+                <div style={{width: "10%", float: "left"}}>
+                  <hr/>
+                </div>
+              </div>
+            </div>
+            }
             { this.props.login.pinList.length > 0 &&
             <div className="row">
               <div className="form-group form-material floating col-sm-8 padding-left-10 horizontal-padding-0">
                 <select
-                  placeholder="Pls"
                   className="form-control form-material"
                   name="storedPins"
                   value={ this.state.selectedPin }
@@ -153,7 +176,7 @@ const LoginRender = function () {
 
             <button
               type="button"
-              className="btn btn-primary btn-block"
+              className="btn btn-primary btn-block margin-top-20"
               onClick={ this.loginSeed }
               disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
             <div className="form-group form-material floating">

react/src/translate/en.js

@@ -575,7 +575,8 @@ export const _lang = {
       'NXT_SEED': 'NXT',
       'SEED_COPIED': 'Seed copied',
       'SEED_SUCCESSFULLY_COPIED': 'The seed was successfully copied',
-      'ENCRYPT_PASSWORD': 'Encrypt password',
+      'ENCRYPT_SEED': 'Encrypt login seed',
+      'PUBKEY': 'pubkey',
       'ENCRYPT_KEY': 'Encrypt key',
       'DECRYPT_KEY': 'Decrypt key'
     },