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