48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
"use client";
|
||
/**
|
||
* 认证面板：顶层 switch（Facebook / Email）+ 悬浮返回按钮
|
||
*/
|
||
import { useRouter } from "next/navigation";
|
||
|
||
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
||
|
||
import { AuthBackButton } from "./auth-back-button";
|
||
import { AuthEmailPanel } from "./auth-email-panel";
|
||
import { AuthFacebookPanel } from "./auth-facebook-panel";
|
||
import styles from "./auth-panel.module.css";
|
||
|
||
export function AuthPanel() {
|
||
const state = useAuthState();
|
||
const dispatch = useAuthDispatch();
|
||
const router = useRouter();
|
||
|
||
const switchToFacebook = () =>
|
||
dispatch({ type: "AuthPanelModeChanged", mode: "facebook" });
|
||
const switchToEmail = () =>
|
||
dispatch({ type: "AuthPanelModeChanged", mode: "email" });
|
||
|
||
const handleBack = () => {
|
||
if (state.authPanelMode === "email") {
|
||
switchToFacebook();
|
||
} else {
|
||
router.back();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={styles.panelShell}>
|
||
<AuthBackButton onClick={handleBack} />
|
||
|
||
{state.authPanelMode === "facebook" ? (
|
||
<AuthFacebookPanel onSwitchToEmail={switchToEmail} />
|
||
) : (
|
||
<AuthEmailPanel
|
||
onSwitchToFacebook={() => {
|
||
switchToFacebook();
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|