Proposal: Avoid graph request made by mgt-login (cache workaround)
Description
The goal is to provide a solution to avoid the graph call by the <mgt-login> component every time you are loading a page where the component is in place, like this :
Each time you refresh the page, you have a graph call resulting in a weird cliping visual effect...
Rationale
Until the cache system is available (#221) we can hook the events raised by the component
I tried to used the loginCompleted and loginCompleted but they are not fired at the good timing
loginCompleted is raised before login IS completed...
Preferred Solution
Here a sample code you can use to avoid this graph call and weird visual effect.
<mgt-login id="mgtlogin"></mgt-login>
<script>
// Do not wait until the page is loaded to be sure we won't have any "cliping" visual effect
// And affect AS SOON AS POSSIBLE the user details object stored in local storage, if available
var mgtlogin = document.getElementById('mgtlogin');
// Theses events are raised when user clicks on login or logout button
// Theyr are not raised at the good timing
// Should be renamed 'loginClick' and 'logoutClick'
mgtlogin.addEventListener('loginCompleted', () => localStorage.removeItem("userdetails"));
mgtlogin.addEventListener('logoutCompleted', () => localStorage.removeItem("userdetails"));
// get local storage item if any
var userDetailsFromStorageString = localStorage.getItem('userdetails');
if (userDetailsFromStorageString !== null && mgtlogin.userDetails === null)
mgtlogin.userDetails = JSON.parse(userDetailsFromStorageString);
// Loading completed is correctly fired AFTER component is loaded AND user logged in
mgtlogin.addEventListener('loadingCompleted', () => {
if (mgtlogin.userDetails !== null)
localStorage.setItem('userdetails', JSON.stringify(mgtlogin.userDetails));
});
</script>Of course, once the cache will be release I guess it will not be needed anymore.
Proposal: Avoid graph request made by mgt-login (cache workaround)
Description
The goal is to provide a solution to avoid the graph call by the
<mgt-login>component every time you are loading a page where the component is in place, like this :Each time you refresh the page, you have a graph call resulting in a weird cliping visual effect...
Rationale
Until the cache system is available (#221) we can hook the events raised by the component
Preferred Solution
Here a sample code you can use to avoid this graph call and weird visual effect.
Of course, once the cache will be release I guess it will not be needed anymore.