Simulate login

8 files changed, 77 insertions, 18 deletions

diff --git a/app/components/Login.css b/app/components/Login.css
index a10163c2af..3b46310078 100644
--- a/app/components/Login.css
+++ b/app/components/Login.css
@@ -17,7 +17,6 @@
 .login-form__status-icon {
   text-align: center;
   margin-bottom: 44px;
-  height: 36px;
 }
 
 .login-footer__prompt {
@@ -82,6 +81,10 @@
   color: rgba(41,77,115,0.2);
 }
 
+.login-form__fields--invisible {
+  visibility: hidden;
+}
+
 .login-form__input-field {
   width: 100%;
   border-radius: 8px;
diff --git a/app/components/Login.js b/app/components/Login.js
index 0bc1093dc9..0546163589 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -70,7 +70,7 @@ export default class Login extends Component {
     switch(s) {
       case LoginState.connecting: return "Logging in...";
       case LoginState.failed: return "Login failed";
-      case LoginState.ok: return "Logged in";
+      case LoginState.ok: return "Login successful";
       default: return "Login";
     }
   }
@@ -90,8 +90,9 @@ export default class Login extends Component {
     const displayAccount = this.formattedAccount(account);
     const isConnecting = status === LoginState.connecting;
     const isFailed = status === LoginState.failed;
+    const isLoggedIn = status === LoginState.ok;
     const inputClass = ["login-form__input-field", isFailed ? "login-form__input-field--error" : ""].join(' ');
-    const footerClass = ["login-footer", isConnecting ? "login-footer--invisible" : ""].join(' ');
+    const footerClass = ["login-footer", (isConnecting || isLoggedIn) ? "login-footer--invisible" : ""].join(' ');
     
     const autoFocusRef = input => {
       if(isFailed && input) {
@@ -123,19 +124,31 @@ export default class Login extends Component {
                 </Then>
               </If>
 
+              { /* show tick when logged in */ }
+              <If condition={ isLoggedIn }>
+                <Then>
+                  <div className="login-form__status-icon">
+                    <img src="./assets/images/icon-success.svg" alt="" />
+                  </div>
+                </Then>
+              </If>
+
               <div className="login-form__title">{ title }</div>
-              <div className="login-form__subtitle">{ subtitle }</div>
-              <div className="login-form__input-wrap">
-                <input className={ inputClass } 
-                       type="text" 
-                       placeholder="0000 0000 0000" 
-                       onChange={ ::this.handleInputChange }
-                       onKeyUp={ ::this.handleInputKeyUp }
-                       value={ displayAccount }
-                       disabled={ isConnecting }
-                       autoFocus={ true } 
-                       ref={ autoFocusRef } />
+              <div className={ 'login-form__fields' + (isLoggedIn ? ' login-form__fields--invisible' : '') }>
+                <div className="login-form__subtitle">{ subtitle }</div>
+                <div className="login-form__input-wrap">
+                  <input className={ inputClass } 
+                        type="text" 
+                        placeholder="0000 0000 0000" 
+                        onChange={ ::this.handleInputChange }
+                        onKeyUp={ ::this.handleInputKeyUp }
+                        value={ displayAccount }
+                        disabled={ isConnecting }
+                        autoFocus={ true } 
+                        ref={ autoFocusRef } />
+                </div>
               </div>
+
             </div>
           </div>
           <div className={footerClass}>
diff --git a/app/constants.js b/app/constants.js
index 816b8761fb..4e465dc74f 100644
--- a/app/constants.js
+++ b/app/constants.js
@@ -1,4 +1,4 @@
-import Enum from 'es6-enum'
+import Enum from './lib/enum';
 
 const LoginState = Enum('none', 'connecting', 'failed', 'ok');
 
diff --git a/app/lib/backend.js b/app/lib/backend.js
index 33194c4325..7cd5c0af1f 100644
--- a/app/lib/backend.js
+++ b/app/lib/backend.js
@@ -28,7 +28,11 @@ class BackendImpl {
     return new Promise((resolve, reject) => {
       // @TODO: Add login call
       setTimeout(() => {
-        reject(new Error("Invalid account number."));
+        if(account.startsWith('1111')) {
+          resolve(true);
+        } else {
+          reject(new Error("Invalid account number."));
+        }
       }, 2000);
     });
   }
diff --git a/app/lib/enum.js b/app/lib/enum.js
new file mode 100644
index 0000000000..bc8e4b54aa
--- /dev/null
+++ b/app/lib/enum.js
@@ -0,0 +1,20 @@
+import assert from 'assert';
+
+/**
+ * Creates enum object with keys provided as arguments
+ */
+export default function Enum() {
+  let object = {};
+
+  for(const key of arguments) {
+    Object.defineProperty(object, key, {
+      enumerable: true,
+      value: key,
+      writable: false
+    });
+  }
+
+  Object.freeze(object);
+
+  return object;
+};
diff --git a/app/reducers/user.js b/app/reducers/user.js
index 76a5423333..981e0d1d64 100644
--- a/app/reducers/user.js
+++ b/app/reducers/user.js
@@ -2,8 +2,12 @@ import { handleActions } from 'redux-actions';
 
 import actions from '../actions/user';
 
+const initialState = {
+  account: ""
+};
+
 export default handleActions({
   [actions.loginChange]: (state, action) => {
     return { ...state, ...action.payload };
   }
-}, {});
+}, initialState);
diff --git a/package.json b/package.json
index ec5236bada..4001a7c02f 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
   "license": "MIT",
   "dependencies": {
     "babel-runtime": "^6.22.0",
-    "es6-enum": "^1.1.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-if": "^2.1.0",
diff --git a/test/lib/enum.spec.js b/test/lib/enum.spec.js
new file mode 100644
index 0000000000..04e1015f42
--- /dev/null
+++ b/test/lib/enum.spec.js
@@ -0,0 +1,16 @@
+import { expect } from 'chai';
+import Enum from '../../app/lib/enum';
+
+describe('enum', () => {
+  
+  it('should be able to compare values', () => {
+    const e = Enum('NORTH', 'SOUTH', 'WEST', 'EAST');
+    expect(e.NORTH).to.be.equal('NORTH');
+  });
+
+  it('should not be able to modify enum', () => {
+    let e = Enum('NORTH', 'SOUTH', 'WEST', 'EAST');
+    expect(() => e.ANYWHERE = 'ANYWHERE').to.throw();
+  });
+
+});