fix: fix logging in and out with a refresh (#824)

* fix: fix logging in and out with a refresh

fixes #805

* simplify code

* make test less flaky

* fix dumb mistake
This commit is contained in:
Nolan Lawson 2018-12-16 12:39:16 -08:00 committed by GitHub
parent 14a618f374
commit bf9ba22c35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 51 additions and 5 deletions

View File

@ -6,6 +6,7 @@
import { testHasLocalStorageOnce } from './src/routes/_utils/testStorage' import { testHasLocalStorageOnce } from './src/routes/_utils/testStorage'
import { switchToTheme } from './src/routes/_utils/themeEngine' import { switchToTheme } from './src/routes/_utils/themeEngine'
import { basename } from './src/routes/_api/utils' import { basename } from './src/routes/_api/utils'
import { onUserIsLoggedOut } from './src/routes/_actions/onUserIsLoggedOut'
window.__themeColors = process.env.THEME_COLORS window.__themeColors = process.env.THEME_COLORS
@ -35,9 +36,7 @@ if (currentInstance && localStorage.store_instanceThemes) {
if (!hasLocalStorage || !currentInstance) { if (!hasLocalStorage || !currentInstance) {
// if not logged in, show all these 'hidden-from-ssr' elements // if not logged in, show all these 'hidden-from-ssr' elements
let style = document.createElement('style') onUserIsLoggedOut()
style.textContent = '.hidden-from-ssr { opacity: 1 !important; }'
document.head.appendChild(style)
} }
if (hasLocalStorage && localStorage.store_disableCustomScrollbars === 'true') { if (hasLocalStorage && localStorage.store_disableCustomScrollbars === 'true') {

View File

@ -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)
}

View File

@ -0,0 +1,12 @@
import { onUserIsLoggedOut } from '../../_actions/onUserIsLoggedOut'
export function logOutObservers (store) {
if (!process.browser) {
return
}
store.observe('isUserLoggedIn', isUserLoggedIn => {
if (!isUserLoggedIn) {
onUserIsLoggedOut()
}
})
}

View File

@ -3,11 +3,13 @@ import { navObservers } from './navObservers'
import { pageVisibilityObservers } from './pageVisibilityObservers' import { pageVisibilityObservers } from './pageVisibilityObservers'
import { resizeObservers } from './resizeObservers' import { resizeObservers } from './resizeObservers'
import { setupLoggedInObservers } from './setupLoggedInObservers' import { setupLoggedInObservers } from './setupLoggedInObservers'
import { logOutObservers } from './logOutObservers'
export function observers (store) { export function observers (store) {
onlineObservers(store) onlineObservers(store)
navObservers(store) navObservers(store)
pageVisibilityObservers(store) pageVisibilityObservers(store)
resizeObservers(store) resizeObservers(store)
logOutObservers(store)
setupLoggedInObservers(store) setupLoggedInObservers(store)
} }

View File

@ -48,7 +48,7 @@ html{scrollbar-face-color:var(--scrollbar-face-color);scrollbar-track-color:var(
</head> </head>
<body> <body>
<!-- auto-generated w/ build-inline-script.js --> <!-- auto-generated w/ build-inline-script.js -->
<!-- insert inline script here --><script>!function(){"use strict";let e=document.getElementById("theThemeColor"),t=document.getElementById("theOfflineStyle");function o(){return document.head.querySelector('link[rel=stylesheet][href^="/theme-"]')}window.__themeColors={default:"royalblue",scarlet:"#e04e41",seafoam:"#177380",hotpants:"hotpink",oaken:"saddlebrown",majesty:"blueviolet",gecko:"#4ab92f",ozark:"#5263af",cobalt:"#08439b",sorcery:"#ae91e8",punk:"#e04e41",riot:"hotpink",hacker:"#4ab92f",pitchblack:"#000"};const n=e=>void 0===e||"undefined"===e?void 0:JSON.parse(e),r=(()=>{try{if(localStorage.setItem("__test__","__test__"),!localStorage.length||"__test__"!==localStorage.getItem("__test__"))return!1;localStorage.removeItem("__test__")}catch(e){return!1}return!0})(),a=r&&n(localStorage.store_currentInstance);if(a){let e=document.createElement("link");e.setAttribute("rel","prefetch"),e.setAttribute("href",`${l=a,function(e){return e.startsWith("localhost:")||e.startsWith("127.0.0.1:")}(l)?`http://${l}`:`https://${l}`}/api/v1/instance`),e.setAttribute("crossorigin","anonymous"),document.head.appendChild(e)}var l;if(a&&localStorage.store_instanceThemes){let r=n(localStorage.store_instanceThemes)[n(localStorage.store_currentInstance)];r&&"default"!==r&&function(n){let r=window.__themeColors[n];e.content=r||window.__themeColors.default,"default"!==n?function(e){let n=o(),r=document.createElement("link");r.rel="stylesheet",r.href=e,r.addEventListener("load",function e(){r.removeEventListener("load",e),n&&document.head.removeChild(n)}),document.head.insertBefore(r,t)}(`/theme-${n}.css`):function(){let e=o();e&&document.head.removeChild(e)}()}(r)}if(!r||!a){let e=document.createElement("style");e.textContent=".hidden-from-ssr { opacity: 1 !important; }",document.head.appendChild(e)}if(r&&"true"===localStorage.store_disableCustomScrollbars){document.getElementById("theScrollbarStyle").setAttribute("media","only x")}/mac/i.test(navigator.platform)&&document.documentElement.style.setProperty("--scrollbar-border-radius","50px"),/iP(?:hone|ad|od)/.test(navigator.userAgent)&&document.head.removeChild(document.getElementById("theManifest"))}(); <!-- insert inline script here --><script>!function(){"use strict";let e=document.getElementById("theThemeColor"),t=document.getElementById("theOfflineStyle");function o(){return document.head.querySelector('link[rel=stylesheet][href^="/theme-"]')}window.__themeColors={default:"royalblue",scarlet:"#e04e41",seafoam:"#177380",hotpants:"hotpink",oaken:"saddlebrown",majesty:"blueviolet",gecko:"#4ab92f",ozark:"#5263af",cobalt:"#08439b",sorcery:"#ae91e8",punk:"#e04e41",riot:"hotpink",hacker:"#4ab92f",pitchblack:"#000"};const n=e=>void 0===e||"undefined"===e?void 0:JSON.parse(e),r=(()=>{try{if(localStorage.setItem("__test__","__test__"),!localStorage.length||"__test__"!==localStorage.getItem("__test__"))return!1;localStorage.removeItem("__test__")}catch(e){return!1}return!0})(),l=r&&n(localStorage.store_currentInstance);if(l){let e=document.createElement("link");e.setAttribute("rel","prefetch"),e.setAttribute("href",`${a=l,function(e){return e.startsWith("localhost:")||e.startsWith("127.0.0.1:")}(a)?`http://${a}`:`https://${a}`}/api/v1/instance`),e.setAttribute("crossorigin","anonymous"),document.head.appendChild(e)}var a;if(l&&localStorage.store_instanceThemes){let r=n(localStorage.store_instanceThemes)[n(localStorage.store_currentInstance)];r&&"default"!==r&&function(n){let r=window.__themeColors[n];e.content=r||window.__themeColors.default,"default"!==n?function(e){let n=o(),r=document.createElement("link");r.rel="stylesheet",r.href=e,r.addEventListener("load",function e(){r.removeEventListener("load",e),n&&document.head.removeChild(n)}),document.head.insertBefore(r,t)}(`/theme-${n}.css`):function(){let e=o();e&&document.head.removeChild(e)}()}(r)}if(r&&l||function(){if(document.getElementById("hiddenFromSsrStyle"))return;let e=document.createElement("style");e.setAttribute("id","hiddenFromSsrStyle"),e.textContent=".hidden-from-ssr { opacity: 1 !important; }",document.head.appendChild(e)}(),r&&"true"===localStorage.store_disableCustomScrollbars){document.getElementById("theScrollbarStyle").setAttribute("media","only x")}/mac/i.test(navigator.platform)&&document.documentElement.style.setProperty("--scrollbar-border-radius","50px"),/iP(?:hone|ad|od)/.test(navigator.userAgent)&&document.head.removeChild(document.getElementById("theManifest"))}();
//# sourceMappingURL=/inline-script.js.map</script><!-- end insert inline script here --> //# sourceMappingURL=/inline-script.js.map</script><!-- end insert inline script here -->

View File

@ -4,7 +4,7 @@ import {
authorizeInput, authorizeInput,
emailInput, emailInput,
formError, formError,
getFirstVisibleStatus, getOpacity, getFirstVisibleStatus, getNthStatus, getOpacity,
getUrl, getUrl,
homeNavButton, homeNavButton,
instanceInput, instanceInput,
@ -14,6 +14,7 @@ import {
settingsButton, settingsButton,
sleep sleep
} from '../utils' } from '../utils'
import { loginAsFoobar } from '../roles'
fixture`002-login-spec.js` fixture`002-login-spec.js`
.page`http://localhost:4002` .page`http://localhost:4002`
@ -72,3 +73,24 @@ test('Logs in and logs out of localhost:3000', async t => {
await t await t
.expect(getOpacity('.hidden-from-ssr')()).eql('1') .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')
})