refactor: relocate components to app directory structure

2026-06-09 14:43:10 +08:00
parent f060301c24
commit cda55c8f9b
61 changed files with 19 additions and 27 deletions
@@ -0,0 +1,91 @@
+"use client";
+/**
+ * Facebook 面板（默认面板）
+ *
+ * 原始 Dart: lib/ui/auth/widgets/auth_facebook_panel.dart
+ *
+ * 行为：
+ *  - 默认显示「Continue with Facebook」+ 「Other sign-in options」入口
+ *  - 真实 Facebook 登录在「Continue with Facebook」按钮中触发
+ */
+import { useState } from "react";
+
+import { useAuthState, useAuthDispatch } from "@/contexts/auth/auth-context";
+
+import { AuthSocialButtons } from "./auth-social-buttons";
+import { AuthDivider } from "./auth-divider";
+import { AuthPrimaryButton } from "./auth-primary-button";
+import { AuthErrorMessage } from "./auth-error-message";
+import { AuthOtherOptionsDialog } from "./auth-other-options-dialog";
+import { GoogleSignInButton } from "./google-sign-in-button";
+import { AuthLegalText } from "./auth-legal-text";
+import styles from "./auth-facebook-panel.module.css";
+
+export interface AuthFacebookPanelProps {
+  onSwitchToEmail: () => void;
+  onGoogleSuccess: (idToken: string, email: string) => void;
+}
+
+export function AuthFacebookPanel({
+  onSwitchToEmail,
+  onGoogleSuccess,
+}: AuthFacebookPanelProps) {
+  const state = useAuthState();
+  const dispatch = useAuthDispatch();
+  const [showOptions, setShowOptions] = useState(false);
+
+  return (
+    <div className={styles.panel}>
+      <AuthErrorMessage message={state.errorMessage} />
+      <AuthSocialButtons
+        loadingProvider={state.isLoading ? "facebook" : null}
+        onFacebook={() => dispatch({ type: "AuthFacebookLoginSubmitted" })}
+        onGoogle={() => dispatch({ type: "AuthGoogleLoginSubmitted" })}
+        googleSlot={
+          <GoogleSignInButton
+            onSuccess={(s) =>
+              onGoogleSuccess(s.idToken, s.email)
+            }
+          />
+        }
+      />
+      <AuthDivider label="or" />
+      <AuthPrimaryButton
+        onClick={onSwitchToEmail}
+        variant="primary"
+      >
+        Continue with Email
+      </AuthPrimaryButton>
+      <button
+        type="button"
+        className={styles.linkButton}
+        onClick={() => setShowOptions(true)}
+      >
+        Other sign-in options
+      </button>
+      <AuthLegalText />
+      <AuthOtherOptionsDialog
+        open={showOptions}
+        onClose={() => setShowOptions(false)}
+        onFacebook={() => {
+          setShowOptions(false);
+          dispatch({ type: "AuthFacebookLoginSubmitted" });
+        }}
+        onGoogle={() => {
+          setShowOptions(false);
+          dispatch({ type: "AuthGoogleLoginSubmitted" });
+        }}
+        onApple={() => {
+          setShowOptions(false);
+          dispatch({ type: "AuthAppleLoginSubmitted" });
+        }}
+        onEmail={() => {
+          setShowOptions(false);
+          onSwitchToEmail();
+        }}
+        loadingProvider={state.isLoading ? "facebook" : null}
+        showApple={false}
+      />
+    </div>
+  );
+}