From 4cd48b7bb263e8162048911eb115879372d9cba8 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Mon, 31 Mar 2014 12:48:35 -0300
Subject: [PATCH] integrate new name and header. Signin/signout flow

---
 css/main.css                   |  5 ++-
 index.html                     | 70 +++++++++++++++++++++-------------
 js/app.js                      |  4 +-
 js/config.js                   |  3 ++
 js/controllers/header.js       | 10 +++--
 js/controllers/home.js         |  4 ++
 js/controllers/join.js         | 21 ----------
 js/controllers/peer.js         | 13 +++++++
 js/controllers/send.js         |  5 +++
 js/controllers/signin.js       | 41 +++++++++++++-------
 js/controllers/transactions.js |  4 ++
 js/services/network.js         | 26 ++++++++++---
 12 files changed, 131 insertions(+), 75 deletions(-)
 delete mode 100644 js/controllers/join.js
 create mode 100644 js/controllers/peer.js
diff --git a/css/main.css b/css/main.css
index cec2372cb..bdf1ccfa9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -32,13 +32,14 @@ body {
 
 .header {
 	background: #111;
-	margin: 0!important;
-	overflow: hidden;
 	color: white;
+  overflow: hidden;
+  margin-bottom: 30px;
 }
 
 .header-content {
 	padding: 1.5rem;
+	overflow: hidden;
 }
 
 .header h1, h5 {
diff --git a/index.html b/index.html
index cf7e07e3a..bc197736d 100644
--- a/index.html
+++ b/index.html
@@ -11,18 +11,16 @@
     <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,700italic' rel='stylesheet' type='text/css'>
   </head>
   <body>
-    <div data-ng-init="init()" data-ng-controller="HeaderController">
-      <div class="header">
+    <div class="header" data-ng-init="init()" data-ng-controller="HeaderController">
         <div class="header-content">
           <h1 class="left">Copay</h1>
-          <div class="text-right">
+          <div class="text-right" ng-show="$root.peerId">
             <h5>Company Funds</h5>
-            <p>4.324 BTC</  
+            <p>4.324 BTC</p>
           </div>
         </div>
-      </div>
 
-      <nav class="top-bar" data-topbar>
+      <nav class="top-bar" data-topbar ng-show="$root.peerId">
         <ul class="title-area" data-ng-repeat="item in menu" ui-route="/{{item.link}}" data-ng-class="{active: isActive(item)}">
           <li class="name"></li>
           <li class="toggle-topbar menu-icon">
@@ -44,45 +42,63 @@
   <div class="row">
     <div class="large-12 columns" ng-view></div>
   </div>
-
+  <div ng-controller="HeaderController" ng-show="$root.peerId">
+    <hr>
+    <div class="row">
+      <div class="text-center large-12 columns">
+        <a href="#" ng-click="signout()" class="button tiny">Signout</a>
+      </div>
+    </div>
+  </div>
 
     <!-- Templates -->
     <script type="text/ng-template" id="signin.html">
-      <div class="text-center" ng-controller="SigninController">
-        <div ng-if="!peerReady">Opening peers...</div>
-        <div ng-if="peerReady">
-          <h1>Join or Create a New Connection</h1>
-          <div class="col-lg-12">
-            <div class="input-group">
-              <input type="text" class="form-control" placeholder="Peer ID" ng-model="connectionId" autofocus>
-              <span class="input-group-btn">
-                <button class="btn btn-default" type="button" ng-click="join(connectionId)"><i class="glyphicon glyphicon-log-in"></i> Join</button>
-              </span>
-            </div>
-            <hr>
-            <button class="btn btn-primary btn-block" ng-click="join()"><i class="glyphicon glyphicon-plus"></i> Create a New Connection</button>
+      <div ng-controller="SigninController">
+        <div class="panel callout radius" ng-show="loading">
+          Connecting to wallet...
+        </div>
+        <div ng-show="!loading">
+        <div class="row">
+          <div class="large-6 columns">
+            <h3>Join wallet</h3>
+            <input type="text" class="form-control" placeholder="Peer ID" ng-model="connectionId" autofocus>
           </div>
+          <div class="large-6 columns">
+            <button class="btn btn-default" type="button" ng-click="join(connectionId)">Join</button>
+          </div>
+        </div>
+        <hr>
+        <div class="row">
+          <div class="large-6 columns">
+            <h3>Create a new wallet</h3>
+          </div>
+          <div class="large-6 columns">
+            <button class="btn btn-primary btn-block" ng-click="create()">Create</button>
+          </div>
+        </div>
         </div>
       </div>
     </script>
 
-    <script type="text/ng-template" id="join.html">
-      <div ng-controller="JoinController" ng-init="init()">
-        <h1>Joined to <span class="text-muted">{{connectionId}}</span></h1>
+    <script type="text/ng-template" id="peer.html">
+      <div ng-controller="PeerController" ng-init="init()">
+        <h1>I am <span class="text-muted">{{$root.peerId}}</span></h1>
         <div class="panel panel-default">
           <div class="panel-heading">
-            <h3 class="panel-title">Copayers ({{copayers.length}}/5)</h3>
+            <h3 class="panel-title">Copayers ({{$root.copayers.length}}/5)</h3>
           </div>
           <div class="panel-body">
             <ul>
-              <li ng-repeat="copayer in copayers">
+              <li ng-repeat="copayer in $root.copayers">
                 <span ng-if="copayer == $root.peerId">You ({{$root.peerId}})</span>
                 <span ng-if="copayer != $root.peerId">{{copayer}}</span>
               </li>
             </ul>
           </div>
         </div>
-        <a href="#/home">Skip</a>
+        <div class="text-center">
+          <a href="#/home">Go home</a>
+        </div>
       </div>
     </script>
 
@@ -196,7 +212,7 @@
     <script src="js/controllers/send.js"></script>
     <script src="js/controllers/backup.js"></script>
     <script src="js/controllers/signin.js"></script>
-    <script src="js/controllers/join.js"></script>
+    <script src="js/controllers/peer.js"></script>
 
     <script src="js/init.js"></script>
   </body>
diff --git a/js/app.js b/js/app.js
index 1889b53ba..56fc11cde 100644
--- a/js/app.js
+++ b/js/app.js
@@ -11,7 +11,7 @@ angular.module('copay',[
   'copay.backup',
   'copay.network',
   'copay.signin',
-  'copay.join'
+  'copay.peer'
 ]);
 
 angular.module('copay.header', []);
@@ -21,5 +21,5 @@ angular.module('copay.send', []);
 angular.module('copay.backup', []);
 angular.module('copay.network', []);
 angular.module('copay.signin', []);
-angular.module('copay.join', []);
+angular.module('copay.peer', []);
 
diff --git a/js/config.js b/js/config.js
index d124cc2f2..3793d88bd 100644
--- a/js/config.js
+++ b/js/config.js
@@ -18,6 +18,9 @@ angular
       .when('/join/:id', {
         templateUrl: 'join.html'
       })
+      .when('/peer', {
+        templateUrl: 'peer.html'
+      })
       .when('/transactions', {
         templateUrl: 'transactions.html' 
       })
diff --git a/js/controllers/header.js b/js/controllers/header.js
index 80faae040..d6956a62e 100644
--- a/js/controllers/header.js
+++ b/js/controllers/header.js
@@ -1,10 +1,10 @@
 'use strict';
 
 angular.module('copay.header').controller('HeaderController',
-  function($scope, $rootScope, $location) {
+  function($scope, $rootScope, $location, Network) {
     $scope.menu = [{
       'title': 'Home',
-      'link': '#/'
+      'link': '#/home'
     }, {
       'title': 'Transactions',
       'link': '#/transactions'
@@ -16,6 +16,10 @@ angular.module('copay.header').controller('HeaderController',
       'link': '#/backup'
     }];
 
+    if (!$rootScope.peerId) {
+      $location.path('signin');
+    }
+
     $scope.isActive = function(item) {
       if (item.link.replace('#','') == $location.path()) {
         return true;
@@ -29,7 +33,7 @@ angular.module('copay.header').controller('HeaderController',
 
     $scope.signout = function() {
       $rootScope.isLogged = false;
-
+      Network.disconnect();
       $location.path('signin');
     };
   });
diff --git a/js/controllers/home.js b/js/controllers/home.js
index 54a2356e4..f75a35af8 100644
--- a/js/controllers/home.js
+++ b/js/controllers/home.js
@@ -6,6 +6,10 @@ angular.module('copay.home').controller('HomeController',
 
     $scope.oneAtATime = true;
 
+    if (!$rootScope.peerId) {
+      $location.path('signin');
+    }
+
     $scope.addrs = [
     { addrStr: 'n3zUqNR7Bbbc4zJhPVj1vG2Lx66K3Xhzvb'},
     { addrStr: 'my9wnLwwUrwpNfEgSrWY62ymEGf1edKf4J'}
diff --git a/js/controllers/join.js b/js/controllers/join.js
deleted file mode 100644
index 88d19932d..000000000
--- a/js/controllers/join.js
+++ /dev/null
@@ -1,21 +0,0 @@
-'use strict';
-
-angular.module('copay.join').controller('JoinController',
-  function($scope, $rootScope, $routeParams, Network) {
-
-    $scope.connectionId = $routeParams.id;
-    $scope.copayers = [];
-
-    $scope.init = function() {
-      console.log('-------- init --------');
-      console.log($rootScope.peerId);
-      $scope.copayers.push($rootScope.peerId);
-
-      Network.connect($scope.connectionId, function(copayer) {
-        console.log('----- join connect --------');
-        console.log(copayer);
-        $scope.copayers.push(copayer);
-        $scope.$digest();
-      });
-    };
-  });
diff --git a/js/controllers/peer.js b/js/controllers/peer.js
new file mode 100644
index 000000000..b86e6c1dc
--- /dev/null
+++ b/js/controllers/peer.js
@@ -0,0 +1,13 @@
+'use strict';
+
+angular.module('copay.peer').controller('PeerController',
+  function($scope, $rootScope, $location, $routeParams, Network) {
+    
+    $scope.init = function() {
+      Network.connect($rootScope.connectionId, function(copayer) {
+        console.log(copayer);
+        console.log($rootScope.copayers);
+      });
+    };
+  });
+
diff --git a/js/controllers/send.js b/js/controllers/send.js
index 913bff704..737b04af8 100644
--- a/js/controllers/send.js
+++ b/js/controllers/send.js
@@ -3,4 +3,9 @@
 angular.module('copay.send').controller('SendController',
   function($scope, $rootScope, $location) {
     $scope.title = 'Send';
+
+    if (!$rootScope.peerId) {
+      $location.path('signin');
+    }
+
   });
diff --git a/js/controllers/signin.js b/js/controllers/signin.js
index ae2a89e51..731e03e73 100644
--- a/js/controllers/signin.js
+++ b/js/controllers/signin.js
@@ -2,23 +2,36 @@
 
 angular.module('copay.signin').controller('SigninController',
   function($scope, $rootScope, $location, Network) {
+    $scope.loading = false;
     $rootScope.peerId = null;
-    $scope.peerReady = false;
-
-    // Init peer
-    Network.init(function(pid) {
-      $rootScope.peerId = pid;
-      $rootScope.$digest();
-
-      $scope.peerReady = true;
-      $scope.$digest();
-    });
+    $rootScope.copayers = [];
+    
+    $scope.create = function() {
+      $scope.loading = true;
+      Network.init(function(pid) {
+        $rootScope.copayers.push(pid);
+        $location.path('peer'); 
+      });
+    };
 
     $scope.join = function(cid) {
-      console.log('------- join --------');
-      console.log(cid);
+      $scope.loading = true;
+      $rootScope.connectionId = cid;
+      Network.init(function(pid) {
+
+        console.log('------- join --------');
+        console.log(pid);
+
+        $rootScope.copayers.push(pid);
+        
+        Network.connect(cid, function(copayer) {
+          console.log('----- join master --------');
+          console.log(copayer);
+          $rootScope.copayers.push(copayer);
+
+          $location.path('peer');
+        });  
+      });
 
-      var pid = cid || $rootScope.peerId;
-      $location.path('join/' + pid);
     };
   });
diff --git a/js/controllers/transactions.js b/js/controllers/transactions.js
index 7a2af271d..1af4cf9a6 100644
--- a/js/controllers/transactions.js
+++ b/js/controllers/transactions.js
@@ -6,6 +6,10 @@ angular.module('copay.transactions').controller('TransactionsController',
 
     $scope.oneAtATime = true;
 
+    if (!$rootScope.peerId) {
+      $location.path('signin');
+    }
+
     $scope.txsinput = [
     {
       fromAddr: "n3zUqNR7Bbbc4zJhPVj1vG2Lx66K3Xhzvb",
diff --git a/js/services/network.js b/js/services/network.js
index 4a610709c..a94948400 100644
--- a/js/services/network.js
+++ b/js/services/network.js
@@ -6,14 +6,15 @@ angular.module('copay.network')
       return 2;
     };
   })
-  .factory('Network', function() {
+  .factory('Network', function($rootScope) {
     var peer;
     var connectedPeers = {};
 
     var _onConnect = function(c, cb) {
       if (c.label === 'wallet') {
         var a = peer.connections[c.peer][0];
-        console.log(peer.connections[c.peer]);
+        console.log(peer.connections[c.peer][0]);
+        console.log(a);
         a.send('------ origin recived -------');
         
         c.on('data', function(data) {
@@ -43,7 +44,12 @@ angular.module('copay.network')
         debug: 3
       });
 
-      peer.on('open', cb);
+      peer.on('open', function() {
+        $rootScope.peerId = peer.id;
+        $rootScope.peerReady = true;
+        cb(peer.id);
+        $rootScope.$digest();
+      });
     };
 
     var _connect = function(pid, cb) {
@@ -59,17 +65,18 @@ angular.module('copay.network')
       });
 
       c.on('open', function() {
-        c.send('-------oopen-------');
+        c.send('-------open-------');
       });
 
       c.on('data', function(data) {
         if (data)
-        console.log(data);
+          console.log('Data:' + data);
       });
 
       c.on('error', function(err) {
         console.error(err);
       });
+      cb(c.peer);
     };
 
     var _sendTo = function(pid, data) {
@@ -81,10 +88,17 @@ angular.module('copay.network')
       console.log(data);
     };
 
+    var _disconnect = function() {
+      peer.disconnect();
+      peer.destroy();
+      console.log('Disconnected and destroyed connection');
+    }
+
     return {
       init: _init,
       connect: _connect,
-      sendTo: _sendTo
+      sendTo: _sendTo,
+      disconnect: _disconnect
     } 
   });
 
