Commit 1413c94a authored by Fatih Acet's avatar Fatih Acet

Merge branch '15081-wrong-login-tab-ldap-frontend' into 'master'

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

## What does this MR do?
Fixes issue: 15081 Wrong Tab Selected When Loggin Fails And Multiple Login Tabs Exists
This is done by saving into a cookie when the active tab changes and by always selecting that tab when the page is loaded.
## Are there points in the code the reviewer needs to double check?
No
## Why was this MR needed?
In order to fix the issue: 15081
## Screenshots (if relevant)

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [x] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?


Closes #15081

See merge request !7314
parents ab04e6c8 8235f830
...@@ -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