Initial commit: expo-popcore-app
This commit is contained in:
imeepos
142
components/blocks/AuthForm.tsx
Normal file
142
components/blocks/AuthForm.tsx
Normal file
@@ -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 };
|
||||
76
components/blocks/MediaCarousel.tsx
Normal file
76
components/blocks/MediaCarousel.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { useState } from 'react';
|
||||
import { Dimensions, View } from 'react-native';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Carousel, CarouselContent, CarouselItem } from '../ui/carousel';
|
||||
import { Media } from '../ui/media';
|
||||
import { useResource } from '@/hooks/use-resource';
|
||||
|
||||
const { width: screenWidth } = Dimensions.get('window');
|
||||
|
||||
interface MediaCarouselProps {
|
||||
sources: any[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
autoPlay?: boolean;
|
||||
loop?: boolean;
|
||||
}
|
||||
|
||||
export function MediaCarousel({
|
||||
sources,
|
||||
width = screenWidth,
|
||||
height = 410,
|
||||
autoPlay = false,
|
||||
loop = true,
|
||||
}: MediaCarouselProps) {
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
||||
return (
|
||||
<View className="!relative !w-full" style={{ height }}>
|
||||
<Carousel
|
||||
className='relative w-full'
|
||||
width={width}
|
||||
height={height}
|
||||
loop={loop}
|
||||
autoPlay={autoPlay}
|
||||
onIndexChange={setCurrent}
|
||||
>
|
||||
<CarouselContent>
|
||||
{sources.map((_source, index) => {
|
||||
const { source, poster } = useResource(_source, { width: screenWidth })
|
||||
return (
|
||||
<CarouselItem key={index} className='!w-full !h-full'>
|
||||
<Media
|
||||
source={source}
|
||||
poster={poster}
|
||||
visible={current === index}
|
||||
loop={true}
|
||||
className='!w-full !h-full'
|
||||
/>
|
||||
</CarouselItem>
|
||||
)
|
||||
})}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
|
||||
<LinearGradient
|
||||
colors={['rgba(9, 10, 11, 0)', 'rgba(9, 10, 11, 1)']}
|
||||
locations={[0.0964, 1]}
|
||||
className="!absolute !left-0 !right-0 !h-[83px]"
|
||||
style={{ top: 327 }}
|
||||
pointerEvents="none"
|
||||
/>
|
||||
|
||||
<View className="!absolute !flex-row !gap-1" style={{ top: 366, left: 16 }} pointerEvents="none">
|
||||
{sources.map((_, index) => (
|
||||
<View
|
||||
key={index}
|
||||
className={`!h-1 !rounded-sm ${current === index
|
||||
? '!w-[10px] !bg-white'
|
||||
: '!w-1 !bg-white/50'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
2
components/blocks/index.ts
Normal file
2
components/blocks/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { MediaCarousel } from './MediaCarousel';
|
||||
export { AuthForm, useSession } from './AuthForm';
|
||||
Reference in New Issue
Block a user