Social login

login.html

<div class="pull-left" data-social-auth>
    <span class="btn btn-link btn-connect facebook" title="Login with your facebook account" data-ng-click="connect('facebook')">Facebook</span>
    <span class="btn btn-link btn-connect google" title="Login with your google account"  data-ng-click="connect('google')">G+</span>
    <span class="btn btn-link btn-connect twitter" title="Login with your twitter account"  data-ng-click="connect('twitter')">Twitter</span>
</div>

social-auth.js

'use strict';

(function (ng, users) {

    var socialAuthDirective = function ($q, $http) {

        var providers = {
            facebook: {
                login: function () {
                    var deferred = $q.defer();

                    FB.login(function(response) {
                            if (response.authResponse) {
                                deferred.resolve({
                                    status: response.authResponse
                                });
                            } else {
                                deferred.reject('canceled');
                            }
                        }, { scope: 'email,read_stream' }
                    );

                    return deferred.promise;
                },
                getInfo: function () {
                    var deferred = $q.defer();

                    FB.api('/me', function(response) {
                        deferred.resolve(response);
                        console.log(response);
                    });

                    return deferred.promise;
                }
            },
            google: {
                login: function () {
                    var deferred = $q.defer();

                    setTimeout(function () {
                        deferred.reject('not implemented');
                    }, 200);

                    return deferred.promise;
                },
                getInfo: function () {
                    var deferred = $q.defer();

                    setTimeout(function () {
                        deferred.reject('not implemented');
                    }, 200);

                    return deferred.promise;
                }

            },
            twitter: {
                login: function () {
                    var deferred = $q.defer();

                    setTimeout(function () {
                        deferred.reject('not implemented');
                    }, 200);

                    return deferred.promise;
                },
                getInfo: function () {
                    var deferred = $q.defer();

                    setTimeout(function () {
                        deferred.reject('not implemented');
                    }, 200);

                    return deferred.promise;
                }
            }
        };

        var controller = function ($scope, $http) {

            function register (provider) {
                provider.getInfo().then(function (user) {
//                    $http.post('/security/register', user).then(function (response, status, headers) {
//
//                    }, function (response, status, headers) {
//
//                    })
                })
            }

            $scope.connect = function (providerType) {
                if (!providers.hasOwnProperty(providerType)) {
                    return;
                }

                var provider = providers[providerType];

                provider.login().then(function (response) {
                    alert('connected!');
                    register(provider);
                    // todo: check on server
                    // register new user with his data
                }, function (error) {
                    alert(error);
                })
            };
        };
        controller.$inject = ['$scope', '$http'];


        return {
            restrict: 'A',
            scope: true,
            controller: controller,
            link: function(scope, element, attrs, controller) {
                // todo: init SDK?
            }
        }
    };
    socialAuthDirective.$inject = ['$q', '$http'];

    users.directive('socialAuth', socialAuthDirective)

}(angular, angular.module('relaxer.users')));