Simulate login

2 files changed, 30 insertions, 14 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}>