Commit 8235f830 authored by Jacopo's avatar Jacopo Committed by jacopo-beschi-intersail

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.
parent c2be86b5
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
"globals": { "globals": {
"_": false, "_": false,
"gl": false, "gl": false,
"gon": false "gon": false,
"localStorage": false
}, },
"plugins": [ "plugins": [
"filenames" "filenames"
......
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
switch (page) { switch (page) {
case 'sessions:new': case 'sessions:new':
new UsernameValidator(); new UsernameValidator();
new ActiveTabMemoizer();
break; break;
case 'projects:boards:show': case 'projects:boards:show':
case 'projects:boards:index': case 'projects:boards:index':
......
/* 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);
- page_title "Sign in" - page_title "Sign in"
%div %div
- if form_based_providers.any? - if form_based_providers.any?
= render 'devise/shared/tabs_ldap' = render 'devise/shared/tabs_ldap'
......
---
title: Fix wrong tab selected when loggin fails and multiple login tabs exists
merge_request: 7314
author: Jacopo Beschi @jacopo-beschi
%ul.nav-tabs
%li
%a.active{ id: 'standard', href: '#standard'} Standard
%li
%a{ id: 'ldap', href: '#ldap'} Ldap
/*= 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);
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment