Display quartets

1 files changed, 13 insertions, 1 deletions

diff --git a/app/components/Login.js b/app/components/Login.js
index bbc8e29989..e13086d3db 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -36,6 +36,18 @@ export default class Login extends Component {
     }
   }
 
+  formattedAccount() {
+    const val = this.state.account;
+
+    // display number altogether when longer than 12
+    if(val.length > 12) {
+      return val;
+    }
+
+    // display quartets
+    return val.replace(/([0-9]{4})/g, '$1 ').trim();
+  }
+
   render() {
     return (
       <Layout>
@@ -50,7 +62,7 @@ export default class Login extends Component {
                        placeholder="0000 0000 0000" 
                        onChange={::this.handleInputChange}
                        onKeyUp={::this.handleInputKeyUp}
-                       value={this.state.account} />
+                       value={this.formattedAccount()} />
               </div>
             </div>
           </div>