From cb3f77a573bb8bcc727b492c3de3b736462f5f45 Mon Sep 17 00:00:00 2001
From: mathieu <mathieu.nayrolles@gmail.com>
Date: Mon, 25 May 2015 07:35:40 -0400
Subject: [PATCH] Design for facebook login. Refs #20

---
 application/core/MY_Controller.php  |  2 +-
 application/views/header.php        | 16 ++++++--
 application/views/modal/login.php   | 10 ++++-
 application/views/modal/sign-up.php |  2 +
 assets/js/facebook.js               | 60 +++++++++++++++++++++++++++++
 5 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 assets/js/facebook.js

diff --git a/application/core/MY_Controller.php b/application/core/MY_Controller.php
index 4a7c2f68..99e609d6 100644
--- a/application/core/MY_Controller.php
+++ b/application/core/MY_Controller.php
@@ -12,7 +12,7 @@ public function __construct()
 		parent::__construct();
         $this->_headerData['userIsLoggedIn'] = $this->user->isLoggedIn();
 		$this->_headerData['styleSheets'] = array('main');
-		$this->_headerData['javaScripts'] = array('jquery.min', 'bootstrap.min', 'application', 'MediaElement/mediaelement-and-player.min');
+		$this->_headerData['javaScripts'] = array('jquery.min', 'bootstrap.min', 'application', 'MediaElement/mediaelement-and-player.min', 'facebook');
         $this->_headerData['headerClass'] = '';
         
         if($this->_needLoggedIn && !$this->user->isLoggedIn())
diff --git a/application/views/header.php b/application/views/header.php
index 0e647175..ca25bea2 100644
--- a/application/views/header.php
+++ b/application/views/header.php
@@ -27,19 +27,27 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="<?php echo ico_url('ms-icon-144x144.png')?>">
     <meta name="theme-color" content="#ffffff">
-	<?php
-		foreach($styleSheets as $css) { echo '<link rel="stylesheet" href="'.css_url($css).'">'; }
-		foreach($javaScripts as $js) { echo '<script src="'.js_url($js).'"></script>'; }
-	?>
 	<script>
           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
           (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
           m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
           })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
+          (function(d, s, id) {
+            var js, fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) return;
+            js = d.createElement(s); js.id = id;
+            js.src = "//connect.facebook.net/en_US/sdk.js";
+            fjs.parentNode.insertBefore(js, fjs);
+          }(document, 'script', 'facebook-jssdk'));
+
           ga('create', 'UA-59148878-1', 'auto');
           ga('send', 'pageview');
     </script>
+    <?php
+        foreach($styleSheets as $css) { echo '<link rel="stylesheet" href="'.css_url($css).'">'; }
+        foreach($javaScripts as $js) { echo '<script src="'.js_url($js).'"></script>'; }
+    ?>
     <!--[if lt IE 8]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
diff --git a/application/views/modal/login.php b/application/views/modal/login.php
index d6ce8287..2256a6f6 100644
--- a/application/views/modal/login.php
+++ b/application/views/modal/login.php
@@ -1,3 +1,8 @@
+<script type="text/javascript">
+	$( document ).ready(function() {
+    	fbAsyncInit();
+	});
+</script>
 <form method="post" name="login">
     <div class="form-group">
        <h1>Login</h1>
@@ -16,6 +21,9 @@
 		<center><button type="submit" name="login" class="btn btn-primary btn-lg btn-spinner">Log in <i class="fa fa-spinner fa-pulse"></i></button></center>
 	</div>
 	<div class="form-group">
-		  <center>Not registered yet? <a data-href="/sign-up/" data-modal-update="true">Sign up here!</a></center>
+		  <center>Not registered yet? <a data-href="/sign-up/" data-modal-update="true">Sign up here!</a> or <br />
+			<fb:login-button size="xlarge" style="margin-top:15px" scope="public_profile,email" onlogin="checkLoginState();">
+			</fb:login-button>
+		</center>
 	</div>  
 </form>
\ No newline at end of file
diff --git a/application/views/modal/sign-up.php b/application/views/modal/sign-up.php
index de4eb8dc..3d025250 100644
--- a/application/views/modal/sign-up.php
+++ b/application/views/modal/sign-up.php
@@ -25,6 +25,8 @@
 		<div class="form-group">
 			<center><a class="btn btn-primary btn-lg signupNextStep">Continue</a></center>
 		</div>
+		<div id="status">
+		</div>
 	</fieldset>
 	<fieldset class="stepTwo">
         <div class="form-group">
diff --git a/assets/js/facebook.js b/assets/js/facebook.js
new file mode 100644
index 00000000..c9306d43
--- /dev/null
+++ b/assets/js/facebook.js
@@ -0,0 +1,60 @@
+// This is called with the results from from FB.getLoginStatus().
+  function statusChangeCallback(response) {
+    console.log('statusChangeCallback');
+    console.log(response);
+    // The response object is returned with a status field that lets the
+    // app know the current login status of the person.
+    // Full docs on the response object can be found in the documentation
+    // for FB.getLoginStatus().
+    if (response.status === 'connected') {
+      // Logged into your app and Facebook.
+      testAPI();
+    } 
+  }
+
+  // This function is called when someone finishes with the Login
+  // Button.  See the onlogin handler attached to it in the sample
+  // code below.
+  function checkLoginState() {
+    FB.getLoginStatus(function(response) {
+      statusChangeCallback(response);
+    });
+  }
+
+  window.fbAsyncInit = function() {
+  FB.init({
+    appId      : '807383452677000',
+    cookie     : true,  // enable cookies to allow the server to access 
+                        // the session
+    xfbml      : true,  // parse social plugins on this page
+    version    : 'v2.2' // use version 2.2
+  });
+
+  // Now that we've initialized the JavaScript SDK, we call 
+  // FB.getLoginStatus().  This function gets the state of the
+  // person visiting this page and can return one of three states to
+  // the callback you provide.  They can be:
+  //
+  // 1. Logged into your app ('connected')
+  // 2. Logged into Facebook, but not your app ('not_authorized')
+  // 3. Not logged into Facebook and can't tell if they are logged into
+  //    your app or not.
+  //
+  // These three cases are handled in the callback function.
+
+  FB.getLoginStatus(function(response) {
+    statusChangeCallback(response);
+  });
+
+  };
+
+  // Here we run a very simple test of the Graph API after login is
+  // successful.  See statusChangeCallback() for when this call is made.
+  function testAPI() {
+    console.log('Welcome!  Fetching your information.... ');
+    FB.api('/me', function(response) {
+      console.log('Successful login for: ' + response.name);
+      document.getElementById('status').innerHTML =
+        'Thanks for logging in, ' + response.name + '!';
+    });
+  }
\ No newline at end of file