From 65dc4dd01bcb4cd7245d8e574d5ee46e701a737d Mon Sep 17 00:00:00 2001
From: Joni Aaltonen <joni@aaltointeractive.fi>
Date: Tue, 30 Jun 2015 14:56:56 +0300
Subject: [PATCH] getting closer

---
 app/index.html                             |   6 +-
 app/scripts/controllers/application.js     |   3 +-
 app/scripts/controllers/main.js            |  44 +++-
 app/scripts/controllers/user.js            |  93 ++++++--
 app/scripts/controllers/userconnections.js | 118 ++++++++--
 app/scripts/controllers/userevents.js      |  39 +++-
 app/scripts/controllers/userinbox.js       |  41 +++-
 app/scripts/controllers/usersent.js        |  40 +++-
 app/scripts/services/events.js             |   2 +-
 app/scripts/services/user.js               | 237 +++++++++++++++++----
 app/styles/application.scss                |   3 +
 app/views/directive.events.html            |   4 +-
 app/views/directive.requestbtn.html        |   6 +
 app/views/directive.user-events.html       |  29 +++
 app/views/events.html                      |   3 +-
 app/views/user.html                        |  25 ++-
 app/views/userconnections.html             |  19 +-
 app/views/userevents.html                  |  37 +---
 app/views/userinbox.html                   |  11 +-
 app/views/userprofile.html                 |  45 ++--
 app/views/usersent.html                    |  43 ++++
 21 files changed, 673 insertions(+), 175 deletions(-)
 create mode 100644 app/views/directive.requestbtn.html
 create mode 100644 app/views/directive.user-events.html

diff --git a/app/index.html b/app/index.html
index 23e2eb6..8527119 100644
--- a/app/index.html
+++ b/app/index.html
@@ -13,6 +13,7 @@
     <!-- bower:css -->
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
     <!-- endbower -->
+    <link rel="stylesheet" href="bower_components/angular-worldskills-utils/src/spinner.css" />
     <!-- endbuild -->
     <!-- build:css(.tmp) styles/main.css -->
     <link rel="stylesheet" href="styles/main.css">
@@ -52,11 +53,11 @@
                     <li ng-hide='auth.loggedIn'><a ui-sref="signup">Sign Up</a></li>
 
                     <li ng-show='auth.loggedIn' class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">
-                            John Doe&nbsp;<span class='badge red'>8</span>&nbsp;<b class="caret"></b>
+                            John Doe&nbsp;<span ng-show="user.data.inbox.total_count > 0" class="label label-danger label-xs">{{user.data.inbox.total_count}}</span>&nbsp;<b class="caret"></b>
                         </a>
                         <ul class="dropdown-menu">
                             <li><a ui-sref-active='active' ui-sref='user.profile' href="#">Profile</a></li>
-                            <li><a ui-sref-active='active' ui-sref='user.inbox' href="#">Inbox <span class='badge red'>8</span></a></li>
+                            <li><a ui-sref-active='active' ui-sref='user.inbox' href="#">Inbox <span ng-show="user.data.inbox.total_count > 0" class="label label-danger">{{user.data.inbox.total_count}}</span></a></li>
                             <li><a ui-sref-active='active' ui-sref='user.sent' href="#">Sent requests</a></li>
                             <li><a ui-sref-active='active' ui-sref='user.connections' href="#">Connections</a></li>
                             <li><a ui-sref-active='active' ui-sref='user.events' href="#">Events</a></li>
@@ -76,6 +77,7 @@
     </div>
     <!-- <div class="appContainer" ng-view=""></div> -->    
     <div class='container' ng-controller='MainCtrl'>
+        <span id="alertScrollAnchor"></span>
         <alerts></alerts>
       <div ui-view></div>
     </div>
diff --git a/app/scripts/controllers/application.js b/app/scripts/controllers/application.js
index cf7407d..d7c594e 100644
--- a/app/scripts/controllers/application.js
+++ b/app/scripts/controllers/application.js
@@ -8,9 +8,10 @@
  * Controller of the connectApp
  */
 angular.module('connectApp')
-  .controller('ApplicationCtrl', function ($scope, $state, auth, WSAlert) {
+  .controller('ApplicationCtrl', function ($scope, $state, auth, WSAlert, User) {
 
     $scope.auth = auth;
+    $scope.user = User;
     
     $scope.logout = function (e) {
         auth.logout();
diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js
index f8f4cbf..91afeca 100644
--- a/app/scripts/controllers/main.js
+++ b/app/scripts/controllers/main.js
@@ -17,24 +17,52 @@ angular.module('connectApp')
     $scope.statuses = Statuses;
     $scope.loading = {};
 
-    $q.when(User.init()).then(function(result){
-		User.subscriptions($scope.user.data.id).then(function(res){
-			//console.log('subscriptions loaded');
-		},
-		function(error){
-			WSAlert("", error);
-		});
+    $q.when(User.init()).then(function(){
+
+        //load other resource
+        var promises = [];
+        promises.push(User.inbox());
+        promises.push(User.subscriptions(User.data.id));
+        promises.push(User.getConnections());
+
+        $q.all(promises).then(function(result){
+            //console.log('loaded external resources');
+            User.data.subscriptions = result[1];
+            User.data.connections = result[2];
+        },
+        function(error){
+            WSAlert.danger("Error loading user resources: " + error.data.user_msg);
+        });
+        //event subscriptions
+		//User.subscriptions($scope.user.data.id).then(function(res){
+		//	//console.log('subscriptions loaded');
+		//},
+		//function(error){
+		//	WSAlert.danger("", error);
+		//});
+
+        //load inbox        
+        //loaded in chain because it gets saved within the user var
+        //User.getInbox().then(function(result){
+        //    $scope.user.inbox = result;
+        //},
+        //function(error){
+        //    //fail silently
+        //});
     },
     function(error){
     	WSAlert.danger("", error);
     });
 
     //load events
+    $scope.loading.events_init = true;
     Events.init().then(function(result){
-    	//console.log("events init");    	
+    	//console.log("events init");   
+        $scope.loading.events_init = false; 	
     },
     function(error){
     	WSAlert.danger("", error);
+        $scope.loading.events_init = false;
     });
 
     //load events
diff --git a/app/scripts/controllers/user.js b/app/scripts/controllers/user.js
index 49361a8..e988d63 100644
--- a/app/scripts/controllers/user.js
+++ b/app/scripts/controllers/user.js
@@ -8,10 +8,14 @@
  * Controller of the connectApp
  */
 angular.module('connectApp')
-  .controller('UserCtrl', function ($q, $scope, $state, Language, APP_ROLES, User, auth) {
+  .controller('UserCtrl', function ($q, $scope, $state, Language, APP_ROLES, $timeout, User, auth, WSAlert) {
     $scope.loading = {};    
     $scope.userId = $state.params.userId;
-    $scope.editable = false; 
+    $scope.myProfile = false;
+    $scope.editable = false;    
+    $scope.profile = {}; 
+    $scope.connected = false;
+    $scope.connectedAndAccepted = false;
 
 
     $scope.init = function(){
@@ -20,32 +24,87 @@ angular.module('connectApp')
         //load user info
         User.getById($scope.userId).then(function(result){
             $scope.loading.user = false;
-            $scope.user = result;
+            $scope.profile = result;
 
-            //preload inbox - server should reject if it's not me
-            //loaded in chain because it gets saved within the user var
-            User.getInbox($scope.userId).then(function(result){
-                $scope.user.inbox = result;
+            //check if a connection exists between the users
+            $scope.loading.request_contact = true;
+            User.connectionExists($scope.userId).then(function(){
+                $scope.loading.request_contact = false;
+                $scope.connected = true;
             },
             function(error){
-                //fail silently
+                //not really an error, but no connection here, stop loading
+                $scope.loading.request_contact = false;
+                $scope.connected = false;
             });
 
-
+            $q.when(User.connections.promise).then(function(){
+                $scope.connectedAndAccepted = User.isConnected($scope.userId);
+            });
+            
         },
         function(error){
             WSAlert.danger(error);
             $scope.loading.user = false;
         });
 
-        // //check if user is editable
-        // $q.when(User.getUser()).then(function(result){
-        //     console.log(result.data);
-        //     //console.log(result);
-        //     //console.log(User);
-        // });
+        //get user subscriptions
+        User.subscriptions($scope.userId).then(function(result){
+            $scope.profile.subscriptions = result;
+        },
+        function(error){
+            WSAlert.danger("", error);
+        })
+
+        //check if user is editable        
+        $q.when(User.data.promise).then(function(){
+            $scope.myProfile = (User.data.id == $scope.userId) ? true : false;
+        },
+        function(error){
+            WSAlert.danger("", "Could not fetch user edit status: " + error.data.user_msg);
+        });
+    };
+
+    //$scope.init();
+
+    $scope.requestContact = function(userId){
+        $scope.loading.request_contact = true;
+
+        User.requestContact(userId).then(function(){
+            WSAlert.success("Contact request sent");
+            $scope.loading.request_contact = false;
+            $scope.init();
+        },
+        function(error){
+            WSAlert.danger(error);
+            $scope.loading.request_contact = false;
+        });
+    };
+
+    $scope.cancelRequest = function(userId){
+        $scope.loading.request_contact = true;
+
+        User.cancelRequestByUserId(userId).then(function(result){
+            WSAlert.success("Contact request cancelled");
+            $scope.loading.request_contact = false;
+            $scope.init();
+        },
+        function(error){
+            WSAlert.danger(error);
+            $scope.loading.request_contact = false;
+        });
     };
 
-    $scope.init();
+    //after User has loaded
+    $q.when(User.data.promise).then(function(){
+        $scope.init();
+    });     
 
-  });
+  })
+.directive('requestbtn', function(){
+  return {
+    restrict: 'E',    
+    replace: true,
+    templateUrl: 'views/directive.requestbtn.html'    
+  }
+});
diff --git a/app/scripts/controllers/userconnections.js b/app/scripts/controllers/userconnections.js
index 54d0302..061cec4 100644
--- a/app/scripts/controllers/userconnections.js
+++ b/app/scripts/controllers/userconnections.js
@@ -8,38 +8,112 @@
  * Controller of the connectApp
  */
 angular.module('connectApp')
-  .controller('UserConnectionsCtrl', function ($scope) {
+  .controller('UserConnectionsCtrl', function ($scope, User, $q, WSAlert) {
 
 	$scope.sortType     = 'name'; // set the default sort type
 	$scope.sortReverse  = false;  // set the default sort order
 	$scope.searchContact   = '';     // set the default search/filter term
+	$scope.contacts = [];
+	$scope.loading.connections = {};
   
-	$scope.contacts = [
-	  { 'id': 1, name: 'Joni Aaltonen', 	company: 'WorldSkills', position: 'Position 1', country: 'Finland', requestSent: true},
-	  { 'id': 1, name: 'John Cox', 			company: 'WorldSkills', position: 'Position 2', country: 'Australia', requestSent: false},
-	  { 'id': 1, name: 'Adam Walsh', 		company: 'WorldSkills', position: 'Position 3', country: 'Australia', requestSent: true},
-	  { 'id': 1, name: 'Fabian Vogler', 	company: 'WorldSkills', position: 'Position 4', country: 'Switzerland' , requestSent: true},
-	  { 'id': 1, name: 'Joni Aaltonen', 	company: 'WorldSkills', position: 'Position 1', country: 'Finland', requestSent: false},
-	  { 'id': 1, name: 'John Cox', 			company: 'WorldSkills', position: 'Position 2', country: 'Australia', requestSent: false},
-	  { 'id': 1, name: 'Adam Walsh', 		company: 'WorldSkills', position: 'Position 3', country: 'Australia', requestSent: true},
-	  { 'id': 1, name: 'Fabian Vogler', 	company: 'WorldSkills', position: 'Position 4', country: 'Switzerland' , requestSent: false},
-	  { 'id': 1, name: 'Joni Aaltonen', 	company: 'WorldSkills', position: 'Position 1', country: 'Finland', requestSent: true},
-	  { 'id': 1, name: 'John Cox', 			company: 'WorldSkills', position: 'Position 2', country: 'Australia', requestSent: true},
-	  { 'id': 1, name: 'Adam Walsh', 		company: 'WorldSkills', position: 'Position 3', country: 'Australia', requestSent: false},
-	  { 'id': 1, name: 'Fabian Vogler', 	company: 'WorldSkills', position: 'Position 4', country: 'Switzerland' , requestSent: false},
-	  { 'id': 1, name: 'Joni Aaltonen', 	company: 'WorldSkills', position: 'Position 1', country: 'Finland', requestSent: true},
-	  { 'id': 1, name: 'John Cox', 			company: 'WorldSkills', position: 'Position 2', country: 'Australia', requestSent: false},
-	  { 'id': 1, name: 'Adam Walsh', 		company: 'WorldSkills', position: 'Position 3', country: 'Australia', requestSent: false},
-	  { 'id': 1, name: 'Fabian Vogler', 	company: 'WorldSkills', position: 'Position 4', country: 'Switzerland' , requestSent: false}
-	];
+	// $scope.contacts = [
+	//   { 'id': 1, name: 'Joni Aaltonen', 	company: 'WorldSkills', position: 'Position 1', country: 'Finland', requestSent: true},
+	//   { 'id': 1, name: 'John Cox', 			company: 'WorldSkills', position: 'Position 2', country: 'Australia', requestSent: false},
+	//   { 'id': 1, name: 'Adam Walsh', 		company: 'WorldSkills', position: 'Position 3', country: 'Australia', requestSent: true},
+	//   { 'id': 1, name: 'Fabian Vogler', 	company: 'WorldSkills', position: 'Position 4', country: 'Switzerland' , requestSent: true},
+	//   { 'id': 1, name: 'Joni Aaltonen', 	company: 'WorldSkills', position: 'Position 1', country: 'Finland', requestSent: false},
+	//   { 'id': 1, name: 'John Cox', 			company: 'WorldSkills', position: 'Position 2', country: 'Australia', requestSent: false},
+	//   { 'id': 1, name: 'Adam Walsh', 		company: 'WorldSkills', position: 'Position 3', country: 'Australia', requestSent: true},
+	//   { 'id': 1, name: 'Fabian Vogler', 	company: 'WorldSkills', position: 'Position 4', country: 'Switzerland' , requestSent: false},
+	//   { 'id': 1, name: 'Joni Aaltonen', 	company: 'WorldSkills', position: 'Position 1', country: 'Finland', requestSent: true},
+	//   { 'id': 1, name: 'John Cox', 			company: 'WorldSkills', position: 'Position 2', country: 'Australia', requestSent: true},
+	//   { 'id': 1, name: 'Adam Walsh', 		company: 'WorldSkills', position: 'Position 3', country: 'Australia', requestSent: false},
+	//   { 'id': 1, name: 'Fabian Vogler', 	company: 'WorldSkills', position: 'Position 4', country: 'Switzerland' , requestSent: false},
+	//   { 'id': 1, name: 'Joni Aaltonen', 	company: 'WorldSkills', position: 'Position 1', country: 'Finland', requestSent: true},
+	//   { 'id': 1, name: 'John Cox', 			company: 'WorldSkills', position: 'Position 2', country: 'Australia', requestSent: false},
+	//   { 'id': 1, name: 'Adam Walsh', 		company: 'WorldSkills', position: 'Position 3', country: 'Australia', requestSent: false},
+	//   { 'id': 1, name: 'Fabian Vogler', 	company: 'WorldSkills', position: 'Position 4', country: 'Switzerland' , requestSent: false}
+	// ];
+
+
+	$scope.removeConnection = function(connectionId, $index){
+		if(confirm("Are you sure?")){
+		$scope.loading.connections[connectionId] = true;
+		User.deleteConnection(connectionId).then(function(res){		
+			User.connections.connections.splice($index, 1);
+			User.connections.total_count -= 1;
+			User.connections.totalConnections -= 1;
+			$scope.contacts.splice($index, 1);
+			WSAlert.success("Connection deleted");
+			$scope.loading.connections[connectionId] = false;
+			
+		},
+		function(error){
+			WSAlert.danger("", error);
+			$scope.loading.connections[connectionId] = false;
+		});
+		}
+	};
+
+	$scope.refresh = function(){	
+		$scope.loading.connections = true;
+
+		//if still loading
+		if(typeof User.connections.promise == 'object'){
+			//console.log("still loading initial");
+			$scope.init();
+		}//if
+		else{
+			//console.log("needs refreshing");
+			User.connections = $q.defer();
+			User.getConnections().then(function(){
+				$scope.init();
+			});
+		}
+	};
+
+	$scope.init = function(){
+		$q.when(User.connections.promise).then(function(result){
+			angular.forEach(User.connections.connections, function(val, key){
+				var temp_contact = false;
+
+				if(val.to.id != User.data.id)
+					temp_contact = val.to;
+				else if(val.from.id != User.data.id)
+					temp_contact = val.from;
+
+				//add in connection id for later use
+				if(typeof temp_contact == 'object'){
+					temp_contact.connection_id = val.id;
+					$scope.contacts.push(temp_contact);
+				}				
+			});
+			$scope.loading.connections = false;
+		});	
+	}
+
+	$scope.refresh();
 
 
 	$scope.searchConnections = function (contact) {
-        return (angular.lowercase(contact.name).indexOf(angular.lowercase($scope.searchContact) || '') !== -1 
+        return (
+        	angular.lowercase(contact.first_name).indexOf(angular.lowercase($scope.searchContact) || '') !== -1 
+        	|| angular.lowercase(contact.last_name).indexOf(angular.lowercase($scope.searchContact) || '') !== -1 
         	|| angular.lowercase(contact.company).indexOf(angular.lowercase($scope.searchContact) || '') !== -1
-        	|| angular.lowercase(contact.position).indexOf(angular.lowercase($scope.searchContact) || '') !== -1
-        	|| angular.lowercase(contact.country).indexOf(angular.lowercase($scope.searchContact) || '') !== -1
+        	|| angular.lowercase(contact.job_title).indexOf(angular.lowercase($scope.searchContact) || '') !== -1
+        	|| angular.lowercase(contact.country.name.text).indexOf(angular.lowercase($scope.searchContact) || '') !== -1
         	);
     };
 
+    $scope.downloadCSV = function(){
+    	alert("Not yet implemented...");
+    };
+
+    $scope.downloadVCF = function(){
+    	alert("Not yet implemented...");
+    };
+
+    $scope.download = function(userId){
+    	alert("Not yet implemented...");
+    };
   });
diff --git a/app/scripts/controllers/userevents.js b/app/scripts/controllers/userevents.js
index 73c43d2..c1e98a2 100644
--- a/app/scripts/controllers/userevents.js
+++ b/app/scripts/controllers/userevents.js
@@ -8,6 +8,39 @@
  * Controller of the connectApp
  */
 angular.module('connectApp')
-  .controller('UserEventsCtrl', function ($scope) {
-    
-  });
+  .controller('UserEventsCtrl', function ($scope, Statuses, User, WSAlert) {
+  	$scope.statuses = Statuses;
+  	$scope.loading.userevents = {};
+  	$scope.STATUS = Statuses.status();
+
+  	$scope.setAttendance = function(eventId, status, e){        
+        e.preventDefault();
+        //e.stopPropagation(); 
+        
+  		$scope.loading.userevents[eventId] = true;
+
+  		User.setAttendance(eventId, status).then(function(res){
+  			//set status to UI  		
+
+  			if(typeof User.data.subscriptions[eventId] == 'undefined') //init
+  				User.data.subscriptions[eventId] = {};
+  			
+  			User.data.subscriptions[eventId].status = res.status;
+  			$scope.profile.subscriptions[eventId].status = res.status;
+  			$scope.loading.userevents[eventId] = false;
+  		},
+  		function(error){
+  			WSAlert.danger(error);
+  			$scope.loading.userevents[eventId] = false;
+  		});
+  	};
+
+
+  })
+  .directive('userevents', function(){
+  return {
+    restrict: 'E',    
+    replace: true,
+    templateUrl: 'views/directive.user-events.html'    
+  }
+});
diff --git a/app/scripts/controllers/userinbox.js b/app/scripts/controllers/userinbox.js
index 6780cda..b7df670 100644
--- a/app/scripts/controllers/userinbox.js
+++ b/app/scripts/controllers/userinbox.js
@@ -7,12 +7,43 @@
  * # UserinboxCtrl
  * Controller of the connectApp
  */
-angular.module('connectApp')
-  .controller('UserInboxCtrl', function ($scope, User) {  	
+angular.module('connectApp') 
+  .controller('UserInboxCtrl', function ($q, $scope, User, WSAlert) {  	
+  	$scope.loading.inbox = false;
+    $scope.loading.inboxItem = {};
 
-  	$scope.actionConnection = function(connectionId, accepted){
-  		console.log(connectionId);
-  		console.log(accepted);
+    $scope.refresh = function(){
+      $scope.loading.inbox = true;
+      $q.when(User.data.promise).then(function(){
+        User.inbox().then(function(res){         
+          //refreshed
+          $scope.loading.inbox = false;
+        },
+        function(error){
+          WSAlert.danger(error);
+          $scope.loading.inbox = false;
+        });
+      });
+    };
 
+    $scope.refresh();
+
+  	$scope.actionConnection = function(connectionId, accepted, $index){
+  		$scope.loading.inboxItem[connectionId] = true;
+
+  		User.actionConnection(connectionId, accepted).then(function(res){        
+  			if(accepted)
+  				WSAlert.success("Connection accepted");  			  			
+  			else WSAlert.success("Connection denied");
+
+  			User.data.inbox.connections.splice($index, 1);
+        User.data.inbox.total_count -= 1;
+
+  			$scope.loading.inboxItem[connectionId] = false;
+  		},
+  		function(error){
+  			WSAlert.danger(error);
+  			$scope.loading.inboxItem[connectionId] = false;
+  		});
   	};
   });
diff --git a/app/scripts/controllers/usersent.js b/app/scripts/controllers/usersent.js
index 2325f48..54b9548 100644
--- a/app/scripts/controllers/usersent.js
+++ b/app/scripts/controllers/usersent.js
@@ -8,10 +8,38 @@
  * Controller of the connectApp
  */
 angular.module('connectApp')
-  .controller('UserSentCtrl', function ($scope) {
-    $scope.awesomeThings = [
-      'HTML5 Boilerplate',
-      'AngularJS',
-      'Karma'
-    ];
+  .controller('UserSentCtrl', function ($scope, User, $q, WSAlert) {
+
+  	$scope.loading.sentItem = {};
+
+  	$scope.init = function(){
+  		$scope.loading.sent = true;
+
+		User.getSent().then(function(){
+			$scope.loading.sent = false;
+		},
+		function(error){
+			WSAlert.danger(error);
+			$scope.loading.sent = false;
+		});
+  	};
+
+  	$scope.cancelRequest = function(connectionId, $index){
+  		$scope.loading.sentItem[connectionId] = true;
+
+  		User.cancelRequest(connectionId).then(function(result){
+  			User.data.sent.connections.splice($index, 1);
+        	User.data.sent.total_count -= 1;
+        	$scope.loading.sentItem[connectionId] = false;
+  		},
+  		function(error){
+  			WSAlert.danger(error);
+  			$scope.loading.sentItem[connectionId] = false;
+  		});
+  	};
+
+  	//after User has loaded
+  	$q.when(User.data.promise).then(function(){
+  		$scope.init();
+  	});  	
   });
diff --git a/app/scripts/services/events.js b/app/scripts/services/events.js
index 9182c78..1f9bca8 100644
--- a/app/scripts/services/events.js
+++ b/app/scripts/services/events.js
@@ -21,7 +21,7 @@ angular.module('connectApp')
             deferred.resolve(Events.data);
         },
         function(error){
-            deferred.reject("Could not fetch events: " + error);
+            deferred.reject("Could not fetch events: " + error.data.user_msg);
         });
         return deferred.promise;
     };    
diff --git a/app/scripts/services/user.js b/app/scripts/services/user.js
index a72fa5b..5d79ee2 100644
--- a/app/scripts/services/user.js
+++ b/app/scripts/services/user.js
@@ -8,54 +8,41 @@
  * Service in the connectApp.
  */
 angular.module('connectApp')
-  .service('User', function ($q, $http, API_CONNECT, $timeout, auth) {  	
+  .factory('User', function ($q, $http, API_CONNECT, $timeout, auth, APP_ID, APP_ROLES) {  	
   		var User = {
+            data: $q.defer(),
+            connections: $q.defer()
         };
 
   		User.init = function(){
-    		var deferred = $q.defer();
     		// var featuredOnly = (featured) ? "?featured=" + featured : "";
 
             //wait for auth.user to resolve                    
             $q.when(auth.user.$promise).then(function(){
-                $http.get(API_CONNECT + "/user/person/" + auth.user.person_id).then(function(result){
-                    User.data = result.data;
-                    deferred.resolve(User.data);
+                $http.get(API_CONNECT + "/user/person/" + auth.user.person_id).then(function(result){                    
+                    User.data.resolve();
+                    User.data = result.data;                    
                 },
                 function(error){
-                    deferred.reject("Could not fetch user: " + error);
+                    User.data.reject("Could not fetch user: " + error.data.user_msg);
                 })
             });    		
 
-    		return deferred.promise;
+    		return User.data.promise;
     	};                
 
-    	User.subscriptions = function(uid){
-    		var Subscriptions = {};
-    		var deferred = $q.defer();
+        User.isAdmin = function(){
+            var isAdmin = false;
 
-    		$http.get(API_CONNECT + "/subscriptions/users/" + uid).then(function(result){
-
-    			Subscriptions = result.data;
-    			//User.data.subscriptions = Subscriptions;
-    			var temp_subscriptions = {};
+            angular.forEach(auth.user.roles, function(val, key){
+                if(val.role_application.application_code == APP_ID && val.name == APP_ROLES.ADMIN)              
+                    isAdmin = true;
+            });
 
-                //cleanup, go through all subs
-    			angular.forEach(result.data.subscription, function(val, key){
-    				temp_subscriptions[val.event.id] = val;  	
-    			});                
+            return isAdmin;
 
-    			User.data.subscriptions = temp_subscriptions;
-    			Subscriptions = temp_subscriptions;
+        };        
 
-    			deferred.resolve(Subscriptions);
-    		},
-    		function(error){
-    			deferred.reject("Could not fetch subscriptions: " + error);
-    		});
-
-    		return deferred.promise;
-    	};
 
     	User.setAttendance = function(event, status){
             var deferred = $q.defer();
@@ -70,37 +57,215 @@ angular.module('connectApp')
                 deferred.resolve(res.data);
             },
             function(error){
-                deferred.reject("Could not save subscription to event: " + error);
+                deferred.reject("Could not save subscription to event: " + error.data.user_msg);
             })
 
             return deferred.promise;
     	};
 
-        User.getById = function(uid){
+        User.actionConnection = function(connectionId, accepted){
             var deferred = $q.defer();
+            var acceptStr = (accepted) ? "accept" : "deny";
+            
+            $http.put(API_CONNECT + "/connections/" + connectionId + "/" + acceptStr).then(function(res){
+                deferred.resolve(res);
+            },
+            function(error){
+                deferred.reject("Could not save connection: " + error.data.user_msg);
+            });
 
-            $http.get(API_CONNECT + "/user/" + uid).then(function(result){
+            return deferred.promise;
+        };
+
+        User.deleteConnection = function(connectionId){
+            var deferred = $q.defer();
+
+            $http.delete(API_CONNECT + "/connections/" + connectionId).then(function(res){
+                deferred.resolve(res);
+            }, function(error){
+                deferred.reject("Could not delete connection: " + error.data.user_msg);
+            });
+
+            return deferred.promise;
+        }
+
+
+       
+        User.inbox = function(){
+            var deferred = $q.defer();
+
+            $http.get(API_CONNECT + "/connections/user/" + User.data.id + "/inbox").then(function(result){
+                User.data.inbox = result.data;
+                deferred.resolve(result.data);
+            },
+            function(error){
+                deferred.reject("Could not fetch inbox: " + error.data.user_msg);
+            });
+
+            return deferred.promise;
+        };
+
+        User.getConnections = function(){       
+            //User.connections = $q.defer();     
+
+            $http.get(API_CONNECT + "/connections/user/" + User.data.id).then(function(result){
+                User.connections.resolve(result.data);
+                User.connections = result.data;
+            },
+            function(error){
+                User.connections.reject("Could not fetch connections: " + error.data.user_msg);
+            });
+            
+            return User.connections.promise;
+        };
+
+        User.requestContact = function(uid){
+            var deferred = $q.defer();
+
+            var postData = {
+                "from": {
+                    "id": User.data.id
+                },
+                "to": {
+                    "id": uid
+                },
+                "accepted": false,
+                "denied": false
+            };
+
+            $http.post(API_CONNECT + "/connections/", postData).then(function(result){
+                deferred.resolve(result);
+            },
+            function(error){
+                deferred.reject("Could not send contact request: " + error.data.user_msg);
+            });
+
+            return deferred.promise;
+        };
+
+        User.cancelRequest = function(connectionId){
+            var deferred = $q.defer();
+
+            $http.delete(API_CONNECT + "/connections/" + connectionId).then(function(result){
+                deferred.resolve(result);
+            },
+            function(error){
+                deferred.reject("Could not cancel request: " + error.data.user_msg);
+            });
+
+            return deferred.promise;
+        };
+
+        User.cancelRequestByUserId = function(userId){
+            var deferred = $q.defer();
+
+            //get connection id
+            User.connectionExists(userId).then(function(result){
+                //remove connection
+                $http.delete(API_CONNECT + "/connections/" + result.id).then(function(result2){
+                    deferred.resolve(result2);
+                },
+                function(error){
+                    deferred.reject("Could not cancel request: " + error.data.user_msg);
+                });            
+            },
+            function(error){
+                deferred.reject(error.data.user_msg);
+            });
+
+            return deferred.promise;
+        };
+
+        User.getSent = function(){
+            var deferred = $q.defer();
+
+            $http.get(API_CONNECT + "/connections/user/" + User.data.id + "/sent").then(function(result){
+                User.data.sent = result.data;
                 deferred.resolve(result.data);
             },
             function(error){
-                deferred.reject("Could not fetch user: " + error);
+                deferred.reject("Could not fetch sent contact requests: " + error.data.user_msg);
+            });
+
+            return deferred.promise;
+        };
+
+        User.isConnected = function(uid){    
+            var connected = false;
+                        
+            angular.forEach(User.connections.connections, function(val, key){                    
+                if(val.from.id == uid || val.to.id == uid){
+                    connected = true;
+                }
+            });            
+
+            return connected;
+        };
+
+        User.connectionExists = function(uid){
+            var connected = false;
+
+            var deferred = $q.defer();
+
+            $http.get(API_CONNECT + "/connections/user/" + User.data.id + "?include_pending=1").then(function(result){
+                //go through results
+                angular.forEach(result.data.connections, function(val, key){
+                    if(val.from.id == uid || val.to.id == uid) deferred.resolve(val);
+                });
+                deferred.reject();
+            },
+            function(error){
+                deferred.reject(error.data.user_msg);
             });
 
             return deferred.promise;
         };
 
-        User.getInbox = function(uid){
+
+
+        //external resources        
+
+
+         User.subscriptions = function(uid){
+            var Subscriptions = {};
             var deferred = $q.defer();
+            $http.get(API_CONNECT + "/subscriptions/users/" + uid).then(function(result){
+
+                Subscriptions = result.data;
+                //User.data.subscriptions = Subscriptions;
+                var temp_subscriptions = {};
+
+                //cleanup, go through all subs
+                angular.forEach(result.data.subscription, function(val, key){
+                    temp_subscriptions[val.event.id] = val;     
+                });                
+
+                //User.data.subscriptions = temp_subscriptions;
+                Subscriptions = temp_subscriptions;
 
-            $http.get(API_CONNECT + "/connections/user/" + uid + "/inbox").then(function(result){
+                deferred.resolve(Subscriptions);
+            },
+            function(error){
+                deferred.reject("Could not fetch subscriptions: " + error.data.user_msg);
+            });
+
+            return deferred.promise;
+        };
+
+
+        User.getById = function(uid){
+            var deferred = $q.defer();
+
+            $http.get(API_CONNECT + "/user/" + uid).then(function(result){
                 deferred.resolve(result.data);
             },
             function(error){
-                deferred.reject("Could not fetch connections: " + error);
+                deferred.reject("Could not fetch user: " + error.data.user_msg);
             });
 
             return deferred.promise;
         };
 
+
   	return User;  
   });
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 83e7f05..f5514f5 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -88,6 +88,9 @@ li.active a {
 .popular-connection-image img{ 	margin-bottom: 0; }
 
 .events{ clear: both; }
+
+.cb{ clear: both; }
+
 .event{	
 	margin-bottom: 3em;
 	float: left;
diff --git a/app/views/directive.events.html b/app/views/directive.events.html
index 2d0c979..aaefde5 100644
--- a/app/views/directive.events.html
+++ b/app/views/directive.events.html
@@ -6,8 +6,8 @@
 	</div>
 	<div class='event-attendance text-center'>                  
 	    <ws-spinner class='smallSpinner' ng-show='loading.events[event.id]'></ws-spinner>          
-	    <div class="btn-group" dropdown dropdown-append-to-body>
-	      <a href="#" ng-hide="loading.events[event.id]" tooltip="Click to change" tooltip-trigger="mouseenter" tooltip-placement="top" class="dropdown-toggle" dropdown-toggle>
+	    <div ng-hide="loading.events[event.id]" class="btn-group" dropdown dropdown-append-to-body>
+	      <a href="#" tooltip="Click to change" tooltip-trigger="mouseenter" tooltip-placement="top" class="dropdown-toggle" dropdown-toggle>
 	        <span ng-show="user.data.subscriptions[event.id]">{{user.data.subscriptions[event.id].status.name.text}}</span>
 	        <span ng-hide="user.data.subscriptions[event.id]">Not attending</span>
 	        &nbsp;<span class="caret"></span> 
diff --git a/app/views/directive.requestbtn.html b/app/views/directive.requestbtn.html
new file mode 100644
index 0000000..13f60eb
--- /dev/null
+++ b/app/views/directive.requestbtn.html
@@ -0,0 +1,6 @@
+
+<div>
+	<ws-spinner class='smallSpinner' ng-show='loading.request_contact'></ws-spinner>    
+	<button ng-click="requestContact(userId);" ng-hide="myProfile || connected || loading.request_contact" class="btn btn-success">Request Contact</button>
+	<button ng-show='connected && !connectedAndAccepted' ng-click="cancelRequest(userId);" class='btn btn-warning'>Cancel request</button>
+</div>
\ No newline at end of file
diff --git a/app/views/directive.user-events.html b/app/views/directive.user-events.html
new file mode 100644
index 0000000..421ed05
--- /dev/null
+++ b/app/views/directive.user-events.html
@@ -0,0 +1,29 @@
+<div class='event'> 
+	<div><a ui-sref='event({eventId:userevent.event.id})'>{{userevent.event.event.name}}</a></div>
+	<div class='event-image'>
+	    <a ui-sref='event({eventId:userevent.event.id})'><img class='thumbnail' src='http://lorempixel.com/250/160/city/' alt='Sao Paulo 2015' /></a>
+	    <span>{{userevent.event.connection_count}} possible connections&nbsp;&nbsp;<a popover="{{userevent.event.connection_count}} people attending this event." popover-trigger="mouseenter" ><span class='glyphicon glyphicon-question-sign'></span></a></span>
+	</div>
+	<div class='event-attendance text-center'>                  
+	    <ws-spinner class='smallSpinner' ng-show='loading.userevents[userevent.event.id]'></ws-spinner>          
+	    
+	    <div ng-if="!myProfile">
+	    	<!-- <a>	 -->      
+	        <span ng-show="profile.subscriptions[userevent.event.id]">{{profile.subscriptions[userevent.event.id].status.name.text}}</span>	        
+	        <span ng-hide="profile.subscriptions[userevent.event.id]">Not attending</span>	        
+	        <!-- </a> -->
+	    </div>
+	    <div ng-hide="loading.userevents[userevent.event.id]" ng-if="myProfile" class="btn-group" dropdown dropdown-append-to-body>
+	      <a href="#" tooltip="Click to change" tooltip-trigger="mouseenter" tooltip-placement="top" class="dropdown-toggle" dropdown-toggle>	      
+	        <span ng-show="profile.subscriptions[userevent.event.id]">{{profile.subscriptions[userevent.event.id].status.name.text}}</span>
+	        <span ng-hide="profile.subscriptions[userevent.event.id]">Not attending</span>
+	        &nbsp;<span class="caret"></span> 
+	      </a>
+	      <ul class="dropdown-menu" role="menu">
+	        <li><a href="#" ng-class="{'active': profile.subscriptions[userevent.event.id].status.id == STATUS.YES}" ng-click="setAttendance(userevent.event.id, STATUS.YES, $event);">{{statuses.data[STATUS.YES].name.text}}</a></li>
+	        <li><a href="#" ng-class="{'active': profile.subscriptions[userevent.event.id].status.id == STATUS.MAYBE}" ng-click="setAttendance(userevent.event.id, STATUS.MAYBE, $event);">{{statuses.data[STATUS.MAYBE].name.text}}</a></li>
+	        <li><a href="#" ng-class="{'active': profile.subscriptions[userevent.event.id].status.id == STATUS.NO}" ng-click="setAttendance(userevent.event.id, STATUS.NO, $event);">{{statuses.data[STATUS.NO].name.text}}</a></li>
+	      </ul>
+	    </div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/app/views/events.html b/app/views/events.html
index 1b74f36..36288d0 100644
--- a/app/views/events.html
+++ b/app/views/events.html
@@ -1,4 +1,5 @@
-        <div class="row">
+        <ws-spinner class='bigSpinner' ng-show='loading.events_init'></ws-spinner>
+        <div ng-hide="loading.events_init" class="row">
 
             <div class='col-xs-12 col-sm-10'>
                 <h2>WorldSkills Events</h2>
diff --git a/app/views/user.html b/app/views/user.html
index 6b7770a..538443f 100644
--- a/app/views/user.html
+++ b/app/views/user.html
@@ -4,30 +4,37 @@
     <button ng-click="saveEvent()" class="btn btn-warning" id="deleteEntry">Reset changes<spinner ng-show="saveLoading" class="ng-hide"></spinner></button> -->
     <!-- <button ng-show="showActions" ng-disabled="!validateForm();" ng-click="save();" class="btn btn-success" id="saveEntry">Save all changes<spinner ng-show="loading.initial" class="ng-hide"></spinner></button>
     <button ng-show="showActions" ng-click="reset();" class='btn btn-warning'>Reset</button> -->    
-    <!-- //TODO if not own profile -->
-    <button class="btn btn-success" id="requestContact">Request Contact<spinner ng-show="loading.request" class="ng-hide"></spinner></button>
-    <button class="btn btn-primary" ui-sref="user.edit({userId:1})" id="requestContact">Edit my profile<spinner ng-show="loading.request" class="ng-hide"></spinner></button>
+    <!-- //TODO if not own profile --> 
+    <requestbtn></requestbtn>
+    <button ng-show='editable' class="btn btn-primary" ui-sref="user.edit({userId:userId})">Edit my profile<spinner ng-show="loading.request" class="ng-hide"></spinner></button>
 </p>
 </div>
 
-<h1>{{user.first_name + " " + user.last_name}}</h1>
-<hr />
+<h1>{{profile.first_name + " " + profile.last_name}}</h1>
+<hr class='cb' />
 <div class='row'>
 	<div class="col-sm-3 col-md-2 sidebar-right">        
-		<div class="list-group">			      
-            
+		<div ng-show="myProfile" class="list-group">			                  
             <div class='list-group-item profileImage'>
                 <img src='http://lorempixel.com/400/400/people' alt='user' />
             </div>
-    	 	<a ui-sref-active='active' class="list-group-item" ui-sref='user.profile'>My Profile</a>     	
-    	 	<a ui-sref-active='active' class="list-group-item" ui-sref='user.inbox'>Inbox <span class="badge">4</span></a>   	 			
+    	 	<a ui-sref-active='active' class="list-group-item" ui-sref='user.profile'>My Profile</a>
+    	 	<a ui-sref-active='active' class="list-group-item" ui-sref='user.inbox'>Inbox <span ng-show="user.data.inbox.total_count > 0" class="badge">{{user.data.inbox.total_count}}</span></a>   	 			
     	 	<a ui-sref-active='active' class="list-group-item" ui-sref='user.sent'>Sent requests</a>   
     	 	<a ui-sref-active='active' class="list-group-item" ui-sref='user.connections'>Connections</a>   	
     	 	<a ui-sref-active='active' class="list-group-item" ui-sref='user.events'>Events</a>   	 	
     	 	<a ui-sref-active='active' class="list-group-item" ui-sref='user.password'>Password</a>
     	 	<a ui-sref-active='active' class="list-group-item" ui-sref='user.privacy'>Privacy</a>   	 	     	 	
     	 </div>
+         <div ng-hide="myProfile" class="list-group">                              
+            <div class='list-group-item profileImage'>
+                <img src='http://lorempixel.com/400/400/people' alt='user' />
+            </div>
+            <a ui-sref-active='active' class="list-group-item" ui-sref='user.profile'>Profile</a>                    
+            <a ui-sref-active='active' class="list-group-item" ui-sref='user.events'>Events</a>                        
+         </div>
      </div>
+
     <!-- <ws-spinner ng-show='loading.initial'></ws-spinner> -->
     <div class="col-sm-9 col-md-10" id="content" ui-view=""></div>            
 </div>
diff --git a/app/views/userconnections.html b/app/views/userconnections.html
index 2503dea..e12f77b 100644
--- a/app/views/userconnections.html
+++ b/app/views/userconnections.html
@@ -1,26 +1,28 @@
 <fieldset><legend>My Connections</legend>
 <p>Below is a list of all of your accepted connections</p>
-<p><button class='btn btn-info btn-sm'>Download CSV - Excel</button> <button class='btn btn-info btn-sm'>Download VCF - Outlook</button></p>
+<p><button ng-click="downloadCSV();" class='btn btn-info btn-sm'>Download CSV - Excel</button>&nbsp;
+<button    ng-click="downloadVCF();"  class='btn btn-info btn-sm'>Download VCF - Outlook</button></p>
 <p>&nbsp;</p>
 				  <form>
 				    <div class="form-group">
 				      <div class="input-group">
 				        <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
 				
-				        <input type="text" class="form-control" placeholder="Search name, company, position or country" ng-model="searchContact">
+				        <input type="text" class="form-control" placeholder="Filter by name, company, position or country" ng-model="searchContact">
 				
 				      </div>      
 				    </div>
 				  </form>
 
 <div class="media media-inbox" ng-repeat="connection in contacts | filter:searchConnections">
-	<div class='row'>
+	<ws-spinner ng-show="loading.connections[connection.connection_id]" class='bigSpinner'></ws-spinner>          
+	<div ng-hide="loading.connections[connection.connection_id]" class='row'>
 		<div class='col-xs-12 col-sm-10'>
   			<div class="media-left media-top">
-  			    <a ui-sref='user.profile({userId:1})'><img class="media-object" src="http://lorempixel.com/120/120/people" alt="name"></a>
+  			    <a ui-sref='user.profile({userId:connection.id})'><img class="media-object" src="http://lorempixel.com/120/120/people" alt="{{connection.first_name + " " + connection.last_name}}"></a>
   			</div>
   			<div class="media-body">
-  			  <h4 class="media-heading"><a ui-sref='user.profile({userId:1})'>{{connection.name}}</a></h4>
+  			  <h4 class="media-heading"><a ui-sref='user.profile({userId:connection.id})'>{{connection.first_name + " " + connection.last_name}}</a></h4>
   			  	<div class='row contentRow'>
 					<div class='col-xs-4 col-md-3 col-lg-2'>
 						<strong>Company</strong>
@@ -34,7 +36,7 @@ <h4 class="media-heading"><a ui-sref='user.profile({userId:1})'>{{connection.nam
 						<strong>Job Title</strong>
 					</div>
 					<div class='col-xs-8 col-md-9 col-lg-10'>
-						{{connection.position}}
+						{{connection.job_title}}
 					</div>
 				</div>	
 				<div class='row contentRow'>
@@ -42,13 +44,14 @@ <h4 class="media-heading"><a ui-sref='user.profile({userId:1})'>{{connection.nam
 						<strong>Country</strong>
 					</div>
 					<div class='col-xs-8 col-md-9 col-lg-10'>
-						{{connection.country}}
+						{{connection.country.name.text}}
 					</div>
 				</div>			
   			</div>
   		</div>
   		<div class='inboxActions col-xs-12 col-sm-2'>
-  			<button class='fullWidth btn btn-danger btn-sm'>Remove Connection</button>
+  			<button ng-click="download(connection.id)" class='fullWidth btn btn-info btn-sm'>Download</button>
+  			<button ng-click="removeConnection(connection.connection_id, $index);" class='fullWidth btn btn-danger btn-sm'>Remove Connection</button>
   		</div>
   	</div>
 </div>
diff --git a/app/views/userevents.html b/app/views/userevents.html
index 5d7cf4c..24c3873 100644
--- a/app/views/userevents.html
+++ b/app/views/userevents.html
@@ -3,41 +3,12 @@ <h2>My Events</h2>
                 <p>By <b><i>attending</i></b> an event, you will be listed under the event, and other people can request your contact details.<br />
                 Please only do so if you are going to <b>physically attend</b> the event.</p>
                 
-                <p>&nbsp;</p>                
-
+                <p>&nbsp;</p>  
                 <fieldset><legend>Events I'm attending</legend>
-                <div class='events cf'>
-                    <div ng-repeat="i in [1, 2, 3] track by $index" class='event'>
-                        <div><a ui-sref='event({eventId:1})'>WorldSkills Sao Paulo 2015</a></div>
-                        <div class='event-image'>
-                            <a ui-sref='event({eventId:1})'><img class='thumbnail' src='http://lorempixel.com/250/160/city/' alt='Sao Paulo 2015' /></a>
-                            <span>17 possible connections&nbsp;&nbsp;<a href='#'><span class='glyphicon glyphicon-question-sign'></span></a></span>
-                        </div>
-                        <div class='event-attendance text-center'>
-                        	I will attend | <a>cancel</a>
-                        </div>
-                    </div>
-                </div>
-                </fieldset>
-
-                <fieldset><legend>All events (not attending)</legend>
-                <div class='events cf'>
-                    <div ng-repeat="i in [1, 2] track by $index" class='event'>
-                        <div><a ui-sref='event({eventId:1})'>Taitaja 2016 - Finnish nationals</a></div>
-                        <div class='event-image'>
-                            <a ui-sref='event({eventId:1})'><img class='thumbnail' src='http://lorempixel.com/250/160/city/' alt='Sao Paulo 2015' /></a>
-                            <span>17 possible connections&nbsp;&nbsp;<a href='#'><span class='glyphicon glyphicon-question-sign'></span></a></span>
-                        </div>
-                        <div class='event-attendance text-center'>
-                        	<a>Click here to attend <span class='glyphicon glyphicon-question-sign'></span></a>
-                        </div>
-                    </div>
+                <div class='events cf'>                                
+                    <userevents ng-repeat="userevent in profile.subscriptions" class='event' />
                 </div>
-            	</fieldset>
-
-            
-           
-
+                </fieldset>                         
         <hr class="" />
 
        
diff --git a/app/views/userinbox.html b/app/views/userinbox.html
index e86fae6..d4c93ce 100644
--- a/app/views/userinbox.html
+++ b/app/views/userinbox.html
@@ -1,6 +1,9 @@
 <fieldset><legend>Inbox - Received Connection Requests</legend>
-<div class="media media-inbox" ng-repeat="connection in user.inbox.connections">
-	<div class='row'>
+{{loading.inbox}}
+<ws-spinner class='bigSpinner' ng-show='loading.inbox'></ws-spinner>  
+<div ng-hide='loading.inbox' class="media media-inbox" ng-repeat="connection in user.data.inbox.connections">
+	<ws-spinner ng-show='loading.inboxItem[connection.id]'></ws-spinner>
+	<div class='row' ng-hide='loading.inboxItem[connection.id]'>
 		<div class='col-xs-12 col-sm-10'>
   			<div class="media-left media-top">
   			    <a ui-sref='user.profile({userId:connection.from.id})'><img class="media-object" src="http://lorempixel.com/120/120/people" alt="name"></a>
@@ -34,8 +37,8 @@ <h4 class="media-heading"><a ui-sref='user.profile({userId:connection.from.id})'
   			</div>
   		</div>
   		<div class='inboxActions col-xs-12 col-sm-2'>
-  			<button ng-click="actionConnection(connection.id, true);" class='fullWidth btn btn-success btn-sm'>Accept</button>
-  			<button ng-click="actionConnection(connection.id, false);" class='fullWidth btn btn-danger btn-sm'>Deny</button>
+  			<button ng-click="actionConnection(connection.id, true, $index);" class='fullWidth btn btn-success btn-sm'>Accept</button>
+  			<button ng-click="actionConnection(connection.id, false, $index);" class='fullWidth btn btn-danger btn-sm'>Deny</button>
   		</div>
   	</div>
 </div>
diff --git a/app/views/userprofile.html b/app/views/userprofile.html
index 6bdfa27..2d39a13 100644
--- a/app/views/userprofile.html
+++ b/app/views/userprofile.html
@@ -1,5 +1,5 @@
 <fieldset><legend>Description</legend>
-<p>{{user.profile_description}}</p>
+<p>{{profile.profile_description}}</p>
 </fieldset>
 
 <fieldset>	
@@ -10,7 +10,7 @@
 				<strong>Company</strong>
 			</div>
 			<div class='col-xs-8 col-md-9 col-lg-10'>
-				{{user.company}}
+				{{profile.company}}
 			</div>
 		</div>
 		<div class='row contentRow'>
@@ -18,7 +18,7 @@
 				<strong>Job Title</strong>
 			</div>
 			<div class='col-xs-8 col-md-9 col-lg-10'>
-				{{user.job_title}}
+				{{profile.job_title}}
 			</div>
 		</div>					
 </fieldset>
@@ -26,21 +26,32 @@
 
 <fieldset>	
 	<legend>Contact Details</legend>	
-		<div class='row contentRow'>
-			<div class='col-xs-4 col-md-3 col-lg-2'>
-				<strong>Email</strong>
-			</div>
-			<div class='col-xs-8 col-md-9 col-lg-10'>
-				{{user.email_address}}
-			</div>
-		</div>					
-		<div class='row contentRow'>
-			<div class='col-xs-4 col-md-3 col-lg-2'>
-				<strong>Phone</strong>
-			</div>
-			<div class='col-xs-8 col-md-9 col-lg-10'>
-				{{user.phone_number}}
+		<div ng-show='!connectedAndAccepted'>
+			<div ng-show='connected'><p>You have sent this person a contact request, but they have not yet accepted it.<br />You will receive an email notification if this user accepts the request.</p><br />
+			<requestbtn></requestbtn></div>
+			<div ng-show='!connected'>
+				<p>You need to send a contact request to this person in order to view their contact details</p><br />
+				<requestbtn></requestbtn>
 			</div>
+
+		</div>
+		<div ng-hide='!connectedAndAccepted'>
+			<div class='row contentRow'>
+				<div class='col-xs-4 col-md-3 col-lg-2'>
+					<strong>Email</strong>
+				</div>
+				<div class='col-xs-8 col-md-9 col-lg-10'>
+					{{profile.email_address}}
+				</div>
+			</div>					
+			<div class='row contentRow'>
+				<div class='col-xs-4 col-md-3 col-lg-2'>
+					<strong>Phone</strong>
+				</div>
+				<div class='col-xs-8 col-md-9 col-lg-10'>
+					{{profile.phone_number}}
+				</div>
+			</div>							
 		</div>							
 </fieldset>
 
diff --git a/app/views/usersent.html b/app/views/usersent.html
index 837ba71..0d3f779 100644
--- a/app/views/usersent.html
+++ b/app/views/usersent.html
@@ -1,6 +1,49 @@
 <fieldset><legend>Sent Connection Requests</legend>
 <p>Below are the connection requests you have sent, and which are still pending for acceptance by the other user.</p>
 <p>&nbsp;</p>
+<ws-spinner class='bigSpinner' ng-show='loading.sent'></ws-spinner>
+<div ng-hide='loading.sent' class="media media-inbox" ng-repeat="connection in user.data.sent.connections">
+	<ws-spinner ng-show='loading.sentItem[connection.id]'></ws-spinner>
+	<div class='row' ng-hide='loading.sentItem[connection.id]'>
+		<div class='col-xs-12 col-sm-10'>
+  			<div class="media-left media-top">
+  			    <a ui-sref='user.profile({userId:connection.from.id})'><img class="media-object" src="http://lorempixel.com/120/120/people" alt="name"></a>
+  			</div>
+  			<div class="media-body">
+  			  <h4 class="media-heading"><a ui-sref='user.profile({userId:connection.from.id})'>{{connection.from.first_name + " " + connection.from.first_name}}</a></h4>
+  			  	<div class='row contentRow'>
+					<div class='col-xs-4 col-md-3 col-lg-2'>
+						<strong>Company</strong>
+					</div>
+					<div class='col-xs-8 col-md-9 col-lg-10'>
+						{{connection.from.company}}
+					</div>
+				</div>
+				<div class='row contentRow'>
+					<div class='col-xs-4 col-md-3 col-lg-2'>
+						<strong>Job Title</strong>
+					</div>
+					<div class='col-xs-8 col-md-9 col-lg-10'>
+						{{connection.from.job_title}}
+					</div>
+				</div>	
+				<div class='row contentRow'>
+					<div class='col-xs-4 col-md-3 col-lg-2'>
+						<strong>Country</strong>
+					</div>
+					<div class='col-xs-8 col-md-9 col-lg-10'>
+						{{connection.from.country.name.text}}
+					</div>
+				</div>			
+  			</div>
+  		</div>
+  		<div class='inboxActions col-xs-12 col-sm-2'>
+  			<button ng-click="cancelRequest(connection.id, $index);" class='fullWidth btn btn-warning btn-sm'>Cancel request</button>
+  		</div>
+  	</div>
+</div>
+<hr />
+
 <div class="media media-inbox" ng-repeat="i in [1, 2, 3, 4, 5] track by $index">
 	<div class='row'>
 		<div class='col-xs-12 col-sm-10'>