Fixed Wrong Tab Selected When Loggin Fails And Multiple Login Tabs Exists

When ldap is enabled and use "Standard" authentication method, if authentication fails
the correct tab remain selected.
This is done by saving into localStorage when the active tab changes and by always selecting that tab when
the page is loaded.

.eslintrc

@@ -8,7 +8,8 @@
   "globals": {
     "_": false,
     "gl": false,
-    "gon": false
+    "gon": false,
+    "localStorage": false
   },
   "plugins": [
     "filenames"

app/assets/javascripts/dispatcher.js.es6

@@ -24,6 +24,7 @@
       switch (page) {
         case 'sessions:new':
           new UsernameValidator();
+          new ActiveTabMemoizer();
           break;
         case 'projects:boards:show':
         case 'projects:boards:index':

app/assets/javascripts/signin_tabs_memoizer.js.es6

@@ -0,0 +1,49 @@
+/* eslint no-param-reassign: ["error", { "props": false }]*/
+/* eslint no-new: "off" */
+((global) => {
+  /**
+   * Memorize the last selected tab after reloading a page.
+   * Does that setting the current selected tab in the localStorage
+   */
+  class ActiveTabMemoizer {
+    constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
+      this.currentTabKey = currentTabKey;
+      this.tabSelector = tabSelector;
+      this.bootstrap();
+    }
+
+    bootstrap() {
+      const tabs = document.querySelectorAll(this.tabSelector);
+      if (tabs.length > 0) {
+        tabs[0].addEventListener('click', (e) => {
+          if (e.target && e.target.nodeName === 'A') {
+            const anchorName = e.target.getAttribute('href');
+            this.saveData(anchorName);
+          }
+        });
+      }
+
+      this.showTab();
+    }
+
+    showTab() {
+      const anchorName = this.readData();
+      if (anchorName) {
+        const tab = document.querySelector(`${this.tabSelector} a[href="${anchorName}"]`);
+        if (tab) {
+          tab.click();
+        }
+      }
+    }
+
+    saveData(val) {
+      localStorage.setItem(this.currentTabKey, val);
+    }
+
+    readData() {
+      return localStorage.getItem(this.currentTabKey);
+    }
+  }
+
+  global.ActiveTabMemoizer = ActiveTabMemoizer;
+})(window);

app/views/devise/sessions/new.html.haml

@@ -1,4 +1,5 @@
 - page_title "Sign in"
+
 %div
   - if form_based_providers.any?
     = render 'devise/shared/tabs_ldap'

changelogs/unreleased/15081-wrong-login-tab-ldap-frontend.yml

@@ -0,0 +1,4 @@
+---
+title: Fix wrong tab selected when loggin fails and multiple login tabs exists
+merge_request: 7314
+author: Jacopo Beschi @jacopo-beschi 

spec/javascripts/fixtures/signin_tabs.html.haml

@@ -0,0 +1,5 @@
+%ul.nav-tabs
+  %li
+    %a.active{ id: 'standard', href: '#standard'} Standard
+  %li
+    %a{ id: 'ldap', href: '#ldap'} Ldap

spec/javascripts/signin_tabs_memoizer_spec.js.es6

@@ -0,0 +1,53 @@
+/*= require signin_tabs_memoizer */
+
+((global) => {
+  describe('SigninTabsMemoizer', () => {
+    const fixtureTemplate = 'signin_tabs.html';
+    const tabSelector = 'ul.nav-tabs';
+    const currentTabKey = 'current_signin_tab';
+    let memo;
+
+    function createMemoizer() {
+      memo = new global.ActiveTabMemoizer({
+        currentTabKey,
+        tabSelector,
+      });
+      return memo;
+    }
+
+    fixture.preload(fixtureTemplate);
+
+    beforeEach(() => {
+      fixture.load(fixtureTemplate);
+    });
+
+    it('does nothing if no tab was previously selected', () => {
+      createMemoizer();
+
+      expect(document.querySelector('li a.active').getAttribute('id')).toEqual('standard');
+    });
+
+    it('shows last selected tab on boot', () => {
+      createMemoizer().saveData('#ldap');
+      const fakeTab = {
+        click: () => {},
+      };
+      spyOn(document, 'querySelector').and.returnValue(fakeTab);
+      spyOn(fakeTab, 'click');
+
+      memo.bootstrap();
+
+      // verify that triggers click on the last selected tab
+      expect(document.querySelector).toHaveBeenCalledWith(`${tabSelector} a[href="#ldap"]`);
+      expect(fakeTab.click).toHaveBeenCalled();
+    });
+
+    it('saves last selected tab on change', () => {
+      createMemoizer();
+
+      document.getElementById('standard').click();
+
+      expect(memo.readData()).toEqual('#standard');
+    });
+  });
+})(window);