use auth logout

packages/app/src/pages/auth/forms/selector/index.jsx

@@ -29,7 +29,7 @@ const MainSelector = (props) => {
 				)}
 
 				<antd.Button
-					onClick={() => app.controls.openLoginForm()}
+					onClick={() => app.auth.login()}
 					icon={<Icons.FiLogIn />}
 					type="primary"
 				>
@@ -37,7 +37,7 @@ const MainSelector = (props) => {
 				</antd.Button>
 
 				<antd.Button
-					onClick={() => app.controls.openLoginForm()}
+					onClick={() => app.auth.login()}
 					icon={<Icons.FiLogIn />}
 					type="primary"
 					disabled

packages/app/src/pages/settings/index.jsx

@@ -9,9 +9,7 @@ import { createIconRender } from "@components/Icons"
 import useUrlQueryActiveKey from "@hooks/useUrlQueryActiveKey"
 import useUserRemoteConfig from "@hooks/useUserRemoteConfig"
 
-import {
-    composedSettingsByGroups as settings
-} from "@/settings"
+import { composedSettingsByGroups as settings } from "@/settings"
 
 import menuGroupsDecorators from "@config/settingsMenuGroupsDecorators"
 
@@ -20,147 +18,160 @@ import SettingTab from "./components/SettingTab"
 import "./index.less"
 
 const extraMenuItems = [
-    {
-        key: "donate",
-        label: <div style={{
-            color: "#f72585"
-        }}>
-            {createIconRender("FiHeart")}
-            Support us
-        </div>,
-    },
-    {
-        key: "logout",
-        label: <div>
-            {createIconRender("MdOutlineLogout")}
-            Logout
-        </div>,
-        danger: true,
-    }
+	{
+		key: "donate",
+		label: (
+			<div
+				style={{
+					color: "#f72585",
+				}}
+			>
+				{createIconRender("FiHeart")}
+				Support us
+			</div>
+		),
+	},
+	{
+		key: "logout",
+		label: (
+			<div>
+				{createIconRender("MdOutlineLogout")}
+				Logout
+			</div>
+		),
+		danger: true,
+	},
 ]
 
 const menuEvents = {
-    "donate": () => {
-        app.layout.modal.open("donate", DonativeSelector)
-    },
-    "logout": () => {
-        app.eventBus.emit("app.logout_request")
-    }
+	donate: () => {
+		app.layout.modal.open("donate", DonativeSelector)
+	},
+	logout: () => {
+		app.auth.logout()
+	},
 }
 
 const generateMenuItems = () => {
-    return settings.map((entry, index) => {
-        const children = entry.groupModule.map((item) => {
-            return {
-                key: item.id,
-                type: "item",
-                label: <div {...item.props} className="menu-item-content">
-                    {createIconRender(item.icon ?? "Settings")}
-                    {item.label}
-                </div>,
-                danger: item.danger,
-                disabled: item.disabled,
-            }
-        })
+	return settings.map((entry, index) => {
+		const children = entry.groupModule.map((item) => {
+			return {
+				key: item.id,
+				type: "item",
+				label: (
+					<div {...item.props} className="menu-item-content">
+						{createIconRender(item.icon ?? "Settings")}
+						{item.label}
+					</div>
+				),
+				danger: item.danger,
+				disabled: item.disabled,
+			}
+		})
 
-        if (index !== settings.length - 1) {
-            children.push({
-                type: "divider",
-            })
-        }
+		if (index !== settings.length - 1) {
+			children.push({
+				type: "divider",
+			})
+		}
 
-        return {
-            key: entry.group,
-            type: "group",
-            children: children,
-            label: entry.group === "bottom" ? null : <>
-                {
-                    menuGroupsDecorators[entry.group]?.icon && createIconRender(menuGroupsDecorators[groupKey]?.icon ?? "Settings")
-                }
-                <Translation>
-                    {
-                        t => t(menuGroupsDecorators[entry.group]?.label ?? entry.group)
-                    }
-                </Translation>
-            </>
-        }
-    })
+		return {
+			key: entry.group,
+			type: "group",
+			children: children,
+			label:
+				entry.group === "bottom" ? null : (
+					<>
+						{menuGroupsDecorators[entry.group]?.icon &&
+							createIconRender(
+								menuGroupsDecorators[groupKey]?.icon ??
+									"Settings",
+							)}
+						<Translation>
+							{(t) =>
+								t(
+									menuGroupsDecorators[entry.group]?.label ??
+										entry.group,
+								)
+							}
+						</Translation>
+					</>
+				),
+		}
+	})
 }
 
 export default () => {
-    const [config, setConfig, loading] = useUserRemoteConfig()
-    const [activeKey, setActiveKey] = useUrlQueryActiveKey({
-        defaultKey: "general",
-        queryKey: "tab"
-    })
+	const [config, setConfig, loading] = useUserRemoteConfig()
+	const [activeKey, setActiveKey] = useUrlQueryActiveKey({
+		defaultKey: "general",
+		queryKey: "tab",
+	})
 
-    const onChangeTab = (event) => {
-        if (typeof menuEvents[event.key] === "function") {
-            return menuEvents[event.key]()
-        }
+	const onChangeTab = (event) => {
+		if (typeof menuEvents[event.key] === "function") {
+			return menuEvents[event.key]()
+		}
 
-        app.cores.sfx.play("settings.navigation")
+		app.cores.sfx.play("settings.navigation")
 
-        setActiveKey(event.key)
-    }
+		setActiveKey(event.key)
+	}
 
-    const menuItems = React.useMemo(() => {
-        const items = generateMenuItems()
+	const menuItems = React.useMemo(() => {
+		const items = generateMenuItems()
 
-        extraMenuItems.forEach((item) => {
-            items[settings.length - 1].children.push(item)
-        })
+		extraMenuItems.forEach((item) => {
+			items[settings.length - 1].children.push(item)
+		})
 
-        return items
-    }, [])
+		return items
+	}, [])
 
-    function handleOnUpdate(key, value) {
-        setConfig({
-            ...config,
-            [key]: value
-        })
-    }
+	function handleOnUpdate(key, value) {
+		setConfig({
+			...config,
+			[key]: value,
+		})
+	}
 
-    React.useEffect(() => {
-        if (app.layout.tools_bar) {
-            app.layout.tools_bar.toggleVisibility(false)
-        }
-    }, [activeKey])
+	React.useEffect(() => {
+		if (app.layout.tools_bar) {
+			app.layout.tools_bar.toggleVisibility(false)
+		}
+	}, [activeKey])
 
-    React.useEffect(() => {
-        return () => {
-            if (app.layout.tools_bar) {
-                app.layout.tools_bar.toggleVisibility(true)
-            }
-        }
-    }, [])
+	React.useEffect(() => {
+		return () => {
+			if (app.layout.tools_bar) {
+				app.layout.tools_bar.toggleVisibility(true)
+			}
+		}
+	}, [])
 
-    return <div className="settings_wrapper">
-        <div className="settings_menu">
-            <antd.Menu
-                mode="vertical"
-                items={menuItems}
-                onClick={onChangeTab}
-                selectedKeys={[activeKey]}
-            />
-        </div>
+	return (
+		<div className="settings_wrapper">
+			<div className="settings_menu">
+				<antd.Menu
+					mode="vertical"
+					items={menuItems}
+					onClick={onChangeTab}
+					selectedKeys={[activeKey]}
+				/>
+			</div>
 
-        {
-            loading && <antd.Skeleton active />
-        }
+			{loading && <antd.Skeleton active />}
 
-        <PageTransition
-            className="settings_content"
-            key={activeKey}
-        >
-            {
-                !loading && <SettingTab
-                    baseConfig={config}
-                    onUpdate={handleOnUpdate}
-                    activeKey={activeKey}
-                    withGroups
-                />
-            }
-        </PageTransition>
-    </div>
-}
+			<PageTransition className="settings_content" key={activeKey}>
+				{!loading && (
+					<SettingTab
+						baseConfig={config}
+						onUpdate={handleOnUpdate}
+						activeKey={activeKey}
+						withGroups
+					/>
+				)}
+			</PageTransition>
+		</div>
+	)
+}