ajax login fix #451

web/themes/custom/edlptheme/assets/scripts/main.js

@@ -1,6 +1,8 @@
 (function($, Drupal, drupalSettings) {
 
   EdlpTheme = function(){
+    var _origin = window.location.origin;
+    var _base_url = drupalSettings.path.baseUrl;
     var _ajax_settings = drupalSettings.edlp_ajax;
     var _$body = $('body');
     // var _is_front = drupalSettings.path.isFront;
@@ -17,6 +19,9 @@
     };
     var _corpus_promise;
     var _is_mobile =  edlp_mobile.device_is_mobile;
+    var _is_loggedin = drupalSettings.user.uid === 0 ? false : true;
+    var _$log_form;
+    var _user_tokens;
 
     //  ___      _ _
     // |_ _|_ _ (_) |_
@@ -25,9 +30,9 @@
     function init(){
       console.log("EdlpTheme init()");
 
-
-      // if(!drupalSettings.path.isFront)
-      //   return;
+      if (!_is_loggedin) {
+        initLogForm();
+      }
 
       if(_is_mobile){
         initMobile();
@@ -40,11 +45,8 @@
       initAjaxLinks();
       initHistory();
 
-
       if(!_is_mobile){
-
         checkLayout();
-
         initAudioLinksHover();
       }
 
@@ -55,14 +57,77 @@
         _$body.attr('booted', 'booted');
       }
 
-
-      // if(!drupalSettings.path.isFront)
-      //   return;
-      //
-      // initEvents();
     };
 
 
+    //  _                ___
+    // | |   ___  __ _  | __|__ _ _ _ __
+    // | |__/ _ \/ _` | | _/ _ \ '_| '  \
+    // |____\___/\__, | |_|\___/_| |_|_|_|
+    //           |___/
+    function initLogForm(){
+      console.log('initLogForm');
+      _$log_form = $('#user-login-form:not(ajax-enebled)')
+        .on('submit', onSubmitLogForm)
+        .addClass('ajax-enabled');
+    };
+
+    function onSubmitLogForm(e){
+      e.preventDefault();
+      // console.log('onSubmitLogForm', e);
+      var args = {
+        name : $('input#edit-name[type="text"]', this).val(),
+        pass : $('input#edit-pass[type="password"]', this).val()
+      };
+      // console.log(args);
+      logIn(args).then(getStudioLinkBlock);
+      return false;
+    };
+
+    function logIn(args){
+      console.log('logIn', args);
+      _$log_form.addClass('ajax-loading');
+      _$body.addClass('ajax-loading');
+
+      return $.ajax({
+        type: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        xhrFields: {
+          withCredentials: true
+        },
+        // accessToken : 'tokenvaluehere',
+        url: _origin+_base_url+"user/login?_format=json",
+        data: JSON.stringify(args),
+        // name: args.mail,
+        // pass: args.pass,
+        success: function(response){
+          // console.log('sucess', response);
+          _user_tokens = response;
+        },
+        error: function (xhr, ajaxOptions, thrownError){
+          console.log(xhr.status);
+          console.log(thrownError);
+        }
+      });
+    };
+
+    function getStudioLinkBlock(){
+      var path = _origin+_base_url+'edlp/ajax/blocks/json/';
+      $.getJSON(path+"studiolinkblock", {})
+        .done(onStudioLinkBlockLoaded)
+        .fail(function(jqxhr, textStatus, error){
+          console.warn('Studio ink block load failed', jqxhr.responseText);
+        });
+    };
+
+    function onStudioLinkBlockLoaded(data){
+      console.log('onStudioLinkBlockLoaded', data);
+      $('#block-studiouserlogin').replaceWith(data.blocks.studiolinkblock.rendered);
+      initAjaxLinks();
+      _$log_form.removeClass('ajax-loading');
+      _$body.removeClass('ajax-loading');
+    }
+
     //  __  __     _    _ _
     // |  \/  |___| |__(_) |___
     // | |\/| / _ \ '_ \ | / -_)
@@ -271,7 +336,7 @@
       console.log('ajaxLoadContent : state', state);
       _$body.addClass('ajax-loading');
       _ajax_timing.start = performance.now();
-      var path = window.location.origin + Drupal.url(state.ajax_path);
+      var path = _origin + Drupal.url(state.ajax_path);
       $.getJSON(path, {})
         .done(function(data){
           onAjaxLoaded(data, state);
@@ -552,7 +617,7 @@
     //      |__/
     // NOT USED (YET)
     // function refreshAllBlocks(){
-    //   var path = window.location.origin + Drupal.url(_ajax_settings.blocksjson_path);
+    //   var path = _origin + Drupal.url(_ajax_settings.blocksjson_path);
     //   $.getJSON(path, {})
     //     .done(function(data){
     //       onAjaxBlockLoaded(data);
@@ -1228,7 +1293,7 @@
         this.$cartel.addClass('loading');
         var vm = 'player_cartel';
         var ajax_path = _ajax_settings.entityjson_path+'/node/'+nid+'/'+vm;
-        var path = window.location.origin + Drupal.url(ajax_path);
+        var path = _origin + Drupal.url(ajax_path);
         $.getJSON(path, {})
           .done(this.onNodeLoaded.bind(this))
           .fail(this.onNodeLoadFail.bind(this));
@@ -1366,7 +1431,7 @@
     function RandomPlayer(playlist){
       this.active = false;
       this.playlist = playlist;
-      this.path =  drupalSettings.path.baseUrl+drupalSettings.path.pathPrefix+'#random'
+      this.path =  _base_url+drupalSettings.path.pathPrefix+'#random'
       this.$btn = $('<a>')
         .html('Shuffle')
         .attr('href',this.path)
@@ -1942,7 +2007,7 @@
 
       if(typeof pop_state == "undefined" || !pop_state){
         console.log('backToFrontPage push state');
-        history.pushState({home:true}, null, drupalSettings.path.baseUrl+drupalSettings.path.currentLanguage);
+        history.pushState({home:true}, null, _base_url+drupalSettings.path.currentLanguage);
       }
     }