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 {
+import { composedSettingsByGroups as settings } from "@/settings"
-    composedSettingsByGroups as settings
-} from "@/settings"
 
 import menuGroupsDecorators from "@config/settingsMenuGroupsDecorators"
 
@@ -22,30 +20,36 @@ import "./index.less"
 const extraMenuItems = [
 	{
 		key: "donate",
-        label: <div style={{
+		label: (
-            color: "#f72585"
+			<div
-        }}>
+				style={{
+					color: "#f72585",
+				}}
+			>
 				{createIconRender("FiHeart")}
 				Support us
-        </div>,
+			</div>
+		),
 	},
 	{
 		key: "logout",
-        label: <div>
+		label: (
+			<div>
 				{createIconRender("MdOutlineLogout")}
 				Logout
-        </div>,
+			</div>
+		),
 		danger: true,
-    }
+	},
 ]
 
 const menuEvents = {
-    "donate": () => {
+	donate: () => {
 		app.layout.modal.open("donate", DonativeSelector)
 	},
-    "logout": () => {
+	logout: () => {
-        app.eventBus.emit("app.logout_request")
+		app.auth.logout()
-    }
+	},
 }
 
 const generateMenuItems = () => {
@@ -54,10 +58,12 @@ const generateMenuItems = () => {
 			return {
 				key: item.id,
 				type: "item",
-                label: <div {...item.props} className="menu-item-content">
+				label: (
+					<div {...item.props} className="menu-item-content">
 						{createIconRender(item.icon ?? "Settings")}
 						{item.label}
-                </div>,
+					</div>
+				),
 				danger: item.danger,
 				disabled: item.disabled,
 			}
@@ -73,16 +79,24 @@ const generateMenuItems = () => {
 			key: entry.group,
 			type: "group",
 			children: children,
-            label: entry.group === "bottom" ? null : <>
+			label:
-                {
+				entry.group === "bottom" ? null : (
-                    menuGroupsDecorators[entry.group]?.icon && createIconRender(menuGroupsDecorators[groupKey]?.icon ?? "Settings")
+					<>
-                }
+						{menuGroupsDecorators[entry.group]?.icon &&
+							createIconRender(
+								menuGroupsDecorators[groupKey]?.icon ??
+									"Settings",
+							)}
 						<Translation>
-                    {
+							{(t) =>
-                        t => t(menuGroupsDecorators[entry.group]?.label ?? entry.group)
+								t(
+									menuGroupsDecorators[entry.group]?.label ??
+										entry.group,
+								)
 							}
 						</Translation>
 					</>
+				),
 		}
 	})
 }
@@ -91,7 +105,7 @@ export default () => {
 	const [config, setConfig, loading] = useUserRemoteConfig()
 	const [activeKey, setActiveKey] = useUrlQueryActiveKey({
 		defaultKey: "general",
-        queryKey: "tab"
+		queryKey: "tab",
 	})
 
 	const onChangeTab = (event) => {
@@ -117,7 +131,7 @@ export default () => {
 	function handleOnUpdate(key, value) {
 		setConfig({
 			...config,
-            [key]: value
+			[key]: value,
 		})
 	}
 
@@ -135,7 +149,8 @@ export default () => {
 		}
 	}, [])
 
-    return <div className="settings_wrapper">
+	return (
+		<div className="settings_wrapper">
 			<div className="settings_menu">
 				<antd.Menu
 					mode="vertical"
@@ -145,22 +160,18 @@ export default () => {
 				/>
 			</div>
 
-        {
+			{loading && <antd.Skeleton active />}
-            loading && <antd.Skeleton active />
-        }
 
-        <PageTransition
+			<PageTransition className="settings_content" key={activeKey}>
-            className="settings_content"
+				{!loading && (
-            key={activeKey}
+					<SettingTab
-        >
-            {
-                !loading && <SettingTab
 						baseConfig={config}
 						onUpdate={handleOnUpdate}
 						activeKey={activeKey}
 						withGroups
 					/>
-            }
+				)}
 			</PageTransition>
 		</div>
+	)
 }