Login pin - WIP

react/src/actions/actionCreators.js

@@ -29,7 +29,8 @@ import {
   DISPLAY_COIND_DOWN_MODAL,
   DISPLAY_CLAIM_INTEREST_MODAL,
   START_INTERVAL,
-  STOP_INTERVAL
+  STOP_INTERVAL,
+  GET_PIN_LIST
 } from './storeType';
 import {
   logGuiHttp,
@@ -376,4 +377,11 @@ export function toggleClaimInterestModal(display) {
     type: DISPLAY_CLAIM_INTEREST_MODAL,
     displayClaimInterestModal: display,
   }
+}
+
+export function getPinList(pinList) {
+  return {
+    type: GET_PIN_LIST,
+    pinList: pinList
+  }
 }

react/src/actions/actions/pin.js

@@ -0,0 +1,110 @@
+import Config from '../../config';
+import { getDecryptedPassphrase, getPinList, triggerToaster } from "../actionCreators";
+import { iguanaWalletPassphrase } from "./walletAuth";
+
+export function encryptPassphrase(passphrase, key, pubKey) {
+  const payload = {
+    'string': passphrase,
+    'key': key,
+    'pubkey': pubKey
+  };
+
+  return dispatch => {
+    return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/encryptkey`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    })
+      .catch(function(error) {
+        console.log(error);
+        dispatch(
+          triggerToaster(
+            'encryptKey',
+            'Error',
+            'error'
+          )
+        );
+      })
+      .then(response => response.json())
+      .then(json => {
+        console.log('encrypt result', json);
+        dispatch(
+          triggerToaster(
+            'passphrase successfully encrypted',
+            'Success',
+            'success'
+          )
+        );
+      })
+  }
+}
+
+export function loginWithPin(key, pubKey) {
+  const payload = {
+    'key': key,
+    'pubkey': pubKey
+  };
+
+  return dispatch => {
+    return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/decryptkey`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    })
+      .catch(function(error) {
+        console.log(error);
+        dispatch(
+          triggerToaster(
+            'decryptKey',
+            'Error',
+            'error'
+          )
+        );
+      })
+      .then(response => response.json())
+      .then(json => {
+        console.log('decrypt result', json);
+        dispatch(iguanaWalletPassphrase(json.result));
+      })
+  }
+}
+
+export function loadPinList() {
+  return dispatch => {
+    return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/getpinlist`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    })
+      .catch(function(error) {
+        console.log(error);
+        dispatch(
+          triggerToaster(
+            'getPinList',
+            'Error',
+            'error'
+          )
+        );
+      })
+      .then(response => response.json())
+      .then(json => {
+        console.log('getpinlist result', json);
+        dispatch(
+          triggerToaster(
+            'getPinList',
+            'Success',
+            'success'
+          )
+        );
+
+        dispatch(
+          getPinList(json.result)
+        )
+      })
+  }
+}

react/src/actions/storeType.js

@@ -46,4 +46,5 @@ export const CLI = 'CLI';
 export const LOGOUT = 'LOGOUT';
 export const DISPLAY_COIND_DOWN_MODAL = 'DISPLAY_COIND_DOWN_MODAL';
 export const DISPLAY_LOGIN_SETTINGS_MODAL = 'DISPLAY_LOGIN_SETTINGS_MODAL';
-export const DISPLAY_CLAIM_INTEREST_MODAL = 'DISPLAY_CLAIM_INTEREST_MODAL';
+export const DISPLAY_CLAIM_INTEREST_MODAL = 'DISPLAY_CLAIM_INTEREST_MODAL';
+export const GET_PIN_LIST = 'GET_PIN_LIST';

react/src/components/app/app.js

@@ -5,6 +5,7 @@ import Main from '../main/main';
 
 function mapStateToProps(state) {
   return {
+    login: state.login,
     toaster: state.toaster,
     AddCoin: state.AddCoin,
     Main: state.Main,

react/src/components/login/login.js

@@ -17,6 +17,7 @@ import { PassPhraseGenerator } from '../../util/crypto/passphrasegenerator';
 import SwallModalRender from './swall-modal.render';
 import LoginRender from './login.render';
 import { translate } from '../../translate/translate';
+import { encryptPassphrase, loadPinList, loginWithPin } from "../../actions/actions/pin";
 
 const IGUNA_ACTIVE_HANDLE_TIMEOUT = 3000;
 const IGUNA_ACTIVE_COINS_TIMEOUT = 10000;
@@ -44,6 +45,10 @@ class Login extends React.Component {
       trimPassphraseTimer: null,
       displayLoginSettingsDropdown: false,
       displayLoginSettingsDropdownSection: null,
+      shouldEncryptPassword: false,
+      encryptKey: '',
+      decryptKey: '',
+      selectedPin: ''
     };
     this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this);
     this.updateRegisterConfirmPassPhraseInput = this.updateRegisterConfirmPassPhraseInput.bind(this);
@@ -57,6 +62,9 @@ class Login extends React.Component {
     this.execWalletCreate = this.execWalletCreate.bind(this);
     this.resizeLoginTextarea = this.resizeLoginTextarea.bind(this);
     this.toggleLoginSettingsDropdown = this.toggleLoginSettingsDropdown.bind(this);
+    this.updateEncryptKey = this.updateEncryptKey.bind(this);
+    this.updateDecryptKey = this.updateDecryptKey.bind(this);
+    this.loadPinList = this.loadPinList.bind(this);
   }
 
   // the setInterval handler for 'activeCoins'
@@ -96,6 +104,28 @@ class Login extends React.Component {
     });
   }
 
+  shouldEncryptPassword() {
+    return this.state.shouldEncryptPassword;
+  }
+
+  toggleShouldEncryptPassword() {
+    this.setState({
+      shouldEncryptPassword: !this.state.shouldEncryptPassword
+    });
+  }
+
+  updateEncryptKey(e) {
+    this.setState({
+      encryptKey: e.target.value
+    });
+  }
+
+  updateDecryptKey(e) {
+    this.setState({
+      decryptKey: e.target.value
+    });
+  }
+
   openSyncOnlyModal() {
     Store.dispatch(getSyncOnlyForks());
 
@@ -117,6 +147,7 @@ class Login extends React.Component {
 
   componentDidMount() {
     Store.dispatch(iguanaActiveHandle(true));
+    this.loadPinList();
   }
 
   toggleSeedInputVisibility() {
@@ -244,9 +275,30 @@ class Login extends React.Component {
       loginPassPhraseSeedType: null,
     });
 
-    Store.dispatch(
-      iguanaWalletPassphrase(this.state.loginPassphrase)
-    );
+    console.log('LOGIN SEED', this.state.shouldEncryptPassword, this.state.encryptKey);
+
+    if (this.state.shouldEncryptPassword) {
+      Store.dispatch(encryptPassphrase(this.state.loginPassphrase, this.state.encryptKey, 'blabla'));
+    }
+
+    console.log('selected pin', this.state.selectedPin);
+    if (this.state.selectedPin) {
+      Store.dispatch(loginWithPin(this.state.decryptKey, 'blabla'));
+    } else {
+      Store.dispatch(
+        iguanaWalletPassphrase(this.state.loginPassphrase)
+      );
+    }
+  }
+
+  loadPinList() {
+    Store.dispatch(loadPinList());
+  }
+
+  updateSelectedPin(e) {
+    this.setState({
+      selectedPin: e.target.value
+    });
   }
 
   getLoginPassPhraseSeedType(passPhrase) {

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

@@ -54,6 +54,9 @@ const LoginRender = function () {
             <h4 className="color-white">
               { translate('INDEX.WELCOME_LOGIN') }
             </h4>
+            { this.props.login.pinList.length > 0 &&
+             <span>You can login be entering a login seed or by selecting a pin</span>
+            }
             <div className="form-group form-material floating col-sm-12 horizontal-padding-0">
               <input
                 type="password"
@@ -83,6 +86,71 @@ const LoginRender = function () {
                 <div className="placeholder-label">{ this.state.loginPassPhraseSeedType }</div>
               </div>
             }
+
+            { this.state.loginPassphrase &&
+            <div className="row">
+              <div className="toggle-box vertical-padding-20 col-sm-3">
+                    <span className="pointer">
+                      <label className="switch">
+                        <input
+                          type="checkbox"
+                          checked={ this.shouldEncryptPassword() } />
+                        <div
+                          className="slider"
+                          onClick={ () => this.toggleShouldEncryptPassword() }></div>
+                      </label>
+                      <div
+                        className="toggle-label white"
+                        onClick={ () => this.toggleShouldEncryptPassword() }>
+                          { translate('LOGIN.ENCRYPT_PASSWORD') }
+                      </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>
+            </div>
+            }
+
+            <hr />
+
+            { 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 }
+                  onChange={ (event) => this.updateSelectedPin(event) }
+                  autoFocus>
+                  <option className="login-option" value="">{ translate('INDEX.SELECT') }</option>
+                  {this.props.login.pinList.map(function(pin) {
+                    return <option className="login-option" value={pin} key={pin}>{ pin }</option>
+                  })}
+                </select>
+              </div>
+              <div className="form-group form-material floating col-sm-4 padding-left-10 margin-top-20">
+                <input
+                  type="text"
+                  className="form-control"
+                  name="decryptKey"
+                  placeholder={ translate('LOGIN.DECRYPT_KEY') }
+                  disabled={ false }
+                  onChange={ this.updateDecryptKey }
+                  value={ this.state.decryptKey } />
+              </div>
+            </div>
+            }
+
             <button
               type="button"
               className="btn btn-primary btn-block"

react/src/components/login/login.scss

@@ -152,4 +152,9 @@ input[type="password"] {
   a {
     color: #fb8c00;
   }
+}
+
+option.login-option {
+  background-color: #757575;
+  color: #fff;
 }

react/src/reducers/index.js

@@ -11,10 +11,12 @@ import { Settings } from './settings';
 import { Interval } from './interval';
 import { SyncOnly } from './syncOnly';
 import { Errors } from './errors';
+import { login } from "./login";
 
 const appReducer = combineReducers({
   AddCoin,
   toaster,
+  login,
   Main,
   Dashboard,
   ActiveCoin,

react/src/reducers/login.js

@@ -0,0 +1,19 @@
+import {} from '../actions/storeType';
+import { GET_PIN_LIST } from "../actions/storeType";
+
+export function login(state = {
+  pinList: [],
+}, action) {
+  if (state === null) state = {toasts: []};
+
+  switch (action.type) {
+    case GET_PIN_LIST:
+      return Object.assign({}, state, {
+        pinList: action.pinList
+      });
+    default:
+      return state;
+  }
+}
+
+export default login;

react/src/translate/en.js

@@ -571,6 +571,9 @@ export const _lang = {
       'NXT_SEED': 'NXT',
       'SEED_COPIED': 'Seed copied',
       'SEED_SUCCESSFULLY_COPIED': 'The seed was successfully copied',
+      'ENCRYPT_PASSWORD': 'Encrypt password',
+      'ENCRYPT_KEY': 'Encrypt key',
+      'DECRYPT_KEY': 'Decrypt key'
     },
     'SIDEBAR': {
       'EDEX_MOTTO': 'Most Secure, Easy and Native Decentralised Exchange',