Initial commit: expo-popcore-app

components/blocks/AuthForm.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import { View, TextInput, ActivityIndicator } from "react-native";
+import { useTranslation } from "react-i18next";
+import { Button } from "../ui/button";
+import Text from "../ui/Text";
+import { authClient, useSession } from "../../lib/auth";
+import { Block } from "../ui";
+
+type AuthMode = "login" | "register";
+
+type AuthResponse = { data: unknown; error: { message: string } | null };
+type SignInFn = (params: { username: string; password: string }) => Promise<AuthResponse>;
+type SignUpFn = (params: { email: string; password: string; name: string }) => Promise<AuthResponse>;
+
+const signIn = authClient.signIn as unknown as { username: SignInFn };
+const signUp = authClient.signUp as unknown as { email: SignUpFn };
+
+interface AuthFormProps {
+  mode?: AuthMode;
+  onSuccess?: () => void;
+  onModeChange?: (mode: AuthMode) => void;
+}
+
+export function AuthForm({ mode = "login", onSuccess, onModeChange }: AuthFormProps) {
+  const { t } = useTranslation();
+  const [currentMode, setCurrentMode] = useState<AuthMode>(mode);
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const isLogin = currentMode === "login";
+
+  const handleSubmit = async () => {
+    if (!username.trim() || !password.trim()) {
+      setError(t("authForm.fillCompleteInfo"));
+      return;
+    }
+
+    if (!isLogin && !email.trim()) {
+      setError(t("authForm.fillEmail"));
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    try {
+      if (isLogin) {
+        const res = await signIn.username({ username, password });
+        if (res.error) throw new Error(res.error.message);
+      } else {
+        const res = await signUp.email({ email, password, name: username });
+        if (res.error) throw new Error(res.error.message);
+      }
+      onSuccess?.();
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : (isLogin ? t("authForm.loginFailed") : t("authForm.registerFailed"));
+      setError(msg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggleMode = () => {
+    const newMode = isLogin ? "register" : "login";
+    setCurrentMode(newMode);
+    onModeChange?.(newMode);
+    setEmail("");
+    setError("");
+  };
+
+  return (
+    <Block className="w-full px-6">
+      <Text className="text-2xl font-bold text-center text-white mb-8">
+        {isLogin ? t("authForm.login") : t("authForm.register")}
+      </Text>
+
+      <TextInput
+        className="w-full h-12 px-4 mb-4 bg-white/10 rounded-lg"
+        style={{ color: '#ffffff' }}
+        placeholder={t("authForm.username")}
+        placeholderTextColor="#999"
+        value={username}
+        onChangeText={setUsername}
+        autoCapitalize="none"
+      />
+
+      {!isLogin && (
+        <TextInput
+          className="w-full h-12 px-4 mb-4 bg-white/10 rounded-lg"
+          style={{ color: '#ffffff' }}
+          placeholder={t("authForm.email")}
+          placeholderTextColor="#999"
+          value={email}
+          onChangeText={setEmail}
+          autoCapitalize="none"
+          keyboardType="email-address"
+        />
+      )}
+
+      <TextInput
+        className="w-full h-12 px-4 mb-4 bg-white/10 rounded-lg"
+        style={{ color: '#ffffff' }}
+        placeholder={t("authForm.password")}
+        placeholderTextColor="#999"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+
+      {error ? (
+        <Text className="text-red-500 text-sm mb-4 text-center">{error}</Text>
+      ) : null}
+
+      <Button
+        variant="gradient"
+        className="w-full h-16 rounded-lg px-0"
+        onPress={handleSubmit}
+        disabled={loading}
+      >
+        {loading ? (
+          <ActivityIndicator color="#fff" />
+        ) : (
+          <Text className="text-white font-medium">
+            {isLogin ? t("authForm.login") : t("authForm.register")}
+          </Text>
+        )}
+      </Button>
+
+      <Text
+        className="text-gray-400 text-center mt-6"
+        onClick={toggleMode}
+      >
+        {isLogin ? t("authForm.noAccountRegister") : t("authForm.haveAccountLogin")}
+      </Text>
+    </Block>
+  );
+}
+
+export { useSession };