eugeniop · May 29, 2014 05:09
diff --git a/app.css b/app.css
 body{
    padding: 20px;
    background: #f1f1f1;
 }

 h1,h2,h3{
  font-weight: 100;
 }

 .btn{
    background-color: #16214D;   
 }

 .btn:hover{
    background-color: #44C7F4;   
 }

 .auth0-box{
    text-align: center;  
    background: #fff;
    padding: 20px;
    border-radius: 3px;
    max-width: 360px;
    margin: auto;
 }

 .login-box img{
    display: block;   
    width: 40px;
    margin: auto;
    margin-bottom: 20px;
 }

 .login-box h3{
    margin: 10px 0;
 }

 .avatar{
    width: 80px;
    height: 80px;
    border-radius: 100px;
    margin-top: -60px;
 }


 .logged-in-box{
    margin-top: 30px;   
 }

 .logged-in-box h3{
  margin-bottom: 10px;
 }

 .profile-info{
    border-top: 1px solid #f1f1f1;   
    padding: 10px 0;
 }


 .profile-info-label{
    color: #999;
    text-align: right;
 }

 .btn.btn-twitter{
  font-size: 12px;
  background-color: #44C7F4;
  color: white;
  margin-top: 10px;
  padding-left: 0;
  padding-right: 0;
 }

 .btn.btn-twitter:hover{
  background-color: #097296;
 }


 .input-twitter{
  border-radius: 3px;
  padding: 2%;
  border: 1px solid #999;
  width: 200px;
  margin: auto;
  margin-top: 20px;
 }
diff --git a/app.js b/app.js
 $(document).ready(function() {
    var widget = new Auth0Widget({
        domain:         'eugeniopace.auth0.com',
        clientID:       'YBHeXTjJpSueSc3eiIrbYCHZGYUUBJDv',
        callbackURL:    window.location.origin,
        callbackOnLocationHash: true
    });

    
    $('.btn-login').click(function(e) {
        e.preventDefault();
        
        Pusher.PrivateChannel.prototype.authorize = function (socketId, callback) {
            alert('socket id is ' + socketId );

            widget.signin({ popup: true, extraParameters: { 
                socket_id: socketId,
                channel: 'private-channel-123'
            },
                access_type: 'offline'
            }, null, function(err, profile, token) {
                if (err) {
                    console.log("There was an error");
                    return alert("There was an error logging in");
                } 
                $('.login-box').hide();
                $('.logged-in-box').show();
                $('.avatar').attr('src', profile.picture);
                $('.welcome').text('Welcome ' + profile.name);
                $('.nickname').text(profile.nickname);
                callback(false, {
                    auth: profile.pusherAuth
                });
            });

        };

        var pusher = new Pusher('3dc9278e1b763c7e1eeb', { authTransport: 'ajax'});
        var privateChannel = pusher.subscribe('private-channel-123');

        privateChannel.bind('pusher:subscription_error', function(status){
            alert(status);
        });

        privateChannel.bind('new-message', function(data) {
            alert(data);
        });
    });
    
 });
diff --git a/index.html b/index.html
 <html>
    <head>
    	<script src="//d3dy5gmtp8yhk7.cloudfront.net/2.2/pusher.min.js"></script>
        <script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
        <script src="//cdn.auth0.com/w2/auth0-widget-4.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="app.js"> </script>
        <link href="app.css" rel="stylesheet">
    </head>
    <body class="home">
        <div class="login-page clearfix">
          <div class="login-box auth0-box before">
            <img src="https://i.cloudup.com/StzWWrY34s.png" />
            <h3>Auth0 Example</h3>
            <p>Zero friction identity infrastructure, built for developers</p>
            <a class="btn btn-primary btn-lg btn-block btn-login">SignIn</a>
          </div>
          <div class="logged-in-box auth0-box logged-in" style="display: none;">
            <img class="avatar"/>
            <h3 class="welcome"></h3>
              
            <div class="profile-info row">
                <div class="profile-info-label col-xs-6">Nickname</div>
                <div class="profile-info-content col-xs-6 nickname"></div>
            </div>
          </div>
        </div>
    </body>
 </html>
	body{
	padding: 20px;
	background: #f1f1f1;
	}

	h1,h2,h3{
	font-weight: 100;
	}

	.btn{
	background-color: #16214D;
	}

	.btn:hover{
	background-color: #44C7F4;
	}

	.auth0-box{
	text-align: center;
	background: #fff;
	padding: 20px;
	border-radius: 3px;
	max-width: 360px;
	margin: auto;
	}

	.login-box img{
	display: block;
	width: 40px;
	margin: auto;
	margin-bottom: 20px;
	}

	.login-box h3{
	margin: 10px 0;
	}

	.avatar{
	width: 80px;
	height: 80px;
	border-radius: 100px;
	margin-top: -60px;
	}


	.logged-in-box{
	margin-top: 30px;
	}

	.logged-in-box h3{
	margin-bottom: 10px;
	}

	.profile-info{
	border-top: 1px solid #f1f1f1;
	padding: 10px 0;
	}


	.profile-info-label{
	color: #999;
	text-align: right;
	}

	.btn.btn-twitter{
	font-size: 12px;
	background-color: #44C7F4;
	color: white;
	margin-top: 10px;
	padding-left: 0;
	padding-right: 0;
	}

	.btn.btn-twitter:hover{
	background-color: #097296;
	}


	.input-twitter{
	border-radius: 3px;
	padding: 2%;
	border: 1px solid #999;
	width: 200px;
	margin: auto;
	margin-top: 20px;
	}
	$(document).ready(function() {
	var widget = new Auth0Widget({
	domain: 'eugeniopace.auth0.com',
	clientID: 'YBHeXTjJpSueSc3eiIrbYCHZGYUUBJDv',
	callbackURL: window.location.origin,
	callbackOnLocationHash: true
	});


	$('.btn-login').click(function(e) {
	e.preventDefault();

	Pusher.PrivateChannel.prototype.authorize = function (socketId, callback) {
	alert('socket id is ' + socketId );

	widget.signin({ popup: true, extraParameters: {
	socket_id: socketId,
	channel: 'private-channel-123'
	},
	access_type: 'offline'
	}, null, function(err, profile, token) {
	if (err) {
	console.log("There was an error");
	return alert("There was an error logging in");
	}
	$('.login-box').hide();
	$('.logged-in-box').show();
	$('.avatar').attr('src', profile.picture);
	$('.welcome').text('Welcome ' + profile.name);
	$('.nickname').text(profile.nickname);
	callback(false, {
	auth: profile.pusherAuth
	});
	});

	};

	var pusher = new Pusher('3dc9278e1b763c7e1eeb', { authTransport: 'ajax'});
	var privateChannel = pusher.subscribe('private-channel-123');

	privateChannel.bind('pusher:subscription_error', function(status){
	alert(status);
	});

	privateChannel.bind('new-message', function(data) {
	alert(data);
	});
	});

	});
	<html>
	<head>
	<script src="//d3dy5gmtp8yhk7.cloudfront.net/2.2/pusher.min.js"></script>
	<script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="//cdn.auth0.com/w2/auth0-widget-4.js"></script>
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<script src="app.js"> </script>
	<link href="app.css" rel="stylesheet">
	</head>
	<body class="home">
	<div class="login-page clearfix">
	<div class="login-box auth0-box before">
	<img src="https://i.cloudup.com/StzWWrY34s.png" />
	<h3>Auth0 Example</h3>
	<p>Zero friction identity infrastructure, built for developers</p>
	<a class="btn btn-primary btn-lg btn-block btn-login">SignIn</a>
	</div>
	<div class="logged-in-box auth0-box logged-in" style="display: none;">
	<img class="avatar"/>
	<h3 class="welcome"></h3>

	<div class="profile-info row">
	<div class="profile-info-label col-xs-6">Nickname</div>
	<div class="profile-info-content col-xs-6 nickname"></div>
	</div>
	</div>
	</div>
	</body>
	</html>