Commit 180ac3bb authored by Aral Balkan's avatar Aral Balkan
Browse files

Add sign out section/feature

parent 798acf9a
......@@ -2,10 +2,11 @@
import Navigation from './Navigation.interface'
import HomeSection from './sections/Home.interface'
import AboutSection from './sections/About.interface'
import PrivateSection from './sections/Private.interface'
import SignInSection from './sections/SignIn.interface'
import SlidingSection from './sections/Sliding.interface'
import SwitchSection from './sections/Switch.interface'
import PrivateSection from './sections/Private.interface'
import SignInSection from './sections/SignIn.interface'
import SignOutSection from './sections/SignOut.interface'
import NotFound from './sections/NotFound.interface'
import { initialise } from './state.js'
......@@ -25,7 +26,8 @@
<AboutSection />
<SlidingSection />
<SwitchSection />
<SignInSection />
<PrivateSection />
<SignInSection />
<SignOutSection />
<NotFound />
</main>
......@@ -5,8 +5,6 @@
let { signedIn, currentSection } = getContext(state)
$: ;
let selectedSection = $currentSection
function handleNavigation (event) {
......@@ -18,7 +16,7 @@
function shouldDisplay(path) {
// Display either the Sign In or Private section based on sign in status.
return !(!$signedIn && path === '/private') && !($signedIn && path === '/sign-in')
return !(!$signedIn && path === '/private') && !($signedIn && path === '/sign-in') && !(!$signedIn && path === '/sign-out')
}
</script>
......
......@@ -4,6 +4,7 @@ export default [
{ path: '/sliding', title: 'Sliding'},
{ path: '/switch', title: 'Switch'},
{ path: '/sign-in', title: 'Sign in'},
{ path: '/sign-out', title: 'Sign out'},
{ path: '/private', title: 'Private'},
{ path: '/404', title: '404: not found', notInNavigation: true}
]
......@@ -19,6 +19,10 @@
function signInSucceeded(){
$privatePath = _privatePath
// Once we’ve stored the promise, unset it here so that
// it is not persisted on the view. (Otherwise, after signing out,
// it will return here and find the successful sign in.)
_privatePath = undefined
$signedIn = true
$currentSection = '/private'
location.hash = '/private'
......
<script>
import { getContext, tick } from 'svelte'
import { state } from '../state.js'
import Section from './Section.interface'
let { signedIn, privatePath, currentSection } = getContext(state)
async function handleSignOut () {
$privatePath = null
$signedIn = false
$currentSection = '/private'
location.hash = '/sign-in'
}
</script>
<Section path='/sign-out' title='Sign out'>
<p>Are you sure?</p>
<button on:click|preventDefault={handleSignOut}>Yes, sign me out.</button>
</Section>
......@@ -16,16 +16,18 @@ export function initialise () {
setContext(state, { currentSection, signedIn, privatePath })
window.addEventListener('hashchange', () => {
currentSection.update(value => value = currentSectionFromHash(get(signedIn)))
const _signedIn = get(signedIn)
currentSection.update(value => value = currentSectionFromHash(_signedIn))
})
}
function currentSectionFromHash (signedIn) {
let section = location.hash.replace('#', '')
// Redirect to Sign In page if trying to access private area while not signed in.
// (This is just client-side validation, not security.)
if (!signedIn && section.startsWith('/private')) {
if (!signedIn && section.startsWith('/private') || !signedIn && section.startsWith('/sign-out')) {
section = '/sign-in'
// In a real app, you would also save a redirect path in a store in the context.
}
......
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