LIL-88 Регистрация через Facebook (фронт)

project/templates/lilcity/index.html

@@ -234,7 +234,7 @@
                       <div id="learner-auth-field-error__password"
                            class="field__error learner-auth-form__field-error"></div>
 
-                      <div id="learner-auth-field-error__all" class="form__common-error learner-auth-form__field-error"></div>
+                      <div id="learner-auth-field-error__all" class="auth-register__common-error form__common-error learner-auth-form__field-error"></div>
                     </div>
                     <div class="auth__foot">
                       <button class="auth__btn btn btn_light" tabindex="3">ВОЙТИ</button>
@@ -287,7 +287,7 @@
                          class="field__error learner-registration-form__field-error"></div>
 
                     <div id="learner-registration-field-error__all"
-                         class="form__common-error learner-registration-form__field-error"></div>
+                         class="auth-register__common-error form__common-error learner-registration-form__field-error"></div>
                   </div>
                   <div class="auth__foot">
                     <button id="learner-registration-form__submit-button" class="auth__btn btn btn_light">

web/build/js/app.js

@@ -11046,7 +11046,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     _jquery2.default.ajaxSetup({ cache: true });
     _jquery2.default.getScript('https://connect.facebook.net/en_US/sdk.js');
 
-    (0, _jquery2.default)('button.btn_fb').on('click', function () {
+    var facebookButton = (0, _jquery2.default)('button.btn_fb');
+    facebookButton.on('click', function () {
+        (0, _jquery2.default)('.auth-register__common-error').hide();
+        facebookButton.addClass('loading');
         _jquery2.default.getScript('https://connect.facebook.net/en_US/sdk.js', function () {
             FB.init({
                 appId: '161924711105785',
@@ -11054,15 +11057,42 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
             });
             FB.getLoginStatus(function (response) {
                 if (response.status === 'connected') {
-                    console.log('Logged in.', response);
+                    login_with_facebook(response.authResponse.accessToken);
                 } else {
-                    FB.login();
+                    FB.login(function (response) {
+                        if (response.status === 'connected') {
+                            login_with_facebook(response.authResponse.accessToken);
+                        } else {
+                            facebookButton.removeClass('loading');
+                            (0, _jquery2.default)('.auth-register__common-error').text('Не удалось авторизоваться через Facebook');
+                        }
+                    }, { scope: 'public_profile,email' });
                 }
             });
         });
     });
 });
 
+function login_with_facebook(accessToken) {
+    _jquery2.default.ajax('/auth/facebook_login/', {
+        method: 'POST',
+        data: { 'access_token': accessToken }
+    }).done(function (data) {
+        if (data.success === true) {
+            location.reload();
+        }
+    }).fail(function (xhr) {
+        console.log('error', xhr);
+        if (xhr.message) {
+            (0, _jquery2.default)('.auth-register__common-error').text(xhr.message).show();
+        }
+
+        (0, _jquery2.default)('.auth-register__common-error').text('Произошла незвестная ошибка').show();
+    }).always(function () {
+        (0, _jquery2.default)('button.btn_fb').removeClass('loading');
+    });
+}
+
 /***/ }),
 /* 12 */
 /***/ (function(module, exports, __webpack_require__) {

web/src/js/modules/auth.js

@@ -245,7 +245,10 @@ $(document).ready(function () {
     $.ajaxSetup({cache: true});
     $.getScript('https://connect.facebook.net/en_US/sdk.js');
 
-    $('button.btn_fb').on('click', function () {
+    const facebookButton = $('button.btn_fb');
+    facebookButton.on('click', function () {
+        $('.auth-register__common-error').hide();
+        facebookButton.addClass('loading');
         $.getScript('https://connect.facebook.net/en_US/sdk.js', function () {
             FB.init({
                 appId: '161924711105785',
@@ -253,12 +256,42 @@ $(document).ready(function () {
             });
             FB.getLoginStatus(function (response) {
                 if (response.status === 'connected') {
-                    console.log('Logged in.', response);
+                    login_with_facebook(response.authResponse.accessToken);
                 }
                 else {
-                    FB.login();
+                    FB.login(function (response) {
+                        if (response.status === 'connected') {
+                            login_with_facebook(response.authResponse.accessToken);
+                        } else {
+                            facebookButton.removeClass('loading');
+                            $('.auth-register__common-error').text('Не удалось авторизоваться через Facebook');
+                        }
+                    }, {scope: 'public_profile,email'});
                 }
             });
         });
     });
-});
+});
+
+function login_with_facebook(accessToken) {
+    $.ajax('/auth/facebook_login/', {
+        method: 'POST',
+        data: {'access_token': accessToken},
+    })
+        .done(function (data) {
+            if (data.success === true) {
+                location.reload();
+            }
+        })
+        .fail(function (xhr) {
+            console.log('error', xhr);
+            if (xhr.message) {
+                $('.auth-register__common-error').text(xhr.message).show();
+            }
+
+            $('.auth-register__common-error').text('Произошла незвестная ошибка').show();
+        })
+        .always(function () {
+            $('button.btn_fb').removeClass('loading');
+        });
+}

web/src/sass/_common.sass

@@ -155,17 +155,6 @@ b
       border-radius: 2px
       transition: opacity .2s 
       z-index: -2
-  &_fb
-    background: #3957A7
-    color: white
-    &:active
-      color: rgba(white,.2)
-      .icon
-        fill: rgba(white,.2) 
-    .icon
-      margin: -9px 15px -6px -25px
-      font-size: 20px
-      fill: white
   &_gray
     background: $bg 
   &_md
@@ -193,6 +182,8 @@ b
   &.loading
     box-shadow: none
     color: transparent
+    .icon
+      visibility: hidden
     &:after
       content: ''
       position: absolute
@@ -205,6 +196,34 @@ b
       border-left: 3px solid transparent
       border-radius: 50% 
       animation: loading .6s infinite linear
+  &_fb
+    background: #3957A7
+    color: white
+    &:active
+      color: rgba(white, .2)
+      .icon
+        fill: rgba(white, .2)
+    .icon
+      margin: -9px 15px -6px -25px
+      font-size: 20px
+      fill: white
+    &.loading
+      box-shadow: none
+      color: transparent
+      .icon
+        visibility: hidden
+      &:after
+        content: ''
+        position: absolute
+        top: 50%
+        left: 50%
+        width: 24px
+        height: 24px
+        margin: -12px 0 0 -12px
+        border: 3px solid #fff
+        border-left: 3px solid transparent
+        border-radius: 50%
+        animation: loading .6s infinite linear
 
 @keyframes loading
   0