51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
"use client";
|
||
/**
|
||
* 认证面板：顶层 switch（Facebook / Email）+ 悬浮返回按钮
|
||
*/
|
||
import { BackButton } from "@/app/_components";
|
||
import { useAppNavigator } from "@/router/use-app-navigator";
|
||
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
||
|
||
import { AuthEmailPanel } from "./auth-email-panel";
|
||
import { AuthFacebookPanel } from "./auth-facebook-panel";
|
||
|
||
export function AuthPanel() {
|
||
const state = useAuthState();
|
||
const dispatch = useAuthDispatch();
|
||
const navigator = useAppNavigator();
|
||
|
||
const switchToFacebook = () =>
|
||
dispatch({ type: "AuthPanelModeChanged", mode: "facebook" });
|
||
const switchToEmail = () =>
|
||
dispatch({ type: "AuthPanelModeChanged", mode: "email" });
|
||
|
||
const handleBack = () => {
|
||
if (state.authPanelMode === "email") {
|
||
switchToFacebook();
|
||
} else {
|
||
navigator.back();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="relative flex min-h-0 w-full flex-auto flex-col">
|
||
<BackButton
|
||
onClick={handleBack}
|
||
variant="soft"
|
||
className="absolute left-0 top-0 z-2"
|
||
analyticsKey="auth.back"
|
||
/>
|
||
|
||
{state.authPanelMode === "facebook" ? (
|
||
<AuthFacebookPanel onSwitchToEmail={switchToEmail} />
|
||
) : (
|
||
<AuthEmailPanel
|
||
onSwitchToFacebook={() => {
|
||
switchToFacebook();
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|