diff --git a/inline-script.js b/inline-script.js index ba331b9e..1e7bab09 100644 --- a/inline-script.js +++ b/inline-script.js @@ -6,6 +6,7 @@ import { testHasLocalStorageOnce } from './src/routes/_utils/testStorage' import { switchToTheme } from './src/routes/_utils/themeEngine' import { basename } from './src/routes/_api/utils' +import { onUserIsLoggedOut } from './src/routes/_actions/onUserIsLoggedOut' window.__themeColors = process.env.THEME_COLORS @@ -35,9 +36,7 @@ if (currentInstance && localStorage.store_instanceThemes) { if (!hasLocalStorage || !currentInstance) { // if not logged in, show all these 'hidden-from-ssr' elements - let style = document.createElement('style') - style.textContent = '.hidden-from-ssr { opacity: 1 !important; }' - document.head.appendChild(style) + onUserIsLoggedOut() } if (hasLocalStorage && localStorage.store_disableCustomScrollbars === 'true') { diff --git a/src/routes/_actions/onUserIsLoggedOut.js b/src/routes/_actions/onUserIsLoggedOut.js new file mode 100644 index 00000000..c1829963 --- /dev/null +++ b/src/routes/_actions/onUserIsLoggedOut.js @@ -0,0 +1,11 @@ +// When the user is logged out, we need to be sure to re-show all the "hidden from SSR" styles +// so that we don't get a blank page. +export function onUserIsLoggedOut () { + if (document.getElementById('hiddenFromSsrStyle')) { + return + } + let style = document.createElement('style') + style.setAttribute('id', 'hiddenFromSsrStyle') + style.textContent = '.hidden-from-ssr { opacity: 1 !important; }' + document.head.appendChild(style) +} diff --git a/src/routes/_store/observers/logOutObservers.js b/src/routes/_store/observers/logOutObservers.js new file mode 100644 index 00000000..cc0029d6 --- /dev/null +++ b/src/routes/_store/observers/logOutObservers.js @@ -0,0 +1,12 @@ +import { onUserIsLoggedOut } from '../../_actions/onUserIsLoggedOut' + +export function logOutObservers (store) { + if (!process.browser) { + return + } + store.observe('isUserLoggedIn', isUserLoggedIn => { + if (!isUserLoggedIn) { + onUserIsLoggedOut() + } + }) +} diff --git a/src/routes/_store/observers/observers.js b/src/routes/_store/observers/observers.js index 4c5360ae..48990052 100644 --- a/src/routes/_store/observers/observers.js +++ b/src/routes/_store/observers/observers.js @@ -3,11 +3,13 @@ import { navObservers } from './navObservers' import { pageVisibilityObservers } from './pageVisibilityObservers' import { resizeObservers } from './resizeObservers' import { setupLoggedInObservers } from './setupLoggedInObservers' +import { logOutObservers } from './logOutObservers' export function observers (store) { onlineObservers(store) navObservers(store) pageVisibilityObservers(store) resizeObservers(store) + logOutObservers(store) setupLoggedInObservers(store) } diff --git a/src/template.html b/src/template.html index a662283a..85e667bd 100644 --- a/src/template.html +++ b/src/template.html @@ -48,7 +48,7 @@ html{scrollbar-face-color:var(--scrollbar-face-color);scrollbar-track-color:var( - diff --git a/tests/spec/002-login-spec.js b/tests/spec/002-login-spec.js index 47312d7a..54cfd4d1 100644 --- a/tests/spec/002-login-spec.js +++ b/tests/spec/002-login-spec.js @@ -4,7 +4,7 @@ import { authorizeInput, emailInput, formError, - getFirstVisibleStatus, getOpacity, + getFirstVisibleStatus, getNthStatus, getOpacity, getUrl, homeNavButton, instanceInput, @@ -14,6 +14,7 @@ import { settingsButton, sleep } from '../utils' +import { loginAsFoobar } from '../roles' fixture`002-login-spec.js` .page`http://localhost:4002` @@ -72,3 +73,24 @@ test('Logs in and logs out of localhost:3000', async t => { await t .expect(getOpacity('.hidden-from-ssr')()).eql('1') }) + +test('Logs in, refreshes, then logs out', async t => { + await loginAsFoobar(t) + await t + .hover(getNthStatus(0)) + await reload() + await t + .hover(getNthStatus(0)) + .click(settingsButton) + .click($('a').withText('Instances')) + .click($('a').withText('localhost:3000')) + .expect(getUrl()).contains('/settings/instances/localhost:3000') + .expect($('.instance-name-h1').innerText).eql('localhost:3000') + .expect($('.acct-handle').innerText).eql('@foobar') + .expect($('.acct-display-name').innerText).eql('foobar') + .click($('button').withText('Log out')) + .click($('.modal-dialog button').withText('OK')) + .expect($('.main-content').innerText).contains("You're not logged in to any instances") + .click(homeNavButton) + .expect(getOpacity('.hidden-from-ssr')()).eql('1') +})