From 9505d61b75589ee1495b236f45c20b28c94b228c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 13 Sep 2023 17:43:52 +0800
Subject: [PATCH] Fix logout from settings pages

---
 .../web/components/templates/SettingsLayout.tsx    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx
index 63b796046..9a5a806a9 100644
--- a/packages/web/components/templates/SettingsLayout.tsx
+++ b/packages/web/components/templates/SettingsLayout.tsx
@@ -6,7 +6,7 @@ import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardSho
 import { useRouter } from 'next/router'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 import { logoutMutation } from '../../lib/networking/mutations/logoutMutation'
-import { useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { ConfirmationModal } from '../patterns/ConfirmationModal'
 import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
 import { PageMetaData } from '../patterns/PageMetaData'
@@ -29,6 +29,18 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
   useKeyboardShortcuts(navigationCommands(router))
   applyStoredTheme(false)
 
+  const showLogout = useCallback(() => {
+    setShowLogoutConfirmation(true)
+  }, [setShowLogoutConfirmation])
+
+  useEffect(() => {
+    document.addEventListener('logout', showLogout)
+
+    return () => {
+      document.removeEventListener('logout', showLogout)
+    }
+  }, [showLogout])
+
   return (
     <>
       <PageMetaData path="settings" title="Settings" />