66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
"use client";
|
||
/**
|
||
* 认证面板：顶层 switch（Facebook / Email）+ 悬浮返回按钮
|
||
*/
|
||
import { useRouter } from "next/navigation";
|
||
|
||
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
||
|
||
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 switchToEmail = () =>
|
||
dispatch({ type: "AuthPanelModeChanged", mode: "email" });
|
||
const switchToFacebook = () =>
|
||
dispatch({ type: "AuthPanelModeChanged", mode: "facebook" });
|
||
|
||
const handleBack = () => {
|
||
if (state.authPanelMode === "email") {
|
||
switchToFacebook();
|
||
} else {
|
||
router.back();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={styles.panelShell}>
|
||
<button
|
||
type="button"
|
||
className={styles.backButton}
|
||
onClick={handleBack}
|
||
aria-label="Back"
|
||
>
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2.5"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M15 18l-6-6 6-6" />
|
||
</svg>
|
||
</button>
|
||
|
||
{state.authPanelMode === "facebook" ? (
|
||
<AuthFacebookPanel onSwitchToEmail={switchToEmail} />
|
||
) : (
|
||
<AuthEmailPanel
|
||
onSwitchToFacebook={() => {
|
||
switchToFacebook();
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|