memowake-front/components/login/code.tsx

import Error from "@/assets/icons/svg/error.svg";
import { fetchApi } from "@/lib/server-api-util";
import { User } from "@/types/user";
import OTPInputView from '@twotalltotems/react-native-otp-input';
import { router } from "expo-router";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Animated, TextInput as RNTextInput, StyleSheet, TouchableOpacity, View } from "react-native";
import { useAuth } from "../../contexts/auth-context";
import { ThemedText } from "../ThemedText";

interface CodeProps {
    phone: string;
}

const Code = ({ phone }: CodeProps) => {
    const { t } = useTranslation();
    const { login } = useAuth();
    const [isLoading, setIsLoading] = useState(false);
    const refs = useRef<Array<RNTextInput | null>>(Array(6).fill(null));
    const shakeAnim = useRef(new Animated.Value(0)).current;
    const [code, setCode] = useState<string[]>([]);
    const [error, setError] = useState<string>('');

    const focusNext = (index: number, value: string) => {
        if (value && index < 5) {
            refs?.current?.[index + 1]?.focus();
        }
    };
    const focusPrevious = (index: number, key: string) => {
        if (key === 'Backspace' && index > 0 && !code[index]) {
            refs?.current?.[index - 1]?.focus();
        }
    };
    const handleCodeChange = (text: string, index: number) => {
        setError('');
        const newCode = [...code];

        // Handle pasted code from SMS or autofill
        if ((text.length === 6 || text.length > 1) && /^\d+$/.test(text)) {
            const digits = text.split('').slice(0, 6); // Ensure we only take first 6 digits
            setCode(digits);
            refs.current[5]?.focus(); // Focus on the last input
            // Auto-submit if we have exactly 6 digits
            if (digits.length === 6) {
                handleTelLogin();
            }
            return;
        }

        // Handle single digit input
        if (text.length <= 1 && /^\d?$/.test(text)) {
            newCode[index] = text;
            setCode(newCode);

            // Auto-submit if this is the last digit
            if (text && index === 5) {
                handleTelLogin();
            } else if (text) {
                focusNext(index, text);
            }
        }
    };
    const sendVerificationCode = async () => {
        try {
            // 发送验证码
            await fetchApi(`/iam/veritification-code`, {
                method: 'POST',
                body: JSON.stringify({ phone: phone }),
            })

        } catch (error) {
        }
    }

    const handleTelLogin = async () => {
        setError('');
        if (!code.join('')) {
            setError(t("auth.telLogin.codeRequired", { ns: 'login' }));
            return;
        }
        // 如果验证码不是六位，提示错误
        if (code.join('').length !== 6) {
            setError(t("auth.telLogin.codeInvalid", { ns: 'login' }));
            return;
        }

        setIsLoading(true);
        setCountdown(60);
        try {
            await fetchApi<User>(`/iam/login/phone-login`, {
                method: 'POST',
                body: JSON.stringify({ phone: phone, code: code.join('') }),
            }).then((res) => {
                login(res, res.access_token || '')
                router.replace('/user-message')
            }).catch((error) => {
                setError(t("auth.telLogin.codeVaild", { ns: 'login' }));
            })
            setIsLoading(false);
        } catch (error) {
            setIsLoading(false);
        }
    }
    // 60s倒计时
    const [countdown, setCountdown] = useState(0);
    useEffect(() => {
        if (countdown > 0) {
            const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
            return () => clearTimeout(timer);
        }
    }, [countdown]);

    return (
        <View className="flex-1 bg-white px-2">
            <View className="flex-1 justify-center">
                <View className="items-center mb-8">
                    <ThemedText className="text-2xl font-semibold mb-2 text-gray-900">
                        {t("auth.telLogin.title", { ns: 'login' })}
                    </ThemedText>
                    <ThemedText className="text-base text-gray-600 text-center mb-1">
                        {t("auth.telLogin.secondTitle", { ns: 'login' })}
                    </ThemedText>
                    <ThemedText className="text-base font-medium !text-buttonFill">
                        {phone}
                    </ThemedText>
                </View>

                <OTPInputView
                    pinCount={6} // 验证码长度
                    onCodeChanged={(code) => {
                        setCode([code]);
                    }}
                    onCodeFilled={(code) => {
                        handleTelLogin()
                    }}
                    code={code.join('')}
                    autoFocusOnLoad={false}
                    codeInputFieldStyle={styles.underlineStyleBase}
                    codeInputHighlightStyle={styles.underlineStyleHighLighted}
                    style={styles.otpContainer}
                    placeholderCharacter="-"
                    placeholderTextColor="#AC7E35"
                />
                <View className={`w-full flex-row justify-end mb-[1rem] items-center ${error ? 'opacity-100' : 'opacity-0'}`}>
                    <Error />
                    <ThemedText className="text-base font-medium !text-buttonFill ml-2">
                        {error}
                    </ThemedText>
                </View>

                <View className="flex-row justify-center mt-4">
                    <ThemedText className="!text-textPrimary">
                        {t("auth.telLogin.sendAgain", { ns: 'login' })}
                    </ThemedText>
                    <TouchableOpacity onPress={() => {
                        if (countdown > 0) {
                            return
                        } else {
                            sendVerificationCode()
                        }
                    }}>
                        <ThemedText className={`!text-buttonFill font-medium ml-1 ${countdown > 0 ? '!text-gray-400' : ''}`}>
                            {countdown > 0 ? `${countdown}s${t("auth.telLogin.resend", { ns: 'login' })}` : t("auth.telLogin.resend", { ns: 'login' })}
                        </ThemedText>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
    otpContainer: {
        width: '100%',
        height: 100
    },
    underlineStyleBase: {
        width: 50,
        height: 50,
        borderWidth: 0,
        borderRadius: 16,
        fontSize: 18,
        color: '#000',
        textAlign: 'center',
        backgroundColor: '#FFF8DE'
    },
    underlineStyleHighLighted: {
        borderColor: '#E2793F',
        backgroundColor: '#FFF8DE',
        borderWidth: 2,
    },
});

export default Code