Merge pull request #171 from SuperNETorg/login-pin

Login pin

react/src/actions/actionCreators.js

@@ -29,6 +29,7 @@ import {
   DISPLAY_CLAIM_INTEREST_MODAL,
   START_INTERVAL,
   STOP_INTERVAL,
+  GET_PIN_LIST,
   DASHBOARD_SYNC_ONLY_UPDATE,
   DISPLAY_IMPORT_KEY_MODAL,
 } from './storeType';
@@ -345,6 +346,13 @@ export function toggleClaimInterestModal(display) {
   }
 }
 
+export function getPinList(pinList) {
+  return {
+    type: GET_PIN_LIST,
+    pinList: pinList,
+  }
+}
+
 export function skipFullDashboardUpdate(skip) {
   return {
     type: DASHBOARD_SYNC_ONLY_UPDATE,

react/src/actions/actions/pin.js

@@ -0,0 +1,106 @@
+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 => {
+      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 => {
+      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 => {
+      dispatch(
+        triggerToaster(
+          'getPinList',
+          'Success',
+          'success'
+        )
+      );
+      dispatch(
+        getPinList(json.result)
+      )
+    })
+  }
+}

react/src/actions/storeType.js

@@ -46,4 +46,5 @@ 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 GET_PIN_LIST = 'GET_PIN_LIST';
 export const DISPLAY_IMPORT_KEY_MODAL = 'DISPLAY_IMPORT_KEY_MODAL';

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

@@ -18,6 +18,11 @@ 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;
@@ -45,6 +50,11 @@ class Login extends React.Component {
       trimPassphraseTimer: null,
       displayLoginSettingsDropdown: false,
       displayLoginSettingsDropdownSection: null,
+      shouldEncryptSeed: false,
+      encryptKey: '',
+      pubKey: '',
+      decryptKey: '',
+      selectedPin: '',
       isExperimentalOn: false,
     };
     this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this);
@@ -59,6 +69,10 @@ 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.updatePubKey = this.updatePubKey.bind(this);
+    this.updateDecryptKey = this.updateDecryptKey.bind(this);
+    this.loadPinList = this.loadPinList.bind(this);
   }
 
   // the setInterval handler for 'activeCoins'
@@ -98,6 +112,35 @@ class Login extends React.Component {
     });
   }
 
+  shouldEncryptSeed() {
+    return this.state.shouldEncryptSeed;
+  }
+
+  toggleShouldEncryptSeed() {
+    this.setState({
+      shouldEncryptSeed: !this.state.shouldEncryptSeed
+    });
+  }
+
+  updateEncryptKey(e) {
+    this.setState({
+      encryptKey: e.target.value
+    });
+  }
+
+  updatePubKey(e) {
+    this.setState({
+      pubKey: e.target.value
+    });
+  }
+
+
+  updateDecryptKey(e) {
+    this.setState({
+      decryptKey: e.target.value
+    });
+  }
+
   openSyncOnlyModal() {
     Store.dispatch(getSyncOnlyForks());
 
@@ -119,6 +162,8 @@ class Login extends React.Component {
 
   componentDidMount() {
     Store.dispatch(iguanaActiveHandle(true));
+    // this.loadPinList();
+
     let appConfig;
 
     try {
@@ -153,6 +198,9 @@ class Login extends React.Component {
   }
 
   componentWillReceiveProps(props) {
+    if (props.Login.pinList === 'no pins') {
+      props.Login.pinList = [];
+    }
     if (props &&
         props.Main &&
         props.Main.isLoggedIn) {
@@ -255,9 +303,27 @@ class Login extends React.Component {
       loginPassPhraseSeedType: null,
     });
 
-    Store.dispatch(
-      iguanaWalletPassphrase(this.state.loginPassphrase)
-    );
+    if (this.state.shouldEncryptSeed) {
+      Store.dispatch(encryptPassphrase(this.state.loginPassphrase, this.state.encryptKey, this.state.pubKey));
+    }
+
+    if (this.state.selectedPin) {
+      Store.dispatch(loginWithPin(this.state.decryptKey, this.state.selectedPin));
+    } else {
+      Store.dispatch(
+        iguanaWalletPassphrase(this.state.loginPassphrase)
+      );
+    }
+  }
+
+  loadPinList() {
+    Store.dispatch(loadPinList());
+  }
+
+  updateSelectedPin(e) {
+    this.setState({
+      selectedPin: e.target.value
+    });
   }
 
   getLoginPassPhraseSeedType(passPhrase) {
@@ -405,9 +471,9 @@ const mapStateToProps = (state) => {
     },
     Interval: {
       interval: state.Interval.interval,
-    }
+    },
+    Login: state.Login,
   };
-
 };
 
 export default connect(mapStateToProps)(Login);

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

@@ -52,6 +52,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"
@@ -81,9 +84,97 @@ const LoginRender = function () {
                 <div className="placeholder-label">{ this.state.loginPassPhraseSeedType }</div>
               </div>
             }
+
+            { this.state.loginPassphrase &&
+            <div className="row">
+              <div className="toggle-box padding-top-30 col-sm-3">
+                    <span className="pointer">
+                      <label className="switch">
+                        <input
+                          type="checkbox"
+                          checked={ this.shouldEncryptSeed() } />
+                        <div
+                          className="slider"
+                          onClick={ () => this.toggleShouldEncryptSeed() }></div>
+                      </label>
+                      <div
+                        className="toggle-label white"
+                        onClick={ () => this.toggleShouldEncryptSeed() }>
+                          { translate('LOGIN.ENCRYPT_SEED') }
+                      </div>
+                    </span>
+              </div>
+
+              <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>
+            }
+
+            { 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
+                  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"
+              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/components/login/login.scss

@@ -154,6 +154,11 @@ input[type="password"] {
   }
 }
 
+option.login-option {
+  background-color: #757575;
+  color: #fff;
+}
+
 .login-form,
 .register-form {
   width: 540px;

react/src/reducers/index.js

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

react/src/reducers/login.js

@@ -0,0 +1,18 @@
+import { GET_PIN_LIST } from "../actions/storeType";
+
+export function Login(state = {
+  pinList: [],
+}, action) {
+  if (state === null) state = { pinList: [] };
+
+  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

@@ -580,6 +580,10 @@ export const _lang = {
       'NXT_SEED': 'NXT',
       'SEED_COPIED': 'Seed copied',
       'SEED_SUCCESSFULLY_COPIED': 'The seed was successfully copied',
+      'ENCRYPT_SEED': 'Encrypt login seed',
+      'PUBKEY': 'pubkey',
+      'ENCRYPT_KEY': 'Encrypt key',
+      'DECRYPT_KEY': 'Decrypt key'
     },
     'SIDEBAR': {
       'EDEX_MOTTO': 'Most Secure, Easy and Native Decentralised Exchange',