Skip to content

Commit

Permalink
Design for facebook login. Refs #20
Browse files Browse the repository at this point in the history
  • Loading branch information
MathieuNls committed May 25, 2015
1 parent 552484f commit cb3f77a
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 6 deletions.
2 changes: 1 addition & 1 deletion application/core/MY_Controller.php
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand Down
16 changes: 12 additions & 4 deletions application/views/header.php
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 9 additions & 1 deletion application/views/modal/login.php
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
2 changes: 2 additions & 0 deletions application/views/modal/sign-up.php
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
60 changes: 60 additions & 0 deletions assets/js/facebook.js
Original file line number Diff line number Diff line change
@@ -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 + '!';
});
}

0 comments on commit cb3f77a

Please sign in to comment.